[NO-CHANGELOG] feat: primary revenue widget setup - part 1 (#896)

packages/checkout/widgets-lib/src/app.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+
 import reportWebVitals from './reportWebVitals';
 import ConnectWebView from './widgets/connect/ConnectWebView';
 import SwapWebView from './widgets/swap/SwapWebView';
 import BridgeWebView from './widgets/bridge/BridgeWebView';
 import WalletWebView from './widgets/wallet/WalletWebView';
 import OnRampWebView from './widgets/on-ramp/OnRampWebView';
+import PrimaryRevenueWebView from './widgets/primary-revenue/PrimaryRevenueWebView';
 
 import './build';
 
@@ -35,6 +37,10 @@ function App() {
         <a href="/on-ramp">Onramp Widget</a>
       </h2>
       <br />
+      <h2>
+        <a href="/primary-revenue?amount=0.01&fromCurrency=USDC&envId=123">Primary Revenue Widget</a>
+      </h2>
+      <br />
     </div>
   );
 }
@@ -56,13 +62,17 @@ const router = createBrowserRouter([
     path: '/bridge',
     element: <BridgeWebView />,
   },
+  {
+    path: '/on-ramp',
+    element: <OnRampWebView />,
+  },
   {
     path: '/wallet',
     element: <WalletWebView />,
   },
   {
-    path: '/on-ramp',
-    element: <OnRampWebView />,
+    path: '/primary-revenue',
+    element: <PrimaryRevenueWebView />,
   },
 ]);
 

packages/checkout/widgets-lib/src/build.ts

@@ -4,6 +4,7 @@ import { ImmutableSwap } from './widgets/swap/SwapWebComponent';
 import { ImmutableWallet } from './widgets/wallet/WalletWebComponent';
 import { ImmutableBridge } from './widgets/bridge/BridgeWebComponent';
 import { ImmutableOnRamp } from './widgets/on-ramp/OnRampWebComponent';
+import { ImmutablePrimaryRevenue } from './widgets/primary-revenue/PrimaryRevenueWebComponent';
 
 customElements.get('imtbl-connect')
   || customElements.define('imtbl-connect', ImmutableConnect);
@@ -15,3 +16,5 @@ customElements.get('imtbl-bridge')
   || customElements.define('imtbl-bridge', ImmutableBridge);
 customElements.get('imtbl-onramp')
 || customElements.define('imtbl-onramp', ImmutableOnRamp);
+customElements.get('imtbl-primary-revenue')
+  || customElements.define('imtbl-primary-revenue', ImmutablePrimaryRevenue);

packages/checkout/widgets-lib/src/context/view-context/PrimaryRevenueViewContextTypes.ts

@@ -0,0 +1,38 @@
+import { ViewType } from './ViewType';
+
+export enum PrimaryRevenueWidgetViews {
+  PAYMENT_METHODS = 'PAYMENT_METHODS',
+  PAY_WITH_COINS = 'PAY_WITH_COINS',
+  PAY_WITH_CARD = 'PAY_WITH_CARD',
+  FUND_WITH_SMART_CHECKOUT = 'FUND_WITH_SMART_CHECKOUT',
+  SUCCESS = 'SUCCESS',
+  FAIL = 'FAIL',
+}
+
+export type PrimaryRevenueWidgetView =
+  | PrimaryRevenueMethodsView
+  | PrimaryRevenueWithCoinsView
+  | PrimaryRevenueWithCardView
+  | PrimaryRevenueSmartCheckoutView
+  | PrimaryRevenueSuccessView
+  | PrimaryRevenueFailView;
+
+interface PrimaryRevenueMethodsView extends ViewType {
+  type: PrimaryRevenueWidgetViews.PAYMENT_METHODS;
+}
+interface PrimaryRevenueWithCoinsView extends ViewType {
+  type: PrimaryRevenueWidgetViews.PAY_WITH_COINS;
+}
+interface PrimaryRevenueWithCardView extends ViewType {
+  type: PrimaryRevenueWidgetViews.PAY_WITH_CARD;
+}
+interface PrimaryRevenueSmartCheckoutView extends ViewType {
+  type: PrimaryRevenueWidgetViews.FUND_WITH_SMART_CHECKOUT;
+}
+interface PrimaryRevenueSuccessView extends ViewType {
+  type: PrimaryRevenueWidgetViews.SUCCESS;
+}
+interface PrimaryRevenueFailView extends ViewType {
+  type: PrimaryRevenueWidgetViews.FAIL;
+  reason?: string;
+}

packages/checkout/widgets-lib/src/context/view-context/ViewContext.ts

@@ -3,6 +3,7 @@ import { ConnectWidgetView } from './ConnectViewContextTypes';
 import { WalletWidgetView } from './WalletViewContextTypes';
 import { PrefilledSwapForm, SwapWidgetView } from './SwapViewContextTypes';
 import { BridgeWidgetView, PrefilledBridgeForm } from './BridgeViewContextTypes';
+import { PrimaryRevenueWidgetView } from './PrimaryRevenueViewContextTypes';
 import { ViewType } from './ViewType';
 import { OnRampWidgetView } from './OnRampViewContextTypes';
 
@@ -39,7 +40,8 @@ export type View =
   | WalletWidgetView
   | SwapWidgetView
   | BridgeWidgetView
-  | OnRampWidgetView;
+  | OnRampWidgetView
+  | PrimaryRevenueWidgetView;
 
 export interface ViewState {
   view: View;

packages/checkout/widgets-lib/src/global.d.ts

@@ -10,6 +10,7 @@ import {
   ImtblTransitionExampleProps,
   ImtblInnerWidgetExampleProps,
   ImtblOuterWidgetExampleProps,
+  ImtblPrimaryRevenueProps,
 } from '@imtbl/checkout-widgets';
 
 declare global {
@@ -24,6 +25,7 @@ declare global {
       'imtbl-bridge': ImtblBridgeProps;
       'imtbl-onramp': ImtblOnRampProps;
       'imtbl-buy': ImtblBuyProps;
+      'imtbl-primary-revenue': ImtblPrimaryRevenueProps;
       'imtbl-example': ImtblExampleProps;
       'imtbl-transition-example': ImtblTransitionExampleProps;
       'imtbl-inner-widget-example': ImtblInnerWidgetExampleProps;

packages/checkout/widgets-lib/src/resources/text/textConfig.ts

@@ -6,6 +6,7 @@ import { SharedViews } from '../../context/view-context/ViewContext';
 import { WalletWidgetViews } from '../../context/view-context/WalletViewContextTypes';
 import { BridgeWidgetViews } from '../../context/view-context/BridgeViewContextTypes';
 import { OnRampWidgetViews } from '../../context/view-context/OnRampViewContextTypes';
+import { PrimaryRevenueWidgetViews } from '../../context/view-context/PrimaryRevenueViewContextTypes';
 
 export const text = {
   views: {
@@ -52,8 +53,7 @@ export const text = {
         },
       },
       zkEVM: {
-        heading:
-          'You’ll be asked to switch to the Immutable zkEVM network',
+        heading: 'You’ll be asked to switch to the Immutable zkEVM network',
         body: "Check for the pop-up from MetaMask and 'Approve' to switch. If this is the first time, MetaMask will also ask you to add the network.",
         button: {
           text: 'Ready to Switch',
@@ -99,7 +99,8 @@ export const text = {
       },
       passport: {
         heading: 'Coins and collectibles are native to networks',
-        body1: 'This network is called Immutable zkEVM. If you have other coins in your Passport and can’t see them here, they might be on another network. ',
+        body1:
+          'This network is called Immutable zkEVM. If you have other coins in your Passport and can’t see them here, they might be on another network. ',
         body2: ' for more info.',
         linkText: 'Visit our FAQs',
       },
@@ -167,14 +168,16 @@ export const text = {
       approveSpending: {
         content: {
           metamask: {
-            heading: "You'll be asked to set a spending cap for this transaction",
+            heading:
+              "You'll be asked to set a spending cap for this transaction",
             body: [
               'Input at least',
               'for this transaction and future transactions, then follow the prompts.',
             ],
           },
           passport: {
-            heading: "You'll be asked to approve a spending cap for this transaction",
+            heading:
+              "You'll be asked to approve a spending cap for this transaction",
             body: 'Follow the prompts in your wallet to approve the spending cap.',
           },
         },
@@ -215,7 +218,8 @@ export const text = {
     [BridgeWidgetViews.IN_PROGRESS]: {
       heading: 'Move in progress',
       body1: (symbol: string) => `Less than 3 mins until your ${symbol} lands on zkEVM.`,
-      body2: 'You can close this window, the transaction will be reflected in your wallet once complete.',
+      body2:
+        'You can close this window, the transaction will be reflected in your wallet once complete.',
     },
     [BridgeWidgetViews.APPROVE_ERC20]: {
       approveBridge: {
@@ -306,13 +310,39 @@ export const text = {
         },
       },
     },
+    [PrimaryRevenueWidgetViews.PAYMENT_METHODS]: {
+      header: {
+        heading: 'How would you like to pay?',
+      },
+      options: {
+        [PrimaryRevenueWidgetViews.PAY_WITH_COINS]: {
+          heading: 'Coins',
+          caption: 'Using the coins balance in your wallet',
+        },
+        [PrimaryRevenueWidgetViews.PAY_WITH_CARD]: {
+          heading: 'Card',
+          caption: 'GooglePay also available with Transak',
+        },
+      },
+    },
+    [PrimaryRevenueWidgetViews.PAY_WITH_COINS]: {
+      header: {
+        heading: 'Pay with your coins',
+        caption: 'Using the coins balance in your wallet',
+      },
+    },
+    [PrimaryRevenueWidgetViews.PAY_WITH_CARD]: {
+      header: {
+        heading: 'Pay with card',
+        caption: 'Powered by Transak',
+      },
+    },
   },
   wallets: {
     [WalletProviderName.PASSPORT]: {
       heading: 'Immutable Passport',
       accentText: 'Recommended',
-      description:
-        'digital wallet and identity',
+      description: 'digital wallet and identity',
     },
     [WalletProviderName.METAMASK]: {
       heading: 'MetaMask',