Merge pull request #176 from map3xyz/fix/usdt-triangulation

fix(binance): convert crypto amount to usdt amount for binance pay order
map3xyz · Mar 30, 2023 · bcca392 · bcca392
2 parents ceeb034 + a2ea878
commit bcca392
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 13 deletions.
diff --git a/src/components/methods/BinancePay/index.tsx b/src/components/methods/BinancePay/index.tsx
@@ -18,7 +18,10 @@ import { Context, Steps } from '../../../providers/Store';
 import { DECIMAL_FALLBACK, SubmitHandler } from '../../../steps/EnterAmount';
 
 const BinancePay = forwardRef<SubmitHandler, Props>(
-  ({ amount, isConfirming, setFormError, setIsConfirming }, submitRef) => {
+  (
+    { amount, isConfirming, setFormError, setIsConfirming, usdRate, usdtRate },
+    submitRef
+  ) => {
     const { t } = useTranslation();
     const [
       state,
@@ -81,14 +84,19 @@ const BinancePay = forwardRef<SubmitHandler, Props>(
         setIsFeeLoading(false);
       }
 
+      // triangulate amount to usd to usdt
+      const usdAmount = Number(amount) * usdRate;
+      const usdtAmount = usdAmount * usdtRate;
+      const usdtString = usdtAmount.toString();
+
       if (isMobile) {
         e?.preventDefault();
         e?.stopPropagation();
 
         const { data } = await createBinanceOrder({
           variables: {
             assetId: state.asset!.id!,
-            orderAmount: amount,
+            orderAmount: usdtString,
             userId: state.userId,
           },
         });
@@ -101,6 +109,7 @@ const BinancePay = forwardRef<SubmitHandler, Props>(
           window.location.href = data.createBinanceOrder.universalUrl;
         }
       } else {
+        dispatch({ payload: usdtString, type: 'SET_TX_AMOUNT' });
         dispatch({ payload: amount, type: 'SET_TX_DISPLAY_AMOUNT' });
         dispatch({ payload: Steps.BinancePay, type: 'SET_STEP' });
       }
@@ -250,6 +259,8 @@ type Props = {
   isConfirming: boolean;
   setFormError: (error: string) => void;
   setIsConfirming: React.Dispatch<React.SetStateAction<boolean>>;
+  usdRate: number;
+  usdtRate: number;
 };
 
 export default BinancePay;
diff --git a/src/preview.tsx b/src/preview.tsx
@@ -14,7 +14,8 @@ root.render(
           anonKey: process.env.CONSOLE_ANON_KEY || '',
           options: {
             selection: {
-              assetId: '6b562c23-d79f-4a34-a47f-cc7b28726821', // BUSD
+              // BUSD
+              assetId: '6b562c23-d79f-4a34-a47f-cc7b28726821',
               paymentMethod: 'binance-pay',
               shortcutAmounts: [10, 50, 100],
             },

diff --git a/src/steps/EnterAmount/index.tsx b/src/steps/EnterAmount/index.tsx
@@ -34,7 +34,11 @@ export type SubmitHandler = {
   submit: () => void;
 };
 
-const EnterAmountForm: React.FC<{ price: number }> = ({ price }) => {
+const EnterAmountForm: React.FC<{
+  price: number;
+  usdRate: number;
+  usdtRate: number;
+}> = ({ price, usdRate, usdtRate }) => {
   const { t } = useTranslation();
   const [state, dispatch, { onAddressRequested }] = useContext(Context);
   const [isConfirming, setIsConfirming] = useState(false);
@@ -238,14 +242,6 @@ const EnterAmountForm: React.FC<{ price: number }> = ({ price }) => {
     dispatch({
       type: 'RESET_TX',
     });
-    dispatch({
-      payload: amount + ' ' + state.asset?.symbol,
-      type: 'SET_TX_DISPLAY_AMOUNT',
-    });
-    dispatch({
-      payload: amount,
-      type: 'SET_TX_AMOUNT',
-    });
   }, [amount]);
 
   useEffect(() => {
@@ -454,6 +450,15 @@ const EnterAmountForm: React.FC<{ price: number }> = ({ price }) => {
             amount
           );
 
+          dispatch({
+            payload: amount + ' ' + state.asset?.symbol,
+            type: 'SET_TX_DISPLAY_AMOUNT',
+          });
+          dispatch({
+            payload: amount,
+            type: 'SET_TX_AMOUNT',
+          });
+
           if (state.network?.bridged) {
             await handleBridgeTransaction();
           } else {
@@ -728,6 +733,8 @@ const EnterAmountForm: React.FC<{ price: number }> = ({ price }) => {
             ref={submitRef}
             setFormError={setFormError}
             setIsConfirming={setIsConfirming}
+            usdRate={usdRate}
+            usdtRate={usdtRate}
           />
         ) : state.method.value === 'isWalletConnect' ? (
           <WalletConnect
@@ -777,6 +784,22 @@ const EnterAmount: React.FC<Props> = () => {
       currency: state.fiat,
     },
   });
+  const { data: usdtData, loading: usdtLoading } = useGetAssetPriceQuery({
+    skip:
+      state.asset?.id === 'e43eff17-0ddf-436d-b80e-403720b3b5dc' ||
+      state.method?.value !== 'binance-pay',
+    variables: {
+      assetId: 'e43eff17-0ddf-436d-b80e-403720b3b5dc',
+      currency: 'USD',
+    },
+  });
+  const { data: usdRateData, loading: usdRateLoading } = useGetAssetPriceQuery({
+    skip: state.fiat === 'USD' || state.method?.value !== 'binance-pay',
+    variables: {
+      assetId: state.asset?.id,
+      currency: 'USD',
+    },
+  });
   const { t } = useTranslation();
 
   if (!state.asset || !state.network || !state.method || !state.asset.config) {
@@ -785,14 +808,21 @@ const EnterAmount: React.FC<Props> = () => {
   }
 
   const price = state.rate || data?.assetPrice?.price || 0;
+  const usdtRate = usdtData?.assetPrice?.price || 0;
+  const usdRate =
+    state.fiat === 'USD' ? price : usdRateData?.assetPrice?.price || 0;
 
   return (
     <div className="flex h-full flex-col">
       <InnerWrapper>
         <StepTitle testId="enter-amount" value={t('title.enter_amount')} />
       </InnerWrapper>
       <StateDescriptionHeader />
-      {loading ? <LoadingWrapper /> : <EnterAmountForm price={price} />}
+      {loading || usdRateLoading || usdtLoading ? (
+        <LoadingWrapper />
+      ) : (
+        <EnterAmountForm price={price} usdRate={usdRate} usdtRate={usdtRate} />
+      )}
     </div>
   );
 };