[GSW-471] fix: wallet

- [GSW-471-fix-assets-wallet] API list assets and handle balance - [GSM-471-fix-assets-wallet] Header deposit modal - [GSM-471-fix-assets-wallet] Default sorting order - [GSM-471-fix-assets-wallet] Show modals deposit/withdraw - [GSM-471-fix-assets-wallet] Clickable Claim All - [GSM-471-fix-assets-wallet] Show chain in assets list - [GSM-471-fix-assets-wallet] Text change Add -> Create - [GSM-471-fix-assets-wallet] Add commas (,) for every 1,000 places.
gnoswap-labs · Dec 17, 2023 · 5de49d4 · 5de49d4
1 parent 88e38a3
commit 5de49d4
Show file tree

Hide file tree

Showing 35 changed files with 1,275 additions and 677 deletions.
diff --git a/.yarn/cache/@next-swc-darwin-arm64-npm-13.2.3-2b2285dccb-10.zip b/.yarn/cache/@next-swc-darwin-arm64-npm-13.2.3-2b2285dccb-10.zip
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -29,6 +29,7 @@
     "dayjs": "1.11.7",
     "jotai": "2.2.1",
     "next": "13.2.3",
+    "qrcode.react": "^3.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "7.47.0",

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/header/Header.tsx b/packages/web/src/components/common/header/Header.tsx
@@ -1,30 +1,31 @@
-import React from "react";
-import IconHeaderLogo from "../icons/IconHeaderLogo";
-import Link from "next/link";
 import IconSearch from "@components/common/icons/IconSearch";
+import NotificationButton from "@components/common/notification-button/NotificationButton";
+import WalletConnectorButton from "@components/common/wallet-connector-button/WalletConnectorButton";
+import DepositModal from "@components/wallet/deposit-modal/DepositModal";
+import { HEADER_NAV } from "@constants/header.constant";
+import { Token } from "@containers/header-container/HeaderContainer";
+import { AccountModel } from "@models/account/account-model";
+import { DEVICE_TYPE } from "@styles/media";
+import Link from "next/link";
+import React, { useCallback, useState } from "react";
+import IconDownload from "../icons/IconDownload";
+import IconHeaderLogo from "../icons/IconHeaderLogo";
+import SearchMenuModal from "../search-menu-modal/SearchMenuModal";
+import SubMenuButton from "../sub-menu-button/SubMenuButton";
 import {
-  HeaderWrapper,
+  BottomNavContainer,
+  BottomNavItem,
+  BottomNavWrapper,
+  DepositButton,
   HeaderContainer,
+  HeaderWrapper,
   LeftSection,
+  LogoLink,
   Navigation,
   RightSection,
-  LogoLink,
-  SearchContainer,
   SearchButton,
-  BottomNavWrapper,
-  BottomNavContainer,
-  BottomNavItem,
-  DepositButton,
+  SearchContainer,
 } from "./Header.styles";
-import NotificationButton from "@components/common/notification-button/NotificationButton";
-import { HEADER_NAV } from "@constants/header.constant";
-import WalletConnectorButton from "@components/common/wallet-connector-button/WalletConnectorButton";
-import { Token } from "@containers/header-container/HeaderContainer";
-import { DEVICE_TYPE } from "@styles/media";
-import SubMenuButton from "../sub-menu-button/SubMenuButton";
-import SearchMenuModal from "../search-menu-modal/SearchMenuModal";
-import { AccountModel } from "@models/account/account-model";
-import IconDownload from "../icons/IconDownload";
 
 interface HeaderProps {
   pathname?: string;
@@ -74,6 +75,20 @@ const Header: React.FC<HeaderProps> = ({
   popularTokens,
   recents,
 }) => {
+  const [isShowDepositModal, setIsShowDepositModal] = useState(false);
+
+  const changeTokenDeposit = useCallback(() => {
+    setIsShowDepositModal(true);
+  }, []);
+
+  const closeDeposit = () => {
+    setIsShowDepositModal(false);
+  };
+
+  const callbackDeposit = (value: boolean) => {
+    setIsShowDepositModal(value);
+  };
+
   return (
     <>
       <HeaderWrapper>
@@ -93,7 +108,7 @@ const Header: React.FC<HeaderProps> = ({
                         key={item.title}
                         className={
                           pathname === item.path ||
-                            (item.subPath || []).some(_ => pathname.includes(_))
+                          (item.subPath || []).some(_ => pathname.includes(_))
                             ? "selected"
                             : ""
                         }
@@ -115,10 +130,12 @@ const Header: React.FC<HeaderProps> = ({
               <SearchButton onClick={onSearchMenuToggle}>
                 <IconSearch className="search-icon" />
               </SearchButton>
-              {connected && breakpoint !== DEVICE_TYPE.MOBILE && <DepositButton>
-                <IconDownload />
-                <span>Deposit</span>
-              </DepositButton>}
+              {connected && breakpoint !== DEVICE_TYPE.MOBILE && (
+                <DepositButton onClick={() => changeTokenDeposit()}>
+                  <IconDownload />
+                  <span>Deposit</span>
+                </DepositButton>
+              )}
               <WalletConnectorButton
                 account={account}
                 connected={connected}
@@ -139,7 +156,12 @@ const Header: React.FC<HeaderProps> = ({
               {HEADER_NAV.map(item => (
                 <BottomNavItem
                   key={item.title}
-                  className={pathname === item.path || (item.subPath || []).some(_ => pathname.includes(_)) ? "selected" : ""}
+                  className={
+                    pathname === item.path ||
+                    (item.subPath || []).some(_ => pathname.includes(_))
+                      ? "selected"
+                      : ""
+                  }
                 >
                   <Link href={item.path}>{item.title}</Link>
                 </BottomNavItem>
@@ -166,6 +188,16 @@ const Header: React.FC<HeaderProps> = ({
           />
         )}
       </HeaderWrapper>
+
+      {isShowDepositModal && (
+        <DepositModal
+          breakpoint={breakpoint}
+          close={closeDeposit}
+          depositInfo={undefined}
+          changeToken={changeTokenDeposit}
+          callback={callbackDeposit}
+        />
+      )}
     </>
   );
 };

diff --git a/packages/web/src/components/common/icons/IconInfo.tsx b/packages/web/src/components/common/icons/IconInfo.tsx
@@ -1,7 +1,13 @@
-const IconInfo = ({ className }: { className?: string }) => (
+const IconInfo = ({
+  className,
+  size = 24,
+}: {
+  className?: string;
+  size?: number;
+}) => (
   <svg
-    width="24"
-    height="24"
+    width={size}
+    height={size}
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/web/src/components/common/icons/IconNewTab.tsx b/packages/web/src/components/common/icons/IconNewTab.tsx
@@ -1,4 +1,10 @@
-const IconNewTab = ({ className }: { className?: string }) => (
+const IconNewTab = ({
+  className,
+  color = "#596782",
+}: {
+  className?: string;
+  color?: string;
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -8,7 +14,7 @@ const IconNewTab = ({ className }: { className?: string }) => (
     className={className}
   >
     <path
-      fill="#596782"
+      fill={color}
       fillRule="evenodd"
       d="M3.333 3.833v9.334h9.334V8.5H14v4.667c0 .733-.6 1.333-1.333 1.333H3.333C2.593 14.5 2 13.9 2 13.167V3.833C2 3.1 2.593 2.5 3.333 2.5H8v1.333H3.333zm6.16 0V2.5h4.667v4.667h-1.333V4.773l-6.554 6.554-.94-.94 6.554-6.554H9.493z"
       clipRule="evenodd"

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/common/qr-code/QRCode.styled.ts b/packages/web/src/components/common/qr-code/QRCode.styled.ts
@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+
+export const QRCodeContainer = styled.div`
+  padding: 10px;
+  background-color: #fff;
+  border: 1px solid ${({ theme }) => theme.color.border02};
+  border-radius: 8px;
+`;
diff --git a/packages/web/src/components/common/qr-code/QRCode.tsx b/packages/web/src/components/common/qr-code/QRCode.tsx
@@ -0,0 +1,27 @@
+import { QRCodeSVG } from "qrcode.react";
+import { QRCodeContainer } from "./QRCode.styled";
+
+type Props = {
+  text: string;
+  size: number;
+  logo: string;
+};
+
+export const QRCodeGenerator = ({ text, size = 200, logo }: Props) => {
+  return (
+    <QRCodeContainer>
+      <QRCodeSVG
+        value={text}
+        size={size}
+        imageSettings={{
+          src: logo,
+          x: undefined,
+          y: undefined,
+          height: 24,
+          width: 24,
+          excavate: false,
+        }}
+      />
+    </QRCodeContainer>
+  );
+};
diff --git a/packages/web/src/components/swap/swap-card-content/SwapCardContent.tsx b/packages/web/src/components/swap/swap-card-content/SwapCardContent.tsx
@@ -34,7 +34,6 @@ const SwapCardContent: React.FC<ContentProps> = ({
   connectedWallet,
   isLoading,
 }) => {
-
   const tokenA = swapTokenInfo.tokenA;
   const tokenB = swapTokenInfo.tokenB;
 
@@ -64,20 +63,30 @@ const SwapCardContent: React.FC<ContentProps> = ({
 
   const handleAutoFillTokenA = useCallback(() => {
     if (connectedWallet) {
-      const formatValue = parseFloat(swapTokenInfo.tokenABalance.replace(/,/g, "")).toString();
+      const formatValue = parseFloat(
+        swapTokenInfo.tokenABalance.replace(/,/g, ""),
+      ).toString();
       changeTokenAAmount(formatValue);
     }
   }, [changeTokenAAmount, connectedWallet, swapTokenInfo]);
 
   const handleAutoFillTokenB = useCallback(() => {
     if (connectedWallet) {
-      const formatValue = parseFloat(swapTokenInfo.tokenBBalance.replace(/,/g, "")).toString();
+      const formatValue = parseFloat(
+        swapTokenInfo.tokenBBalance.replace(/,/g, ""),
+      ).toString();
       changeTokenBAmount(formatValue);
     }
   }, [changeTokenBAmount, connectedWallet, swapTokenInfo]);
-  
+
   const isShowInfoSection = useMemo(() => {
-    return !!(swapSummaryInfo && !!Number(swapTokenInfo.tokenAAmount) && !!Number(swapTokenInfo.tokenBAmount)) || isLoading;
+    return (
+      !!(
+        swapSummaryInfo &&
+        !!Number(swapTokenInfo.tokenAAmount) &&
+        !!Number(swapTokenInfo.tokenBAmount)
+      ) || isLoading
+    );
   }, [swapSummaryInfo, swapTokenInfo, isLoading]);
 
   return (
@@ -96,7 +105,12 @@ const SwapCardContent: React.FC<ContentProps> = ({
         </div>
         <div className="amount-info">
           <span className="price-text">{swapTokenInfo.tokenAUSDStr}</span>
-          <span className={`balance-text ${tokenA && connectedWallet && "balance-text-disabled"}`} onClick={handleAutoFillTokenA}>
+          <span
+            className={`balance-text ${
+              tokenA && connectedWallet && "balance-text-disabled"
+            }`}
+            onClick={handleAutoFillTokenA}
+          >
             Balance: {connectedWallet ? swapTokenInfo.tokenABalance : "-"}
           </span>
         </div>
@@ -120,7 +134,12 @@ const SwapCardContent: React.FC<ContentProps> = ({
         </div>
         <div className="amount-info">
           <span className="price-text">{swapTokenInfo.tokenBUSDStr}</span>
-          <span className={`balance-text ${tokenB && connectedWallet && "balance-text-disabled"}`} onClick={handleAutoFillTokenB}>
+          <span
+            className={`balance-text ${
+              tokenB && connectedWallet && "balance-text-disabled"
+            }`}
+            onClick={handleAutoFillTokenB}
+          >
             Balance: {connectedWallet ? swapTokenInfo.tokenBBalance : "-"}
           </span>
         </div>

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,