Dashboard: Add token selector in asset creation wizard (#7132)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the token sale functionality within the application. It introduces new properties, refines existing structures, and improves the token selection process to accommodate native tokens and better handle token sales.

### Detailed summary
- Added `saleTokenAddress` to the form validation schema.
- Updated `CreateTokenAssetPage` to handle native token address logic.
- Changed `TokenSelector` to support selected tokens and improved token address handling.
- Enhanced `TokenSaleSection` to include a currency field for token sales.
- Refined state management in `PaymentLinkForm` for better token handling.
- Modified `TokenInfoFieldset` to trigger updates on chain changes.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

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

@@ -35,14 +35,28 @@ function Variant(props: {
   label: string;
   selectedChainId?: number;
 }) {
-  const [tokenAddress, setTokenAddress] = useState<string>("");
+  const [token, setToken] = useState<
+    | {
+        address: string;
+        chainId: number;
+      }
+    | undefined
+  >(undefined);
+
   return (
     <BadgeContainer label={props.label}>
       <TokenSelector
-        tokenAddress={tokenAddress}
+        addNativeTokenIfMissing={false}
+        showCheck={false}
+        selectedToken={token}
         chainId={props.selectedChainId}
         client={storybookThirdwebClient}
-        onChange={setTokenAddress}
+        onChange={(v) => {
+          setToken({
+            address: v.address,
+            chainId: v.chainId,
+          });
+        }}
       />
     </BadgeContainer>
   );

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

@@ -1,47 +1,103 @@
 import { useCallback, useMemo } from "react";
-import type { ThirdwebClient } from "thirdweb";
+import {
+  NATIVE_TOKEN_ADDRESS,
+  type ThirdwebClient,
+  getAddress,
+} from "thirdweb";
 import { shortenAddress } from "thirdweb/utils";
+import { useAllChainsData } from "../../../hooks/chains/allChains";
 import { useTokensData } from "../../../hooks/tokens/tokens";
 import { replaceIpfsUrl } from "../../../lib/sdk";
 import { fallbackChainIcon } from "../../../utils/chain-icons";
+import type { TokenMetadata } from "../../api/universal-bridge/tokens";
 import { cn } from "../../lib/utils";
 import { Badge } from "../ui/badge";
 import { Img } from "./Img";
 import { SelectWithSearch } from "./select-with-search";
 
 type Option = { label: string; value: string };
 
+const checksummedNativeTokenAddress = getAddress(NATIVE_TOKEN_ADDRESS);
+
 export function TokenSelector(props: {
-  tokenAddress: string | undefined;
-  onChange: (tokenAddress: string) => void;
+  selectedToken: { chainId: number; address: string } | undefined;
+  onChange: (token: TokenMetadata) => void;
   className?: string;
   popoverContentClassName?: string;
   chainId?: number;
   side?: "left" | "right" | "top" | "bottom";
-  disableChainId?: boolean;
+  disableAddress?: boolean;
   align?: "center" | "start" | "end";
   placeholder?: string;
   client: ThirdwebClient;
   disabled?: boolean;
   enabled?: boolean;
+  showCheck: boolean;
+  addNativeTokenIfMissing: boolean;
 }) {
-  const { tokens, isFetching } = useTokensData({
+  const tokensQuery = useTokensData({
     chainId: props.chainId,
     enabled: props.enabled,
   });
 
+  const { idToChain } = useAllChainsData();
+
+  const tokens = useMemo(() => {
+    if (!tokensQuery.data) {
+      return [];
+    }
+
+    if (props.addNativeTokenIfMissing) {
+      const hasNativeToken = tokensQuery.data.some(
+        (token) => token.address === checksummedNativeTokenAddress,
+      );
+
+      if (!hasNativeToken && props.chainId) {
+        return [
+          {
+            name:
+              idToChain.get(props.chainId)?.nativeCurrency.name ??
+              "Native Token",
+            symbol:
+              idToChain.get(props.chainId)?.nativeCurrency.symbol ?? "ETH",
+            decimals: 18,
+            chainId: props.chainId,
+            address: checksummedNativeTokenAddress,
+          } satisfies TokenMetadata,
+          ...tokensQuery.data,
+        ];
+      }
+    }
+    return tokensQuery.data;
+  }, [
+    tokensQuery.data,
+    props.chainId,
+    props.addNativeTokenIfMissing,
+    idToChain,
+  ]);
+
+  const addressChainToToken = useMemo(() => {
+    const value = new Map<string, TokenMetadata>();
+    for (const token of tokens) {
+      value.set(`${token.chainId}:${token.address}`, token);
+    }
+    return value;
+  }, [tokens]);
+
   const options = useMemo(() => {
-    return tokens.allTokens.map((token) => {
-      return {
-        label: token.symbol,
-        value: `${token.chainId}:${token.address}`,
-      };
-    });
-  }, [tokens.allTokens]);
+    return (
+      tokens.map((token) => {
+        return {
+          label: token.symbol,
+          value: `${token.chainId}:${token.address}`,
+        };
+      }) || []
+    );
+  }, [tokens]);
 
   const searchFn = useCallback(
     (option: Option, searchValue: string) => {
-      const token = tokens.addressChainToToken.get(option.value);
+      const token = addressChainToToken.get(option.value);
       if (!token) {
         return false;
       }
@@ -55,12 +111,12 @@ export function TokenSelector(props: {
         token.address.toLowerCase().includes(searchValue.toLowerCase())
       );
     },
-    [tokens],
+    [addressChainToToken],
   );
 
   const renderOption = useCallback(
     (option: Option) => {
-      const token = tokens.addressChainToToken.get(option.value);
+      const token = addressChainToToken.get(option.value);
       if (!token) {
         return option.label;
       }
@@ -87,36 +143,46 @@ export function TokenSelector(props: {
             {token.symbol}
           </span>
 
-          {!props.disableChainId && (
-            <Badge variant="outline" className="gap-2 max-sm:hidden">
+          {!props.disableAddress && (
+            <Badge variant="outline" className="gap-2 py-1 max-sm:hidden">
               <span className="text-muted-foreground">Address</span>
               {shortenAddress(token.address, 4)}
             </Badge>
           )}
         </div>
       );
     },
-    [tokens, props.disableChainId, props.client],
+    [addressChainToToken, props.disableAddress, props.client],
   );
 
+  const selectedValue = props.selectedToken
+    ? `${props.selectedToken.chainId}:${props.selectedToken.address}`
+    : undefined;
+
   return (
     <SelectWithSearch
       searchPlaceholder="Search by name or symbol"
-      value={props.tokenAddress}
+      value={selectedValue}
       options={options}
       onValueChange={(tokenAddress) => {
-        props.onChange(tokenAddress);
+        const token = addressChainToToken.get(tokenAddress);
+        if (!token) {
+          return;
+        }
+        props.onChange(token);
       }}
       closeOnSelect={true}
-      showCheck={false}
+      showCheck={props.showCheck}
       placeholder={
-        isFetching ? "Loading Tokens..." : props.placeholder || "Select Token"
+        tokensQuery.isPending
+          ? "Loading Tokens..."
+          : props.placeholder || "Select Token"
       }
       overrideSearchFn={searchFn}
       renderOption={renderOption}
       className={props.className}
       popoverContentClassName={props.popoverContentClassName}
-      disabled={isFetching || props.disabled}
+      disabled={tokensQuery.isPending || props.disabled}
       side={props.side}
       align={props.align}
     />

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/create-token-page-impl.tsx

@@ -10,7 +10,9 @@ import { defineDashboardChain } from "lib/defineDashboardChain";
 import { useRef } from "react";
 import { toast } from "sonner";
 import {
+  NATIVE_TOKEN_ADDRESS,
   type ThirdwebClient,
+  getAddress,
   getContract,
   sendAndConfirmTransaction,
   toUnits,
@@ -286,6 +288,11 @@ export function CreateTokenAssetPage(props: {
           formValues.saleEnabled && salePercent > 0
             ? formValues.salePrice
             : "0",
+        currencyAddress:
+          getAddress(formValues.saleTokenAddress) ===
+          getAddress(NATIVE_TOKEN_ADDRESS)
+            ? undefined
+            : formValues.saleTokenAddress,
         startTime: new Date(),
         metadata: {
           name:

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/create-token-page.client.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import {} from "@/components/blocks/multi-step-status/multi-step-status";
-import {} from "@/components/ui/dialog";
 import { zodResolver } from "@hookform/resolvers/zod";
-import {} from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import type { ThirdwebClient } from "thirdweb";
+import {
+  NATIVE_TOKEN_ADDRESS,
+  type ThirdwebClient,
+  getAddress,
+} from "thirdweb";
 import { TokenDistributionFieldset } from "./distribution/token-distribution";
 import {
   type CreateAssetFormValues,
@@ -27,6 +28,8 @@ export type CreateTokenFunctions = {
   airdropTokens: (values: CreateAssetFormValues) => Promise<void>;
 };
 
+const checksummedNativeTokenAddress = getAddress(NATIVE_TOKEN_ADDRESS);
+
 export function CreateTokenAssetPageUI(props: {
   accountAddress: string;
   client: ThirdwebClient;
@@ -64,6 +67,7 @@ export function CreateTokenAssetPageUI(props: {
     values: {
       // sale fieldset
       saleAllocationPercentage: "0",
+      saleTokenAddress: checksummedNativeTokenAddress,
       salePrice: "0.1",
       supply: "1000000",
       saleEnabled: false,
@@ -78,6 +82,13 @@ export function CreateTokenAssetPageUI(props: {
     <div>
       {step === "token-info" && (
         <TokenInfoFieldset
+          onChainUpdated={() => {
+            // if the chain is updated, set the sale token address to the native token address
+            tokenDistributionForm.setValue(
+              "saleTokenAddress",
+              checksummedNativeTokenAddress,
+            );
+          }}
           client={props.client}
           form={tokenInfoForm}
           onNext={() => {
@@ -88,6 +99,7 @@ export function CreateTokenAssetPageUI(props: {
 
       {step === "distribution" && (
         <TokenDistributionFieldset
+          client={props.client}
           form={tokenDistributionForm}
           accountAddress={props.accountAddress}
           chainId={tokenInfoForm.watch("chain")}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/distribution/token-distribution.tsx

@@ -6,7 +6,7 @@ import {
   type Segment,
 } from "@/components/blocks/distribution-chart";
 import { Input } from "@/components/ui/input";
-import {} from "lucide-react";
+import type { ThirdwebClient } from "thirdweb";
 import { Form } from "../../../../../../../../@/components/ui/form";
 import { StepCard } from "../create-token-card";
 import type {
@@ -22,6 +22,7 @@ export function TokenDistributionFieldset(props: {
   onPrevious: () => void;
   form: TokenDistributionForm;
   chainId: string;
+  client: ThirdwebClient;
 }) {
   const { form } = props;
 
@@ -60,7 +61,11 @@ export function TokenDistributionFieldset(props: {
             </div>
 
             <TokenAirdropSection form={form} />
-            <TokenSaleSection form={form} chainId={props.chainId} />
+            <TokenSaleSection
+              form={form}
+              chainId={props.chainId}
+              client={props.client}
+            />
           </div>
         </StepCard>
       </form>