From 8c437191b01ff2383b0f0ce21c0411f1fca26564 Mon Sep 17 00:00:00 2001
From: plondon <philip.n.london@gmail.com>
Date: Thu, 2 Mar 2023 14:19:02 -0500
Subject: [PATCH 1/7] fix(steps): add min step

---
 jest/__mocks__/gqlMocks.ts                    |  1 +
 src/preview.tsx                               |  5 ++--
 src/providers/Store/index.tsx                 |  3 ++
 src/steps/EnterAmount/index.tsx               |  8 +----
 .../PaymentMethod/PaymentMethod.test.tsx      | 30 +++++++++++++++++++
 src/steps/index.tsx                           |  6 ++--
 6 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/jest/__mocks__/gqlMocks.ts b/jest/__mocks__/gqlMocks.ts
index ed7299a3..f8aa50cc 100644
--- a/jest/__mocks__/gqlMocks.ts
+++ b/jest/__mocks__/gqlMocks.ts
@@ -21,6 +21,7 @@ export const mocks: MockedResponse[] = [
   getAssetsForOrgMock({ currency: 'USD', limit: 10, offset: 0 }),
   getAssetsForOrgMock({ currency: 'USD', limit: 10, offset: 0 }),
   getAssetsForOrgMock({ assetId: 'satoshi123' }),
+  getAssetsForOrgMock({ assetId: 'elon123' }),
   getAssetsForOrgMock({
     address: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
   }),
diff --git a/src/preview.tsx b/src/preview.tsx
index c19535df..e6fbf6a8 100644
--- a/src/preview.tsx
+++ b/src/preview.tsx
@@ -20,8 +20,9 @@ root.render(
               },
             },
             selection: {
-              assetId: '6b562c23-d79f-4a34-a47f-cc7b28726821',
-              paymentMethod: 'binance-pay',
+              amount: '10000',
+              assetId: '53adbb94-6a68-4eeb-af49-6b6d9e84a1f4',
+              fiat: 'USD',
             },
             style: {
               theme: 'dark',
diff --git a/src/providers/Store/index.tsx b/src/providers/Store/index.tsx
index 49f6bbc2..1bfa457b 100644
--- a/src/providers/Store/index.tsx
+++ b/src/providers/Store/index.tsx
@@ -66,6 +66,7 @@ type State = {
   fiat?: string;
   fiatDisplaySymbol?: string;
   method?: PaymentMethod & { description?: string };
+  minStep: number;
   network?: Network;
   prebuiltTx: {
     data?: {
@@ -219,6 +220,7 @@ const initialState: State = {
   destinationNetwork: undefined,
   fiat: undefined,
   method: undefined,
+  minStep: Steps.AssetSelection,
   network: undefined,
   prebuiltTx: {
     data: undefined,
@@ -572,6 +574,7 @@ export const Store: React.FC<
       embed,
       fiat,
       fiatDisplaySymbol,
+      minStep: step,
       network,
       requiredAmount,
       requiredPaymentMethod,
diff --git a/src/steps/EnterAmount/index.tsx b/src/steps/EnterAmount/index.tsx
index 4a857865..303c04cb 100644
--- a/src/steps/EnterAmount/index.tsx
+++ b/src/steps/EnterAmount/index.tsx
@@ -2,13 +2,7 @@ import { Badge } from '@map3xyz/components';
 import { ethers } from 'ethers';
 import { AnimatePresence, motion } from 'framer-motion';
 import React, { useContext, useEffect, useRef, useState } from 'react';
-import {
-  isChrome,
-  isEdge,
-  isFirefox,
-  isMobile,
-  isOpera,
-} from 'react-device-detect';
+import { isChrome, isEdge, isFirefox, isOpera } from 'react-device-detect';
 import { useTranslation } from 'react-i18next';
 
 import ErrorWrapper from '../../components/ErrorWrapper';
diff --git a/src/steps/PaymentMethod/PaymentMethod.test.tsx b/src/steps/PaymentMethod/PaymentMethod.test.tsx
index 5081d222..b23246e5 100644
--- a/src/steps/PaymentMethod/PaymentMethod.test.tsx
+++ b/src/steps/PaymentMethod/PaymentMethod.test.tsx
@@ -82,6 +82,36 @@ describe('Payment Selection', () => {
   });
 });
 
+describe('Payment Selection', () => {
+  beforeEach(() => {
+    render(
+      <App
+        config={{
+          ...mockConfig,
+          options: {
+            selection: {
+              assetId: 'elon123',
+            },
+          },
+        }}
+        onClose={() => {}}
+      />
+    );
+  });
+  const testingUtils = generateTestingUtils({ providerType: 'MetaMask' });
+  beforeAll(() => {
+    global.window.ethereum = testingUtils.getProvider();
+    global.window.ethereum.providers = [testingUtils.getProvider()];
+  });
+  afterEach(() => {
+    testingUtils.clearAllMocks();
+  });
+  it('doesnt allow the user to go back beyond min step', async () => {
+    const back = await screen.findByLabelText('Back');
+    expect(back).toHaveClass('invisible');
+  });
+});
+
 describe('Payment Method Errors', () => {
   it('renders', () => {
     render(<PaymentMethod />);
diff --git a/src/steps/index.tsx b/src/steps/index.tsx
index 3bc9a134..cc533fdc 100644
--- a/src/steps/index.tsx
+++ b/src/steps/index.tsx
@@ -29,7 +29,7 @@ export const ANIMATION_VARIANTS = {
 
 const Map3SdkSteps: React.FC<Props> = ({ onClose, plan }) => {
   const [state, dispatch] = useContext(Context);
-  const { step, steps } = state;
+  const { minStep, step, steps } = state;
 
   useChainWatcher();
 
@@ -51,7 +51,9 @@ const Map3SdkSteps: React.FC<Props> = ({ onClose, plan }) => {
           <div className="flex w-full items-center justify-between gap-4">
             <button
               aria-label="Back"
-              className={step === 0 ? 'invisible' : 'visible'}
+              className={
+                step === 0 || step <= minStep ? 'invisible' : 'visible'
+              }
               onClick={() => {
                 if (steps[step] === Steps[Steps.OrderHistory]) {
                   dispatch({ type: 'RESET_STATE' });

From ab4c0742d7af326771316d5b9c97a3d5bd64444e Mon Sep 17 00:00:00 2001
From: plondon <philip.n.london@gmail.com>
Date: Thu, 2 Mar 2023 15:01:06 -0500
Subject: [PATCH 2/7] fix(rate): pass rate for asset

---
 src/index.test.tsx              | 27 ++++++++++++++++++-
 src/index.tsx                   | 20 ++++++++++----
 src/preview.tsx                 |  1 +
 src/providers/Store/index.tsx   | 46 ++++++++++++++++-----------------
 src/steps/EnterAmount/index.tsx |  9 +++----
 5 files changed, 68 insertions(+), 35 deletions(-)

diff --git a/src/index.test.tsx b/src/index.test.tsx
index b3d4a813..3129776c 100644
--- a/src/index.test.tsx
+++ b/src/index.test.tsx
@@ -234,7 +234,7 @@ describe('Map3Sdk', () => {
     };
     expect(initFn).not.toThrow();
     expect(warnSpy).toBeCalledWith(
-      'Warning: networkCode is required when amount is provided. Falling back to asset selection.'
+      'Warning: amount is provided but not assetId or address and network. Falling back to undefined amount.'
     );
   });
   it('should check valid config.colors.primary', () => {
@@ -337,4 +337,29 @@ describe('Map3Sdk', () => {
       });
     expect(initFn).toThrow('options.callbacks.onAddressRequested is required.');
   });
+  it('should warn if rate is provided but not assetId or address and network', () => {
+    const warnSpy = jest.spyOn(console, 'warn');
+
+    const initFn = () =>
+      initMap3Supercharge({
+        anonKey:
+          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJjb25zb2xlIiwib3JnX2lkIjoiYzljNDczMzYtNWM5MS00MDM0LWIyYTgtMGI1NzA5ZTAwMGI1Iiwicm9sZXMiOlsiYW5vbnltb3VzIl0sImlhdCI6MTY3NTg4ODUwOCwiZXhwIjoxNzA3NDI0NTA4fQ.GzuXjFzSVkE3L-LlhtvpXa3aIi48rvHgMY3hw6lS8KU',
+        options: {
+          callbacks: {
+            onAddressRequested: async () => {
+              return { address: '0x000000' };
+            },
+          },
+          selection: {
+            rate: 10_000,
+          },
+        },
+        userId: 'test',
+      });
+
+    expect(initFn).not.toThrow();
+    expect(warnSpy).toBeCalledWith(
+      'Warning: rate is provided but not assetId or address and network. Falling back to default rate.'
+    );
+  });
 });
diff --git a/src/index.tsx b/src/index.tsx
index 8fa70e5d..dceb3bea 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -53,6 +53,7 @@ export interface Map3InitConfig {
       fiat?: string;
       networkCode?: string;
       paymentMethod?: 'binance-pay';
+      rate?: number;
       shortcutAmounts?: number[];
     };
     style?: {
@@ -105,6 +106,11 @@ export class Map3 {
       config.options.selection.fiat = 'USD';
     }
 
+    const isAsset =
+      config.options.selection.assetId ||
+      (config.options.selection.address &&
+        config.options.selection.networkCode);
+
     if (!ISO_4217_TO_SYMBOL[config.options.selection.fiat]) {
       console.warn(
         `Warning: fiat ${config.options.selection.fiat} is not supported. Falling back to USD.`
@@ -135,16 +141,20 @@ export class Map3 {
       config.options.selection.address = undefined;
     }
 
-    if (
-      config.options.selection.amount &&
-      !config.options.selection.networkCode
-    ) {
+    if (config.options.selection.amount && !isAsset) {
       console.warn(
-        'Warning: networkCode is required when amount is provided. Falling back to asset selection.'
+        'Warning: amount is provided but not assetId or address and network. Falling back to undefined amount.'
       );
       config.options.selection.amount = undefined;
     }
 
+    if (config.options.selection.rate && !isAsset) {
+      console.warn(
+        'Warning: rate is provided but not assetId or address and network. Falling back to default rate.'
+      );
+      config.options.selection.rate = undefined;
+    }
+
     if (config.options.style?.appName) {
       document.title = config.options.style.appName;
     }
diff --git a/src/preview.tsx b/src/preview.tsx
index e6fbf6a8..b0b02e3b 100644
--- a/src/preview.tsx
+++ b/src/preview.tsx
@@ -23,6 +23,7 @@ root.render(
               amount: '10000',
               assetId: '53adbb94-6a68-4eeb-af49-6b6d9e84a1f4',
               fiat: 'USD',
+              rate: 2,
             },
             style: {
               theme: 'dark',
diff --git a/src/providers/Store/index.tsx b/src/providers/Store/index.tsx
index 1bfa457b..b3c39838 100644
--- a/src/providers/Store/index.tsx
+++ b/src/providers/Store/index.tsx
@@ -91,6 +91,7 @@ type State = {
     status: RemoteType;
   };
   providerChainId?: number;
+  rate?: number;
   requiredAmount?: string;
   requiredPaymentMethod?: 'binance-pay' | 'show-address';
   shortcutAmounts?: number[];
@@ -235,6 +236,7 @@ const initialState: State = {
     status: 'idle',
   },
   providerChainId: undefined,
+  rate: undefined,
   shortcutAmounts: [],
   slug: undefined,
   step: Steps.AssetSelection,
@@ -280,7 +282,8 @@ export const Store: React.FC<
   PropsWithChildren<Map3InitConfig & { asset?: Asset; network?: Network }>
 > = ({ asset, children, network, options, userId }) => {
   const { callbacks, selection, style } = options || {};
-  const { amount, fiat, paymentMethod, shortcutAmounts } = selection || {};
+  const { amount, fiat, paymentMethod, rate, shortcutAmounts } =
+    selection || {};
   const { embed, theme } = style || {};
   const {
     handleAuthorizeTransaction,
@@ -310,6 +313,22 @@ export const Store: React.FC<
 
   const fiatDisplaySymbol = ISO_4217_TO_SYMBOL[fiat || 'USD'];
 
+  const rest = {
+    asset,
+    embed,
+    fiat,
+    fiatDisplaySymbol,
+    minStep: step,
+    network,
+    rate,
+    requiredAmount,
+    requiredPaymentMethod,
+    shortcutAmounts,
+    step,
+    theme,
+    userId,
+  };
+
   const [state, dispatch] = useReducer(
     (state: State, action: Action): State => {
       switch (action.type) {
@@ -550,17 +569,7 @@ export const Store: React.FC<
         case 'RESET_STATE':
           return {
             ...initialState,
-            asset,
-            embed,
-            fiat,
-            fiatDisplaySymbol,
-            network,
-            requiredAmount,
-            requiredPaymentMethod,
-            shortcutAmounts,
-            step,
-            theme,
-            userId,
+            ...rest,
           };
         /* istanbul ignore next */
         default:
@@ -570,18 +579,7 @@ export const Store: React.FC<
     },
     {
       ...initialState,
-      asset,
-      embed,
-      fiat,
-      fiatDisplaySymbol,
-      minStep: step,
-      network,
-      requiredAmount,
-      requiredPaymentMethod,
-      shortcutAmounts,
-      step,
-      theme,
-      userId,
+      ...rest,
     }
   );
 
diff --git a/src/steps/EnterAmount/index.tsx b/src/steps/EnterAmount/index.tsx
index 303c04cb..22c51d6a 100644
--- a/src/steps/EnterAmount/index.tsx
+++ b/src/steps/EnterAmount/index.tsx
@@ -768,6 +768,7 @@ type Props = {};
 const EnterAmount: React.FC<Props> = () => {
   const [state, dispatch] = useContext(Context);
   const { data, loading } = useGetAssetPriceQuery({
+    skip: !!state.rate,
     variables: {
       assetId: state.asset?.id,
       currency: state.fiat,
@@ -780,6 +781,8 @@ const EnterAmount: React.FC<Props> = () => {
     return null;
   }
 
+  const price = state.rate || data?.assetPrice?.price || 0;
+
   return (
     <div className="flex h-full flex-col">
       <InnerWrapper>
@@ -791,11 +794,7 @@ const EnterAmount: React.FC<Props> = () => {
         </h3>
       </InnerWrapper>
       <StateDescriptionHeader />
-      {loading ? (
-        <LoadingWrapper />
-      ) : (
-        <EnterAmountForm price={data?.assetPrice?.price || 0} />
-      )}
+      {loading ? <LoadingWrapper /> : <EnterAmountForm price={price} />}
     </div>
   );
 };

From 31b62a96ba056cf703a8969e4cf89ff003a1862b Mon Sep 17 00:00:00 2001
From: plondon <philip.n.london@gmail.com>
Date: Thu, 2 Mar 2023 16:03:14 -0500
Subject: [PATCH 3/7] feat(expiration): countdown timer

---
 src/components/CountdownTimer/index.tsx | 50 +++++++++++++++++++++++++
 src/steps/PaymentMethod/index.tsx       |  5 ++-
 src/styles/globals.scss                 |  9 +++++
 3 files changed, 62 insertions(+), 2 deletions(-)
 create mode 100644 src/components/CountdownTimer/index.tsx

diff --git a/src/components/CountdownTimer/index.tsx b/src/components/CountdownTimer/index.tsx
new file mode 100644
index 00000000..24e436c1
--- /dev/null
+++ b/src/components/CountdownTimer/index.tsx
@@ -0,0 +1,50 @@
+import React, { useContext, useEffect, useState } from 'react';
+
+import { Context } from '../../providers/Store';
+
+const CountdownTimer: React.FC<Props> = () => {
+  const [state] = useContext(Context);
+  const remainingTime = 10;
+  const [seconds, setSeconds] = useState(remainingTime);
+
+  const countdown = () => {
+    setSeconds((prev) => prev - 1);
+  };
+
+  useEffect(() => {
+    if (seconds < 0) {
+      return;
+    }
+    countdown();
+    const interval = setInterval(countdown, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return seconds >= 0 ? (
+    <svg
+      className="h-7 w-7 stroke-accent"
+      style={{ transform: 'rotateY(-180deg) rotateZ(-90deg)' }}
+    >
+      <circle
+        cx="50%"
+        cy="50%"
+        r="10"
+        style={{
+          animation: `countdown ${remainingTime}s linear`,
+          fill: 'none',
+          strokeDasharray: '63px',
+          strokeDashoffset: '0px',
+          strokeLinecap: 'round',
+          strokeWidth: '2px',
+        }}
+      ></circle>
+    </svg>
+  ) : (
+    <span className="text-xs text-red-600">Expired</span>
+  );
+};
+
+type Props = {};
+
+export default CountdownTimer;
diff --git a/src/steps/PaymentMethod/index.tsx b/src/steps/PaymentMethod/index.tsx
index 5bf8c7cf..31f88e44 100644
--- a/src/steps/PaymentMethod/index.tsx
+++ b/src/steps/PaymentMethod/index.tsx
@@ -3,6 +3,7 @@ import React, { useContext, useEffect, useRef, useState } from 'react';
 import { isMobile } from 'react-device-detect';
 import { useTranslation } from 'react-i18next';
 
+import CountdownTimer from '../../components/CountdownTimer';
 import ErrorWrapper from '../../components/ErrorWrapper';
 import InnerWrapper from '../../components/InnerWrapper';
 import ListItem from '../../components/ListItem';
@@ -239,10 +240,10 @@ const PaymentMethod: React.FC<Props> = () => {
       <div className="border-b border-primary-200 dark:border-primary-700 dark:bg-primary-900">
         <InnerWrapper>
           <h3
-            className="text-lg font-semibold dark:text-white"
+            className="flex items-center justify-between text-lg font-semibold dark:text-white"
             data-testid="payment-method"
           >
-            Payment Method
+            <span>Payment Method</span> <CountdownTimer />
           </h3>
           {methodsForNetwork?.length && methodsForNetwork.length > 6 ? (
             <form
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 474f94a8..ed9c683e 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -11,3 +11,12 @@
         margin: 0;
     }
 }
+
+@keyframes countdown {
+    from {
+        stroke-dashoffset: 0px;
+    }
+    to {
+        stroke-dashoffset: 63px;
+    }
+}

From f86e8b3167cedd6cc2952d5dd8a4dd6c08df2768 Mon Sep 17 00:00:00 2001
From: plondon <philip.n.london@gmail.com>
Date: Fri, 3 Mar 2023 09:30:52 -0500
Subject: [PATCH 4/7] fix(expiration): add tooltip

---
 src/components/CountdownTimer/index.tsx | 46 +++++++++++++------------
 src/styles/globals.scss                 |  2 +-
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/components/CountdownTimer/index.tsx b/src/components/CountdownTimer/index.tsx
index 24e436c1..cb43d429 100644
--- a/src/components/CountdownTimer/index.tsx
+++ b/src/components/CountdownTimer/index.tsx
@@ -8,38 +8,40 @@ const CountdownTimer: React.FC<Props> = () => {
   const [seconds, setSeconds] = useState(remainingTime);
 
   const countdown = () => {
+    if (seconds <= 0) {
+      return;
+    }
     setSeconds((prev) => prev - 1);
   };
 
   useEffect(() => {
-    if (seconds < 0) {
-      return;
-    }
     countdown();
     const interval = setInterval(countdown, 1000);
 
     return () => clearInterval(interval);
   }, []);
 
-  return seconds >= 0 ? (
-    <svg
-      className="h-7 w-7 stroke-accent"
-      style={{ transform: 'rotateY(-180deg) rotateZ(-90deg)' }}
-    >
-      <circle
-        cx="50%"
-        cy="50%"
-        r="10"
-        style={{
-          animation: `countdown ${remainingTime}s linear`,
-          fill: 'none',
-          strokeDasharray: '63px',
-          strokeDashoffset: '0px',
-          strokeLinecap: 'round',
-          strokeWidth: '2px',
-        }}
-      ></circle>
-    </svg>
+  return seconds > 0 ? (
+    <span aria-label={`${seconds}s remaining.`} className="hint--left">
+      <svg
+        className="h-7 w-7 scale-75 stroke-accent"
+        style={{ transform: 'rotateY(-180deg) rotateZ(-90deg)' }}
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="10"
+          style={{
+            animation: `countdown ${remainingTime}s linear`,
+            fill: 'none',
+            strokeDasharray: `${Math.PI * 20}px`,
+            strokeDashoffset: '0px',
+            strokeLinecap: 'round',
+            strokeWidth: '2px',
+          }}
+        ></circle>
+      </svg>
+    </span>
   ) : (
     <span className="text-xs text-red-600">Expired</span>
   );
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index ed9c683e..2a2888a4 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -17,6 +17,6 @@
         stroke-dashoffset: 0px;
     }
     to {
-        stroke-dashoffset: 63px;
+        stroke-dashoffset: 62.8318530718px;
     }
 }

From 02d39c4303a0fe3d186cf2c2458fa30d85726f19 Mon Sep 17 00:00:00 2001
From: plondon <philip.n.london@gmail.com>
Date: Fri, 3 Mar 2023 14:52:09 -0500
Subject: [PATCH 5/7] fix(expiration): add step title component

---
 src/components/CountdownTimer/index.tsx   | 48 ++++++++++++++++++-----
 src/components/StepTitle/index.tsx        | 21 ++++++++++
 src/index.test.tsx                        | 25 ++++++++++++
 src/index.tsx                             | 28 ++++++++++++-
 src/preview.tsx                           |  1 +
 src/providers/Store/index.tsx             | 10 +++++
 src/steps/AssetSelection/index.tsx        |  8 +---
 src/steps/ConfirmRequiredAmount/index.tsx |  5 +--
 src/steps/EnterAmount/index.tsx           |  8 +---
 src/steps/NetworkSelection/index.tsx      | 11 +++---
 src/steps/PaymentMethod/index.tsx         |  9 +----
 src/steps/ShowAddress/index.tsx           |  8 +---
 src/steps/SwitchChain/index.tsx           |  5 +--
 src/styles/globals.scss                   |  9 -----
 tailwind.config.js                        |  1 +
 15 files changed, 139 insertions(+), 58 deletions(-)
 create mode 100644 src/components/StepTitle/index.tsx

diff --git a/src/components/CountdownTimer/index.tsx b/src/components/CountdownTimer/index.tsx
index cb43d429..48b19f2e 100644
--- a/src/components/CountdownTimer/index.tsx
+++ b/src/components/CountdownTimer/index.tsx
@@ -2,10 +2,27 @@ import React, { useContext, useEffect, useState } from 'react';
 
 import { Context } from '../../providers/Store';
 
+const circumference = Math.PI * 20;
+
 const CountdownTimer: React.FC<Props> = () => {
   const [state] = useContext(Context);
-  const remainingTime = 10;
-  const [seconds, setSeconds] = useState(remainingTime);
+
+  if (!state.expiration) {
+    return null;
+  }
+
+  const currentTime = new Date().getTime();
+  const remainingTime = state.expiration.getTime() - currentTime;
+  const remainingTimeSeconds = Math.floor(remainingTime / 1000);
+  const completedPercentage =
+    (currentTime - state.initTime.getTime()) / remainingTime;
+
+  const [seconds, setSeconds] = useState(remainingTimeSeconds);
+  const [position, setPosition] = useState(0);
+
+  if (remainingTimeSeconds <= 0) {
+    return null;
+  }
 
   const countdown = () => {
     if (seconds <= 0) {
@@ -21,21 +38,32 @@ const CountdownTimer: React.FC<Props> = () => {
     return () => clearInterval(interval);
   }, []);
 
-  return seconds > 0 ? (
-    <span aria-label={`${seconds}s remaining.`} className="hint--left">
+  useEffect(() => {
+    const position = circumference - circumference * completedPercentage;
+    setPosition(position);
+  }, [seconds]);
+
+  const minutes = Math.floor(seconds / 60).toString();
+  const secondsLeft = (seconds % 60).toString().padStart(2, '0');
+
+  return position < circumference ? (
+    <span
+      aria-label={`Expires in ${minutes}:${secondsLeft}`}
+      className="hint--left relative h-[22px] w-[22px] rounded-full border-[2px] border-accent-light"
+    >
       <svg
-        className="h-7 w-7 scale-75 stroke-accent"
-        style={{ transform: 'rotateY(-180deg) rotateZ(-90deg)' }}
+        className="absolute left-[-5px] top-[-5px] h-7 w-7 scale-75 stroke-accent "
+        style={{ transform: 'rotateZ(-90deg)' }}
       >
         <circle
+          className="transition-all"
           cx="50%"
           cy="50%"
           r="10"
           style={{
-            animation: `countdown ${remainingTime}s linear`,
             fill: 'none',
-            strokeDasharray: `${Math.PI * 20}px`,
-            strokeDashoffset: '0px',
+            strokeDasharray: `${circumference}px`,
+            strokeDashoffset: `${position}px`,
             strokeLinecap: 'round',
             strokeWidth: '2px',
           }}
@@ -43,7 +71,7 @@ const CountdownTimer: React.FC<Props> = () => {
       </svg>
     </span>
   ) : (
-    <span className="text-xs text-red-600">Expired</span>
+    <span className="text-xxs text-red-600">Expired</span>
   );
 };
 
diff --git a/src/components/StepTitle/index.tsx b/src/components/StepTitle/index.tsx
new file mode 100644
index 00000000..e2bedbf6
--- /dev/null
+++ b/src/components/StepTitle/index.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import CountdownTimer from '../CountdownTimer';
+
+const StepTitle: React.FC<Props> = (props) => {
+  return (
+    <h3
+      className="flex items-center justify-between text-lg font-semibold dark:text-white"
+      data-testid={props.testId}
+    >
+      <span>{props.value}</span> <CountdownTimer />
+    </h3>
+  );
+};
+
+type Props = {
+  testId?: string;
+  value: string;
+};
+
+export default StepTitle;
diff --git a/src/index.test.tsx b/src/index.test.tsx
index 3129776c..292f1a2a 100644
--- a/src/index.test.tsx
+++ b/src/index.test.tsx
@@ -362,4 +362,29 @@ describe('Map3Sdk', () => {
       'Warning: rate is provided but not assetId or address and network. Falling back to default rate.'
     );
   });
+  it('should allow an expiration time in the form of milliseconds or ISO 8601 in the future', () => {
+    const warnSpy = jest.spyOn(console, 'warn');
+
+    const initFn = () =>
+      initMap3Supercharge({
+        anonKey:
+          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJjb25zb2xlIiwib3JnX2lkIjoiYzljNDczMzYtNWM5MS00MDM0LWIyYTgtMGI1NzA5ZTAwMGI1Iiwicm9sZXMiOlsiYW5vbnltb3VzIl0sImlhdCI6MTY3NTg4ODUwOCwiZXhwIjoxNzA3NDI0NTA4fQ.GzuXjFzSVkE3L-LlhtvpXa3aIi48rvHgMY3hw6lS8KU',
+        options: {
+          callbacks: {
+            onAddressRequested: async () => {
+              return { address: '0x000000' };
+            },
+          },
+          selection: {
+            expiration: '2021-12-31T23:59:59.999Z',
+          },
+        },
+        userId: 'test',
+      });
+
+    expect(initFn).not.toThrow();
+    expect(warnSpy).toBeCalledWith(
+      'Warning: expiration is in the past or invalid. Falling back to default expiration.'
+    );
+  });
 });
diff --git a/src/index.tsx b/src/index.tsx
index dceb3bea..37937e47 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -50,6 +50,7 @@ export interface Map3InitConfig {
       address?: string;
       amount?: string;
       assetId?: string;
+      expiration?: string | number;
       fiat?: string;
       networkCode?: string;
       paymentMethod?: 'binance-pay';
@@ -155,6 +156,23 @@ export class Map3 {
       config.options.selection.rate = undefined;
     }
 
+    if (config.options.selection.expiration) {
+      try {
+        const timeRemainingMs =
+          new Date(config.options.selection.expiration).getTime() -
+          new Date().getTime();
+
+        if (timeRemainingMs < 0) {
+          throw new Error('Expiration is in the past.');
+        }
+      } catch (e) {
+        console.warn(
+          'Warning: expiration is in the past or invalid. Falling back to default expiration.'
+        );
+        config.options.selection.expiration = undefined;
+      }
+    }
+
     if (config.options.style?.appName) {
       document.title = config.options.style.appName;
     }
@@ -178,7 +196,14 @@ export class Map3 {
     });
 
     // orange-600
-    document.body.style.setProperty('--accent-color', 'rgb(234, 88, 12)');
+    const orange600 = 'rgb(234, 88, 12)';
+    document.body.style.setProperty('--accent-color', orange600);
+    document.body.style.setProperty(
+      '--accent-color-light',
+      colord(config.options.style?.colors?.accent || orange600)
+        .lighten(0.35)
+        .toHex()
+    );
 
     // theme colors
     if (config.options.style && config.options.style.colors) {
@@ -234,7 +259,6 @@ export class Map3 {
             primaryColor.mix(shades[shade as keyof typeof shades], 0.5).toHex()
           );
         });
-      } else {
       }
     }
 
diff --git a/src/preview.tsx b/src/preview.tsx
index b0b02e3b..7a4efca3 100644
--- a/src/preview.tsx
+++ b/src/preview.tsx
@@ -22,6 +22,7 @@ root.render(
             selection: {
               amount: '10000',
               assetId: '53adbb94-6a68-4eeb-af49-6b6d9e84a1f4',
+              expiration: 1677869630177,
               fiat: 'USD',
               rate: 2,
             },
diff --git a/src/providers/Store/index.tsx b/src/providers/Store/index.tsx
index b3c39838..d59505bc 100644
--- a/src/providers/Store/index.tsx
+++ b/src/providers/Store/index.tsx
@@ -63,8 +63,10 @@ type State = {
     id?: string;
     width?: string;
   };
+  expiration?: Date;
   fiat?: string;
   fiatDisplaySymbol?: string;
+  initTime: Date;
   method?: PaymentMethod & { description?: string };
   minStep: number;
   network?: Network;
@@ -219,7 +221,9 @@ const initialState: State = {
     status: 'idle',
   },
   destinationNetwork: undefined,
+  expiration: undefined,
   fiat: undefined,
+  initTime: new Date(),
   method: undefined,
   minStep: Steps.AssetSelection,
   network: undefined,
@@ -309,6 +313,11 @@ export const Store: React.FC<
     requiredAmount = ethers.utils.formatUnits(amount, asset.decimals);
   }
 
+  let expiration;
+  if (selection?.expiration) {
+    expiration = new Date(selection.expiration);
+  }
+
   const requiredPaymentMethod = paymentMethod;
 
   const fiatDisplaySymbol = ISO_4217_TO_SYMBOL[fiat || 'USD'];
@@ -316,6 +325,7 @@ export const Store: React.FC<
   const rest = {
     asset,
     embed,
+    expiration,
     fiat,
     fiatDisplaySymbol,
     minStep: step,
diff --git a/src/steps/AssetSelection/index.tsx b/src/steps/AssetSelection/index.tsx
index dfdf88a3..28cfb375 100644
--- a/src/steps/AssetSelection/index.tsx
+++ b/src/steps/AssetSelection/index.tsx
@@ -7,6 +7,7 @@ import ErrorWrapper from '../../components/ErrorWrapper';
 import InnerWrapper from '../../components/InnerWrapper';
 import ListItem from '../../components/ListItem';
 import LoadingWrapper from '../../components/LoadingWrapper';
+import StepTitle from '../../components/StepTitle';
 import {
   Asset,
   useGetAssetsForOrgQuery,
@@ -66,12 +67,7 @@ const AssetSelection: React.FC<Props> = () => {
     <div className="flex h-full flex-col">
       <div className="border-b border-primary-200 dark:border-primary-700 dark:bg-primary-900">
         <InnerWrapper>
-          <h3
-            className="text-lg font-semibold dark:text-white"
-            data-testid="select-asset"
-          >
-            {t('copy.select_asset')}
-          </h3>
+          <StepTitle testId="select-asset" value={t('copy.select_asset')} />
           {assets?.length && assets.length > 6 ? (
             <form
               className="mt-2"
diff --git a/src/steps/ConfirmRequiredAmount/index.tsx b/src/steps/ConfirmRequiredAmount/index.tsx
index 2090b73b..6810d89a 100644
--- a/src/steps/ConfirmRequiredAmount/index.tsx
+++ b/src/steps/ConfirmRequiredAmount/index.tsx
@@ -4,6 +4,7 @@ import { Trans, useTranslation } from 'react-i18next';
 
 import InnerWrapper from '../../components/InnerWrapper';
 import StateDescriptionHeader from '../../components/StateDescriptionHeader';
+import StepTitle from '../../components/StepTitle';
 import { Context, Steps } from '../../providers/Store';
 
 const ConfirmRequiredAmount: React.FC<Props> = () => {
@@ -20,9 +21,7 @@ const ConfirmRequiredAmount: React.FC<Props> = () => {
     <div className="flex h-full flex-col items-center justify-between">
       <div className="border-b border-primary-200 dark:border-primary-700 dark:bg-primary-900">
         <InnerWrapper>
-          <h3 className="text-lg font-semibold dark:text-white">
-            {t('title.confirm_amount')}
-          </h3>
+          <StepTitle value={t('title.confirm_amount')} />
         </InnerWrapper>
 
         <StateDescriptionHeader />
diff --git a/src/steps/EnterAmount/index.tsx b/src/steps/EnterAmount/index.tsx
index 22c51d6a..eb3771b8 100644
--- a/src/steps/EnterAmount/index.tsx
+++ b/src/steps/EnterAmount/index.tsx
@@ -12,6 +12,7 @@ import BinancePay from '../../components/methods/BinancePay';
 import WalletConnect from '../../components/methods/WalletConnect';
 import WindowEthereum from '../../components/methods/WindowEthereum';
 import StateDescriptionHeader from '../../components/StateDescriptionHeader';
+import StepTitle from '../../components/StepTitle';
 import { MIN_CONFIRMATIONS } from '../../constants';
 import {
   useCreateBridgeQuoteMutation,
@@ -786,12 +787,7 @@ const EnterAmount: React.FC<Props> = () => {
   return (
     <div className="flex h-full flex-col">
       <InnerWrapper>
-        <h3
-          className="text-lg font-semibold dark:text-white"
-          data-testid="enter-amount"
-        >
-          {t('title.enter_amount')}
-        </h3>
+        <StepTitle testId="enter-amount" value={t('title.enter_amount')} />
       </InnerWrapper>
       <StateDescriptionHeader />
       {loading ? <LoadingWrapper /> : <EnterAmountForm price={price} />}
diff --git a/src/steps/NetworkSelection/index.tsx b/src/steps/NetworkSelection/index.tsx
index a26a1e9b..cb342b1a 100644
--- a/src/steps/NetworkSelection/index.tsx
+++ b/src/steps/NetworkSelection/index.tsx
@@ -7,6 +7,7 @@ import InnerWrapper from '../../components/InnerWrapper';
 import ListItem from '../../components/ListItem';
 import LoadingWrapper from '../../components/LoadingWrapper';
 import StateDescriptionHeader from '../../components/StateDescriptionHeader';
+import StepTitle from '../../components/StepTitle';
 import { useGetMappedNetworksForAssetQuery } from '../../generated/apollo-gql';
 import { Context, Steps } from '../../providers/Store';
 
@@ -75,12 +76,10 @@ const NetworkSelection: React.FC<Props> = () => {
     <div className="flex h-full flex-col">
       <div className="border-b border-primary-200 dark:border-primary-700 dark:bg-primary-900">
         <InnerWrapper>
-          <h3
-            className="text-lg font-semibold dark:text-white"
-            data-testid="network-select"
-          >
-            {t('title.select_network')}
-          </h3>
+          <StepTitle
+            testId="network-select"
+            value={t('title.select_network')}
+          />
         </InnerWrapper>
         <StateDescriptionHeader />
       </div>
diff --git a/src/steps/PaymentMethod/index.tsx b/src/steps/PaymentMethod/index.tsx
index 31f88e44..0cfa900f 100644
--- a/src/steps/PaymentMethod/index.tsx
+++ b/src/steps/PaymentMethod/index.tsx
@@ -3,13 +3,13 @@ import React, { useContext, useEffect, useRef, useState } from 'react';
 import { isMobile } from 'react-device-detect';
 import { useTranslation } from 'react-i18next';
 
-import CountdownTimer from '../../components/CountdownTimer';
 import ErrorWrapper from '../../components/ErrorWrapper';
 import InnerWrapper from '../../components/InnerWrapper';
 import ListItem from '../../components/ListItem';
 import LoadingWrapper from '../../components/LoadingWrapper';
 import MethodIcon from '../../components/MethodIcon';
 import StateDescriptionHeader from '../../components/StateDescriptionHeader';
+import StepTitle from '../../components/StepTitle';
 import {
   PaymentMethod,
   useGetPaymentMethodsQuery,
@@ -239,12 +239,7 @@ const PaymentMethod: React.FC<Props> = () => {
     <div className="flex h-full flex-col">
       <div className="border-b border-primary-200 dark:border-primary-700 dark:bg-primary-900">
         <InnerWrapper>
-          <h3
-            className="flex items-center justify-between text-lg font-semibold dark:text-white"
-            data-testid="payment-method"
-          >
-            <span>Payment Method</span> <CountdownTimer />
-          </h3>
+          <StepTitle testId="payment-method" value="Payment Method" />
           {methodsForNetwork?.length && methodsForNetwork.length > 6 ? (
             <form
               className="mt-2"
diff --git a/src/steps/ShowAddress/index.tsx b/src/steps/ShowAddress/index.tsx
index 407bb364..3f2a9a4d 100644
--- a/src/steps/ShowAddress/index.tsx
+++ b/src/steps/ShowAddress/index.tsx
@@ -6,6 +6,7 @@ import React, { useContext, useEffect, useRef } from 'react';
 import ErrorWrapper from '../../components/ErrorWrapper';
 import InnerWrapper from '../../components/InnerWrapper';
 import LoadingWrapper from '../../components/LoadingWrapper';
+import StepTitle from '../../components/StepTitle';
 import { MIN_CONFIRMATIONS } from '../../constants';
 import {
   useAddWatchedAddressMutation,
@@ -155,12 +156,7 @@ const ShowAddress: React.FC<Props> = () => {
   return (
     <div className="flex h-full flex-col items-center" ref={ref}>
       <InnerWrapper>
-        <h3
-          className="text-center text-lg font-semibold dark:text-white"
-          data-testid="show-address-method"
-        >
-          Pay to Address
-        </h3>
+        <StepTitle testId="show-address-method" value="Pay to Address" />
       </InnerWrapper>
       {state.depositAddress.status === 'error' && (
         <ErrorWrapper
diff --git a/src/steps/SwitchChain/index.tsx b/src/steps/SwitchChain/index.tsx
index 5235d363..308a04a6 100644
--- a/src/steps/SwitchChain/index.tsx
+++ b/src/steps/SwitchChain/index.tsx
@@ -4,6 +4,7 @@ import React, { useContext, useState } from 'react';
 import InnerWrapper from '../../components/InnerWrapper';
 import LoadingWrapper from '../../components/LoadingWrapper';
 import StateDescriptionHeader from '../../components/StateDescriptionHeader';
+import StepTitle from '../../components/StepTitle';
 import { useGetNetworkByChainIdQuery } from '../../generated/apollo-gql';
 import { useWeb3 } from '../../hooks/useWeb3';
 import { Context, Steps } from '../../providers/Store';
@@ -51,9 +52,7 @@ const SwitchChain: React.FC<Props> = () => {
     <div className="flex h-full flex-col items-center justify-between">
       <div className="w-full">
         <InnerWrapper>
-          <h3 className="text-lg font-semibold dark:text-white">
-            Switch Chain
-          </h3>
+          <StepTitle value="Switch Chain" />
         </InnerWrapper>
         <StateDescriptionHeader />
       </div>
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 2a2888a4..474f94a8 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -11,12 +11,3 @@
         margin: 0;
     }
 }
-
-@keyframes countdown {
-    from {
-        stroke-dashoffset: 0px;
-    }
-    to {
-        stroke-dashoffset: 62.8318530718px;
-    }
-}
diff --git a/tailwind.config.js b/tailwind.config.js
index 0dcaef6f..70011a21 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,6 +10,7 @@ module.exports = {
     extend: {
       colors: {
         accent: 'var(--accent-color)',
+        'accent-light': 'var(--accent-color-light)',
         primary: {
           100: 'var(--primary-color-100)',
           200: 'var(--primary-color-200)',

From 88bec646ec471d10429476faf0e2cfab8879cf20 Mon Sep 17 00:00:00 2001
From: plondon <philip.n.london@gmail.com>
Date: Fri, 3 Mar 2023 15:20:41 -0500
Subject: [PATCH 6/7] fix(countdown): fix countdown percentage completed

---
 src/components/CountdownTimer/index.tsx | 12 ++++--------
 src/preview.tsx                         |  2 +-
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/components/CountdownTimer/index.tsx b/src/components/CountdownTimer/index.tsx
index 48b19f2e..6c2ff770 100644
--- a/src/components/CountdownTimer/index.tsx
+++ b/src/components/CountdownTimer/index.tsx
@@ -12,18 +12,14 @@ const CountdownTimer: React.FC<Props> = () => {
   }
 
   const currentTime = new Date().getTime();
+  const progressedTime = currentTime - state.initTime.getTime();
+  const totalTime = state.expiration.getTime() - state.initTime.getTime();
   const remainingTime = state.expiration.getTime() - currentTime;
   const remainingTimeSeconds = Math.floor(remainingTime / 1000);
-  const completedPercentage =
-    (currentTime - state.initTime.getTime()) / remainingTime;
-
+  const completedPercentage = progressedTime / totalTime;
   const [seconds, setSeconds] = useState(remainingTimeSeconds);
   const [position, setPosition] = useState(0);
 
-  if (remainingTimeSeconds <= 0) {
-    return null;
-  }
-
   const countdown = () => {
     if (seconds <= 0) {
       return;
@@ -46,7 +42,7 @@ const CountdownTimer: React.FC<Props> = () => {
   const minutes = Math.floor(seconds / 60).toString();
   const secondsLeft = (seconds % 60).toString().padStart(2, '0');
 
-  return position < circumference ? (
+  return seconds > 0 ? (
     <span
       aria-label={`Expires in ${minutes}:${secondsLeft}`}
       className="hint--left relative h-[22px] w-[22px] rounded-full border-[2px] border-accent-light"
diff --git a/src/preview.tsx b/src/preview.tsx
index 7a4efca3..c94c0678 100644
--- a/src/preview.tsx
+++ b/src/preview.tsx
@@ -22,7 +22,7 @@ root.render(
             selection: {
               amount: '10000',
               assetId: '53adbb94-6a68-4eeb-af49-6b6d9e84a1f4',
-              expiration: 1677869630177,
+              expiration: new Date().getTime() + 60_000,
               fiat: 'USD',
               rate: 2,
             },

From dfb8adbb87b47001331e360bb73265c0a00d49b7 Mon Sep 17 00:00:00 2001
From: plondon <philip.n.london@gmail.com>
Date: Fri, 3 Mar 2023 15:24:57 -0500
Subject: [PATCH 7/7] fix(expiration): tooltip

---
 src/components/CountdownTimer/index.tsx | 9 +++++++--
 src/preview.tsx                         | 1 -
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/CountdownTimer/index.tsx b/src/components/CountdownTimer/index.tsx
index 6c2ff770..cbe01542 100644
--- a/src/components/CountdownTimer/index.tsx
+++ b/src/components/CountdownTimer/index.tsx
@@ -39,12 +39,17 @@ const CountdownTimer: React.FC<Props> = () => {
     setPosition(position);
   }, [seconds]);
 
-  const minutes = Math.floor(seconds / 60).toString();
+  const hours = Math.floor(seconds / 3600)
+    .toString()
+    .padStart(2, '0');
+  const minutes = (Math.floor(seconds / 60) % 60).toString().padStart(2, '0');
   const secondsLeft = (seconds % 60).toString().padStart(2, '0');
 
   return seconds > 0 ? (
     <span
-      aria-label={`Expires in ${minutes}:${secondsLeft}`}
+      aria-label={`Expires in ${
+        hours === '00' ? '' : `${hours}:`
+      }${minutes}:${secondsLeft}`}
       className="hint--left relative h-[22px] w-[22px] rounded-full border-[2px] border-accent-light"
     >
       <svg
diff --git a/src/preview.tsx b/src/preview.tsx
index c94c0678..b0b02e3b 100644
--- a/src/preview.tsx
+++ b/src/preview.tsx
@@ -22,7 +22,6 @@ root.render(
             selection: {
               amount: '10000',
               assetId: '53adbb94-6a68-4eeb-af49-6b6d9e84a1f4',
-              expiration: new Date().getTime() + 60_000,
               fiat: 'USD',
               rate: 2,
             },