Plex-Engineer · waajito · Sep 3, 2022 · Sep 3, 2022 · Sep 3, 2022 · Sep 4, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,9 +11,10 @@
   "dependencies": {
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
-    "@usedapp/core": "^1.0.12",
-    "@walletconnect/web3-provider": "^1.7.8",
-    "cantoui": "^1.0.29",
+    "@usedapp/core": "^1.1.5",
+    "@walletconnect/web3-provider": "^1.8.0",
+    "buffer": "^6.0.3",
+    "cantoui": "^1.0.35",
     "ethers": "^5.6.9",
     "ethers-multicall": "^0.2.3",
     "mixpanel": "^0.16.0",

diff --git a/src/global/components/cantoNav.tsx b/src/global/components/cantoNav.tsx
@@ -1,5 +1,5 @@
 import { useEthers } from "@usedapp/core";
-import { NavBar, useAlert } from "../../../../blockchain/canto/src";
+import { NavBar, useAlert } from "cantoui";
 import {
   addNetwork,
   getAccountBalance,
@@ -8,11 +8,12 @@ import {
 import { useEffect } from "react";
 import { useNetworkInfo } from "pages/main/hooks/networkInfo";
 import logo from "./../../assets/logo.svg";
+// import WalletConnectProvider from "@walletconnect/web3-provider/";
 
 export const CantoNav = () => {
   const netWorkInfo = useNetworkInfo();
   const alert = useAlert();
-  const { activateBrowserWallet, account } = useEthers();
+  const { activateBrowserWallet, account, activate } = useEthers();
 
   async function setChainInfo() {
     const [chainId, account] = await getChainIdandAccount();
@@ -70,11 +71,28 @@ export const CantoNav = () => {
     getBalance();
   }, [netWorkInfo.account]);
 
+  //   async function onConnect() {
+  //     try {
+  //       const provider = new WalletConnectProvider({
+  //         infuraId: "099be1bf60eab5b2a67865aa081cf4ad",
+  //       });
+  //       await provider.enable();
+  //       await activate(provider);
+  //     } catch (error) {
+  //       console.error(error);
+  //     }
+  //   }
   return (
     <NavBar
-      title="lp interface"
+      pageList={[
+        {
+          name: "Lp Interface",
+          link: "/",
+        },
+      ]}
       onClick={() => {
-        activateBrowserWallet();
+        // activateBrowserWallet();
+        // onConnect();
         addNetwork();
       }}
       chainId={Number(netWorkInfo.chainId)}

diff --git a/src/pages/main/Dex.tsx b/src/pages/main/Dex.tsx
@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import Table from "./components/table";
-import Row, { TransactionRow } from "./components/row";
+import Row, { LoadingRow, TransactionRow } from "./components/row";
 import { useEffect, useState } from "react";
 import useDex from "pages/main/hooks/useTokens";
 import { AllPairInfo } from "pages/main/hooks/useTokens";
@@ -237,10 +237,12 @@ const Dex = () => {
         <div>
           <p className="tableName">current position</p>
           <Table columns={["Asset", "TVL", "wallet", "% Share"]}>
-            {pairs?.map((pair: AllPairInfo) => {
+            {pairs?.map((pair: AllPairInfo, idx) => {
+              console.log(0.2 * idx);
               return Number(pair.userSupply.totalLP) > 0 ||
                 Number(pair.userSupply.percentOwned) > 0 ? (
                 <Row
+                  delay={0.2 * idx}
                   key={pair.basePairInfo.address}
                   iconLeft={pair.basePairInfo.token1.icon}
                   iconRight={pair.basePairInfo.token2.icon}
@@ -282,12 +284,13 @@ const Dex = () => {
         <div>
           <p className="tableName">pools</p>
           <Table columns={["Asset", "TVL", "wallet", "% Share"]}>
-            {pairs?.map((pair: AllPairInfo) => {
+            {pairs?.map((pair: AllPairInfo, idx) => {
               return !(
                 Number(pair.userSupply.totalLP) == 0 &&
                 Number(pair.userSupply.percentOwned) == 0
               ) ? null : (
                 <Row
+                  delay={0.1 * idx}
                   key={pair.basePairInfo.address}
                   iconLeft={pair.basePairInfo.token1.icon}
                   iconRight={pair.basePairInfo.token2.icon}
@@ -319,7 +322,14 @@ const Dex = () => {
             })}
           </Table>
         </div>
-      ) : null}
+      ) : null
+      // <Table columns={["Asset", "TVL", "wallet", "% Share"]}>
+      //   <LoadingRow colSpan={4} />
+      //   <LoadingRow colSpan={4} />
+      //   <LoadingRow colSpan={4} />
+      //   <LoadingRow colSpan={4} />
+      // </Table>
+      }
     </Container>
   );
 };

diff --git a/src/pages/main/components/row.tsx b/src/pages/main/components/row.tsx
@@ -38,36 +38,67 @@ interface RowProps {
   apr: string;
   share: string;
   onClick: () => void;
+  delay?: number;
 }
+
+const RowStyle = styled.tr<RowProps>`
+  opacity: 0;
+  animation: fadein 0.6s ${(props) => props.delay}s, fader 0.5s;
+  animation-fill-mode: forwards;
+  @keyframes fadein {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
 const Row = (props: RowProps) => {
   return (
-    <tr
+    <RowStyle
+      {...props}
       onClick={() => {
         props.onClick();
       }}
     >
-      <td style={{
-        display : "flex",
-        justifyContent : "center"
-      }}><span style={{
-        display : "flex",
-
-        alignContent : "center",
-        alignItems : "center"
-      }}>
-        <img src={props.iconLeft} height={30}style={{
-          // zIndex : "1"
-
-        }}/>
-        <img src={props.iconRight} height={28} style={{
-          marginLeft: "-.7rem",
-          paddingRight : "1rem"
-        }}/>
-        </span>{props.assetName}</td>
+      <td
+        style={{
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
+        <span
+          style={{
+            display: "flex",
+            alignContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <img
+            src={props.iconLeft}
+            height={30}
+            style={
+              {
+                // zIndex : "1"
+              }
+            }
+          />
+          <img
+            src={props.iconRight}
+            height={28}
+            style={{
+              marginLeft: "-.7rem",
+              paddingRight: "1rem",
+            }}
+          />
+        </span>
+        {props.assetName}
+      </td>
       <td>{props.totalValueLocked}</td>
       <td>{props.position}</td>
       <td>{props.share} %</td>
-    </tr>
+    </RowStyle>
   );
 };
 
@@ -87,21 +118,34 @@ interface TransactionProps {
 export const TransactionRow = (props: TransactionProps) => {
   return (
     <tr onClick={props.onClick}>
+      <td
+        style={{
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
+        {" "}
+        <span
+          style={{
+            display: "flex",
 
-<td style={{
-        display : "flex",
-        justifyContent : "center"
-      }}> <span style={{
-        display : "flex",
-
-        alignContent : "center",
-        alignItems : "center"
-      }}>
-        {typeof props.icons != "string" ? (
-        <IconPair iconLeft={props.icons.icon1} iconRight={props.icons.icon2} />
-      ) : (
-        <img src={props.icons} height={30} style={{marginRight : "10px"}} />
-      )}  </span>
+            alignContent: "center",
+            alignItems: "center",
+          }}
+        >
+          {typeof props.icons != "string" ? (
+            <IconPair
+              iconLeft={props.icons.icon1}
+              iconRight={props.icons.icon2}
+            />
+          ) : (
+            <img
+              src={props.icons}
+              height={30}
+              style={{ marginRight: "10px" }}
+            />
+          )}{" "}
+        </span>
         <span>{props.name}</span>
       </td>
       <td>{props.status}</td>
@@ -110,5 +154,21 @@ export const TransactionRow = (props: TransactionProps) => {
   );
 };
 
+const LoadingStyle = styled.td`
+  display: table-cell !important;
+  text-transform: lowercase !important;
+  text-align: center !important;
+`;
+
+interface LoadingProps {
+  colSpan: number;
+}
+export const LoadingRow = ({ colSpan }: LoadingProps) => {
+  return (
+    <tr>
+      <LoadingStyle colSpan={colSpan}>loading</LoadingStyle>
+    </tr>
+  );
+};
 
 export default Row;
diff --git a/src/pages/main/components/table.tsx b/src/pages/main/components/table.tsx
@@ -15,7 +15,9 @@ const Container = styled.table`
     text-transform: lowercase;
     font-size: 14px;
     background-color: #06fc9a1b;
-
+    tr {
+      border-bottom: var(--primary-color) solid 1px !important;
+    }
   }
   th {
     padding: 8px;
@@ -27,43 +29,55 @@ const Container = styled.table`
     font-size: 14px;
     font-weight: 400;
     line-height: 4rem;
-    border-bottom: var(--primary-color) solid 1px;
+    border-bottom: transparent solid 1px;
+
+    animation-fill-mode: forwards;
+
+    @keyframes fader {
+      from {
+        border-bottom: transparent solid 1px;
+      }
+      to {
+        border-bottom: var(--primary-color) solid 1px;
+      }
+    }
   }
 
   tbody {
     border: var(--primary-color) solid 1px;
 
     tr:hover {
-
       background-color: #06fc9a1b;
       cursor: pointer;
-
     }
   }
-  @media (max-width: 1000px){
-   width: 800px;
-   margin: 0 2rem;
+  @media (max-width: 1000px) {
+    width: 800px;
+    margin: 0 2rem;
   }
-
 `;
 type Props = {
   children: React.ReactNode;
-  columns : string[];
+  columns: string[];
 };
 
 const Table: React.FC<Props> = (props) => {
   return (
-    <div style={{
-      overflowX: "auto",
-    }}>
+    <div
+      style={{
+        overflowX: "auto",
+      }}
+    >
       <Container>
-      <thead>
-        <tr>
-          {props.columns.map((item)=><th>{item}</th>)}
-        </tr>
-      </thead>
-      <tbody>{props.children}</tbody>
-    </Container>
+        <thead>
+          <tr>
+            {props.columns.map((item) => (
+              <th key={item}>{item}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>{props.children}</tbody>
+      </Container>
     </div>
   );
 };