[Dashboard] Fix asset page link and improve token claim UX

Author: joaquim-verges

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/ContractOverviewPage.tsx

@@ -53,7 +53,7 @@ export const ContractOverviewPage: React.FC<ContractOverviewPageProps> = ({
               text: "View asset page",
               icon: <ExternalLinkIcon className="size-4" />,
               target: "_blank",
-              link: `https://thirdweb.com/${chainSlug}/${contract.address}`,
+              link: `/${chainSlug}/${contract.address}`,
             }}
             trackingCategory="erc20-contract"
             trackingLabel="view-asset-page"

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx

@@ -22,7 +22,6 @@ import {
   padHex,
   sendAndConfirmTransaction,
   toTokens,
-  waitForReceipt,
 } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import {
@@ -122,8 +121,7 @@ export function ClaimTokenCardUI(props: {
       }
 
       async function sendAndConfirm() {
-        const receipt = await sendClaimTx.mutateAsync(transaction);
-        await waitForReceipt(receipt);
+        await sendClaimTx.mutateAsync(transaction);
       }
 
       setStepsUI({
@@ -286,6 +284,7 @@ export function ClaimTokenCardUI(props: {
           {account ? (
             <TransactionButton
               transactionCount={undefined}
+              checkBalance={false}
               isLoggedIn={true}
               isPending={approveAndClaim.isPending}
               onClick={async () => {

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_hooks/useTokenPriceData.ts

@@ -51,5 +51,6 @@ export function useTokenPriceData(params: {
           }
         : { type: "no-data" as const };
     },
+    refetchInterval: 5000,
   });
 }

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_hooks/useTokenTransfers.ts

@@ -49,5 +49,6 @@ export function useTokenTransfers(params: {
       const data = json.data as TokenTransfersData[];
       return data;
     },
+    refetchInterval: 5000,
   });
 }

apps/dashboard/src/components/buttons/MismatchButton.tsx

@@ -80,13 +80,20 @@ type MistmatchButtonProps = React.ComponentProps<typeof Button> & {
   txChainId: number;
   isLoggedIn: boolean;
   isPending: boolean;
+  checkBalance?: boolean;
 };
 
 export const MismatchButton = forwardRef<
   HTMLButtonElement,
   MistmatchButtonProps
 >((props, ref) => {
-  const { txChainId, isLoggedIn, isPending, ...buttonProps } = props;
+  const {
+    txChainId,
+    isLoggedIn,
+    isPending,
+    checkBalance = true,
+    ...buttonProps
+  } = props;
   const account = useActiveAccount();
   const wallet = useActiveWallet();
   const activeWalletChain = useActiveWalletChain();
@@ -150,7 +157,8 @@ export const MismatchButton = forwardRef<
   }
 
   const isBalanceRequired =
-    wallet.id === "smart" ? false : !GAS_FREE_CHAINS.includes(txChainId);
+    checkBalance &&
+    (wallet.id === "smart" ? false : !GAS_FREE_CHAINS.includes(txChainId));
 
   const notEnoughBalance =
     (txChainBalance.data?.value || 0n) === 0n && isBalanceRequired;

apps/dashboard/src/components/buttons/TransactionButton.tsx

@@ -29,6 +29,7 @@ type TransactionButtonProps = Omit<ButtonProps, "variant"> & {
   txChainID: number;
   variant?: "destructive" | "primary" | "default";
   isLoggedIn: boolean;
+  checkBalance?: boolean;
 };
 
 export const TransactionButton: React.FC<TransactionButtonProps> = ({
@@ -38,6 +39,7 @@ export const TransactionButton: React.FC<TransactionButtonProps> = ({
   txChainID,
   variant,
   isLoggedIn,
+  checkBalance,
   ...restButtonProps
 }) => {
   const activeWallet = useActiveWallet();
@@ -68,6 +70,7 @@ export const TransactionButton: React.FC<TransactionButtonProps> = ({
           txChainId={txChainID}
           {...restButtonProps}
           disabled={disabled}
+          checkBalance={checkBalance}
           className={cn("relative overflow-hidden", restButtonProps.className)}
           style={{
             paddingLeft: transactionCount