Merge pull request #30 from SolarDao/26-scaffold-the-frontend

Styling for swapping and staking components
SolarDao · Jul 12, 2024 · efc445c · efc445c
2 parents 9c9ddb9 + 1bfa897
commit efc445c
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 40 deletions.
diff --git a/frontend/components/common/Staking.tsx b/frontend/components/common/Staking.tsx
@@ -217,32 +217,33 @@ export const Staking = ({ chainName }) => {
             borderColor={inputColor}
             color={inputColor}
             background={backgroundColor}
-            _hover={{
-              background: "linear-gradient(180deg, #FFD602 0%, #FFA231 100%)",
-            }}
             _selected={{
               background: "linear-gradient(180deg, #FFD602 0%, #FFA231 100%)",
               color: "black",
+              transform: "translateX(0px)",
+              transition: "transform 0.3s ease",
+              zIndex: 2,
             }}
           >
             Stake
           </Tab>
           <Tab
+            className="stakeTab"
             borderColor={inputColor}
             color={inputColor}
             background={backgroundColor}
-            className="stakeTab"
-            _hover={{
-              background: "linear-gradient(180deg, #FFD602 0%, #FFA231 100%)",
-            }}
             _selected={{
               background: "linear-gradient(180deg, #FFD602 0%, #FFA231 100%)",
               color: "black",
+              transform: "translateX(0px)",
+              transition: "transform 0.3s ease",
+              zIndex: 2,
             }}
           >
             Unstake
           </Tab>
         </TabList>
+
         <TabPanels className="tabPanelsStaking">
           <TabPanel>
             <Box
@@ -278,8 +279,13 @@ export const Staking = ({ chainName }) => {
             <Box className="stakeDetails" backgroundColor={backgroundColor}>
               <h3>You will stake {amount} WattPeak</h3>
               <p>Current ROI: {config.rewards_percentage * 100} % per year</p>
-              <p>Reward: {parseFloat((amount * config.rewards_percentage).toFixed(6)).toString().replace(/(\.[0-9]*[1-9])0+$|\.0*$/, "$1")} WattPeak per year</p>
-
+              <p>
+                Reward:{" "}
+                {parseFloat((amount * config.rewards_percentage).toFixed(6))
+                  .toString()
+                  .replace(/(\.[0-9]*[1-9])0+$|\.0*$/, "$1")}{" "}
+                WattPeak per year
+              </p>
             </Box>
             <Center>
               <Button

diff --git a/frontend/components/common/Swap.tsx b/frontend/components/common/Swap.tsx
@@ -12,7 +12,6 @@ import {
   TabPanel,
   Button,
   Box,
-  border,
 } from "@chakra-ui/react";
 import { Spinner, useColorModeValue } from "@interchain-ui/react";
 import Image from "next/image";
@@ -45,6 +44,7 @@ export const Swap = ({ chainName }) => {
   });
   const inputColor = useColorModeValue("black", "white");
   const borderColor = useColorModeValue("black", "white");
+  const nftBorderColor = useColorModeValue("black", "yellow");
   const backgroundColor = useColorModeValue(
     "rgba(0, 0, 0, 0.04)",
     "rgba(52, 52, 52, 1)"
@@ -281,50 +281,57 @@ export const Swap = ({ chainName }) => {
           </TabList>
           <p>select multiple</p>
         </Box>
-  
-        <TabPanels>
+
+        <TabPanels className="swapPanels" backgroundColor={backgroundColor}>
           <TabPanel>
-            <ul>
+            <ul className="nftList">
               {walletNfts.map((nft, index) => (
-                <li key={index}>
+                <li
+                  key={index}
+                  className={`nft-item ${
+                    selectedNft === nft.tokenId ? "selected-nft" : ""
+                  }`}
+                  borderColor={borderColor}
+                  onClick={() => setSelectedNft(nft.tokenId)}
+                >
                   <Image
                     src={nft.image.replace("ipfs://", "https://ipfs.io/ipfs/")}
                     alt={nft.name}
-                    width={100}
-                    height={100}
+                    className="nftImage"
+                    width={220}
+                    height={220}
                   />
-                  <p>Token ID: {nft.tokenId}</p>
                   <p>Name: {nft.name}</p>
-                  <button onClick={() => setSelectedNft(nft.tokenId)}>
-                    Select for Swap
-                  </button>
                 </li>
               ))}
             </ul>
             {selectedNft && (
               <div>
                 <h2>Selected NFT: {selectedNft}</h2>
-                <button onClick={swapNftToTokens} disabled={swapping}>
+                <Button onClick={swapNftToTokens} disabled={swapping}>
                   {swapping ? <Spinner /> : "Approve and Swap NFT for Tokens"}
-                </button>
+                </Button>
               </div>
             )}
           </TabPanel>
           <TabPanel>
-            <ul>
+            <ul className="nftList">
               {contractNfts.map((nft, index) => (
-                <li key={index}>
+                <li
+                  key={index}
+                  className={`nft-item ${
+                    selectedNft === nft.tokenId ? "selected-nft" : ""
+                  }`}
+                  onClick={() => setSelectedNft(nft.tokenId)}
+                >
                   <Image
                     src={nft.image.replace("ipfs://", "https://ipfs.io/ipfs/")}
                     alt={nft.name}
-                    width={100}
-                    height={100}
+                    className="nftImage"
+                    width={220}
+                    height={220}
                   />
-                  <p>Token ID: {nft.tokenId}</p>
                   <p>Name: {nft.name}</p>
-                  <button onClick={() => setSelectedNft(nft.tokenId)}>
-                    Select for Swap
-                  </button>
                 </li>
               ))}
             </ul>
@@ -347,6 +354,6 @@ export const Swap = ({ chainName }) => {
       )}
     </div>
   );
-}
+};
 
 export default Swap;
diff --git a/frontend/styles/globals.css b/frontend/styles/globals.css
@@ -79,7 +79,6 @@ a {
     margin-top: 10px;
     padding: 10px 20px;
     background: rgba(0, 0, 0, 0.04);
-    border-color: black;
     border-width: 2px;
     border-radius: 23px;
     font-size: 15px;
@@ -220,18 +219,30 @@ a {
   .tabListStaking {
     display: flex;
     justify-content: center;
-    gap: 20px;
-    margin-top: 20px;
   }
+  .tabListStaking {
+    display: flex;
+    justify-content: center;
+    position: relative;
+  }
+
   .stakeTab {
     background: rgba(0, 0, 0, 0.04);
     cursor: pointer;
     padding: 10px 20px;
+    width: 40%;
     font-size: 20px;
     color: black;
     border: black 1px solid;
     margin-bottom: 2rem;
+    border-radius: 45px;
+    transition: transform 0.3s ease, z-index 0s;
+    position: relative;
+    z-index: 1;
+    margin-left: -18px;
+    margin-right: -18px;
   }
+
   .inputStaking {
     margin-top: 10px;
     padding: 50px;
@@ -310,19 +321,48 @@ a {
     cursor: pointer;
     padding: 10px 40px;
     font-size: 1.2rem;
-    color: black;
     border: black 1px solid;
     border-radius: 45px;
     position: relative;
     z-index: 1;
     transition: transform 0.3s ease, z-index 0s;
   }
 
-  .swapTabsBox .swapTabs + .swapTabs {
-    margin-left: -34px; /* overlap adjustment */
+  .swapTabsBox
+   .swapTabs + .swapTabs {
+    margin-left: -34px;
+  }
+
+  .nft-item {
+    cursor: pointer;
+    transition: border-color 0.3s ease;
+    background-color: black;
+    border-radius: 23px;
+    text-align: center;
+  }
+
+  .nftImage {
+    width: 100%;
+    height: auto;
+    border-radius: 23px;
   }
 
-  .swapTabs._selected {
-    transform: translateX(0) !important;
-  }  
+  .nft-item.selected-nft {
+    border: 2px solid #FFD602; /* Change to desired border color */
+    border-color: #FFD602; /* Change to desired border color */
+  }
+  .nftList {
+    display: flex;
+    flex: flex-wrap;
+    gap: 10px;
+    margin-top: 20px;
+    padding-left: 10px;
+    list-style: none;
+  }
+  .swapPanels {
+    background-color: rgba(0, 0, 0, 0.04);
+    padding: 10px;
+    border-radius: 23px;
+    height: 100%;
+  }
 }