Merge pull request #302 from MVPWorkshop/298-show-balance-for-the-tok…

…en-we-swap-into refactor: add balances for assets we want swap if have it in wallet
MVPWorkshop · Oct 27, 2023 · 8da14a1 · 8da14a1 · vercel · Oct 27, 2023
2 parents bf758db + c1dda20
commit 8da14a1
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 24 deletions.
diff --git a/src/components/molecule/TokenAmountInput/index.tsx b/src/components/molecule/TokenAmountInput/index.tsx
@@ -114,7 +114,7 @@ const TokenAmountInput = ({
       </div>
       <div className="flex w-full justify-end pr-1 text-medium text-gray-200">
         Balance:{" "}
-        {tokenId && tokenText
+        {tokenId && tokenText && Number(tokenBalance) !== 0
           ? formatDecimalsFromToken(Number(tokenBalance?.replace(/[, ]/g, "")), tokenDecimals as string)
           : tokenBalance || 0}
       </div>

diff --git a/src/components/organism/SwapSelectTokenModal/index.tsx b/src/components/organism/SwapSelectTokenModal/index.tsx
@@ -17,7 +17,6 @@ interface SwapSelectTokenModalProps {
   title: string;
   tokensData: TokenProps[];
   selected: TokenProps;
-  isWalletTokens: boolean;
   onClose: () => void;
   onSelect: (tokenData: TokenProps) => void;
 }
@@ -27,7 +26,6 @@ const SwapSelectTokenModal: FC<SwapSelectTokenModalProps> = ({
   title,
   tokensData,
   selected,
-  isWalletTokens,
   onClose,
   onSelect,
 }) => {
@@ -85,16 +83,14 @@ const SwapSelectTokenModal: FC<SwapSelectTokenModalProps> = ({
                       </div>
                     </div>
                     <div className="flex gap-1">
-                      {isWalletTokens && (
-                        <div className="text-[12px] group-hover:text-white">
-                          {item.tokenId
-                            ? formatDecimalsFromToken(
-                                Number(item.tokenAsset.balance.replace(/[, ]/g, "")),
-                                item.assetTokenMetadata.decimals
-                              )
-                            : item.tokenAsset.balance}
-                        </div>
-                      )}
+                      <div className="text-[12px] group-hover:text-white">
+                        {item.tokenId && item.tokenAsset.balance !== 0
+                          ? formatDecimalsFromToken(
+                              Number(item.tokenAsset.balance.replace(/[, ]/g, "")),
+                              item.assetTokenMetadata.decimals
+                            )
+                          : item.tokenAsset.balance}
+                      </div>
                       {item.tokenId === selected.tokenId ? <CheckIcon /> : null}
                     </div>
                   </div>

diff --git a/src/components/organism/SwapTokens/index.tsx b/src/components/organism/SwapTokens/index.tsx
@@ -659,9 +659,16 @@ const SwapTokens = () => {
     const poolLiquidTokens: any = [nativeToken]
       .concat(poolsTokenMetadata)
       ?.filter((item: any) => item.tokenId !== selectedTokens.tokenA?.tokenId);
-
-    setAvailablePoolTokenB(poolLiquidTokens);
-
+    if (tokenBalances !== null) {
+      for (const item of poolLiquidTokens) {
+        for (const walletAsset of tokenBalances.assets) {
+          if (item.tokenId === walletAsset.tokenId) {
+            item.tokenAsset.balance = walletAsset.tokenAsset.balance;
+          }
+        }
+      }
+      setAvailablePoolTokenB(poolLiquidTokens);
+    }
     return poolLiquidTokens;
   };
 
@@ -923,18 +930,21 @@ const SwapTokens = () => {
           tokenValue={selectedTokenAValue?.tokenValue}
           onClick={() => fillTokenPairsAndOpenModal(TokenSelection.TokenA)}
           onSetTokenValue={(value) => tokenAValue(value.toString())}
-          disabled={!selectedAccount || swapLoading || !tokenBalances?.assets}
+          disabled={!selectedAccount || swapLoading || !tokenBalances?.assets || poolsTokenMetadata.length === 0}
           assetLoading={assetLoading}
         />
 
         <TokenAmountInput
           tokenText={selectedTokens.tokenB?.tokenSymbol}
+          tokenBalance={selectedTokens.tokenB?.tokenBalance}
+          tokenId={selectedTokens.tokenB?.tokenId}
+          tokenDecimals={selectedTokens.tokenB?.decimals}
           labelText={t("tokenAmountInput.youReceive")}
           tokenIcon={<DotToken />}
           tokenValue={selectedTokenBValue?.tokenValue}
           onClick={() => fillTokenPairsAndOpenModal(TokenSelection.TokenB)}
           onSetTokenValue={(value) => tokenBValue(value.toString())}
-          disabled={!selectedAccount || swapLoading || !tokenBalances?.assets}
+          disabled={!selectedAccount || swapLoading || !tokenBalances?.assets || poolsTokenMetadata.length === 0}
           assetLoading={assetLoading}
         />
 
@@ -1005,7 +1015,6 @@ const SwapTokens = () => {
             onSwapSelectModal(tokenData);
           }}
           selected={selectedTokens.tokenA}
-          isWalletTokens={true}
         />
 
         <SwapSelectTokenModal
@@ -1018,7 +1027,6 @@ const SwapTokens = () => {
             onSwapSelectModal(tokenData);
           }}
           selected={selectedTokens.tokenB}
-          isWalletTokens={false}
         />
 
         <Button

diff --git a/src/services/polkadotWalletServices/index.ts b/src/services/polkadotWalletServices/index.ts
@@ -4,13 +4,15 @@ import type { AnyJson } from "@polkadot/types/types/codec";
 import dotAcpToast from "../../app/util/toast";
 import { Dispatch } from "react";
 import { WalletAction } from "../../store/wallet/interface";
+import { PoolAction } from "../../store/pools/interface";
 import { ActionType } from "../../app/types/enum";
 import "@polkadot/api-augment";
 import { TokenBalanceData } from "../../app/types";
 import { getWalletBySource, getWallets } from "@talismn/connect-wallets";
 import type { Wallet, WalletAccount } from "@talismn/connect-wallets";
 import LocalStorage from "../../app/util/localStorage";
 import { formatDecimalsFromToken } from "../../app/util/helper";
+import { getAllLiquidityPoolsTokensMetadata } from "../poolServices";
 
 export const setupPolkadotApi = async () => {
   const wsProvider = new WsProvider(import.meta.env.VITE_NETWORK_RPC_URL);
@@ -97,10 +99,17 @@ export const getSupportedWallets = () => {
   return supportedWallets;
 };
 
-export const setTokenBalance = async (dispatch: Dispatch<WalletAction>, api: any, selectedAccount: WalletAccount) => {
+export const setTokenBalance = async (
+  dispatch: Dispatch<WalletAction | PoolAction>,
+  api: any,
+  selectedAccount: WalletAccount
+) => {
   if (api) {
     dispatch({ type: ActionType.SET_ASSET_LOADING, payload: true });
     try {
+      const poolsTokenMetadata = await getAllLiquidityPoolsTokensMetadata(api);
+      dispatch({ type: ActionType.SET_POOLS_TOKEN_METADATA, payload: poolsTokenMetadata });
+
       const walletTokens: any = await getWalletTokensBalance(api, selectedAccount?.address);
 
       dispatch({ type: ActionType.SET_TOKEN_BALANCES, payload: walletTokens });
@@ -227,15 +236,16 @@ export const setTokenBalanceAfterAssetsSwapUpdate = async (
   return updatedTokensInfo;
 };
 
-export const handleDisconnect = (dispatch: Dispatch<WalletAction>) => {
+export const handleDisconnect = (dispatch: Dispatch<WalletAction | PoolAction>) => {
   LocalStorage.remove("wallet-connected");
   dispatch({ type: ActionType.SET_ACCOUNTS, payload: [] });
   dispatch({ type: ActionType.SET_SELECTED_ACCOUNT, payload: {} as WalletAccount });
   dispatch({ type: ActionType.SET_TOKEN_BALANCES, payload: {} as TokenBalanceData });
+  dispatch({ type: ActionType.SET_POOLS_TOKEN_METADATA, payload: [] });
 };
 
 export const connectWalletAndFetchBalance = async (
-  dispatch: Dispatch<WalletAction>,
+  dispatch: Dispatch<WalletAction | PoolAction>,
   api: any,
   account: WalletAccount
 ) => {

diff --git a/src/services/swapServices/index.ts b/src/services/swapServices/index.ts
@@ -382,8 +382,8 @@ export const swapAssetForAssetExactOut = async (
 
   const result = api.tx.assetConversion.swapTokensForExactTokens(
     [firstArg, secondArg, thirdArg],
-    assetTokenAValue,
     assetTokenBValue,
+    assetTokenAValue,
     account.address,
     false
   );