From d35a79330ca7f79228404c812a6a6ec07b9f5547 Mon Sep 17 00:00:00 2001
From: Ji Young Lee <641712+jiyounglee@users.noreply.github.com>
Date: Mon, 18 Nov 2024 11:47:19 +1100
Subject: [PATCH] [NO CHANGELOG] [Add Tokens Widget] fix : pay with card button
 not calling on ramp (#2401)

---
 .../functions/checkSanctionedAddresses.ts     | 13 ++++++
 .../add-tokens/hooks/useRiskAssessment.ts     | 40 -------------------
 .../widgets/add-tokens/views/AddTokens.tsx    | 31 ++++++++------
 3 files changed, 32 insertions(+), 52 deletions(-)
 create mode 100644 packages/checkout/widgets-lib/src/widgets/add-tokens/functions/checkSanctionedAddresses.ts
 delete mode 100644 packages/checkout/widgets-lib/src/widgets/add-tokens/hooks/useRiskAssessment.ts

diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/functions/checkSanctionedAddresses.ts b/packages/checkout/widgets-lib/src/widgets/add-tokens/functions/checkSanctionedAddresses.ts
new file mode 100644
index 0000000000..598e305e33
--- /dev/null
+++ b/packages/checkout/widgets-lib/src/widgets/add-tokens/functions/checkSanctionedAddresses.ts
@@ -0,0 +1,13 @@
+import {
+  CheckoutConfiguration,
+  fetchRiskAssessment,
+  isAddressSanctioned,
+} from '@imtbl/checkout-sdk';
+
+export const checkSanctionedAddresses = async (
+  addresses: string[],
+  config: CheckoutConfiguration,
+): Promise<boolean> => {
+  const result = await fetchRiskAssessment(addresses, config);
+  return isAddressSanctioned(result, undefined);
+};
diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/hooks/useRiskAssessment.ts b/packages/checkout/widgets-lib/src/widgets/add-tokens/hooks/useRiskAssessment.ts
deleted file mode 100644
index 6c487b525b..0000000000
--- a/packages/checkout/widgets-lib/src/widgets/add-tokens/hooks/useRiskAssessment.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useEffect, useState } from 'react';
-import { AssessmentResult, fetchRiskAssessment } from '@imtbl/checkout-sdk';
-import { useProvidersContext } from '../../../context/providers-context/ProvidersContext';
-
-export const useRiskAssessment = () => {
-  const [riskAssessment, setRiskAssessment] = useState<AssessmentResult | undefined>();
-
-  const {
-    providersState: {
-      checkout, fromAddress, toAddress,
-    },
-  } = useProvidersContext();
-
-  useEffect(() => {
-    if (!checkout) {
-      return;
-    }
-
-    (async () => {
-      const addresses: string[] = [];
-
-      if (fromAddress) {
-        addresses.push(fromAddress);
-      }
-
-      if (toAddress && toAddress !== fromAddress) {
-        addresses.push(toAddress);
-      }
-
-      if (addresses.length === 0) {
-        return;
-      }
-
-      const assessment = await fetchRiskAssessment(addresses, checkout.config);
-      setRiskAssessment(assessment);
-    })();
-  }, [checkout, fromAddress, toAddress]);
-
-  return { riskAssessment };
-};
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
index 7af5df8f8e..3c59794d25 100644
--- a/packages/checkout/widgets-lib/src/widgets/add-tokens/views/AddTokens.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/add-tokens/views/AddTokens.tsx
@@ -15,7 +15,6 @@ import {
   type Checkout,
   EIP6963ProviderInfo,
   IMTBLWidgetEvents,
-  isAddressSanctioned,
   TokenFilterTypes,
   type TokenInfo,
   WalletProviderRdns,
@@ -69,7 +68,7 @@ import { SquidFooter } from '../components/SquidFooter';
 import { getFormattedNumberWithDecimalPlaces } from '../functions/getFormattedNumber';
 import { TokenDrawerMenu } from '../components/TokenDrawerMenu';
 import { PULSE_SHADOW } from '../utils/animation';
-import { useRiskAssessment } from '../hooks/useRiskAssessment';
+import { checkSanctionedAddresses } from '../functions/checkSanctionedAddresses';
 
 interface AddTokensProps {
   checkout: Checkout;
@@ -137,8 +136,6 @@ export function AddTokens({
   const [fetchingRoutes, setFetchingRoutes] = useState(false);
   const [insufficientBalance, setInsufficientBalance] = useState(false);
 
-  const { riskAssessment } = useRiskAssessment();
-
   const selectedAmountUsd = useMemo(
     () => convertToUsd(tokens, inputValue, selectedToken),
     [tokens, inputValue, selectedToken],
@@ -328,8 +325,11 @@ export function AddTokens({
     fetchOnRampTokens();
   }, [checkout]);
 
-  const sendRequestOnRampEvent = () => {
-    if (!riskAssessment || isAddressSanctioned(riskAssessment)) {
+  const sendRequestOnRampEvent = async () => {
+    if (
+      toAddress
+      && (await checkSanctionedAddresses([toAddress], checkout.config))
+    ) {
       viewDispatch({
         payload: {
           type: ViewActions.UPDATE_VIEW,
@@ -376,10 +376,10 @@ export function AddTokens({
   };
 
   useEffect(() => {
-    if (toProvider && riskAssessment && payWithCardClicked) {
+    if (toProvider && payWithCardClicked) {
       sendRequestOnRampEvent();
     }
-  }, [toProvider, riskAssessment, payWithCardClicked]);
+  }, [toProvider, payWithCardClicked]);
 
   const handleRouteClick = (route: RouteData) => {
     setShowOptionsDrawer(false);
@@ -395,10 +395,17 @@ export function AddTokens({
     setShowDeliverToDrawer(false);
   };
 
-  const handleReviewClick = () => {
+  const handleReviewClick = async () => {
     if (!selectedRouteData || !selectedToken?.address) return;
 
-    if (!riskAssessment || isAddressSanctioned(riskAssessment)) {
+    if (
+      fromAddress
+      && toAddress
+      && (await checkSanctionedAddresses(
+        [fromAddress, toAddress],
+        checkout.config,
+      ))
+    ) {
       viewDispatch({
         payload: {
           type: ViewActions.UPDATE_VIEW,
@@ -471,7 +478,7 @@ export function AddTokens({
   const loading = (routeInputsReady || fetchingRoutes)
     && !(selectedRouteData || insufficientBalance);
 
-  const readyToReview = routeInputsReady && !!toAddress && !!selectedRouteData && !loading && !!riskAssessment;
+  const readyToReview = routeInputsReady && !!toAddress && !!selectedRouteData && !loading;
 
   const handleWalletConnected = (
     providerType: 'from' | 'to',
@@ -676,7 +683,7 @@ export function AddTokens({
             onPayWithCard={handleCardClick}
             onConnect={handleWalletConnected}
             insufficientBalance={insufficientBalance}
-            showOnRampOption={shouldShowOnRampOption}
+            showOnRampOption={shouldShowOnRampOption || !selectedToken}
           />
           <OptionsDrawer
             checkout={checkout}