[GSW-471] fix: assets wallet

gnoswap-labs · Dec 17, 2023 · 576da77 · 576da77
1 parent 146980d
commit 576da77
Show file tree

Hide file tree

Showing 13 changed files with 297 additions and 232 deletions.
diff --git a/packages/web/src/common/values/token-constant.ts b/packages/web/src/common/values/token-constant.ts
@@ -3,7 +3,7 @@ import { TokenModel } from "@models/token/token-model";
 export const GNOT_TOKEN: TokenModel = {
   type: "native",
   chainId: "",
-  createdAt: "0001-01-01T00:00:00Z",
+  createdat: "0001-01-01T00:00:00Z",
   name: "Gnoland",
   path: "gnot",
   decimals: 6,

diff --git a/packages/web/src/components/common/liquidity-enter-amounts/LiquidityEnterAmounts.stories.tsx b/packages/web/src/components/common/liquidity-enter-amounts/LiquidityEnterAmounts.stories.tsx
@@ -1,8 +1,5 @@
 import React from "react";
-import {
-  ComponentStory,
-  ComponentMeta
-} from "@storybook/react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
 
 import EnterAmounts from "./LiquidityEnterAmounts";
 import { action } from "@storybook/addon-actions";
@@ -18,20 +15,21 @@ const Template: ComponentStory<typeof EnterAmounts> = args => (
 );
 
 const token: TokenModel = {
-  "isWrappedGasToken": false,
-  "isGasToken": false,
-  "description": "",
-  "websiteURL": "",
+  isWrappedGasToken: false,
+  isGasToken: false,
+  description: "",
+  websiteURL: "",
   type: "grc20",
   chainId: "dev.gnoswap",
-  createdAt: "2023-12-08T03:57:43Z",
+  createdat: "2023-12-08T03:57:43Z",
   name: "Foo",
   path: "gno.land/r/foo",
   decimals: 4,
   symbol: "FOO",
-  logoURI: "https://raw.githubusercontent.com/onbloc/gno-token-resource/main/grc20/images/gno_land_r_foo.svg",
+  logoURI:
+    "https://raw.githubusercontent.com/onbloc/gno-token-resource/main/grc20/images/gno_land_r_foo.svg",
   priceId: "gno.land/r/foo",
-  address: ""
+  address: "",
 };
 
 export const Default = Template.bind({});

diff --git a/packages/web/src/components/wallet/asset-info/AssetInfo.stories.tsx b/packages/web/src/components/wallet/asset-info/AssetInfo.stories.tsx
@@ -19,14 +19,19 @@ const Template: ComponentStory<typeof AssetInfo> = args => (
 export const Default = Template.bind({});
 Default.args = {
   asset: {
-    id: "BTC",
-    logoUri:
-      "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png",
-    type: "GRC20",
-    name: "Bitcoin",
-    symbol: "BTC",
-    chain: "Gnoland",
-    balance: "0.000000",
+    type: "grc20",
+    chainId: "dev",
+    createdat: "2023-12-12 23:45:12",
+    name: "Bar",
+    path: "gno.land/r/bar",
+    decimals: 6,
+    symbol: "BAR",
+    logoURI:
+      "https://raw.githubusercontent.com/onbloc/gno-token-resource/main/grc20/images/gno_land_r_bar.svg",
+    priceId: "gno.land/r/bar",
+    description: "this_is_desc_section",
+    websiteURL: "https://website~~~~",
+    balance: 0.0,
   },
   deposit: action("deposit"),
   withdraw: action("withdraw"),

diff --git a/packages/web/src/components/wallet/asset-info/AssetInfo.styles.ts b/packages/web/src/components/wallet/asset-info/AssetInfo.styles.ts
@@ -39,7 +39,7 @@ export const TableColumn = styled.div<{ tdWidth: number }>`
   height: 100%;
   ${mixins.flexbox("row", "center", "flex-end")};
   .logo {
-    margin-left: 16px;
+    margin-left: 15px;
   }
   .name,
   .chain,

diff --git a/packages/web/src/components/wallet/asset-info/AssetInfo.tsx b/packages/web/src/components/wallet/asset-info/AssetInfo.tsx
@@ -23,7 +23,7 @@ const AssetInfo: React.FC<AssetInfoProps> = ({
   withdraw,
   breakpoint,
 }) => {
-  const { logoUri, name, symbol, chain, balance } = asset;
+  const { logoURI, name, symbol, balance } = asset;
 
   const onClickItem = useCallback((symbol: string) => {
     location.href = "/tokens/" + symbol;
@@ -44,12 +44,15 @@ const AssetInfo: React.FC<AssetInfoProps> = ({
         tdWidth={ASSET_TD_WIDTH[0]}
         onClick={() => onClickItem(symbol)}
       >
-        <img className="logo" src={logoUri} alt="logo" />
+        <img className="logo" src={logoURI} alt="logo" />
         <span className="name">{name}</span>
         <span className="symbol">{symbol}</span>
       </TableColumn>
       <TableColumn className="left" tdWidth={ASSET_TD_WIDTH[1]}>
-        <span className="chain">{chain}</span>
+        <span className="chain">
+          Gnoland
+          {/* {chain} */}
+        </span>
       </TableColumn>
       <TableColumn className="left" tdWidth={ASSET_TD_WIDTH[2]}>
         <span className="balance">{balance}</span>
@@ -68,12 +71,15 @@ const AssetInfo: React.FC<AssetInfoProps> = ({
         tdWidth={TABLET_ASSET_TD_WIDTH[0]}
         onClick={() => onClickItem(symbol)}
       >
-        <img className="logo" src={logoUri} alt="logo" />
+        <img className="logo" src={logoURI} alt="logo" />
         <span className="name">{name}</span>
         <span className="symbol">{symbol}</span>
       </TableColumn>
       <TableColumn className="left" tdWidth={TABLET_ASSET_TD_WIDTH[1]}>
-        <span className="chain">{chain}</span>
+        <span className="chain">
+          Gnoland
+          {/* {chain} */}
+        </span>
       </TableColumn>
       <TableColumn className="left" tdWidth={TABLET_ASSET_TD_WIDTH[2]}>
         <span className="balance">{balance}</span>
@@ -92,12 +98,15 @@ const AssetInfo: React.FC<AssetInfoProps> = ({
         tdWidth={MOBILE_ASSET_TD_WIDTH[0]}
         onClick={() => onClickItem(symbol)}
       >
-        <img className="logo" src={logoUri} alt="logo" />
+        <img className="logo" src={logoURI} alt="logo" />
         <span className="name">{name}</span>
         <span className="symbol">{symbol}</span>
       </TableColumn>
       <TableColumn className="left" tdWidth={MOBILE_ASSET_TD_WIDTH[1]}>
-        <span className="chain">{chain}</span>
+        <span className="chain">
+          Gnoland
+          {/* {chain} */}
+        </span>
       </TableColumn>
       <TableColumn className="left" tdWidth={MOBILE_ASSET_TD_WIDTH[2]}>
         <span className="balance">{balance}</span>

diff --git a/packages/web/src/components/wallet/asset-list-header/AssetListHeader.styles.ts b/packages/web/src/components/wallet/asset-list-header/AssetListHeader.styles.ts
@@ -22,7 +22,7 @@ export const AssetListHeaderWrapper = styled.div`
     gap: 36px;
     ${media.tabletMiddle} {
       gap: 24px;
-      height: 24px;
+      // height: 24px;
       ${mixins.flexbox("column", "flex-start", "flex-start")};
     }
     ${media.mobile} {

diff --git a/packages/web/src/components/wallet/asset-list-header/AssetListHeader.tsx b/packages/web/src/components/wallet/asset-list-header/AssetListHeader.tsx
@@ -53,7 +53,9 @@ const AssetListHeader: React.FC<AssetListHeaderProps> = ({
               />
             )}
             {searchIcon ? (
-              <div ref={searchRef as unknown as React.RefObject<HTMLDivElement>}>
+              <div
+                ref={searchRef as unknown as React.RefObject<HTMLDivElement>}
+              >
                 <SearchInput
                   width={200}
                   height={40}

diff --git a/packages/web/src/components/wallet/deposit-modal/DepositModal.tsx b/packages/web/src/components/wallet/deposit-modal/DepositModal.tsx
@@ -95,7 +95,9 @@ const DepositModal: React.FC<Props> = ({
                   </div>
                 </div>
                 <div className="info">
-                  <span className="price-text">{!Number(amount) ? "-" : `$${amount}`}</span>
+                  <span className="price-text">
+                    {!Number(amount) ? "-" : `$${amount}`}
+                  </span>
                   <span className="balance-text">Available: -</span>
                 </div>
               </div>
@@ -111,7 +113,7 @@ const DepositModal: React.FC<Props> = ({
                   />
                   <strong className="token-name">{fromToken.symbol}</strong>
                 </div>
-                <p>{formatAddress(fromToken.address)}</p>
+                <p>{formatAddress(fromToken?.address ?? "")}</p>
               </div>
               <IconButton>
                 <IconStrokeArrowRight />
@@ -126,7 +128,7 @@ const DepositModal: React.FC<Props> = ({
                   />
                   <strong className="token-name">{toToken.symbol}</strong>
                 </div>
-                <p>{formatAddress(toToken.address)}</p>
+                <p>{formatAddress(toToken.address ?? "")}</p>
               </div>
             </BoxFromTo>
             <BoxDescription>
@@ -146,13 +148,15 @@ const DepositModal: React.FC<Props> = ({
                     ? undefined
                     : ButtonHierarchy.Primary,
                 bgColor:
-                  connected && !Number(amount || 0) ? "background17" : undefined,
+                  connected && !Number(amount || 0)
+                    ? "background17"
+                    : undefined,
               }}
             />
           </div>
         </DepositModalWrapper>
       </DepositModalBackground>
-      <Overlay onClick={close}/>
+      <Overlay onClick={close} />
     </>
   );
 };

diff --git a/packages/web/src/components/wallet/withdraw-modal/WithDrawModal.tsx b/packages/web/src/components/wallet/withdraw-modal/WithDrawModal.tsx
@@ -27,7 +27,7 @@ interface Props {
   toToken: TokenModel;
   connected: boolean;
   changeToken: (token: TokenModel) => void;
-  callback?: (value: boolean) => void; 
+  callback?: (value: boolean) => void;
 }
 
 function isAmount(str: string) {
@@ -96,7 +96,9 @@ const WithDrawModal: React.FC<Props> = ({
                   </div>
                 </div>
                 <div className="info">
-                  <span className="price-text">{!Number(amount) ? "-" : `$${amount}`}</span>
+                  <span className="price-text">
+                    {!Number(amount) ? "-" : `$${amount}`}
+                  </span>
                   <span className="balance-text">Available: -</span>
                 </div>
               </div>
@@ -112,7 +114,7 @@ const WithDrawModal: React.FC<Props> = ({
                   />
                   <strong className="token-name">{fromToken.symbol}</strong>
                 </div>
-                <p>{formatAddress(fromToken.address)}</p>
+                <p>{formatAddress(fromToken.address ?? "")}</p>
               </div>
               <IconButton>
                 <IconStrokeArrowRight />
@@ -127,7 +129,7 @@ const WithDrawModal: React.FC<Props> = ({
                   />
                   <strong className="token-name">{toToken.symbol}</strong>
                 </div>
-                <p>{formatAddress(toToken.address)}</p>
+                <p>{formatAddress(toToken.address ?? "")}</p>
               </div>
             </BoxFromTo>
             <BoxDescription>
@@ -147,13 +149,15 @@ const WithDrawModal: React.FC<Props> = ({
                     ? undefined
                     : ButtonHierarchy.Primary,
                 bgColor:
-                  connected && !Number(amount || 0) ? "background17" : undefined,
+                  connected && !Number(amount || 0)
+                    ? "background17"
+                    : undefined,
               }}
             />
           </div>
         </WithDrawModalWrapper>
       </WithDrawModalBackground>
-      <Overlay onClick={close}/>
+      <Overlay onClick={close} />
     </>
   );
 };