Enable prefilled token experiment on Add Tokens

immutable · Dec 5, 2024 · 34f72cd · 34f72cd
1 parent d164641
commit 34f72cd
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 5 deletions.
diff --git a/packages/checkout/sdk/src/widgets/definitions/parameters/addTokens.ts b/packages/checkout/sdk/src/widgets/definitions/parameters/addTokens.ts
@@ -25,4 +25,7 @@ export type AddTokensWidgetParams = {
 
   /** The destination wallet provider, when requiring to lock destination of funds */
   toProvider?: Web3Provider;
+
+  /** Flags to control experiments within the widget */
+  experiments?: Record<string, string>;
 };
diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/AddTokensRoot.tsx b/packages/checkout/widgets-lib/src/widgets/add-tokens/AddTokensRoot.tsx
@@ -93,6 +93,7 @@ export class AddTokens extends Base<WidgetType.ADD_TOKENS> {
                     showSwapOption={this.parameters.showSwapOption}
                     showOnrampOption={this.parameters.showOnrampOption}
                     showBackButton={this.parameters.showBackButton}
+                    experiments={this.parameters.experiments}
                   />
                 </Suspense>
               </ProvidersContextProvider>

diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/AddTokensWidget.tsx b/packages/checkout/widgets-lib/src/widgets/add-tokens/AddTokensWidget.tsx
@@ -40,7 +40,7 @@ import { getRemoteImage } from '../../lib/utils';
 import { isValidAddress } from '../../lib/validations/widgetValidators';
 import { amountInputValidation } from '../../lib/validations/amountInputValidations';
 import { useError } from './hooks/useError';
-import { AddTokensErrorTypes } from './types';
+import { AddTokensErrorTypes, AddTokensExperiments } from './types';
 import { ServiceUnavailableErrorView } from '../../views/error/ServiceUnavailableErrorView';
 
 export type AddTokensWidgetInputs = Omit<AddTokensWidgetParams, 'toProvider'> & {
@@ -51,10 +51,11 @@ export default function AddTokensWidget({
   showOnrampOption = true,
   showSwapOption = true,
   showBridgeOption = true,
-  toTokenAddress,
+  toTokenAddress: toTokenAddressParameter,
   toAmount,
   showBackButton,
   config,
+  experiments,
 }: AddTokensWidgetInputs) {
   const fetchingBalances = useRef(false);
   const { base: { colorMode } } = useTheme();
@@ -104,8 +105,29 @@ export default function AddTokensWidget({
         id: uuidv4(),
       },
     });
+
+    if (experiments) {
+      addTokensDispatch({
+        payload: {
+          type: AddTokensActions.SET_EXPERIMENTS,
+          experiments,
+        },
+      });
+    }
   }, []);
 
+  const toTokenAddress = useMemo(() => {
+    if (toTokenAddressParameter) {
+      return toTokenAddressParameter;
+    }
+
+    if (experiments?.[AddTokensExperiments.PRESELECTED_TOKEN]) {
+      return experiments[AddTokensExperiments.PRESELECTED_TOKEN];
+    }
+
+    return undefined;
+  }, [experiments, toTokenAddressParameter]);
+
   useEffect(() => {
     if (config.environment !== Environment.PRODUCTION) {
       showErrorHandover(AddTokensErrorTypes.ENVIRONMENT_ERROR, { contextId: id });

diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/context/AddTokensContext.tsx b/packages/checkout/widgets-lib/src/widgets/add-tokens/context/AddTokensContext.tsx
@@ -16,6 +16,7 @@ export interface AddTokensState {
   selectedToken: TokenInfo | undefined;
   selectedAmount: string;
   isSwapAvailable: boolean | undefined;
+  experiments: Record<string, string> | undefined;
 }
 
 export const initialAddTokensState: AddTokensState = {
@@ -30,6 +31,7 @@ export const initialAddTokensState: AddTokensState = {
   selectedToken: undefined,
   selectedAmount: '',
   isSwapAvailable: undefined,
+  experiments: undefined,
 };
 
 export interface AddTokensContextState {
@@ -52,7 +54,8 @@ type ActionPayload =
   | SetSelectedRouteData
   | SetSelectedToken
   | SetSelectedAmount
-  | SetIsSwapAvailable;
+  | SetIsSwapAvailable
+  | SetExperiments;
 
 export enum AddTokensActions {
   SET_ID = 'SET_ID',
@@ -66,6 +69,7 @@ export enum AddTokensActions {
   SET_SELECTED_TOKEN = 'SET_SELECTED_TOKEN',
   SET_SELECTED_AMOUNT = 'SET_SELECTED_AMOUNT',
   SET_IS_SWAP_AVAILABLE = 'SET_IS_SWAP_AVAILABLE',
+  SET_EXPERIMENTS = 'SET_EXPERIMENTS',
 }
 
 export interface SetId {
@@ -123,6 +127,11 @@ export interface SetIsSwapAvailable {
   isSwapAvailable: boolean;
 }
 
+export interface SetExperiments {
+  type: AddTokensActions.SET_EXPERIMENTS;
+  experiments: Record<string, string>;
+}
+
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const AddTokensContext = createContext<AddTokensContextState>({
   addTokensState: initialAddTokensState,
@@ -193,6 +202,11 @@ export const addTokensReducer: Reducer<AddTokensState, AddTokensAction> = (
         ...state,
         isSwapAvailable: action.payload.isSwapAvailable,
       };
+    case AddTokensActions.SET_EXPERIMENTS:
+      return {
+        ...state,
+        experiments: action.payload.experiments,
+      };
     default:
       return state;
   }

diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/types.ts b/packages/checkout/widgets-lib/src/widgets/add-tokens/types.ts
@@ -29,3 +29,7 @@ export enum AddTokensErrorTypes {
   WALLET_POPUP_BLOCKED = 'WALLET_POPUP_BLOCKED',
   ENVIRONMENT_ERROR = 'ENVIRONMENT_ERROR',
 }
+
+export enum AddTokensExperiments {
+  PRESELECTED_TOKEN = 'add-tokens-preselected-token',
+}
diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/views/AddTokens.tsx b/packages/checkout/widgets-lib/src/widgets/add-tokens/views/AddTokens.tsx
@@ -47,7 +47,7 @@ import {
 import type { StrongCheckoutWidgetsConfig } from '../../../lib/withDefaultWidgetConfig';
 import { useRoutes } from '../../../lib/squid/hooks/useRoutes';
 import { AddTokensWidgetViews } from '../../../context/view-context/AddTokensViewContextTypes';
-import { AddTokensErrorTypes } from '../types';
+import { AddTokensErrorTypes, AddTokensExperiments } from '../types';
 import { SelectedRouteOption } from '../components/SelectedRouteOption';
 import { SelectedWallet } from '../components/SelectedWallet';
 import { DeliverToWalletDrawer } from '../../../components/WalletDrawer/DeliverToWalletDrawer';
@@ -118,6 +118,7 @@ export function AddTokens({
     selectedRouteData,
     selectedToken,
     isSwapAvailable,
+    experiments,
   } = addTokensState;
 
   const {
@@ -580,6 +581,20 @@ export function AddTokens({
     return undefined;
   };
 
+  useEffect(() => {
+    if (!id || !experiments) return;
+
+    track({
+      userJourney: UserJourney.ADD_TOKENS,
+      screen: 'Experiments',
+      action: 'Started',
+      extras: {
+        contextId: id,
+        preselectedToken: experiments[AddTokensExperiments.PRESELECTED_TOKEN] || 'none',
+      },
+    });
+  }, [id, experiments]);
+
   return (
     <SimpleLayout
       containerSx={{ bg: 'transparent' }}

diff --git a/packages/checkout/widgets-sample-app/src/components/ui/add-tokens/addTokens.tsx b/packages/checkout/widgets-sample-app/src/components/ui/add-tokens/addTokens.tsx
@@ -17,6 +17,7 @@ import { passport } from "./passport";
 import { Web3Provider } from "@ethersproject/providers";
 
 const ADD_TOKENS_TARGET_ID = "add-tokens-widget-target";
+const FLAG_PRESELECTED_TOKEN = 'add-tokens-preselected-token';
 
 function AddTokensUI() {
   const checkout = useMemo(
@@ -51,6 +52,7 @@ function AddTokensUI() {
 
   const [toTokenAddress, setToTokenAddress] = useState<string | undefined>(undefined);
   const [toAmount, setToAmount] = useState<string | undefined>(undefined);
+  const [experiments, setExperiments] = useState<Record<string, string> | undefined>(undefined);
 
   const addTokens = useMemo(
     () =>
@@ -74,6 +76,7 @@ function AddTokensUI() {
       toProvider,
       toTokenAddress,
       toAmount,
+      experiments,
     });
   };
 
@@ -213,7 +216,15 @@ function AddTokensUI() {
       <button onClick={() => setPresetToProvider(prev => !prev)}>
         {presetToProvider ? 'Disconnect destination wallet' : 'Connect destination wallet'}
       </button>
-
+      <br />
+      <br />
+      <b>Experiments</b><br />
+      Preselected token{' '}
+      <input type="text"
+        name={FLAG_PRESELECTED_TOKEN}
+        value={experiments?.[FLAG_PRESELECTED_TOKEN] ?? ''}
+        onChange={(e) => setExperiments({ ...experiments, [FLAG_PRESELECTED_TOKEN]: e.target.value })}
+        placeholder="0x1234" />
     </div>
   );
 }