fix token fetching

Author: gregfromstl

apps/dashboard/src/@/components/blocks/TokenSelector.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from "react";
 import type { ThirdwebClient } from "thirdweb";
+import { shortenAddress } from "thirdweb/utils";
 import { useTokensData } from "../../../hooks/tokens/tokens";
 import { replaceIpfsUrl } from "../../../lib/sdk";
 import { fallbackChainIcon } from "../../../utils/chain-icons";
@@ -89,8 +90,8 @@ export function TokenSelector(props: {
 
           {!props.disableChainId && (
             <Badge variant="outline" className="gap-2 max-sm:hidden">
-              <span className="text-muted-foreground">Chain ID</span>
-              {token.chainId}
+              <span className="text-muted-foreground">Address</span>
+              {shortenAddress(token.address, 4)}
             </Badge>
           )}
         </div>

apps/dashboard/src/@/components/blocks/select-with-search.tsx

@@ -128,7 +128,7 @@ export const SelectWithSearch = React.forwardRef<
               <span
                 className={cn(
                   "truncate text-muted-foreground text-sm",
-                  selectedOption && "text-foreground",
+                  selectedOption && "w-full text-foreground",
                 )}
               >
                 {renderOption && selectedOption

apps/dashboard/src/app/checkout/components/client/CheckoutLinkForm.client.tsx

@@ -8,7 +8,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { CreditCardIcon } from "lucide-react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { toast } from "sonner";
 import { type ThirdwebClient, defineChain, getContract } from "thirdweb";
 import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
@@ -23,6 +23,10 @@ export function CheckoutLinkForm() {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string>();
 
+  const isFormComplete = useMemo(() => {
+    return chainId && recipientAddress && tokenAddressWithChain && amount;
+  }, [chainId, recipientAddress, tokenAddressWithChain, amount]);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError(undefined);
@@ -141,6 +145,7 @@ export function CheckoutLinkForm() {
               type="button"
               variant="outline"
               className="flex-1"
+              disabled={isLoading || !isFormComplete}
               onClick={async () => {
                 if (
                   !chainId ||
@@ -169,7 +174,11 @@ export function CheckoutLinkForm() {
             >
               Preview
             </Button>
-            <Button type="submit" className="flex-1" disabled={isLoading}>
+            <Button
+              type="submit"
+              className="flex-1"
+              disabled={isLoading || !isFormComplete}
+            >
               {isLoading ? "Creating..." : "Create"}
             </Button>
           </div>

apps/dashboard/src/hooks/tokens/tokens.ts

@@ -94,11 +94,6 @@ export function useTokensData({
 
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
-    // already set
-    if (tokensStore.getValue().length > 0) {
-      return;
-    }
-
     if (!tokensQuery.data) {
       return;
     }