[feat] styling wert widget (#550)

[LIQ-1235] Co-authored-by: tvminh <van-minh.tran@spiritlabs.co>
LIQNFT · Feb 4, 2023 · 69c94de · 69c94de
1 parent 6fee5a4
commit 69c94de
Show file tree

Hide file tree

Showing 7 changed files with 230 additions and 255 deletions.
diff --git a/core/ui/src/components/BuyModal/BuyModalConfirmed.tsx b/core/ui/src/components/BuyModal/BuyModalConfirmed.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ExplorerLinkBase } from '@liqnft/candy-shop-sdk';
-import { Blockchain, Order as OrderSchema } from '@liqnft/candy-shop-types';
+import { Blockchain, Order as OrderSchema, PaymentInfo } from '@liqnft/candy-shop-types';
 import { formatDate } from 'utils/timer';
 import { ExplorerLink } from 'components/ExplorerLink';
 import { LiqImage } from 'components/LiqImage';
@@ -20,6 +20,7 @@ interface BuyModalConfirmedProps {
   candyShopEnv: Blockchain;
   explorerLink: ExplorerLinkBase;
   onClose: () => void;
+  paymentInfo?: PaymentInfo;
 }
 
 const PaymentErrorMessage: React.FC<{ error: PaymentErrorDetails }> = ({ error }) => {
@@ -49,16 +50,28 @@ export const BuyModalConfirmed: React.FC<BuyModalConfirmedProps> = ({
   shopPriceDecimals,
   error,
   candyShopEnv,
-  explorerLink
+  explorerLink,
+  paymentInfo
 }) => {
   const orderPrice = getPrice(shopPriceDecimalsMin, shopPriceDecimals, order.price, exchangeInfo);
 
+  const getConfirmHeader = () => {
+    if (error) return error.title;
+    if (paymentInfo?.wertConfirmInfo) return 'Transaction Pending Confirmation';
+    return 'Transaction Confirmed';
+  };
+
   return (
     <div className="candy-buy-modal-confirmed">
       <div className="candy-buy-modal-confirmed-header">
         {error ? <IconError /> : <IconTick />}
-        <div>{error ? error.title : 'Transaction Confirmed'}</div>
+        <div>{getConfirmHeader()}</div>
       </div>
+      {paymentInfo?.wertConfirmInfo ? (
+        <div className="candy-buy-modal-confirmed-description">
+          <i>You will receive a mail once the transaction gets confirmed on the blockchain</i>
+        </div>
+      ) : null}
       {error ? (
         <div className="candy-buy-confirmed-error-message">
           <PaymentErrorMessage error={error} />
@@ -106,14 +119,15 @@ export const BuyModalConfirmed: React.FC<BuyModalConfirmedProps> = ({
         </div>
         {error ? (
           <div style={{ width: '100%', height: '40px' }} />
-        ) : (
+        ) : paymentInfo?.wertConfirmInfo ? null : (
           <>
             <div className="candy-buy-modal-confirmed-item">
               <div className="candy-label">TRANSACTION HASH</div>
               <div className="candy-value">
                 <ExplorerLink type="tx" address={txHash} candyShopEnv={candyShopEnv} explorerLink={explorerLink} />
               </div>
             </div>
+
             <div className="candy-buy-modal-confirmed-item">
               <div className="candy-label">CONFIRMED ON</div>
               <div className="candy-value">{formatDate(new Date())}</div>

diff --git a/core/ui/src/components/BuyModal/index.tsx b/core/ui/src/components/BuyModal/index.tsx
@@ -1,15 +1,9 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import {
-  CandyShopPay,
-  ExplorerLinkBase,
-  OrderPayloadResponse,
-  getBaseUrl,
-  isCandyShopProdUrl
-} from '@liqnft/candy-shop-sdk';
+import React, { useEffect, useState } from 'react';
+
+import { CandyShopPay, ExplorerLinkBase, OrderPayloadResponse } from '@liqnft/candy-shop-sdk';
 import { Blockchain, Order as OrderSchema, PaymentErrorName } from '@liqnft/candy-shop-types';
 
 import { Modal } from 'components/Modal';
-import { WertPayment } from 'components/Payment';
 import { PoweredByInBuyModal } from 'components/PoweredBy/PowerByInBuyModal';
 import { Processing } from 'components/Processing';
 import { ShopExchangeInfo, BuyModalState, PaymentErrorDetails, CreditCardPayAvailability } from 'model';
@@ -18,8 +12,9 @@ import { notification, NotificationType } from 'utils/rc-notification';
 import { BuyModalConfirmed } from './BuyModalConfirmed';
 import { BuyModalDetail } from './BuyModalDetail';
 
-import './style.less';
 import { useCallback } from 'react';
+import { useWertIo } from './useWertIo';
+import './style.less';
 
 enum ProcessingTextType {
   General = 'Processing purchase',
@@ -86,7 +81,7 @@ export const BuyModal: React.FC<BuyModalProps> = ({
       });
   };
 
-  const onProcessingPay = (type: BuyModalState, error: any) => {
+  const onProcessingPay = (type: BuyModalState, error?: any) => {
     if (type === BuyModalState.PROCESSING) {
       setProcessingText(ProcessingTextType.CreditCard);
       setState(BuyModalState.PROCESSING);
@@ -102,58 +97,63 @@ export const BuyModal: React.FC<BuyModalProps> = ({
       setPaymentError(error);
       return;
     }
-    if (type === BuyModalState.PAYMENT) {
-      setState(BuyModalState.PAYMENT);
-    }
   };
 
-  const getEvmOrderPayload = useCallback(() => {
-    if (getEvmOrderPayloadCallback && walletPublicKey?.toString()) {
-      getEvmOrderPayloadCallback(walletPublicKey?.toString(), order)
-        .then((evmPayload: OrderPayloadResponse | undefined) => {
-          console.log('debugger: orderPayload=', evmPayload);
-          setEvmOrderPayload(evmPayload);
-        })
-        .catch((error: Error) => {
-          console.log(`${Logger}: getEvmOrderPayloadCallback failed, error=`, error);
-        });
-    }
-  }, [order, walletPublicKey, getEvmOrderPayloadCallback]);
-
-  const isProd = useMemo(() => {
-    const url = getBaseUrl(candyShopEnv);
-    return isCandyShopProdUrl(url);
-  }, [candyShopEnv]);
+  const getEvmOrderPayload = useCallback(
+    (walletPublicKey: string) => {
+      if (getEvmOrderPayloadCallback) {
+        getEvmOrderPayloadCallback(walletPublicKey, order)
+          .then((evmPayload: OrderPayloadResponse | undefined) => {
+            console.log('debugger: orderPayload=', evmPayload);
+            setEvmOrderPayload(evmPayload);
+          })
+          .catch((error: Error) => {
+            console.log(`${Logger}: getEvmOrderPayloadCallback failed, error=`, error);
+          });
+      }
+    },
+    [getEvmOrderPayloadCallback, order]
+  );
 
   useEffect(() => {
-    // Only fetch when haven't retrieved the creditCardPayAvailability
-    if (creditCardPayAvailable === undefined) {
-      getEvmOrderPayload();
-      CandyShopPay.checkPaymentAvailability({
-        shopId: shopAddress,
-        tokenMint: order.tokenMint
+    CandyShopPay.checkPaymentAvailability({
+      shopId: shopAddress,
+      tokenMint: order.tokenMint
+    })
+      .then(() => {
+        setCreditCardPayAvailable(CreditCardPayAvailability.Supported);
       })
-        .then(() => {
-          setCreditCardPayAvailable(CreditCardPayAvailability.Supported);
-        })
-        .catch((error: Error) => {
-          console.log(
-            `${Logger}: checkPaymentAvailability failed, token= ${order.name} ${order.tokenAccount}, reason=`,
-            error.message
-          );
-          if (
-            PaymentErrorName.InsufficientPurchaseBalance === error.name ||
-            PaymentErrorName.BelowMinPurchasePrice === error.name
-          ) {
-            // Only show notification when certain PaymentError from checkPaymentAvailability
-            handleError(error);
-            setCreditCardPayAvailable(CreditCardPayAvailability.Disabled);
-            return;
-          }
-          setCreditCardPayAvailable(CreditCardPayAvailability.Unsupported);
-        });
-    }
-  }, [order.name, order.tokenAccount, order.tokenMint, shopAddress, creditCardPayAvailable, getEvmOrderPayload]);
+      .catch((error: Error) => {
+        console.log(
+          `${Logger}: checkPaymentAvailability failed, token= ${order.name} ${order.tokenAccount}, reason=`,
+          error.message
+        );
+        if (
+          PaymentErrorName.InsufficientPurchaseBalance === error.name ||
+          PaymentErrorName.BelowMinPurchasePrice === error.name
+        ) {
+          // Only show notification when certain PaymentError from checkPaymentAvailability
+          handleError(error);
+          setCreditCardPayAvailable(CreditCardPayAvailability.Disabled);
+          return;
+        }
+        setCreditCardPayAvailable(CreditCardPayAvailability.Unsupported);
+      });
+  }, [order.name, order.tokenAccount, order.tokenMint, shopAddress]);
+
+  useEffect(() => {
+    if (!walletPublicKey) return;
+    getEvmOrderPayload(walletPublicKey);
+  }, [getEvmOrderPayload, walletPublicKey]);
+
+  const { onPayWithWert, paymentInfo } = useWertIo({
+    walletPublicKey,
+    shopAddress,
+    evmOrderPayload,
+    order,
+    onProcessingPay,
+    candyShopEnv
+  });
 
   const modalWidth = state === BuyModalState.DISPLAY || state === BuyModalState.PAYMENT ? 1000 : 600;
 
@@ -168,10 +168,6 @@ export const BuyModal: React.FC<BuyModalProps> = ({
     );
   }
 
-  const onPaymentCallback = () => {
-    setState(BuyModalState.PAYMENT);
-  };
-
   return (
     <Modal
       className="candy-buy-modal-container"
@@ -189,8 +185,8 @@ export const BuyModal: React.FC<BuyModalProps> = ({
             shopPriceDecimalsMin={shopPriceDecimalsMin}
             shopPriceDecimals={shopPriceDecimals}
             sellerUrl={sellerUrl}
-            onPayment={onPaymentCallback}
-            creditCardPayAvailable={creditCardPayAvailable}
+            onPayment={onPayWithWert}
+            creditCardPayAvailable={evmOrderPayload ? creditCardPayAvailable : CreditCardPayAvailability.Disabled}
             candyShopEnv={candyShopEnv}
             explorerLink={explorerLink}
             publicKey={walletPublicKey}
@@ -209,20 +205,7 @@ export const BuyModal: React.FC<BuyModalProps> = ({
             error={paymentError}
             candyShopEnv={candyShopEnv}
             explorerLink={explorerLink}
-          />
-        )}
-
-        {state === BuyModalState.PAYMENT && evmOrderPayload && walletPublicKey && order && (
-          <WertPayment
-            shopAddress={shopAddress}
-            walletAddress={walletPublicKey}
-            order={order}
-            shopPriceDecimals={shopPriceDecimals}
-            shopPriceDecimalsMin={shopPriceDecimalsMin}
-            exchangeInfo={exchangeInfo}
-            orderPayload={evmOrderPayload}
-            onProcessingPay={onProcessingPay}
-            isProd={isProd}
+            paymentInfo={paymentInfo}
           />
         )}
       </div>

diff --git a/core/ui/src/components/BuyModal/style.less b/core/ui/src/components/BuyModal/style.less
@@ -245,6 +245,11 @@
       line-height: @candy-shop-font-line-height-xl;
     }
 
+    .candy-buy-modal-confirmed-description {
+      margin-bottom: 20px;
+      font-size: 12px;
+    }
+
     .candy-buy-modal-confirmed-container {
       width: 100%;
       display: flex;