deposit step finished

public/_locales/de/messages.json

@@ -1943,13 +1943,13 @@
     "message": "Mit einer Transaktion senden"
   },
   "youGet": {
-    "message": "Sie erhalten:"
+    "message": "Sie erhalten"
   },
   "fixedRate": {
     "message": "Festpreis:"
   },
   "transactionId": {
-    "message": "Transaktions-ID:"
+    "message": "Transaktions-ID"
   },
   "atomDepositMemo": {
     "message": "Atom Deposit Memo"

public/_locales/en/messages.json

@@ -3221,13 +3221,13 @@
     "message": "Send by one transaction"
   },
   "youGet": {
-    "message": "You get:"
+    "message": "You get"
   },
   "fixedRate": {
     "message": "Fixed rate:"
   },
   "transactionId": {
-    "message": "Transaction ID:"
+    "message": "Transaction ID"
   },
   "atomDepositMemo": {
     "message": "Atom Deposit Memo"

public/_locales/pt/messages.json

@@ -1943,13 +1943,13 @@
     "message": "Enviar por uma transação"
   },
   "youGet": {
-    "message": "Recebe:"
+    "message": "Recebe"
   },
   "fixedRate": {
     "message": "Taxa fixa:"
   },
   "transactionId": {
-    "message": "ID de transação:"
+    "message": "ID de transação"
   },
   "atomDepositMemo": {
     "message": "Memorando de depósito de átomo"

public/_locales/tr/messages.json

@@ -1943,13 +1943,13 @@
     "message": "Bir işlem başına gönder"
   },
   "youGet": {
-    "message": "Aldığınız:"
+    "message": "Aldığınız"
   },
   "fixedRate": {
     "message": "Sabit oran:"
   },
   "transactionId": {
-    "message": "İşlem Kimliği:"
+    "message": "İşlem Kimliği"
   },
   "atomDepositMemo": {
     "message": "Atom Yatırma Notu"

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

@@ -0,0 +1,34 @@
+import React, { memo } from 'react';
+
+import Countdown from 'react-countdown';
+
+import { getExchangeData } from 'lib/apis/exolix/utils';
+
+import { useCryptoExchangeDataState } from '../context';
+
+const FORTY_FIVE_MINUTES_IN_MS = 45 * 60 * 1000;
+
+interface Props {
+  className?: string;
+}
+
+export const ExchangeCountdown = memo<Props>(({ className }) => {
+  const { exchangeData, setExchangeData } = useCryptoExchangeDataState();
+
+  if (!exchangeData) return null;
+
+  return (
+    <Countdown
+      renderer={props => (
+        <span className={className}>
+          {props.minutes}:{props.seconds < 10 ? '0' + props.seconds : props.seconds}
+        </span>
+      )}
+      date={new Date(exchangeData.createdAt).getTime() + FORTY_FIVE_MINUTES_IN_MS}
+      onComplete={async () => {
+        const data = await getExchangeData(exchangeData.id);
+        setExchangeData(data);
+      }}
+    />
+  );
+});

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

@@ -0,0 +1,35 @@
+import React, { FC } from 'react';
+
+import clsx from 'clsx';
+
+import { T, TID } from 'lib/i18n';
+
+interface InfoContainerProps extends PropsWithChildren {
+  className?: string;
+}
+
+export const InfoContainer: FC<InfoContainerProps> = ({ className, children }) => (
+  <div className={clsx('flex flex-col px-4 py-2 rounded-lg shadow-bottom border-0.5 border-transparent', className)}>
+    {children}
+  </div>
+);
+
+interface InfoRawProps extends InfoContainerProps {
+  title: TID;
+  bottomSeparator?: boolean;
+}
+
+export const InfoRaw: FC<InfoRawProps> = ({ title, bottomSeparator, className, children }) => (
+  <div
+    className={clsx(
+      'py-3 flex flex-row justify-between items-center',
+      bottomSeparator && 'border-b-0.5 border-lines',
+      className
+    )}
+  >
+    <p className="p-1 text-font-description text-grey-1">
+      <T id={title} />
+    </p>
+    {children}
+  </div>
+);

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

@@ -2,7 +2,7 @@ import React, { FC, memo } from 'react';
 
 import clsx from 'clsx';
 
-export type Steps = 0 | 1 | 2 | 3;
+import { Steps } from '../context';
 
 type Status = 'active' | 'next' | 'default';
 

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

@@ -0,0 +1,22 @@
+import React, { memo } from 'react';
+
+import clsx from 'clsx';
+
+import { Anchor, IconBase } from 'app/atoms';
+import { ReactComponent as OutLinkIcon } from 'app/icons/base/outLink.svg';
+import { T } from 'lib/i18n';
+
+import { EXOLIX_CONTACT_LINK } from '../config';
+
+interface Props {
+  className?: string;
+}
+
+export const SupportLink = memo<Props>(({ className }) => (
+  <Anchor href={EXOLIX_CONTACT_LINK} className={clsx('py-0.5 flex flex-row justify-center items-center', className)}>
+    <span className="text-font-description-bold text-secondary">
+      <T id="exolixSupport" />
+    </span>
+    <IconBase size={16} className="text-secondary" Icon={OutLinkIcon} />
+  </Anchor>
+));

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

@@ -1,7 +1,7 @@
 import { PageModalProps } from 'app/atoms/PageModal';
 import { StoredExolixCurrency } from 'app/store/crypto-exchange/state';
 
-// export const EXOLIX_CONTACT_LINK = 'https://exolix.com/contact';
+export const EXOLIX_CONTACT_LINK = 'https://exolix.com/contact';
 
 export const EXOLIX_TERMS_LINK = 'https://exolix.com/terms';
 export const EXOLIX_PRIVICY_LINK = 'https://exolix.com/privacy';

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

@@ -1,11 +1,20 @@
-import { useState } from 'react';
-
 import constate from 'constate';
 
 import { ExchangeData } from 'lib/apis/exolix/types';
+import { useStorage } from 'lib/temple/front';
+import { useAccount } from 'temple/front';
+
+export type Steps = 0 | 1 | 2 | 3;
+
+export const [CryptoExchangeDataProvider, useCryptoExchangeDataState] = constate(() => {
+  const currentAccount = useAccount();
+
+  const [exchangeData, setExchangeData] = useStorage<ExchangeData | nullish>(
+    `topup_exchange_data_state_${currentAccount.id}`,
+    null
+  );
 
-export const [ExchangeDataProvider, useExchangeDataState] = constate(() => {
-  const [exchangeData, setExchangeData] = useState<ExchangeData | nullish>(null);
+  const [step, setStep] = useStorage<Steps>(`topup_step_state_${currentAccount.id}`, 0);
 
-  return { exchangeData, setExchangeData };
+  return { exchangeData, setExchangeData, step, setStep };
 });

src/app/pages/Market/crypto-exchange/hooks/use-top-up-update.ts

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from 'react';
+
+import { toastError } from 'app/toaster';
+import { getExchangeData } from 'lib/apis/exolix/utils';
+
+import { useCryptoExchangeDataState } from '../context';
+
+export const useTopUpUpdate = () => {
+  const { exchangeData, setExchangeData } = useCryptoExchangeDataState();
+
+  const isAlive = useRef(false);
+
+  useEffect(() => {
+    let timeoutId = setTimeout(async function repeat() {
+      isAlive.current = true;
+      if (!exchangeData) return;
+
+      try {
+        const data = await getExchangeData(exchangeData.id);
+        if (!isAlive.current) {
+          return;
+        }
+        setExchangeData(data);
+        timeoutId = setTimeout(repeat, 3000);
+      } catch (e) {
+        toastError('Failed to update order status!');
+      }
+    }, 3000);
+
+    return () => {
+      isAlive.current = false;
+      clearTimeout(timeoutId);
+    };
+  }, [exchangeData, setExchangeData]);
+};

src/app/pages/Market/crypto-exchange/index.tsx

@@ -2,9 +2,8 @@ import React, { FC, useState } from 'react';
 
 import { PageModal } from 'app/atoms/PageModal';
 
-import { Steps } from './components/Stepper';
 import { defaultModalHeaderConfig } from './config';
-import { ExchangeDataProvider } from './context';
+import { CryptoExchangeDataProvider, useCryptoExchangeDataState } from './context';
 import { Deposit } from './steps/Deposit';
 import { OrderCreation } from './steps/OrderCreation';
 
@@ -16,22 +15,22 @@ interface Props {
 export const CryptoExchange: FC<Props> = ({ opened, onRequestClose }) => {
   const [modalHeaderConfig, setModalHeaderConfig] = useState(defaultModalHeaderConfig);
 
-  const [exchangeStep, setExchangeStep] = useState<Steps>(1);
+  const { step } = useCryptoExchangeDataState();
 
   return (
     <PageModal opened={opened} onRequestClose={onRequestClose} {...modalHeaderConfig}>
-      <ExchangeDataProvider>
+      <CryptoExchangeDataProvider>
         {(() => {
-          switch (exchangeStep) {
+          switch (step) {
             case 0:
-              return <OrderCreation setModalHeaderConfig={setModalHeaderConfig} setExchangeStep={setExchangeStep} />;
+              return <OrderCreation setModalHeaderConfig={setModalHeaderConfig} />;
             case 1:
-              return <Deposit setExchangeStep={setExchangeStep} />;
+              return <Deposit />;
             default:
               return null;
           }
         })()}
-      </ExchangeDataProvider>
+      </CryptoExchangeDataProvider>
     </PageModal>
   );
 };

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

@@ -9,7 +9,7 @@ import { toastSuccess } from 'app/toaster';
 import { T } from 'lib/i18n';
 import { useBooleanState } from 'lib/ui/hooks';
 
-import { useExchangeDataState } from '../../../context';
+import { useCryptoExchangeDataState } from '../../../context';
 
 import { DepositQrCodeModal } from './DepositQrCodeModal';
 
@@ -18,7 +18,7 @@ interface Props {
 }
 
 export const DepositAddressBlock = memo<Props>(({ className }) => {
-  const { exchangeData } = useExchangeDataState();
+  const { exchangeData } = useCryptoExchangeDataState();
 
   const [isQrCodeModalOpened, openQrCodeModal, closeQrCodeModal] = useBooleanState(false);
 
@@ -41,9 +41,9 @@ export const DepositAddressBlock = memo<Props>(({ className }) => {
           <span className="text-font-regular-bold">
             <T id="depositAddress" />
           </span>
-          <span className="text-font-description text-grey-1 max-w-56">{exchangeData.depositAddress}</span>
+          <span className="text-font-description text-grey-1 w-56 h-8 break-words">{exchangeData.depositAddress}</span>
         </div>
-        <div className="self-end">
+        <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>

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

@@ -4,31 +4,37 @@ import { QRCode } from 'app/atoms';
 import { ActionModal, ActionModalBodyContainer } from 'app/atoms/action-modal';
 import { T } from 'lib/i18n';
 
+import Money from '../../../../../../atoms/Money';
 import { CurrencyIcon } from '../../../components/CurrencyIcon';
-import { useExchangeDataState } from '../../../context';
+import { useCryptoExchangeDataState } from '../../../context';
 
 interface Props {
   onClose: EmptyFn;
 }
 
 export const DepositQrCodeModal = memo<Props>(({ onClose }) => {
-  const { exchangeData } = useExchangeDataState();
+  const { exchangeData } = useCryptoExchangeDataState();
 
   if (!exchangeData) return null;
 
   return (
     <ActionModal title="Deposit Address" hasCloseButton onClose={onClose} className="w-82" contentClassName="!w-full">
       <ActionModalBodyContainer className="items-center pt-4 pb-4">
-        <div className="mt-2 mb-5 rounded-lg shadow-center overflow-hidden p-4">
+        <div className="mb-5 rounded-lg shadow-center overflow-hidden p-4">
           <QRCode size={188} data={exchangeData.depositAddress} />
         </div>
 
         <div className="flex flex-col justify-center items-center gap-y-2">
           <div className="flex flex-row gap-x-2">
             <CurrencyIcon src={exchangeData.coinFrom.icon} code={exchangeData.coinFrom.coinCode} size={24} />
-            <span className="text-font-num-bold-16">{`${exchangeData.amount} ${exchangeData.coinFrom.coinCode}`}</span>
+            <span className="text-font-num-bold-16">
+              <Money smallFractionFont={false} tooltipPlacement="bottom">
+                {exchangeData.amount}
+              </Money>{' '}
+              {exchangeData.coinFrom.coinCode}
+            </span>
           </div>
-          <span className="text-font-description">
+          <span className="text-font-description text-grey-1 text-center">
             <T
               id="sendInOneTransaction"
               substitutions={[