diff --git a/examples/testapp/src/components/SDKConfig/SDKConfig.tsx b/examples/testapp/src/components/SDKConfig/SDKConfig.tsx index 3cd3ac1380..f93d6361bf 100644 --- a/examples/testapp/src/components/SDKConfig/SDKConfig.tsx +++ b/examples/testapp/src/components/SDKConfig/SDKConfig.tsx @@ -14,43 +14,29 @@ import { FormHelperText, Heading, Input, - Menu, - MenuButton, - MenuItem, - MenuList, Text, VStack, - Divider, + Switch, } from "@chakra-ui/react"; import React, { useCallback, useMemo, useState } from "react"; import { createCoinbaseWalletSDK } from "@coinbase/wallet-sdk"; import { useCBWSDK } from "../../context/CBWSDKReactContextProvider"; -import { - Preference, -} from "@coinbase/wallet-sdk/dist/core/provider/interface"; -import { CheckIcon, ChevronDownIcon } from "@chakra-ui/icons"; +import { Preference } from "@coinbase/wallet-sdk/dist/core/provider/interface"; import { keccak256, slice, toHex } from "viem"; import { CreateCoinbaseWalletSDKOptions } from "@coinbase/wallet-sdk/dist/createCoinbaseWalletSDK"; -type PostOnboardingAction = "none" | "onramp" | "magicspend"; - -const postOnboardingActions = ["none", "onramp", "magicspend"] as const; - -type OnrampPrefillOptions = { - contractAddress?: string; - amount: string; - chainId: number; -}; - -type Config = { - postOnboardingAction?: PostOnboardingAction; - onrampPrefillOptions?: OnrampPrefillOptions; - attributionDataSuffix?: string; -}; +function is0xString(value: string): value is `0x${string}` { + return value.startsWith("0x"); +} export function SDKConfig() { const { option, scwUrl } = useCBWSDK(); - const [config, setConfig] = React.useState({}); + const [config, setConfig] = React.useState({ + options: option, + attribution: { + auto: true, + }, + }); const options: CreateCoinbaseWalletSDKOptions = useMemo(() => { const preference: Preference = { @@ -72,45 +58,44 @@ export function SDKConfig() { await provider.request({ method: "eth_requestAccounts" }); }, [options]); - const handlePostOnboardingAction = useCallback( - (action: PostOnboardingAction) => { - const config_ = { ...config, postOnboardingAction: action }; - if (action !== "onramp") { - delete config_.onrampPrefillOptions; - } + const handleSetAttributionAuto = useCallback( + (event: React.ChangeEvent) => { + const config_: Preference = { + ...config, + attribution: { + auto: event.target.checked, + }, + }; setConfig(config_); }, [config] ); - const handleOnrampPrefill = useCallback( - (key: "contractAddress" | "amount" | "chainId") => (e) => { - const value = e.target.value; - setConfig((prev) => ({ - ...prev, - onrampPrefillOptions: { - ...prev.onrampPrefillOptions, - [key]: value, - }, - })); + const handleSetDataSuffix = useCallback( + (event: React.ChangeEvent) => { + const value = event.target.value; + if (is0xString(value)) { + setConfig((prev) => ({ + ...prev, + attribution: { + dataSuffix: value, + }, + })); + } }, [] ); - const handleSetDataSuffix = useCallback((e) => { - const value = e.target.value; - setConfig((prev) => ({ - ...prev, - attributionDataSuffix: value, - })); - }, []); - const [dataSuffix, setDataSuffix] = useState("Coinbase Wallet"); const fourByteHex = useMemo( () => slice(keccak256(toHex(dataSuffix)), 0, 4), [dataSuffix] ); + const attributionAuto = useMemo(() => { + return "auto" in config.attribution && config.attribution?.auto; + }, [config.attribution]); + return ( @@ -131,104 +116,65 @@ export function SDKConfig() { - Post Onboarding Action - postOnboardingAction + Attribution + attribution.auto - - } - > - {config?.postOnboardingAction} - - - {postOnboardingActions.map((action) => ( - - ) : null - } - onClick={() => handlePostOnboardingAction(action)} - > - {action} - - ))} - - - - {config.postOnboardingAction === "onramp" && ( - <> - - - - Onramp Prefill Options - - Optional: Only works when postOnboardingAction is set to - onramp. Amount and chainId are required. If contract address - is omitted, onramp assumes native asset for that chain - - onrampPrefillOptions - - - - - - handleOnrampPrefill("chainId")({ - target: { value: parseInt(e.target.value, 10) }, - }) - } - /> - - - - )} - - - Attribution Data Suffix - - First 4 bytes of a unique string to identify your onchain activity - - - attributionDataSuffix - - setDataSuffix(e.target.value)} - value={dataSuffix} + - - Convert any string into a 4 byte data suffix - - - {fourByteHex} - - - - + {!attributionAuto && ( + + + Data Suffix + + First 4 bytes of a unique string to identify your onchain + activity + + + + attribution.dataSuffix + + setDataSuffix(e.target.value)} + value={dataSuffix} + /> + + Convert any string into a 4 byte data suffix + + + + {fourByteHex} + + + + + + + )}