lint

Author: gregfromstl

apps/playground-web/src/app/connect/pay/components/CodeGen.tsx

@@ -1,10 +1,10 @@
+import { THIRDWEB_CLIENT } from "@/lib/client";
+import { useQuery } from "@tanstack/react-query";
 import { Suspense, lazy } from "react";
+import { defineChain, getContract, toUnits } from "thirdweb";
+import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
 import { CodeLoading } from "../../../../components/code/code.client";
 import type { BridgeComponentsPlaygroundOptions } from "./types";
-import { useQuery } from "@tanstack/react-query";
-import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
-import { defineChain, getContract, toUnits } from "thirdweb";
-import { THIRDWEB_CLIENT } from "@/lib/client";
 
 const CodeClient = lazy(
   () => import("../../../../components/code/code.client"),
@@ -13,11 +13,36 @@ const CodeClient = lazy(
 export function CodeGen(props: {
   options: BridgeComponentsPlaygroundOptions;
 }) {
+  const { options } = props;
+  const { data: amount } = useQuery({
+    queryKey: [
+      "amount",
+      options.payOptions.buyTokenAmount,
+      options.payOptions.buyTokenChain,
+      options.payOptions.buyTokenAddress,
+    ],
+    queryFn: async () => {
+      if (!options.payOptions.buyTokenAmount) {
+        return;
+      }
+      const contract = getContract({
+        chain: defineChain(options.payOptions.buyTokenChain.id),
+        address: options.payOptions.buyTokenAddress,
+        client: THIRDWEB_CLIENT,
+      });
+      const token = await getCurrencyMetadata({
+        contract,
+      });
+
+      return toUnits(options.payOptions.buyTokenAmount, token.decimals);
+    },
+  });
+
   return (
     <div className="flex w-full grow flex-col">
       <Suspense fallback={<CodeLoading />}>
         <CodeClient
-          code={getCode(props.options)}
+          code={getCode(props.options, amount)}
           lang="tsx"
           loader={<CodeLoading />}
           className="grow"
@@ -27,7 +52,7 @@ export function CodeGen(props: {
   );
 }
 
-function getCode(options: BridgeComponentsPlaygroundOptions) {
+function getCode(options: BridgeComponentsPlaygroundOptions, amount?: bigint) {
   const imports = {
     react: ["PayEmbed"] as string[],
     thirdweb: [] as string[],
@@ -48,30 +73,6 @@ function getCode(options: BridgeComponentsPlaygroundOptions) {
     imports.chains.push("base");
   }
 
-  const { data: amount } = useQuery({
-    queryKey: [
-      "amount",
-      options.payOptions.buyTokenAmount,
-      options.payOptions.buyTokenChain,
-      options.payOptions.buyTokenAddress,
-    ],
-    queryFn: async () => {
-      if (!options.payOptions.buyTokenAmount) {
-        return;
-      }
-      const contract = getContract({
-        chain: defineChain(options.payOptions.buyTokenChain.id),
-        address: options.payOptions.buyTokenAddress,
-        client: THIRDWEB_CLIENT,
-      });
-      const token = await getCurrencyMetadata({
-        contract,
-      });
-
-      return toUnits(options.payOptions.buyTokenAmount, token.decimals);
-    },
-  });
-
   imports.wallets.push("createWallet");
 
   const componentName = (() => {
@@ -103,15 +104,16 @@ function Example() {
     <${componentName}
       client={client}
       chain={defineChain(${options.payOptions.buyTokenChain.id})}
-      amount={${amount}n}${options.payOptions.buyTokenAddress ? `\n\t  token="${options.payOptions.buyTokenAddress}"` : ""}${options.payOptions.sellerAddress ? `\n\t  seller="${options.payOptions.sellerAddress}"` : ""}${options.payOptions.title ? `\n\t  ${options.payOptions.widget === "checkout" ? "name" : "title"}="${options.payOptions.title}"` : ""}${options.payOptions.image ? `\n\t  image="${options.payOptions.image}"` : ""}${options.payOptions.description ? `\n\t  description="${options.payOptions.description}"` : ""}${options.payOptions.widget === "transaction"
-      ? `\n\t  transaction={claimTo({
+      amount={${amount}n}${options.payOptions.buyTokenAddress ? `\n\t  token="${options.payOptions.buyTokenAddress}"` : ""}${options.payOptions.sellerAddress ? `\n\t  seller="${options.payOptions.sellerAddress}"` : ""}${options.payOptions.title ? `\n\t  ${options.payOptions.widget === "checkout" ? "name" : "title"}="${options.payOptions.title}"` : ""}${options.payOptions.image ? `\n\t  image="${options.payOptions.image}"` : ""}${options.payOptions.description ? `\n\t  description="${options.payOptions.description}"` : ""}${
+        options.payOptions.widget === "transaction"
+          ? `\n\t  transaction={claimTo({
         contract: nftContract,
         quantity: 1n,
         tokenId: 2n,
         to: account?.address || "",
       })}`
-      : ""
-    }
+          : ""
+      }
     />
   );
 }`;

apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx

@@ -13,7 +13,7 @@ import {
 import Link from "next/link";
 import type React from "react";
 import { useState } from "react";
-import { type Address, isAddress } from "thirdweb";
+import type { Address } from "thirdweb";
 import { defineChain } from "thirdweb/chains";
 import { cn } from "../../../../lib/utils";
 import { CollapsibleSection } from "../../sign-in/components/CollapsibleSection";