From 3da9ef60dbf249c6c9d9c7c78c1d727f89cd72ed Mon Sep 17 00:00:00 2001
From: cb-jake <95890768+cb-jake@users.noreply.github.com>
Date: Mon, 7 Oct 2024 15:48:12 -0600
Subject: [PATCH] Update the attribution property (#1420)

* Update the attribution property

* fix config page in sdk playground

* add validation helper
---
 .../src/components/SDKConfig/SDKConfig.tsx    | 226 +++++++-----------
 packages/wallet-sdk/src/CoinbaseWalletSDK.ts  |   2 +
 .../wallet-sdk/src/core/provider/interface.ts |  52 ++--
 .../wallet-sdk/src/createCoinbaseWalletSDK.ts |  12 +
 .../src/util/validatePreferences.test.ts      |  70 ++++++
 .../src/util/validatePreferences.ts           |  24 ++
 6 files changed, 209 insertions(+), 177 deletions(-)
 create mode 100644 packages/wallet-sdk/src/util/validatePreferences.test.ts
 create mode 100644 packages/wallet-sdk/src/util/validatePreferences.ts

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<Config>({});
+  const [config, setConfig] = React.useState<Preference>({
+    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<HTMLInputElement>) => {
+      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<HTMLInputElement>) => {
+      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 (
     <Card>
       <CardHeader>
@@ -131,104 +116,65 @@ export function SDKConfig() {
       <CardBody>
         <Flex justify="space-between" align="center">
           <Box>
-            <Heading size="md">Post Onboarding Action</Heading>
-            <Code mt={2}>postOnboardingAction</Code>
+            <Heading size="md">Attribution</Heading>
+            <Code mt={2}>attribution.auto</Code>
           </Box>
-          <Menu>
-            <MenuButton
-              colorScheme="telegram"
-              as={Button}
-              rightIcon={<ChevronDownIcon />}
-            >
-              {config?.postOnboardingAction}
-            </MenuButton>
-            <MenuList>
-              {postOnboardingActions.map((action) => (
-                <MenuItem
-                  color={"MenuText"}
-                  key={action}
-                  icon={
-                    action === config.postOnboardingAction ? (
-                      <CheckIcon />
-                    ) : null
-                  }
-                  onClick={() => handlePostOnboardingAction(action)}
-                >
-                  {action}
-                </MenuItem>
-              ))}
-            </MenuList>
-          </Menu>
-        </Flex>
-        {config.postOnboardingAction === "onramp" && (
-          <>
-            <Divider my={6} />
-            <Flex justify="space-between" align="center" mt={6}>
-              <Box>
-                <Heading size="md">Onramp Prefill Options</Heading>
-                <Text fontSize="sm" maxW="400px">
-                  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
-                </Text>
-                <Code mt={2}>onrampPrefillOptions</Code>
-              </Box>
-              <VStack>
-                <Input
-                  placeholder="Contract Address"
-                  onChange={handleOnrampPrefill("contractAddress")}
-                />
-                <Input
-                  placeholder="Amount (wei)"
-                  required
-                  onChange={handleOnrampPrefill("amount")}
-                />
-                <Input
-                  placeholder="Chain ID"
-                  required
-                  onChange={(e) =>
-                    handleOnrampPrefill("chainId")({
-                      target: { value: parseInt(e.target.value, 10) },
-                    })
-                  }
-                />
-              </VStack>
-            </Flex>
-          </>
-        )}
-        <Divider my={6} />
-        <Flex justify="space-between" align="center">
           <Box>
-            <Heading size="md">Attribution Data Suffix</Heading>
-            <Text fontSize="sm">
-              First 4 bytes of a unique string to identify your onchain activity
-            </Text>
             <FormControl mt={2}>
-              <FormLabel>
-                <Code>attributionDataSuffix</Code>
-              </FormLabel>
-              <Input
-                mt={2}
-                type="text"
-                placeholder="Enter String"
-                onChange={(e) => setDataSuffix(e.target.value)}
-                value={dataSuffix}
+              <Switch
+                defaultChecked={attributionAuto}
+                onChange={handleSetAttributionAuto}
               />
-              <FormHelperText>
-                Convert any string into a 4 byte data suffix
-              </FormHelperText>
             </FormControl>
-            <Code mt={2} colorScheme="telegram">
-              {fourByteHex}
-            </Code>
           </Box>
-          <VStack>
-            <Input
-              placeholder="Data Suffix (4 bytes)"
-              onChange={handleSetDataSuffix}
-            />
-          </VStack>
         </Flex>
+        {!attributionAuto && (
+          <Flex
+            justify="space-between"
+            align={{
+              base: "flex-start",
+              md: "center",
+            }}
+            my={2}
+            flexDirection={{
+              base: "column",
+              md: "row",
+            }}
+          >
+            <Box>
+              <Heading size="sm">Data Suffix</Heading>
+              <Text fontSize="sm">
+                First 4 bytes of a unique string to identify your onchain
+                activity
+              </Text>
+              <FormControl mt={2}>
+                <FormLabel>
+                  <Code>attribution.dataSuffix</Code>
+                </FormLabel>
+                <Input
+                  mt={2}
+                  type="text"
+                  placeholder="Enter String"
+                  onChange={(e) => setDataSuffix(e.target.value)}
+                  value={dataSuffix}
+                />
+                <FormHelperText>
+                  Convert any string into a 4 byte data suffix
+                </FormHelperText>
+              </FormControl>
+              <Code mt={2} colorScheme="telegram">
+                {fourByteHex}
+              </Code>
+            </Box>
+            <VStack>
+              <Input
+                mt={2}
+                placeholder="Data Suffix (4 bytes)"
+                onChange={handleSetDataSuffix}
+              />
+            </VStack>
+          </Flex>
+        )}
       </CardBody>
       <Button size="lg" colorScheme="telegram" onClick={startOnboarding}>
         Start Onboarding
diff --git a/packages/wallet-sdk/src/CoinbaseWalletSDK.ts b/packages/wallet-sdk/src/CoinbaseWalletSDK.ts
index 876917be54..b7fcb03046 100644
--- a/packages/wallet-sdk/src/CoinbaseWalletSDK.ts
+++ b/packages/wallet-sdk/src/CoinbaseWalletSDK.ts
@@ -8,6 +8,7 @@ import { ScopedLocalStorage } from ':core/storage/ScopedLocalStorage';
 import { getFavicon } from ':core/type/util';
 import { checkCrossOriginOpenerPolicy } from ':util/crossOriginOpenerPolicy';
 import { getCoinbaseInjectedProvider } from ':util/provider';
+import { validatePreferences } from ':util/validatePreferences';
 
 // for backwards compatibility
 type CoinbaseWalletSDKOptions = Partial<AppMetadata>;
@@ -32,6 +33,7 @@ export class CoinbaseWalletSDK {
   }
 
   public makeWeb3Provider(preference: Preference = { options: 'all' }): ProviderInterface {
+    validatePreferences(preference);
     const params = { metadata: this.metadata, preference };
     return getCoinbaseInjectedProvider(params) ?? new CoinbaseWalletProvider(params);
   }
diff --git a/packages/wallet-sdk/src/core/provider/interface.ts b/packages/wallet-sdk/src/core/provider/interface.ts
index da25c10207..5152c10039 100644
--- a/packages/wallet-sdk/src/core/provider/interface.ts
+++ b/packages/wallet-sdk/src/core/provider/interface.ts
@@ -42,13 +42,15 @@ export interface AppMetadata {
   appChainIds: number[];
 }
 
-type PostOnboardingAction = 'none' | 'onramp' | 'magicspend';
-
-type OnrampPrefillOptions = {
-  contractAddress?: string;
-  amount: string;
-  chainId: number;
-};
+export type Attribution =
+  | {
+      auto: boolean;
+      dataSuffix?: never;
+    }
+  | {
+      auto?: never;
+      dataSuffix: `0x${string}`;
+    };
 
 export type Preference = {
   /**
@@ -60,38 +62,14 @@ export type Preference = {
    */
   options: 'all' | 'smartWalletOnly' | 'eoaOnly';
   /**
-   * @param postOnboardingAction
-   * @type {PostOnboardingAction}
-   * @description This option only applies to Coinbase Smart Wallet. Displays CTAs to the user based on the preference of the app.
-   * These CTAs are part of prebuilt UI components that are available to the Coinbase
-   * Smart Wallet.
-   *
-   * Possible values:
-   * - `none`: No action is recommended post-onboarding. (Default experience)
-   * - `onramp`: Recommends initiating the onramp flow, allowing users to prefill their account with an optional asset.
-   * - `magicspend`: Suggests linking the users retail Coinbase account for seamless transactions.
-   */
-  postOnboardingAction?: PostOnboardingAction;
-  /**
-   * @param onrampPrefillOptions
-   * @type {OnrampPrefillOptions}
-   * @description This option only applies to Coinbase Smart Wallet. Requires `postOnboardingAction` to be set to `onramp`. When not configured,
-   * The onramp screen defaults to an asset selector with 0 as the initial amount.
-   *
-   * - Prefills the onramp flow with the specified asset, chain, and suggested amount, allowing users to prefill their account.
-   * - Ensure the asset and chain are supported by the onramp provider (e.g., Coinbase Pay - CBPay).
-   *
-   * See https://docs.cdp.coinbase.com/onramp/docs/layer2#available-assets for a list of supported assets and networks.
-   */
-  onrampPrefillOptions?: OnrampPrefillOptions;
-  /**
-   * @param attributionDataSuffix
-   * @type {Hex}
+   * @param attribution
+   * @type {Attribution}
    * @note Smart Wallet only
-   * @description This option only applies to Coinbase Smart Wallet. Data suffix to be appended to the initCode or executeBatch calldata
-   * Coinbase Smart Wallet expects a 4 byte hex string. If the suffix is not a 4 byte hex string, the Smart Wallet will not apply the data suffix.
+   * @description This option only applies to Coinbase Smart Wallet. When a valid data suffix is supplied, it is appended to the initCode and executeBatch calldata.
+   * Coinbase Smart Wallet expects a 16 byte hex string. If the data suffix is not a 16 byte hex string, the Smart Wallet will ignore the property. If auto is true,
+   * the Smart Wallet will generate a 16 byte hex string from the apps origin.
    */
-  attributionDataSuffix?: string;
+  attribution?: Attribution;
 } & Record<string, unknown>;
 
 export interface ConstructorOptions {
diff --git a/packages/wallet-sdk/src/createCoinbaseWalletSDK.ts b/packages/wallet-sdk/src/createCoinbaseWalletSDK.ts
index b2dd2abc3c..45f42ddea1 100644
--- a/packages/wallet-sdk/src/createCoinbaseWalletSDK.ts
+++ b/packages/wallet-sdk/src/createCoinbaseWalletSDK.ts
@@ -8,6 +8,7 @@ import {
 } from ':core/provider/interface';
 import { ScopedLocalStorage } from ':core/storage/ScopedLocalStorage';
 import { checkCrossOriginOpenerPolicy } from ':util/crossOriginOpenerPolicy';
+import { validatePreferences } from ':util/validatePreferences';
 
 export type CreateCoinbaseWalletSDKOptions = Partial<AppMetadata> & {
   preference?: Preference;
@@ -17,6 +18,11 @@ const DEFAULT_PREFERENCE: Preference = {
   options: 'all',
 };
 
+/**
+ * Create a Coinbase Wallet SDK instance.
+ * @param params - Options to create a Coinbase Wallet SDK instance.
+ * @returns A Coinbase Wallet SDK object.
+ */
 export function createCoinbaseWalletSDK(params: CreateCoinbaseWalletSDKOptions) {
   const versionStorage = new ScopedLocalStorage('CBWSDK');
   versionStorage.setItem('VERSION', LIB_VERSION);
@@ -31,6 +37,12 @@ export function createCoinbaseWalletSDK(params: CreateCoinbaseWalletSDKOptions)
     },
     preference: Object.assign(DEFAULT_PREFERENCE, params.preference ?? {}),
   };
+
+  /**
+   * Validate user supplied preferences. Throws if key/values are not valid.
+   */
+  validatePreferences(options.preference);
+
   let provider: ProviderInterface | null = null;
 
   return {
diff --git a/packages/wallet-sdk/src/util/validatePreferences.test.ts b/packages/wallet-sdk/src/util/validatePreferences.test.ts
new file mode 100644
index 0000000000..132fcaec39
--- /dev/null
+++ b/packages/wallet-sdk/src/util/validatePreferences.test.ts
@@ -0,0 +1,70 @@
+import { Preference } from '../core/provider/interface';
+import { validatePreferences } from './validatePreferences';
+
+describe('validatePreferences', () => {
+  it('should not throw an error if preference is undefined', () => {
+    expect(() => validatePreferences(undefined)).not.toThrow();
+  });
+
+  it('should not throw an error if preference is valid', () => {
+    const validPreference: Preference = {
+      options: 'all',
+      attribution: {
+        auto: true,
+      },
+    };
+    expect(() => validatePreferences(validPreference)).not.toThrow();
+  });
+
+  it('should throw an error if options is invalid', () => {
+    const invalidPreference: Preference = {
+      // @ts-expect-error invalid option
+      options: 'invalidOption',
+      attribution: {
+        auto: true,
+      },
+    };
+    expect(() => validatePreferences(invalidPreference)).toThrow('Invalid options: invalidOption');
+  });
+
+  it('should not throw an error if attribution is undefined', () => {
+    const validPreference: Preference = {
+      options: 'all',
+    };
+    expect(() => validatePreferences(validPreference)).not.toThrow();
+  });
+
+  it('should throw an error if both auto and dataSuffix are defined in attribution', () => {
+    const invalidPreference: Preference = {
+      options: 'all',
+      attribution: {
+        auto: true,
+        // @ts-expect-error passing two values to attribution
+        dataSuffix: 'suffix',
+      },
+    };
+    expect(() => validatePreferences(invalidPreference)).toThrow(
+      'Attribution cannot contain both auto and dataSuffix properties'
+    );
+  });
+
+  it('should not throw an error if only auto is defined in attribution', () => {
+    const validPreference: Preference = {
+      options: 'all',
+      attribution: {
+        auto: true,
+      },
+    };
+    expect(() => validatePreferences(validPreference)).not.toThrow();
+  });
+
+  it('should not throw an error if only dataSuffix is defined in attribution', () => {
+    const validPreference: Preference = {
+      options: 'all',
+      attribution: {
+        dataSuffix: '0xsuffix',
+      },
+    };
+    expect(() => validatePreferences(validPreference)).not.toThrow();
+  });
+});
diff --git a/packages/wallet-sdk/src/util/validatePreferences.ts b/packages/wallet-sdk/src/util/validatePreferences.ts
new file mode 100644
index 0000000000..1bf9a45be2
--- /dev/null
+++ b/packages/wallet-sdk/src/util/validatePreferences.ts
@@ -0,0 +1,24 @@
+import { Preference } from ':core/provider/interface';
+
+/**
+ * Validates user supplied preferences. Throws if keys are not valid.
+ * @param preference
+ */
+export function validatePreferences(preference?: Preference) {
+  if (!preference) {
+    return;
+  }
+
+  if (!['all', 'smartWalletOnly', 'eoaOnly'].includes(preference.options)) {
+    throw new Error(`Invalid options: ${preference.options}`);
+  }
+
+  if (preference.attribution) {
+    if (
+      preference.attribution.auto !== undefined &&
+      preference.attribution.dataSuffix !== undefined
+    ) {
+      throw new Error(`Attribution cannot contain both auto and dataSuffix properties`);
+    }
+  }
+}