feat: enable passing quickOptions

Author: gregfromstl

packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts

@@ -165,6 +165,7 @@ export type FundWalletOptions = {
       token: boolean;
       chain: boolean;
     };
+    quickOptions?: [number, number, number];
   };
 };
 

packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx

@@ -31,6 +31,7 @@ export type UIOptions =
       mode: "fund_wallet";
       destinationToken: Token;
       initialAmount?: string;
+      quickOptions?: [number, number, number];
     }
   | {
       mode: "direct_payment";
@@ -98,6 +99,11 @@ export interface BridgeOrchestratorProps {
    * Optional payment link ID for the payment
    */
   paymentLinkId?: string;
+
+  /**
+   * Quick buy amounts
+   */
+  quickOptions?: [number, number, number];
 }
 
 export function BridgeOrchestrator({
@@ -111,6 +117,7 @@ export function BridgeOrchestrator({
   connectLocale,
   purchaseData,
   paymentLinkId,
+  quickOptions,
 }: BridgeOrchestratorProps) {
   // Initialize adapters
   const adapters = useMemo(
@@ -206,6 +213,7 @@ export function BridgeOrchestrator({
           client={client}
           onContinue={handleRequirementsResolved}
           connectOptions={connectOptions}
+          quickOptions={quickOptions ?? [5, 10, 20]}
         />
       )}
 

packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx

@@ -49,6 +49,11 @@ export interface FundWalletProps {
    */
   onContinue: (amount: string, token: Token, receiverAddress: Address) => void;
 
+  /**
+   * Quick buy amounts
+   */
+  quickOptions?: [number, number, number];
+
   /**
    * Connect options for wallet connection
    */
@@ -61,6 +66,7 @@ export function FundWallet({
   receiverAddress,
   initialAmount = "",
   onContinue,
+  quickOptions,
   connectOptions,
 }: FundWalletProps) {
   const [amount, setAmount] = useState(initialAmount);
@@ -232,42 +238,21 @@ export function FundWallet({
             justifyContent: "space-evenly",
           }}
         >
-          <Button
-            variant="outline"
-            onClick={() => handleQuickAmount(5)}
-            style={{
-              padding: `${spacing.sm} ${spacing.md}`,
-              fontSize: fontSize.sm,
-              flex: 1,
-              backgroundColor: theme.colors.tertiaryBg,
-            }}
-          >
-            $5
-          </Button>
-          <Button
-            variant="outline"
-            onClick={() => handleQuickAmount(10)}
-            style={{
-              padding: `${spacing.sm} ${spacing.md}`,
-              fontSize: fontSize.sm,
-              flex: 1,
-              backgroundColor: theme.colors.tertiaryBg,
-            }}
-          >
-            $10
-          </Button>
-          <Button
-            variant="outline"
-            onClick={() => handleQuickAmount(20)}
-            style={{
-              padding: `${spacing.sm} ${spacing.md}`,
-              fontSize: fontSize.sm,
-              flex: 1,
-              backgroundColor: theme.colors.tertiaryBg,
-            }}
-          >
-            $20
-          </Button>
+          {quickOptions?.map((amount) => (
+            <Button
+              variant="outline"
+              onClick={() => handleQuickAmount(Number(amount))}
+              key={amount}
+              style={{
+                padding: `${spacing.sm} ${spacing.md}`,
+                fontSize: fontSize.sm,
+                flex: 1,
+                backgroundColor: theme.colors.tertiaryBg,
+              }}
+            >
+              ${amount}
+            </Button>
+          ))}
         </Container>
 
         <Spacer y="md" />

packages/thirdweb/src/react/web/ui/PayEmbed.tsx

@@ -17,6 +17,7 @@ import type { Theme } from "../../core/design-system/index.js";
 import type { SiweAuthOptions } from "../../core/hooks/auth/useSiweAuth.js";
 import type {
   ConnectButton_connectModalOptions,
+  FundWalletOptions,
   PayUIOptions,
 } from "../../core/hooks/connection/ConnectButtonProps.js";
 import type { SupportedTokens } from "../../core/utils/defaultTokens.js";
@@ -467,6 +468,9 @@ export function PayEmbed(props: PayEmbedProps) {
         connectLocale={localeQuery.data}
         purchaseData={props.payOptions?.purchaseData}
         paymentLinkId={props.paymentLinkId}
+        quickOptions={
+          (props.payOptions as FundWalletOptions)?.prefillBuy?.quickOptions
+        }
       />
     );
   }

packages/thirdweb/src/stories/Bridge/BridgeOrchestrator.stories.tsx

@@ -72,6 +72,10 @@ const meta = {
       options: ["light", "dark"],
       description: "Theme for the component",
     },
+    quickOptions: {
+      control: "object",
+      description: "Quick buy options",
+    },
     onComplete: { action: "flow completed" },
     onError: { action: "error occurred" },
     onCancel: { action: "flow cancelled" },
@@ -224,3 +228,15 @@ export const TransactionLight: Story = {
     },
   },
 };
+
+export const CustomQuickOptions: Story = {
+  args: {
+    theme: "dark",
+    uiOptions: {
+      mode: "fund_wallet",
+      destinationToken: ETH,
+      initialAmount: "1",
+    },
+    quickOptions: [1, 2, 3],
+  },
+};