TW-1579: Market page / Exolix Top-up

public/_locales/en/messages.json

@@ -3319,6 +3319,20 @@
   "orderExpiredDescription": {
     "message": "Retry the top-up by creating a new exchange order. If the funds have already been sent, wait for the deposit to be confirmed."
   },
+  "memo": {
+    "message": "MEMO"
+  },
+  "bothMemoAndAddressAreRequired": {
+    "message": "Both the memo and address are required to successfully deposit your funds to Exolix"
+  },
+  "memoDisclaimer": {
+    "message": "You must copy both the $networkName$ address and MEMO to complete deposit, or you’ll lose your funds.",
+    "placeholders": {
+      "networkName": {
+        "content": "$1"
+      }
+    }
+  },
   "sendInOneTransaction": {
     "message": "Send in one transaction to the $networkName$ deposit address",
     "placeholders": {

src/app/pages/Market/crypto-exchange/components/DisplayExchangeValue.tsx

@@ -0,0 +1,28 @@
+import React, { memo, useMemo } from 'react';
+
+import Money from 'app/atoms/Money';
+
+import { EXOLIX_DECIMALS } from '../config';
+import { getCurrencyDisplayCode } from '../utils';
+
+interface Props {
+  value: string | number;
+  currencyCode: string;
+  showAllDecimals?: boolean;
+}
+
+export const DisplayExchangeValue = memo<Props>(({ value, currencyCode, showAllDecimals = false }) => {
+  const decimals = useMemo(
+    () => (showAllDecimals ? EXOLIX_DECIMALS : String(value).length > 10 ? 2 : EXOLIX_DECIMALS),
+    [value, showAllDecimals]
+  );
+
+  return (
+    <>
+      <Money cryptoDecimals={decimals} smallFractionFont={false} tooltipPlacement="bottom">
+        {value}
+      </Money>{' '}
+      {getCurrencyDisplayCode(currencyCode)}
+    </>
+  );
+});

src/app/pages/Market/crypto-exchange/config.ts

@@ -9,6 +9,7 @@ export const EXOLIX_PRIVICY_LINK = 'https://exolix.com/privacy';
 export const TEZOS_EXOLIX_NETWORK_CODE = 'XTZ';
 
 export const VALUE_PLACEHOLDER = '---';
+export const EXOLIX_DECIMALS = 8;
 
 export const INITIAL_INPUT_CURRENCY: StoredExolixCurrency = {
   code: 'ETH',

src/app/pages/Market/crypto-exchange/steps/ConvertationTracker/components/CompletedStatusInfoBlocks.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useMemo } from 'react';
 
-import { Anchor, HashShortView, IconBase, Money } from 'app/atoms';
+import { Anchor, HashShortView, IconBase } from 'app/atoms';
 import { HashChip } from 'app/atoms/HashChip';
 import { ReactComponent as CopyIcon } from 'app/icons/base/copy.svg';
 import { ReactComponent as OutLinkIcon } from 'app/icons/base/outLink.svg';
@@ -9,6 +9,7 @@ import { ExchangeHash } from 'lib/apis/exolix/types';
 import { t } from 'lib/i18n';
 
 import { CurrencyIcon } from '../../../components/CurrencyIcon';
+import { DisplayExchangeValue } from '../../../components/DisplayExchangeValue';
 import { InfoContainer, InfoRaw } from '../../../components/InfoBlock';
 import { VALUE_PLACEHOLDER } from '../../../config';
 import { useCryptoExchangeDataState } from '../../../context';
@@ -45,10 +46,7 @@ export const CompletedStatusInfoBlocks = memo(() => {
         <InfoRaw bottomSeparator title="youSent">
           <div className="flex flex-row gap-x-0.5">
             <span className="p-1 text-font-description-bold">
-              <Money smallFractionFont={false} tooltipPlacement="bottom">
-                {exchangeData.amount}
-              </Money>{' '}
-              {exchangeData.coinFrom.coinCode}
+              <DisplayExchangeValue value={exchangeData.amount} currencyCode={exchangeData.coinFrom.coinCode} />
             </span>
             <CurrencyIcon src={exchangeData.coinFrom.icon} code={exchangeData.coinFrom.coinCode} size={24} />
           </div>
@@ -65,10 +63,7 @@ export const CompletedStatusInfoBlocks = memo(() => {
         <InfoRaw bottomSeparator title="youReceived">
           <div className="flex flex-row gap-x-0.5">
             <span className="p-1 text-font-description-bold">
-              <Money smallFractionFont={false} tooltipPlacement="bottom">
-                {exchangeData.amountTo}
-              </Money>{' '}
-              {exchangeData.coinTo.coinCode}
+              <DisplayExchangeValue value={exchangeData.amountTo} currencyCode={exchangeData.coinTo.coinCode} />
             </span>
             <CurrencyIcon src={exchangeData.coinTo.icon} code={exchangeData.coinTo.coinCode} size={24} />
           </div>

src/app/pages/Market/crypto-exchange/steps/ConvertationTracker/components/InProgressStatusInfoBlocks.tsx

@@ -2,12 +2,12 @@ import React, { memo, useCallback } from 'react';
 
 import { IconBase } from 'app/atoms';
 import { HashChip } from 'app/atoms/HashChip';
-import Money from 'app/atoms/Money';
 import { ReactComponent as CopyIcon } from 'app/icons/base/copy.svg';
 import { toastSuccess } from 'app/toaster';
 import { t } from 'lib/i18n';
 
 import { CurrencyIcon } from '../../../components/CurrencyIcon';
+import { DisplayExchangeValue } from '../../../components/DisplayExchangeValue';
 import { InfoContainer, InfoRaw } from '../../../components/InfoBlock';
 import { useCryptoExchangeDataState } from '../../../context';
 
@@ -27,10 +27,7 @@ export const InProgressStatusInfoBlocks = memo(() => {
         <InfoRaw bottomSeparator title="youSent">
           <div className="flex flex-row gap-x-0.5">
             <span className="p-1 text-font-description-bold">
-              <Money smallFractionFont={false} tooltipPlacement="bottom">
-                {exchangeData.amount}
-              </Money>{' '}
-              {exchangeData.coinFrom.coinCode}
+              <DisplayExchangeValue value={exchangeData.amount} currencyCode={exchangeData.coinFrom.coinCode} />
             </span>
             <CurrencyIcon src={exchangeData.coinFrom.icon} code={exchangeData.coinFrom.coinCode} size={24} />
           </div>
@@ -47,10 +44,7 @@ export const InProgressStatusInfoBlocks = memo(() => {
         <InfoRaw bottomSeparator title="youGet">
           <div className="flex flex-row gap-x-0.5">
             <span className="p-1 text-font-description-bold">
-              <Money smallFractionFont={false} tooltipPlacement="bottom">
-                {exchangeData.amountTo}
-              </Money>{' '}
-              {exchangeData.coinTo.coinCode}
+              <DisplayExchangeValue value={exchangeData.amountTo} currencyCode={exchangeData.coinTo.coinCode} />
             </span>
             <CurrencyIcon src={exchangeData.coinTo.icon} code={exchangeData.coinTo.coinCode} size={24} />
           </div>

src/app/pages/Market/crypto-exchange/steps/Deposit/components/DepositAddressBlock.tsx

@@ -11,7 +11,7 @@ import { useBooleanState } from 'lib/ui/hooks';
 
 import { useCryptoExchangeDataState } from '../../../context';
 
-import { DepositQrCodeModal } from './DepositQrCodeModal';
+import { DepositAddressQrCodeModal } from './DepositAddressQrCodeModal';
 
 interface Props {
   className?: string;
@@ -49,7 +49,7 @@ export const DepositAddressBlock = memo<Props>(({ className }) => {
         </div>
       </div>
 
-      {isQrCodeModalOpened && <DepositQrCodeModal onClose={closeQrCodeModal} />}
+      {isQrCodeModalOpened && <DepositAddressQrCodeModal onClose={closeQrCodeModal} />}
     </>
   );
 });

src/app/pages/Market/crypto-exchange/steps/Deposit/components/DepositQrCodeModal.tsx → src/app/pages/Market/crypto-exchange/steps/Deposit/components/DepositAddressQrCodeModal.tsx

@@ -1,17 +1,18 @@
 import React, { memo } from 'react';
 
-import { Money, QRCode } from 'app/atoms';
+import { QRCode } from 'app/atoms';
 import { ActionModal, ActionModalBodyContainer } from 'app/atoms/action-modal';
 import { T } from 'lib/i18n';
 
 import { CurrencyIcon } from '../../../components/CurrencyIcon';
+import { DisplayExchangeValue } from '../../../components/DisplayExchangeValue';
 import { useCryptoExchangeDataState } from '../../../context';
 
 interface Props {
   onClose: EmptyFn;
 }
 
-export const DepositQrCodeModal = memo<Props>(({ onClose }) => {
+export const DepositAddressQrCodeModal = memo<Props>(({ onClose }) => {
   const { exchangeData } = useCryptoExchangeDataState();
 
   if (!exchangeData) return null;
@@ -24,13 +25,14 @@ export const DepositQrCodeModal = memo<Props>(({ onClose }) => {
         </div>
 
         <div className="flex flex-col justify-center items-center gap-y-2">
-          <div className="flex flex-row gap-x-2">
+          <div className="flex flex-row items-center gap-x-2">
             <CurrencyIcon src={exchangeData.coinFrom.icon} code={exchangeData.coinFrom.coinCode} size={24} />
-            <span className="text-font-num-bold-16">
-              <Money smallFractionFont={false} tooltipPlacement="bottom">
-                {exchangeData.amount}
-              </Money>{' '}
-              {exchangeData.coinFrom.coinCode}
+            <span className={exchangeData.amount.length > 12 ? 'text-font-num-bold-14' : 'text-font-num-bold-16'}>
+              <DisplayExchangeValue
+                showAllDecimals
+                value={exchangeData.amount}
+                currencyCode={exchangeData.coinFrom.coinCode}
+              />
             </span>
           </div>
           <span className="text-font-description text-grey-1 text-center">

src/app/pages/Market/crypto-exchange/steps/Deposit/components/DepositMemoBlock.tsx

@@ -0,0 +1,66 @@
+import React, { memo, useCallback } from 'react';
+
+import clsx from 'clsx';
+
+import { CaptionAlert } from 'app/atoms';
+import { IconButton } from 'app/atoms/IconButton';
+import { ReactComponent as CopyIcon } from 'app/icons/base/copy.svg';
+import { ReactComponent as QrCodeIcon } from 'app/icons/base/qr_code.svg';
+import { toastSuccess } from 'app/toaster';
+import { t, T } from 'lib/i18n';
+import { useBooleanState } from 'lib/ui/hooks';
+
+import { useCryptoExchangeDataState } from '../../../context';
+
+import { DepositMemoQrCodeModal } from './DepositMemoQrCodeModal';
+
+interface Props {
+  className?: string;
+}
+
+export const DepositMemoBlock = memo<Props>(({ className }) => {
+  const { exchangeData } = useCryptoExchangeDataState();
+
+  const [isQrCodeModalOpened, openQrCodeModal, closeQrCodeModal] = useBooleanState(false);
+
+  const handleCopyButtonClick = useCallback(() => {
+    if (!exchangeData?.depositExtraId) return;
+
+    window.navigator.clipboard.writeText(exchangeData.depositExtraId);
+    toastSuccess(t('copiedAddress'));
+  }, [exchangeData]);
+
+  if (!exchangeData?.depositExtraId) return null;
+
+  return (
+    <>
+      <div
+        className={clsx(
+          'flex justify-between items-center p-4 mb-4 rounded-lg shadow-bottom border-0.5 border-transparent',
+          className
+        )}
+      >
+        <div className="flex flex-col gap-y-1">
+          <span className="text-font-regular-bold">
+            <T id="memo" />
+          </span>
+          <span className="text-font-description text-grey-1 w-56 h-8 py-2 break-words">
+            {exchangeData.depositExtraId}
+          </span>
+        </div>
+        <div className="flex flex-row gap-x-2 self-end">
+          <IconButton Icon={CopyIcon} color="blue" onClick={handleCopyButtonClick} />
+          <IconButton Icon={QrCodeIcon} color="blue" onClick={openQrCodeModal} />
+        </div>
+      </div>
+
+      <CaptionAlert
+        type="warning"
+        message={t('memoDisclaimer', [exchangeData.coinFrom.networkName])}
+        className="mb-6"
+      />
+
+      {isQrCodeModalOpened && <DepositMemoQrCodeModal onClose={closeQrCodeModal} />}
+    </>
+  );
+});

src/app/pages/Market/crypto-exchange/steps/Deposit/components/DepositMemoQrCodeModal.tsx

@@ -0,0 +1,34 @@
+import React, { memo } from 'react';
+
+import { QRCode } from 'app/atoms';
+import { ActionModal, ActionModalBodyContainer } from 'app/atoms/action-modal';
+import { t, T } from 'lib/i18n';
+
+import { useCryptoExchangeDataState } from '../../../context';
+
+interface Props {
+  onClose: EmptyFn;
+}
+
+export const DepositMemoQrCodeModal = memo<Props>(({ onClose }) => {
+  const { exchangeData } = useCryptoExchangeDataState();
+
+  if (!exchangeData?.depositExtraId) return null;
+
+  return (
+    <ActionModal title={t('memo')} hasCloseButton onClose={onClose} className="w-82" contentClassName="!w-full">
+      <ActionModalBodyContainer className="items-center pt-4 pb-4">
+        <div className="mb-5 rounded-lg shadow-center overflow-hidden p-4">
+          <QRCode size={188} data={exchangeData.depositExtraId} />
+        </div>
+
+        <div className="flex flex-col justify-center items-center gap-y-2 text-center">
+          <span className="text-font-num-bold-16">{exchangeData.depositExtraId}</span>
+          <span className="text-font-description text-grey-1">
+            <T id="bothMemoAndAddressAreRequired" />
+          </span>
+        </div>
+      </ActionModalBodyContainer>
+    </ActionModal>
+  );
+});

src/app/pages/Market/crypto-exchange/steps/Deposit/components/ExpiresInBlock.tsx

@@ -2,10 +2,10 @@ import React, { memo } from 'react';
 
 import clsx from 'clsx';
 
-import Money from 'app/atoms/Money';
 import { T } from 'lib/i18n';
 
 import { CurrencyIcon } from '../../../components/CurrencyIcon';
+import { DisplayExchangeValue } from '../../../components/DisplayExchangeValue';
 import { ExchangeCountdown } from '../../../components/ExchangeCountdown';
 import { useCryptoExchangeDataState } from '../../../context';
 
@@ -27,17 +27,14 @@ export const ExpiresInBlock = memo<Props>(({ className }) => {
         <ExchangeCountdown className="text-font-num-bold-12 w-8" />
       </div>
       <div className="flex flex-col justify-center items-center gap-y-2 p-4 pt-2.5">
-        <div className="flex flex-row gap-x-2">
+        <div className="flex flex-row items-center gap-x-2">
           <CurrencyIcon src={exchangeData.coinFrom.icon} code={exchangeData.coinFrom.coinCode} size={24} />
-          <span className="text-font-num-bold-16">
-            <Money
-              cryptoDecimals={exchangeData.amount.length > 12 ? 2 : 6}
-              smallFractionFont={false}
-              tooltipPlacement="bottom"
-            >
-              {exchangeData.amount}
-            </Money>{' '}
-            {exchangeData.coinFrom.coinCode}
+          <span className={exchangeData.amount.length > 12 ? 'text-font-num-bold-14' : 'text-font-num-bold-16'}>
+            <DisplayExchangeValue
+              showAllDecimals
+              value={exchangeData.amount}
+              currencyCode={exchangeData.coinFrom.coinCode}
+            />
           </span>
         </div>
         <span className="text-font-description text-grey-1 text-center">