diff --git a/bridge_ui/src/components/TokenSelectors/TerraSourceTokenSelector.tsx b/bridge_ui/src/components/TokenSelectors/TerraSourceTokenSelector.tsx index 1842382f..0ed96bb0 100644 --- a/bridge_ui/src/components/TokenSelectors/TerraSourceTokenSelector.tsx +++ b/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 ( - {isLoading && } - {wrappedContent} + {isLoading && !value && !advancedMode ? ( + + ) : ( + wrappedContent + )} {advancedModeError && ( {advancedModeError} )} diff --git a/bridge_ui/src/hooks/useTerraNativeBalances.ts b/bridge_ui/src/hooks/useTerraNativeBalances.ts index 70e1d878..62e91028 100644 --- a/bridge_ui/src/hooks/useTerraNativeBalances.ts +++ b/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({}); + 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; } diff --git a/bridge_ui/src/utils/consts.ts b/bridge_ui/src/utils/consts.ts index ae9f939a..6e9ffd37 100644 --- a/bridge_ui/src/utils/consts.ts +++ b/bridge_ui/src/utils/consts.ts @@ -463,3 +463,5 @@ export const ETH_MIGRATION_ASSET_MAP = new Map( // ], ] ); + +export const SUPPORTED_TERRA_TOKENS = ["uluna", "uusd"];