bridge_ui: add supported terra tokens, fix refresh

Change-Id: I3f7ff93927482422d9afc7e1943ccb5cc07d140f

bridge_ui/src/components/TokenSelectors/TerraSourceTokenSelector.tsx

@@ -13,14 +13,12 @@ import {
   useConnectedWallet,
 } from "@terra-money/wallet-provider";
 import { formatUnits } from "ethers/lib/utils";
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import { createParsedTokenAccount } from "../../hooks/useGetSourceParsedTokenAccounts";
 import useTerraNativeBalances from "../../hooks/useTerraNativeBalances";
-import useTerraTokenMap, {
-  TerraTokenMetadata,
-} from "../../hooks/useTerraTokenMap";
+import { TerraTokenMetadata } from "../../hooks/useTerraTokenMap";
 import { ParsedTokenAccount } from "../../store/transferSlice";
-import { TERRA_HOST } from "../../utils/consts";
+import { SUPPORTED_TERRA_TOKENS, TERRA_HOST } from "../../utils/consts";
 import { shortenAddress } from "../../utils/solana";
 import {
   formatNativeDenom,
@@ -110,7 +108,7 @@ export default function TerraSourceTokenSelector(
 ) {
   const classes = useStyles();
   const { onChange, value, disabled, resetAccounts } = props;
-  const tokenMap = useTerraTokenMap();
+  // const tokenMap = useTerraTokenMap();
   const [advancedMode, setAdvancedMode] = useState(false);
   const [advancedModeHolderString, setAdvancedModeHolderString] = useState("");
   const [advancedModeError, setAdvancedModeError] = useState("");
@@ -125,16 +123,22 @@ export default function TerraSourceTokenSelector(
     [setAutocompleteString]
   );
 
+  const nativeRefresh = useRef<() => void>(() => {});
+
+  const { balances, isLoading: nativeIsLoading } = useTerraNativeBalances(
+    terraWallet?.walletAddress,
+    nativeRefresh
+  );
+
   const resetAccountWrapper = useCallback(() => {
     setAdvancedModeHolderString("");
     setAdvancedModeError("");
     setAutocompleteString("");
     resetAccounts && resetAccounts();
+    nativeRefresh.current();
   }, [resetAccounts]);
 
-  const isLoading = tokenMap?.isFetching || false;
-
-  const { balances } = useTerraNativeBalances(terraWallet?.walletAddress);
+  const isLoading = nativeIsLoading; // || (tokenMap?.isFetching || false);
 
   const terraTokenArray = useMemo(() => {
     const balancesItems = balances
@@ -149,10 +153,16 @@ export default function TerraSourceTokenSelector(
             } as TerraTokenMetadata)
         )
       : [];
-    const values = tokenMap.data?.mainnet;
-    const tokenMapItems = Object.values(values || {}) || [];
-    return [...balancesItems, ...tokenMapItems];
-  }, [balances, tokenMap]);
+    return balancesItems.filter((metadata) =>
+      SUPPORTED_TERRA_TOKENS.includes(metadata.token)
+    );
+    // const values = tokenMap.data?.mainnet;
+    // const tokenMapItems = Object.values(values || {}) || [];
+    // return [...balancesItems, ...tokenMapItems];
+  }, [
+    balances,
+    // tokenMap
+  ]);
 
   const valueToOption = (fromProps: ParsedTokenAccount | undefined | null) => {
     if (!fromProps) return null;
@@ -323,8 +333,11 @@ export default function TerraSourceTokenSelector(
 
   return (
     <React.Fragment>
-      {isLoading && <CircularProgress />}
-      {wrappedContent}
+      {isLoading && !value && !advancedMode ? (
+        <CircularProgress />
+      ) : (
+        wrappedContent
+      )}
       {advancedModeError && (
         <Typography color="error">{advancedModeError}</Typography>
       )}

bridge_ui/src/hooks/useTerraNativeBalances.ts

@@ -1,15 +1,27 @@
 import { LCDClient } from "@terra-money/terra.js";
-import { useEffect, useMemo, useState } from "react";
+import { MutableRefObject, useEffect, useMemo, useState } from "react";
 import { TERRA_HOST } from "../utils/consts";
 
 export interface TerraNativeBalances {
   [index: string]: string;
 }
 
-export default function useTerraNativeBalances(walletAddress?: string) {
+export default function useTerraNativeBalances(
+  walletAddress?: string,
+  refreshRef?: MutableRefObject<() => void>
+) {
   const [isLoading, setIsLoading] = useState(true);
   const [balances, setBalances] = useState<TerraNativeBalances | undefined>({});
+  const [refresh, setRefresh] = useState(false);
   useEffect(() => {
+    if (refreshRef) {
+      refreshRef.current = () => {
+        setRefresh(true);
+      };
+    }
+  }, [refreshRef]);
+  useEffect(() => {
+    setRefresh(false);
     if (walletAddress) {
       setIsLoading(true);
       setBalances(undefined);
@@ -37,7 +49,7 @@ export default function useTerraNativeBalances(walletAddress?: string) {
       setIsLoading(false);
       setBalances(undefined);
     }
-  }, [walletAddress]);
+  }, [walletAddress, refresh]);
   const value = useMemo(() => ({ isLoading, balances }), [isLoading, balances]);
   return value;
 }

bridge_ui/src/utils/consts.ts

@@ -463,3 +463,5 @@ export const ETH_MIGRATION_ASSET_MAP = new Map<string, string>(
         // ],
       ]
 );
+
+export const SUPPORTED_TERRA_TOKENS = ["uluna", "uusd"];