fix: change transactions to transfers

src/components/Features/Account/Account.js

@@ -2,37 +2,37 @@ import React from 'react';
 
 import {LINKS} from '../../../constants';
 import {useTransfer} from '../../../hooks';
-import {useAccountTransactions} from '../../../providers/TransactionsProvider';
+import {useAccountTransfers} from '../../../providers/TransfersProvider';
 import {useWallets} from '../../../providers/WalletsProvider';
 import {
   AccountAddress,
   BackButton,
   LogoutButton,
   Menu,
   MenuTitle,
-  TransactionLogContainer
+  TransferLogContainer
 } from '../../UI';
 import {LinkButton} from '../../UI/LinkButton/LinkButton';
 import {useBridgeActions} from '../Bridge/Bridge.hooks';
-import {TransactionLog} from '../TransactionLog/TransactionLog';
 import {useTransferData} from '../Transfer/Transfer.hooks';
+import {TransferLog} from '../TransferLog/TransferLog';
 import styles from './Account.module.scss';
 import {TITLE_TXT} from './Account.strings';
 
 export const Account = () => {
   const {showTransferMenu} = useBridgeActions();
   const {account, chainId, resetWallet} = useWallets();
-  const transactions = useAccountTransactions(account);
+  const transfers = useAccountTransfers(account);
   const {isEthereum, isStarknet, fromNetwork} = useTransferData();
   const {finalizeTransferFromStarknet} = useTransfer();
 
-  const renderTransactions = () => {
-    return transactions.length
-      ? transactions.map((tx, index) => (
-          <TransactionLog
+  const renderTransfers = () => {
+    return transfers.length
+      ? transfers.map((transfer, index) => (
+          <TransferLog
             key={index}
-            tx={tx}
-            onWithdrawClick={() => finalizeTransferFromStarknet(tx)}
+            transfer={transfer}
+            onWithdrawClick={() => finalizeTransferFromStarknet(transfer)}
           />
         ))
       : null;
@@ -53,7 +53,7 @@ export const Account = () => {
         {isStarknet && (
           <LinkButton text={LINKS.VOYAGER.text} url={LINKS.VOYAGER.accountUrl(chainId, account)} />
         )}
-        <TransactionLogContainer>{renderTransactions()}</TransactionLogContainer>
+        <TransferLogContainer>{renderTransfers()}</TransferLogContainer>
         <LogoutButton isDisabled={isStarknet} onClick={resetWallet} />
       </div>
     </Menu>

src/components/Features/ToastProvider/ToastProvider.js

@@ -5,103 +5,110 @@ import useDeepCompareEffect from 'use-deep-compare-effect';
 
 import {ActionType, NetworkType, TransactionStatus} from '../../../enums';
 import {usePrevious, useTransfer} from '../../../hooks';
-import {useTransactions} from '../../../providers/TransactionsProvider';
+import {useTransfers} from '../../../providers/TransfersProvider';
 import {getFullTime} from '../../../utils';
-import {PendingTransactionToast, ToastBody, WithdrawalTransactionToast} from '../../UI';
+import {PendingTransferToast, ToastBody, WithdrawalTransferToast} from '../../UI';
 import styles from './ToastProvider.module.scss';
 
 export const ToastProvider = () => {
-  const {transactions} = useTransactions();
-  const prevTransactions = usePrevious(transactions);
+  const {transfers} = useTransfers();
+  const prevTransfers = usePrevious(transfers);
   const toastsMap = useRef({});
   const toastsDismissed = useRef({});
   const {finalizeTransferFromStarknet} = useTransfer();
   const pendingStatuses = [TransactionStatus.NOT_RECEIVED, TransactionStatus.RECEIVED];
   const consumedStatus = [TransactionStatus.PENDING, TransactionStatus.ACCEPTED_ON_L2];
 
   useDeepCompareEffect(() => {
-    transactions.forEach(tx => {
-      const prevTx = prevTransactions?.find(prevTx => prevTx.id === tx.id);
-      handleToast(tx, prevTx);
+    transfers.forEach(transfer => {
+      const prevTransfer = prevTransfers?.find(prevTransfer => prevTransfer.id === transfer.id);
+      handleToast(transfer, prevTransfer);
     });
-  }, [transactions]);
+  }, [transfers]);
 
-  const handleToast = (tx, prevTx) => {
-    if (tx.type === ActionType.TRANSFER_TO_STARKNET) {
-      handleTransferToStarknetToast(tx, prevTx);
+  const handleToast = (transfer, prevTransfer) => {
+    if (transfer.type === ActionType.TRANSFER_TO_STARKNET) {
+      handleTransferToStarknetToast(transfer, prevTransfer);
     } else {
-      handleTransferFromStarknetToast(tx);
+      handleTransferFromStarknetToast(transfer);
     }
   };
 
-  const handleTransferToStarknetToast = (tx, prevTx) => {
-    const isChanged = prevTx && tx.status !== prevTx.status;
-    if (pendingStatuses.includes(tx.status)) {
-      showPendingTransactionToast(tx);
-    } else if (isChanged && consumedStatus.includes(tx.status)) {
-      showConsumedTransactionToast(tx);
+  const handleTransferToStarknetToast = (transfer, prevTransfer) => {
+    const isChanged = prevTransfer && transfer.status !== prevTransfer.status;
+    if (pendingStatuses.includes(transfer.status)) {
+      showPendingTransferToast(transfer);
+    } else if (isChanged && consumedStatus.includes(transfer.status)) {
+      showConsumedTransferToast(transfer);
     }
   };
 
-  const handleTransferFromStarknetToast = tx => {
-    if (pendingStatuses.includes(tx.status)) {
-      showPendingTransactionToast(tx);
-    } else if (!tx.eth_hash && tx.status === TransactionStatus.ACCEPTED_ON_L1) {
-      showWithdrawalToast(tx);
+  const handleTransferFromStarknetToast = transfer => {
+    if (pendingStatuses.includes(transfer.status)) {
+      showPendingTransferToast(transfer);
+    } else if (!transfer.eth_hash && transfer.status === TransactionStatus.ACCEPTED_ON_L1) {
+      showWithdrawalToast(transfer);
     }
   };
 
-  const showPendingTransactionToast = tx => {
-    let toastId = getToastId(tx);
+  const showPendingTransferToast = transfer => {
+    let toastId = getToastId(transfer);
     if (!toastId) {
-      toastId = toast.loading(renderPendingTransactionToast(tx, true));
-      toastsMap.current[tx.id] = toastId;
+      toastId = toast.loading(renderPendingTransferToast(transfer, true));
+      toastsMap.current[transfer.id] = toastId;
     }
   };
 
-  const showConsumedTransactionToast = tx => {
-    const toastId = getToastId(tx);
-    toastsMap.current[tx.id] = toast.success(renderPendingTransactionToast(tx), {
+  const showConsumedTransferToast = transfer => {
+    const toastId = getToastId(transfer);
+    toastsMap.current[transfer.id] = toast.success(renderPendingTransferToast(transfer), {
       id: toastId
     });
   };
 
-  const showWithdrawalToast = tx => {
-    const toastId = getToastId(tx);
+  const showWithdrawalToast = transfer => {
+    const toastId = getToastId(transfer);
     if (!toastId && !isToastDismissed(toastId)) {
-      toastsMap.current[tx.id] = toast.custom(t => renderWithdrawalTransactionToast(t, tx), {
-        id: toastId
-      });
+      toastsMap.current[transfer.id] = toast.custom(
+        t => renderWithdrawalTransferToast(t, transfer),
+        {
+          id: toastId
+        }
+      );
     }
   };
 
-  const renderPendingTransactionToast = (tx, isLoading) => (
-    <PendingTransactionToast isLoading={isLoading} tx={tx} onClose={() => dismissToast(tx)} />
+  const renderPendingTransferToast = (transfer, isLoading) => (
+    <PendingTransferToast
+      isLoading={isLoading}
+      transfer={transfer}
+      onClose={() => dismissToast(transfer)}
+    />
   );
 
-  const renderWithdrawalTransactionToast = (t, tx) => (
-    <WithdrawalTransactionToast
+  const renderWithdrawalTransferToast = (t, transfer) => (
+    <WithdrawalTransferToast
       t={t}
-      tx={tx}
-      onClose={() => dismissToast(tx)}
-      onDismiss={() => dismissToast(tx)}
-      onWithdrawal={() => onWithdrawalClick(tx)}
+      transfer={transfer}
+      onClose={() => dismissToast(transfer)}
+      onDismiss={() => dismissToast(transfer)}
+      onWithdrawal={() => onWithdrawalClick(transfer)}
     />
   );
 
-  const getToastId = tx => toastsMap.current[tx.id];
+  const getToastId = transfer => toastsMap.current[transfer.id];
 
   const isToastDismissed = id => !!toastsDismissed[id];
 
-  const dismissToast = tx => {
-    const toastId = getToastId(tx);
+  const dismissToast = transfer => {
+    const toastId = getToastId(transfer);
     toast.dismiss(toastId);
     toastsDismissed.current[toastId] = true;
   };
 
-  const onWithdrawalClick = async tx => {
-    await finalizeTransferFromStarknet(tx);
-    dismissToast(tx);
+  const onWithdrawalClick = async transfer => {
+    await finalizeTransferFromStarknet(transfer);
+    dismissToast(transfer);
   };
 
   return (
@@ -115,24 +122,24 @@ export const ToastProvider = () => {
   );
 };
 
-export const TransactionData = ({tx, style}) => {
+export const TransferData = ({transfer, style}) => {
   return (
     <>
       <ToastBody
         body={
-          tx.type === ActionType.TRANSFER_TO_STARKNET
+          transfer.type === ActionType.TRANSFER_TO_STARKNET
             ? `${NetworkType.ETHEREUM.name} -> ${NetworkType.STARKNET.name}`
             : `${NetworkType.STARKNET.name} -> ${NetworkType.ETHEREUM.name}`
         }
         style={style}
       />
-      <ToastBody body={`${tx.amount} ${tx.symbol}`} style={style} />
-      <ToastBody body={getFullTime(tx.timestamp)} style={style} />
+      <ToastBody body={`${transfer.amount} ${transfer.symbol}`} style={style} />
+      <ToastBody body={getFullTime(transfer.timestamp)} style={style} />
     </>
   );
 };
 
-TransactionData.propTypes = {
-  tx: PropTypes.object,
+TransferData.propTypes = {
+  transfer: PropTypes.object,
   style: PropTypes.object
 };

src/components/Features/TransactionLog/TransactionLog.js → src/components/Features/TransferLog/TransferLog.js

@@ -2,30 +2,30 @@ import PropTypes from 'prop-types';
 import React, {useEffect, useState} from 'react';
 
 import {LINKS} from '../../../constants';
-import {TransactionStatus} from '../../../enums';
+import {NetworkType, TransactionStatus} from '../../../enums';
 import {useColors} from '../../../hooks';
 import {useWallets} from '../../../providers/WalletsProvider';
 import {getFullTime} from '../../../utils';
 import {Button, CryptoLogo} from '../../UI';
 import {CryptoLogoSize} from '../../UI/CryptoLogo/CryptoLogo.enums';
 import {LinkButton} from '../../UI/LinkButton/LinkButton';
 import {useTransferData} from '../Transfer/Transfer.hooks';
-import styles from './TransactionLog.module.scss';
-import {WITHDRAWAL_BTN_TXT} from './TransactionLog.strings';
+import styles from './TransferLog.module.scss';
+import {WITHDRAWAL_BTN_TXT} from './TransferLog.strings';
 
-export const TransactionLog = ({tx, onWithdrawClick}) => {
-  const {symbol, timestamp, name, amount, status, eth_hash, starknet_hash} = tx;
+export const TransferLog = ({transfer, onWithdrawClick}) => {
+  const {symbol, timestamp, name, amount, status, eth_hash, starknet_hash} = transfer;
   const [sign, setSign] = useState('');
   const {action, isEthereum} = useTransferData();
   const {chainId} = useWallets();
 
   useEffect(() => {
-    setSign(tx.type === action ? '-' : '+');
+    setSign(transfer.type === action ? '-' : '+');
   }, [action]);
 
   return (
     <>
-      <div className={styles.transactionLog}>
+      <div className={styles.transferLog}>
         <div className={styles.left}>
           <CryptoLogo size={CryptoLogoSize.SMALL} symbol={symbol} />
           <div>
@@ -43,13 +43,13 @@ export const TransactionLog = ({tx, onWithdrawClick}) => {
             <div className={styles.links}>
               {eth_hash && (
                 <LinkButton
-                  text={LINKS.ETHERSCAN.text}
+                  text={`${NetworkType.ETHEREUM.name} Tx`}
                   url={LINKS.ETHERSCAN.txUrl(chainId, eth_hash)}
                 />
               )}
               {!eth_hash && isEthereum && <WithdrawalButton onClick={onWithdrawClick} />}
               <LinkButton
-                text={LINKS.VOYAGER.text}
+                text={`${NetworkType.STARKNET.name} Tx`}
                 url={LINKS.VOYAGER.txUrl(chainId, starknet_hash)}
               />
             </div>
@@ -83,7 +83,7 @@ WithdrawalButton.propTypes = {
   onClick: PropTypes.func
 };
 
-TransactionLog.propTypes = {
-  tx: PropTypes.object,
+TransferLog.propTypes = {
+  transfer: PropTypes.object,
   onWithdrawClick: PropTypes.func
 };

src/components/Features/TransactionLog/TransactionLog.module.scss → src/components/Features/TransferLog/TransferLog.module.scss

@@ -3,7 +3,7 @@
 $color: $--color-alpha-6;
 $hr-color: $--color-alpha-3;
 
-.transactionLog {
+.transferLog {
   display: flex;
   flex-direction: row;
   justify-content: space-between;

src/components/Features/TransactionLog/TransactionLog.strings.js → src/components/Features/TransferLog/TransferLog.strings.js

@@ -1,7 +1,7 @@
 import strings from '../../../config/strings.json';
 
 const {
-  transactionLog: {withdrawal_btn_txt}
+  transferLog: {withdrawal_btn_txt}
 } = strings;
 
 export const WITHDRAWAL_BTN_TXT = withdrawal_btn_txt;

src/components/Features/index.js

@@ -4,5 +4,5 @@ export * from './Login/Login';
 export * from './ModalProvider/ModalProvider';
 export * from './SelectToken/SelectToken';
 export * from './Transfer/Transfer';
-export * from './TransactionLog/TransactionLog';
+export * from './TransferLog/TransferLog';
 export * from './ToastProvider/ToastProvider';