[Dashboard] Fix asset page link and improve token claim UX (#7193)

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

@@ -122,8 +122,8 @@ export function ClaimTokenCardUI(props: {
       }
 
       async function sendAndConfirm() {
-        const receipt = await sendClaimTx.mutateAsync(transaction);
-        await waitForReceipt(receipt);
+        const result = await sendClaimTx.mutateAsync(transaction);
+        await waitForReceipt(result);
       }
 
       setStepsUI({
@@ -154,12 +154,7 @@ export function ClaimTokenCardUI(props: {
   });
 
   const claimParamsQuery = useQuery({
-    queryKey: [
-      "claim-params",
-      props.contract.address,
-      quantity,
-      account?.address,
-    ],
+    queryKey: ["claim-params", props.contract.address, account?.address],
     queryFn: async () => {
       const defaultPricing = {
         pricePerTokenWei: props.claimCondition.pricePerToken,
@@ -180,7 +175,7 @@ export function ClaimTokenCardUI(props: {
       const claimParams = await getClaimParams({
         contract: props.contract,
         to: account.address,
-        quantity: BigInt(quantity),
+        quantity: 1n, // not relevant
         type: "erc20",
         tokenDecimals: props.decimals,
         from: account.address,
@@ -204,12 +199,6 @@ export function ClaimTokenCardUI(props: {
 
   const claimParamsData = claimParamsQuery.data;
 
-  const totalPriceInTokens = claimParamsData
-    ? Number(
-        toTokens(claimParamsData.pricePerTokenWei, claimParamsData.decimals),
-      ) * quantity
-    : undefined;
-
   return (
     <div className="rounded-xl border bg-card ">
       <div className="border-b px-4 py-5 lg:px-5">
@@ -269,8 +258,15 @@ export function ClaimTokenCardUI(props: {
                 <SkeletonContainer
                   skeletonData={"0.00 ETH"}
                   loadedData={
-                    totalPriceInTokens && claimParamsData
-                      ? `${totalPriceInTokens} ${claimParamsData.symbol}`
+                    claimParamsData
+                      ? `${
+                          Number(
+                            toTokens(
+                              claimParamsData.pricePerTokenWei,
+                              claimParamsData.decimals,
+                            ),
+                          ) * quantity
+                        } ${claimParamsData.symbol}`
                       : undefined
                   }
                   render={(v) => {
@@ -286,6 +282,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