[DO NOT MERGE - Iceboxed] Add Iframe and Summary card for the KYC

signer-service/yarn.lock

@@ -1203,13 +1203,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"big.js@npm:^6.2.1":
-  version: 6.2.1
-  resolution: "big.js@npm:6.2.1"
-  checksum: 1d4b621451de712cab20464a26f22b2eee5e7daf0ee88c49dfbfa76061ec37cff2257751e8c3fc183c231bcffac2f006e33af930d8f49b03c758890080b76ada
-  languageName: node
-  linkType: hard
-
 "bignumber.js@npm:^9.0.0, bignumber.js@npm:^9.1.2":
   version: 9.1.2
   resolution: "bignumber.js@npm:9.1.2"

src/components/Iframe/index.tsx

@@ -0,0 +1,41 @@
+import React, { useState, useEffect }  from 'react';
+import { BaseLayout } from '../../layouts';
+
+interface IframeProps {
+  src: string;             
+  title: string;      
+  subtitle: string;   
+}
+
+const IframeComponent: React.FC<IframeProps> = ({
+  src, title, subtitle
+}) => {
+  const [cachedSrc, setCachedSrc] = useState<string | null>(null);
+
+  useEffect(() => {
+    if ( src && !cachedSrc) {
+      setCachedSrc(src);
+    }
+  }, [src, cachedSrc]);
+  let main = 
+  <div className="flex justify-center items-center w-full h-full p-4">
+  <div className="max-w-lg w-full">
+    <div className="text-center">
+      <h1 className="text-2xl font-bold text-blue-700 mb-4">{title}</h1>
+      <h2 className="text-md mb-4">{subtitle}</h2>
+      <div className="relative pb-[150%] md:w-[535px] md:h-[550px]"> 
+        <iframe
+          src={src}
+          style={{ border: 'none' }}
+          className="absolute top-0 left-0 w-full h-full "
+          allowFullScreen
+        />
+      </div>
+    </div>
+  </div>
+</div>
+
+  return <BaseLayout main={main} />;
+};
+
+export default IframeComponent;

src/config/index.ts

@@ -59,7 +59,7 @@ export const config = {
     projectId: '299fda67fbf3b60a31ba8695524534cd',
   },
   test: {
-    mockSep24: false,
+    mockSep24: true,
     overwriteMinimumTransferAmount: false,
   },
 };

src/hooks/useMainProcess.ts

@@ -21,6 +21,8 @@ import {
 import { EventStatus, GenericEvent } from '../components/GenericEvent';
 import Big from 'big.js';
 import { createTransactionEvent, useEventsContext } from '../contexts/events';
+import { storageService } from '../services/storage/local';
+import { OFFRAMPING_STATE_LOCAL_STORAGE_KEY } from '../services/offrampingFlow';
 
 export type SigningPhase = 'started' | 'approved' | 'signed' | 'finished';
 
@@ -90,6 +92,7 @@ export const useMainProcess = () => {
           from_amount: amountInUnits,
           to_amount: Big(minAmountOutUnits).round(2, 0).toFixed(2, 0),
         });
+
 
         try {
           const stellarEphemeralSecret = createStellarEphemeralSecret();
@@ -110,7 +113,6 @@ export const useMainProcess = () => {
           const firstSep24Response = await sep24First(anchorSessionParams);
           console.log('sep24 url:', firstSep24Response.url);
           setSep24Url(firstSep24Response.url);
-
           const secondSep24Response = await sep24Second(firstSep24Response, anchorSessionParams!);
 
           console.log('secondSep24Response', secondSep24Response);
@@ -127,17 +129,35 @@ export const useMainProcess = () => {
           trackEvent(createTransactionEvent('kyc_completed', initialState));
 
           updateHookStateFromState(initialState);
+
         } catch (error) {
+          let initialStateFailure = await constructInitialState({
+            sep24Id: 'null',
+            inputTokenType,
+            outputTokenType,
+            amountIn: amountInUnits,
+            amountOut: minAmountOutUnits,
+            sepResult: {
+              amount: '0',
+              memo: '0',
+              memoType: '0',
+              offrampingAccount: '0',
+            },
+          });
+          initialStateFailure.phase = 'failure';
+          storageService.set(OFFRAMPING_STATE_LOCAL_STORAGE_KEY, initialStateFailure);
+          setOfframpingPhase('failure');
+
           console.error('Some error occurred initializing the offramping process', error);
-          setOfframpingStarted(false);
         }
       })();
     },
-    [offrampingPhase, offrampingStarted, trackEvent, updateHookStateFromState],
+    [offrampingPhase, offrampingStarted, trackEvent, updateHookStateFromState, setOfframpingPhase],
   );
 
   const finishOfframping = useCallback(() => {
     (async () => {
+      setSep24Url(undefined);
       await clearOfframpingState();
       setOfframpingStarted(false);
       updateHookStateFromState(undefined);
@@ -151,7 +171,6 @@ export const useMainProcess = () => {
     })();
   }, [offrampingPhase, updateHookStateFromState, wagmiConfig]);
 
-  const resetSep24Url = () => setSep24Url(undefined);
 
   return {
     setOfframpingPhase,
@@ -161,7 +180,6 @@ export const useMainProcess = () => {
     offrampingStarted,
     sep24Id,
     finishOfframping,
-    resetSep24Url,
     signingPhase,
   };
 };

src/pages/progress/index.tsx

@@ -3,6 +3,8 @@ import { ExclamationCircleIcon } from '@heroicons/react/20/solid';
 import { FinalOfframpingPhase, OfframpingPhase } from '../../services/offrampingFlow';
 import { Box } from '../../components/Box';
 import { BaseLayout } from '../../layouts';
+import { SigningBox } from '../../components/SigningBox';
+import { SigningPhase } from '../../hooks/useMainProcess'
 
 const OFFRAMPING_PHASE_MESSAGES: Record<OfframpingPhase, string> = {
   prepareTransactions: '1/11: Preparing transactions',
@@ -25,9 +27,10 @@ const handleTabClose = (event: Event) => {
 interface ProgressPageProps {
   setOfframpingPhase: StateUpdater<OfframpingPhase | FinalOfframpingPhase | undefined>;
   offrampingPhase: OfframpingPhase | FinalOfframpingPhase | undefined;
+  signingPhase: SigningPhase | undefined;
 }
 
-export const ProgressPage: FC<ProgressPageProps> = ({ setOfframpingPhase, offrampingPhase }) => {
+export const ProgressPage: FC<ProgressPageProps> = ({ setOfframpingPhase, offrampingPhase, signingPhase }) => {
   // After 15 minutes of waiting, we want to redirect user to the failure page.
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -49,6 +52,7 @@ export const ProgressPage: FC<ProgressPageProps> = ({ setOfframpingPhase, offram
 
   const main = (
     <main>
+      <SigningBox step={signingPhase} />
       <Box className="flex flex-col items-center justify-center mt-12">
         <div className="flex flex-col items-center justify-center">
           <ExclamationCircleIcon className="text-red-500 w-36" />

src/pages/swap/index.tsx

@@ -25,6 +25,7 @@ import { SuccessPage } from '../success';
 import { FailurePage } from '../failure';
 import { useInputTokenBalance } from '../../hooks/useInputTokenBalance';
 import { UserBalance } from '../../components/UserBalance';
+import IframeComponent from '../../components/Iframe';
 
 const Arrow = () => (
   <div className="flex justify-center w-full my-5">
@@ -36,6 +37,7 @@ export const SwapPage = () => {
   const [isQuoteSubmitted, setIsQuoteSubmitted] = useState(false);
   const formRef = useRef<HTMLDivElement | null>(null);
   const [api, setApi] = useState<ApiPromise | null>(null);
+  const [isIframVisible, setIframVisible] = useState(false);
 
   const { isDisconnected } = useAccount();
 
@@ -58,10 +60,13 @@ export const SwapPage = () => {
     sep24Id,
     offrampingPhase,
     setOfframpingPhase,
-    resetSep24Url,
     signingPhase,
   } = useMainProcess();
 
+  const handleSubmitButtonClick = () => {
+    setIframVisible(true);
+  }
+
   const {
     tokensModal: [modalType, setModalType],
     onFromChange,
@@ -161,11 +166,12 @@ export const SwapPage = () => {
     // Do not show any error if the user is disconnected
     if (isDisconnected) return;
 
-    if (typeof userInputTokenBalance === 'string') {
-      if (Big(userInputTokenBalance).lt(fromAmount ?? 0)) {
-        return `Insufficient balance. Your balance is ${userInputTokenBalance} ${fromToken?.assetSymbol}.`;
-      }
-    }
+    // TESTING - TODO: Remove comment
+    // if (typeof userInputTokenBalance === 'string') {
+    //   if (Big(userInputTokenBalance).lt(fromAmount ?? 0)) {
+    //     return `Insufficient balance. Your balance is ${userInputTokenBalance} ${fromToken?.assetSymbol}.`;
+    //   }
+    // }
 
     const amountOut = tokenOutData.data?.amountOut;
 
@@ -224,57 +230,66 @@ export const SwapPage = () => {
 
   if (offrampingPhase !== undefined || offrampingStarted) {
     const showMainScreenAnyway =
-      offrampingPhase === undefined || ['prepareTransactions', 'squidRouter'].includes(offrampingPhase);
+      offrampingPhase === undefined;
+
+    if (sep24Url && isIframVisible && showMainScreenAnyway ){
+      return (
+          <IframeComponent
+            src={sep24Url}
+            title="Verify Your Identity to Start Offramping"
+            subtitle="Please follow the steps below to complete the identity verification."
+          />
+        );
+    }
     if (!showMainScreenAnyway) {
-      return <ProgressPage setOfframpingPhase={setOfframpingPhase} offrampingPhase={offrampingPhase} />;
+      return <ProgressPage setOfframpingPhase={setOfframpingPhase} offrampingPhase={offrampingPhase} signingPhase={signingPhase} />;
     }
   }
 
   const main = (
     <main ref={formRef}>
-      <SigningBox step={signingPhase} />
-      <form
-        className="max-w-2xl px-4 py-8 mx-4 mt-12 mb-12 rounded-lg shadow-custom md:mx-auto md:w-2/3 lg:w-3/5 xl:w-1/2"
-        onSubmit={onSubmit}
-      >
-        <h1 className="mb-5 text-3xl font-bold text-center text-blue-700">Withdraw</h1>
-        <LabeledInput label="You withdraw" Input={WidthrawNumericInput} />
-        <Arrow />
-        <LabeledInput label="You receive" Input={ReceiveNumericInput} />
-        <p className="text-red-600">{getCurrentErrorMessage()}</p>
-        <ExchangeRate
-          {...{
-            tokenOutData,
-            fromToken,
-            toTokenSymbol: toToken.fiat.symbol,
-          }}
-        />
-        <FeeCollapse
-          fromAmount={fromAmount?.toString()}
-          toAmount={tokenOutData.data?.amountOut.preciseString}
-          toToken={toToken}
-        />
-        <section className="flex items-center justify-center w-full mt-5">
-          <BenefitsList amount={fromAmount} currency={from} />
-        </section>
-        {sep24Url !== undefined ? (
-          <a
-            href={sep24Url}
-            target="_blank"
-            rel="noreferrer"
-            className="w-full mt-5 text-white bg-blue-700 btn rounded-xl"
-            onClick={resetSep24Url}
+          <form
+            className="max-w-2xl px-4 py-8 mx-4 mt-12 mb-12 rounded-lg shadow-custom md:mx-auto md:w-2/3 lg:w-3/5 xl:w-1/2"
+            onSubmit={onSubmit}
           >
-            Start Offramping
-          </a>
-        ) : (
-          <SwapSubmitButton
-            text={offrampingStarted ? 'Offramping in Progress' : 'Confirm'}
-            disabled={Boolean(getCurrentErrorMessage()) || !inputAmountIsStable}
-            pending={offrampingStarted || offrampingPhase !== undefined}
-          />
-        )}
-      </form>
+            <h1 className="mb-5 text-3xl font-bold text-center text-blue-700">Withdraw</h1>
+            <LabeledInput label="You withdraw" Input={WidthrawNumericInput} />
+            <Arrow />
+            <LabeledInput label="You receive" Input={ReceiveNumericInput} />
+            <p className="text-red-600">{getCurrentErrorMessage()}</p>
+            <ExchangeRate
+              {...{
+                tokenOutData,
+                fromToken,
+                toTokenSymbol: toToken.fiat.symbol,
+              }}
+            />
+            <FeeCollapse
+              fromAmount={fromAmount?.toString()}
+              toAmount={tokenOutData.data?.amountOut.preciseString}
+              toToken={toToken}
+            />
+            <section className="flex items-center justify-center w-full mt-5">
+              <BenefitsList amount={fromAmount} currency={from} />
+            </section>
+            {sep24Url !== undefined ? (
+              <button
+                href={sep24Url}
+                target="_blank"
+                rel="noreferrer"
+                className="w-full mt-5 text-white bg-blue-700 btn rounded-xl"
+                onClick={handleSubmitButtonClick}
+              >
+                Start Offramping
+              </button>
+            ) : (
+              <SwapSubmitButton
+                text={offrampingStarted ? 'Offramping in Progress' : 'Confirm'}
+                disabled={Boolean(getCurrentErrorMessage()) || !inputAmountIsStable}
+                pending={offrampingStarted || offrampingPhase !== undefined}
+              />
+            )}
+          </form>
     </main>
   );
 

src/services/anchor/index.ts

@@ -186,9 +186,9 @@ export async function sep12First(sessionParams: IAnchorSessionParams): Promise<v
 }*/
 
 export async function sep24First(sessionParams: IAnchorSessionParams): Promise<ISep24Intermediate> {
-  if (config.test.mockSep24) {
-    return { url: 'https://www.example.com', id: '1234' };
-  }
+  // if (config.test.mockSep24) {
+  //   return { url: 'https://www.example.com', id: '1234' };
+  // }
 
   const { token, tomlValues } = sessionParams;
   const { sep24Url } = tomlValues;
@@ -227,11 +227,13 @@ export async function sep24Second(
   const { sep24Url } = tomlValues;
 
   if (config.test.mockSep24) {
+    // sleep 10 seconds, mock user completion of KYC
+    await new Promise((resolve) => setTimeout(resolve, 10000));
     return {
       amount: sessionParams.offrampAmount,
       memo: 'MYK1722323689',
       memoType: 'text',
-      offrampingAccount: (await fetchSigningServiceAccountId()).stellar.public,
+      offrampingAccount: "GSAPDFASJFPASFOKNASOFKNAS",
     };
   }
 

src/services/offrampingFlow.ts

@@ -104,7 +104,7 @@ export interface ExecutionContext {
   setSigningPhase: (n: SigningPhase) => void;
 }
 
-const OFFRAMPING_STATE_LOCAL_STORAGE_KEY = 'offrampingState';
+export const OFFRAMPING_STATE_LOCAL_STORAGE_KEY = 'offrampingState';
 
 export interface InitiateStateArguments {
   sep24Id: string;