handle loading states for custom tokens

balancer · Sep 17, 2024 · ec0e642 · ec0e642
1 parent ff8534d
commit ec0e642
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 11 deletions.
diff --git a/packages/nextjs/components/common/TokenField.tsx b/packages/nextjs/components/common/TokenField.tsx
@@ -109,9 +109,11 @@ export const TokenField: React.FC<TokenFieldProps> = ({
             )}
           </div>
         </div>
-        <div className="absolute bottom-1 right-5 text-neutral-400">
-          {isLoading ? <div>...</div> : isError ? <div>price error</div> : <div>${price.toFixed(2)}</div>}
-        </div>
+        {price !== 0 ? (
+          <div className="absolute bottom-1 right-5 text-neutral-400">
+            {isLoading ? <div>...</div> : isError ? <div>price error</div> : <div>${price.toFixed(2)}</div>}
+          </div>
+        ) : null}
       </div>
       {isModalOpen && tokenOptions && setToken && (
         <TokenSelectModal tokenOptions={tokenOptions} setToken={setToken} setIsModalOpen={setIsModalOpen} />

diff --git a/packages/nextjs/components/common/TokenSelectModal.tsx b/packages/nextjs/components/common/TokenSelectModal.tsx
@@ -16,7 +16,8 @@ export const TokenSelectModal: React.FC<ModalProps> = ({ tokenOptions, setIsModa
   const [exoticTokenAddress, setExoticTokenAddress] = useState<string | undefined>();
   const [showTokenWarning, setShowTokenWarning] = useState(false);
 
-  const { name, symbol, decimals } = useReadToken(exoticTokenAddress);
+  const { name, symbol, decimals, isLoadingName, isLoadingDecimals, isLoadingSymbol } =
+    useReadToken(exoticTokenAddress);
 
   const { targetNetwork } = useTargetNetwork();
   const networkColor = useNetworkColor();
@@ -51,6 +52,8 @@ export const TokenSelectModal: React.FC<ModalProps> = ({ tokenOptions, setIsModa
 
   const tokenList = exoticToken ? [exoticToken] : filteredTokenOptions;
 
+  const isLoadingExoticToken = isLoadingName || isLoadingDecimals || isLoadingSymbol;
+
   return (
     <>
       <div className="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center z-10">
@@ -63,7 +66,7 @@ export const TokenSelectModal: React.FC<ModalProps> = ({ tokenOptions, setIsModa
                   Select a Token: <span style={{ color: networkColor }}>{targetNetwork.name}</span>
                 </h5>
 
-                <XMarkIcon className="w-6 h-6 hover:cursor-pointer " onClick={() => setIsModalOpen(false)} />
+                <XMarkIcon className="w-6 h-6 hover:cursor-pointer" onClick={() => setIsModalOpen(false)} />
               </div>
 
               <input
@@ -74,9 +77,11 @@ export const TokenSelectModal: React.FC<ModalProps> = ({ tokenOptions, setIsModa
                 className="w-full shadow-inner input rounded-xl bg-base-300 disabled:bg-base-300 px-5 h-[52px] text-lg"
               />
             </div>
-            {tokenList.length === 0 && (
-              <div className="p-4 text-center text-lg text-error">No results found for {searchText}</div>
-            )}
+            {isLoadingExoticToken ? (
+              <div className="w-full text-lg text-center">Fetching token details...</div>
+            ) : tokenList.length === 0 ? (
+              <div className="text-center text-lg text-error">No results found for {searchText}</div>
+            ) : null}
 
             <div>
               <VirtualList

diff --git a/packages/nextjs/hooks/token/useReadToken.ts b/packages/nextjs/hooks/token/useReadToken.ts
@@ -10,25 +10,28 @@ type UseReadToken = {
   symbol: string | undefined;
   name: string | undefined;
   decimals: number | undefined;
+  isLoadingSymbol: boolean;
+  isLoadingName: boolean;
+  isLoadingDecimals: boolean;
 };
 
 export const useReadToken = (token: Address | undefined, spender?: Address): UseReadToken => {
   const { data: walletClient } = useWalletClient();
   const connectedAddress = walletClient?.account.address || zeroAddress;
 
-  const { data: name } = useReadContract({
+  const { data: name, isPending: isLoadingName } = useReadContract({
     address: token,
     abi: erc20Abi,
     functionName: "name",
   });
 
-  const { data: symbol } = useReadContract({
+  const { data: symbol, isPending: isLoadingSymbol } = useReadContract({
     address: token,
     abi: erc20Abi,
     functionName: "symbol",
   });
 
-  const { data: decimals } = useReadContract({
+  const { data: decimals, isPending: isLoadingDecimals } = useReadContract({
     address: token,
     abi: erc20Abi,
     functionName: "decimals",
@@ -50,8 +53,11 @@ export const useReadToken = (token: Address | undefined, spender?: Address): Use
 
   return {
     name,
+    isLoadingName,
     symbol,
+    isLoadingSymbol,
     decimals,
+    isLoadingDecimals,
     allowance: allowance ? allowance : 0n,
     refetchAllowance,
     balance: balance ? balance : 0n,