txhash copy

src/components/deposit_history_modal/deposit_history_modal.tsx

@@ -1,14 +1,17 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import Image from 'next/image';
 import Lottie from 'lottie-react';
 import smallConnectingAnimation from '../../../public/animation/lf30_editor_cnkxmhy3.json';
+import {GlobalContext} from '../../contexts/global_context';
 import {ImCross} from 'react-icons/im';
 import {OrderStatusUnion} from '../../constants/order_status_union';
 import {UNIVERSAL_NUMBER_FORMAT_LOCALE} from '../../constants/display';
 import {FRACTION_DIGITS} from '../../constants/config';
 import {timestampToString} from '../../lib/common';
 import {useTranslation} from 'react-i18next';
 import {IAcceptedDepositOrder} from '../../interfaces/tidebit_defi_background/accepted_deposit_order';
+import {ToastId} from '../../constants/toast_id';
+import {ToastTypeAndText} from '../../constants/toast_type';
 
 type TranslateFunction = (s: string) => string;
 interface IDepositHistoryModal {
@@ -22,11 +25,11 @@ const DepositHistoryModal = ({
   modalClickHandler,
   getDepositHistoryData,
 }: IDepositHistoryModal) => {
+  const {t}: {t: TranslateFunction} = useTranslation('common');
   const {receipt, createTimestamp} = getDepositHistoryData;
   const {orderSnapshot: order, balanceSnapshot} = receipt;
   const balance = balanceSnapshot.shift();
-
-  const {t}: {t: TranslateFunction} = useTranslation('common');
+  const globalCtx = useContext(GlobalContext);
 
   const displayedDepositTime = timestampToString(createTimestamp);
   const displayedDepositType = t('D_W_MODAL.DEPOSIT');
@@ -61,6 +64,19 @@ const DepositHistoryModal = ({
       </div>
     );
 
+  const copyClickHandler = () => {
+    navigator.clipboard.writeText(order.txhash);
+
+    globalCtx.toast({
+      type: ToastTypeAndText.INFO.type,
+      message: t('TOAST.COPY_SUCCESS'),
+      toastId: ToastId.COPY_SUCCESS,
+      autoClose: 300,
+      isLoading: false,
+      typeText: t(ToastTypeAndText.INFO.text),
+    });
+  };
+
   const displayedDepositDetail =
     order.orderStatus === OrderStatusUnion.WAITING ? (
       <div className="text-lightGreen5">{t('D_W_MODAL.STATUS_PROCESSING')}</div>
@@ -69,7 +85,9 @@ const DepositHistoryModal = ({
     ) : (
       <div className="inline-flex text-tidebitTheme">
         <div className="mr-2">{order.txhash}</div>
-        <Image src="/elements/detail_icon.svg" alt="" width={20} height={20} />
+        <button className="w-max" onClick={copyClickHandler}>
+          <Image src="/elements/detail_icon.svg" alt="" width={20} height={20} />
+        </button>
       </div>
     );
 

src/components/receipt_item/receipt_item.tsx

@@ -22,6 +22,8 @@ import {
 } from '../../interfaces/tidebit_defi_background/order';
 import {CFDOperation} from '../../constants/cfd_order_type';
 import {FRACTION_DIGITS} from '../../constants/config';
+import {ToastId} from '../../constants/toast_id';
+import {ToastTypeAndText} from '../../constants/toast_type';
 import SafeMath from '../../lib/safe_math';
 
 type TranslateFunction = (s: string) => string;
@@ -173,6 +175,19 @@ const ReceiptItem = (histories: IReceiptItemProps) => {
         }
       : () => null;
 
+  const copyClickHandler = () => {
+    navigator.clipboard.writeText(displayedReceiptTxId);
+
+    globalCtx.toast({
+      type: ToastTypeAndText.INFO.type,
+      message: t('TOAST.COPY_SUCCESS'),
+      toastId: ToastId.COPY_SUCCESS,
+      autoClose: 300,
+      isLoading: false,
+      typeText: t(ToastTypeAndText.INFO.text),
+    });
+  };
+
   const displayedReceiptStateIcon =
     orderStatus === OrderStatusUnion.PROCESSING ||
     orderStatus === OrderStatusUnion.WAITING ? null : orderType === OrderType.CFD ? (
@@ -182,7 +197,9 @@ const ReceiptItem = (histories: IReceiptItemProps) => {
         <Image src="/elements/position_tab_icon.svg" alt="position_icon" width={25} height={25} />
       )
     ) : (
-      <Image src="/elements/detail_icon.svg" alt="" width={20} height={20} />
+      <button onClick={copyClickHandler}>
+        <Image src="/elements/detail_icon.svg" alt="" width={20} height={20} />
+      </button>
     );
 
   const displayedReceiptFeeText =

src/constants/toast_id.ts

@@ -5,6 +5,7 @@ export type IToastId = {
   INVALID_CFD_OPEN_REQUEST: string;
   INCONSISTENT_TICKER_OF_QUOTATION: string;
   UNKNOWN_ERROR_IN_COMPONENT: string;
+  COPY_SUCCESS: string;
 };
 
 export const ToastId: IToastId = {
@@ -14,4 +15,5 @@ export const ToastId: IToastId = {
   INVALID_CFD_OPEN_REQUEST: 'InvalidCFDOpenRequest',
   INCONSISTENT_TICKER_OF_QUOTATION: 'InconsistentTickerOfQuotation',
   UNKNOWN_ERROR_IN_COMPONENT: 'UnknownErrorInComponent',
+  COPY_SUCCESS: 'CopySuccess',
 };

src/locales/cn/common.json

@@ -322,7 +322,8 @@
     "SUCCESS": "成功",
     "WARNING": "警告",
     "INFO": "信息",
-    "PROGRESSING_MESSAGE": "处理中，请稍候..."
+    "PROGRESSING_MESSAGE": "处理中，请稍候...",
+    "COPY_SUCCESS": "已复制到剪贴簿！"
   },
   "SHARING_BOX": {
     "TYPE_UP": "看涨",

src/locales/en/common.json

@@ -322,7 +322,8 @@
     "SUCCESS": "Success",
     "WARNING": "Warning",
     "INFO": "Info",
-    "PROGRESSING_MESSAGE": "is still in progress, please wait..."
+    "PROGRESSING_MESSAGE": "is still in progress, please wait...",
+    "COPY_SUCCESS": "Copied to clipboard!"
   },
   "SHARING_BOX": {
     "TYPE_UP": "Up",

src/locales/tw/common.json

@@ -322,7 +322,8 @@
     "SUCCESS": "成功",
     "WARNING": "警告",
     "INFO": "訊息",
-    "PROGRESSING_MESSAGE": "處理中，請稍候..."
+    "PROGRESSING_MESSAGE": "處理中，請稍候...",
+    "COPY_SUCCESS": "已複製到剪貼簿！"
   },
   "SHARING_BOX": {
     "TYPE_UP": "看漲",