update chain selectors

Author: MananTank

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

@@ -29,16 +29,18 @@ export function MultiNetworkSelector(props: {
   client: ThirdwebClient;
   chainIds?: number[];
 }) {
-  let { allChains, idToChain } = useAllChainsData();
-
-  if (props.chainIds && props.chainIds.length > 0) {
-    allChains = allChains.filter((chain) =>
-      props.chainIds?.includes(chain.chainId),
-    );
-  }
+  const { allChains, idToChain } = useAllChainsData();
 
   const options = useMemo(() => {
-    let sortedChains = allChains;
+    let chains = allChains.filter((chain) => chain.status !== "deprecated");
+
+    if (props.chainIds && props.chainIds.length > 0) {
+      chains = allChains.filter((chain) =>
+        props.chainIds?.includes(chain.chainId),
+      );
+    }
+
+    let sortedChains = chains;
 
     if (props.priorityChains) {
       const priorityChainsSet = new Set();
@@ -69,7 +71,13 @@ export function MultiNetworkSelector(props: {
         value: String(chain.chainId),
       };
     });
-  }, [allChains, props.priorityChains, idToChain, props.hideTestnets]);
+  }, [
+    allChains,
+    props.priorityChains,
+    idToChain,
+    props.hideTestnets,
+    props.chainIds,
+  ]);
 
   const searchFn = useCallback(
     (option: Option, searchValue: string) => {
@@ -155,16 +163,38 @@ export function SingleNetworkSelector(props: {
   disableDeprecated?: boolean;
   placeholder?: string;
   client: ThirdwebClient;
+  priorityChains?: number[];
 }) {
   const { allChains, idToChain } = useAllChainsData();
 
   const chainsToShow = useMemo(() => {
     let chains = allChains;
 
+    chains = chains.filter((chain) => chain.status !== "deprecated");
+
     if (props.disableTestnets) {
       chains = chains.filter((chain) => !chain.testnet);
     }
 
+    if (props.priorityChains) {
+      const priorityChainsSet = new Set();
+      for (const chainId of props.priorityChains || []) {
+        priorityChainsSet.add(chainId);
+      }
+
+      const priorityChains = (props.priorityChains || [])
+        .map((chainId) => {
+          return idToChain.get(chainId);
+        })
+        .filter((v) => !!v);
+
+      const otherChains = allChains.filter(
+        (chain) => !priorityChainsSet.has(chain.chainId),
+      );
+
+      chains = [...priorityChains, ...otherChains];
+    }
+
     if (props.chainIds) {
       const chainIdSet = new Set(props.chainIds);
       chains = chains.filter((chain) => chainIdSet.has(chain.chainId));
@@ -180,6 +210,8 @@ export function SingleNetworkSelector(props: {
     props.chainIds,
     props.disableTestnets,
     props.disableDeprecated,
+    props.priorityChains,
+    idToChain,
   ]);
 
   const options = useMemo(() => {

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

@@ -50,7 +50,7 @@ export function TokenDistributionFieldset(props: {
           title="Coin Distribution"
         >
           <div>
-            <div className="space-y-6 p-4 md:px-6 md:py-6">
+            <div className="p-4 md:px-6 md:py-6">
               <FormFieldSetup
                 errorMessage={form.formState.errors.supply?.message}
                 htmlFor={supplyId}
@@ -65,18 +65,6 @@ export function TokenDistributionFieldset(props: {
                   </span>
                 </div>
               </FormFieldSetup>
-
-              <div className="flex flex-col gap-3">
-                <TokenDistributionBarChart
-                  distributionFormValues={form.watch()}
-                />
-
-                {distributionError && (
-                  <div className="text-destructive-text text-sm">
-                    {distributionError}
-                  </div>
-                )}
-              </div>
             </div>
 
             <TokenSaleSection
@@ -86,6 +74,18 @@ export function TokenDistributionFieldset(props: {
             />
 
             <TokenAirdropSection client={props.client} form={form} />
+
+            <div className="flex flex-col gap-3 p-4 py-6 md:px-6 md:py-6 border-t border-dashed">
+              <TokenDistributionBarChart
+                distributionFormValues={form.watch()}
+              />
+
+              {distributionError && (
+                <div className="text-destructive-text text-sm">
+                  {distributionError}
+                </div>
+              )}
+            </div>
           </div>
         </StepCard>
       </form>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/token-info/token-info-fieldset.tsx

@@ -97,6 +97,18 @@ export function TokenInfoFieldset(props: {
               >
                 <ClientOnly ssr={<Skeleton className="h-10" />}>
                   <SingleNetworkSelector
+                    priorityChains={[
+                      8453, // base
+                      84532, // base sepolia
+                      1, // ethereum
+                      56, // bnb smart chain mainnet (bsc)
+                      42161, // arbitrum one mainnet
+                      43114, // avalanche mainnet
+                      146, // sonic
+                      137, // polygon
+                      80094, // berachain mainnet
+                      10, // optimism
+                    ]}
                     chainId={Number(form.watch("chain"))}
                     className="bg-background"
                     client={props.client}