feat: add transaction notifications (#1177)

package.json

@@ -69,7 +69,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "react-table": "^7.6.3",
-    "react-toastify": "^6.0.5",
+    "react-toastify": "^9.1.2",
     "react-transition-group": "^4.4.5",
     "react-use": "^17.2.3",
     "redux": "^4.0.5",

src/App.tsx

@@ -1,4 +1,3 @@
-import 'react-toastify/dist/ReactToastify.css';
 import './i18n';
 
 import { FaucetClient, SecurityStatusCode } from '@interlay/interbtc-api';
@@ -21,6 +20,7 @@ import vaultsByAccountIdQuery from '@/services/queries/vaults-by-accountId-query
 import { BitcoinNetwork } from '@/types/bitcoin';
 import { PAGES } from '@/utils/constants/links';
 
+import { TransactionModal } from './components/TransactionModal';
 import * as constants from './constants';
 import TestnetBanner from './legacy-components/TestnetBanner';
 import { FeatureFlags, useFeatureFlag } from './utils/hooks/use-feature-flag';
@@ -234,6 +234,7 @@ const App = (): JSX.Element => {
           )}
         />
       </Layout>
+      <TransactionModal />
     </>
   );
 };

src/assets/icons/CheckCircle.tsx

@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+
+import { Icon, IconProps } from '@/component-library/Icon';
+
+const CheckCircle = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon
+    {...props}
+    ref={ref}
+    xmlns='http://www.w3.org/2000/svg'
+    fill='none'
+    viewBox='0 0 24 24'
+    strokeWidth='1.5'
+    stroke='currentColor'
+  >
+    <path
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      d='M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
+    />
+  </Icon>
+));
+
+CheckCircle.displayName = 'CheckCircle';
+
+export { CheckCircle };

src/assets/icons/ListBullet.tsx

@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+
+import { Icon, IconProps } from '@/component-library/Icon';
+
+const ListBullet = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon
+    ref={ref}
+    xmlns='http://www.w3.org/2000/svg'
+    fill='none'
+    viewBox='0 0 24 24'
+    strokeWidth='1.5'
+    stroke='currentColor'
+    {...props}
+  >
+    <path
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      d='M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z'
+    />
+  </Icon>
+));
+
+ListBullet.displayName = 'ListBullet';
+
+export { ListBullet };

src/assets/icons/XCircle.tsx

@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+
+import { Icon, IconProps } from '@/component-library/Icon';
+
+const XCircle = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon
+    {...props}
+    ref={ref}
+    xmlns='http://www.w3.org/2000/svg'
+    fill='none'
+    viewBox='0 0 24 24'
+    strokeWidth='1.5'
+    stroke='currentColor'
+  >
+    <path
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      d='M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
+    />
+  </Icon>
+));
+
+XCircle.displayName = 'XCircle';
+
+export { XCircle };

src/assets/icons/index.ts

@@ -2,11 +2,14 @@ export { ArrowRight } from './ArrowRight';
 export { ArrowRightCircle } from './ArrowRightCircle';
 export { ArrowsUpDown } from './ArrowsUpDown';
 export { ArrowTopRightOnSquare } from './ArrowTopRightOnSquare';
+export { CheckCircle } from './CheckCircle';
 export { ChevronDown } from './ChevronDown';
 export { Cog } from './Cog';
 export { DocumentDuplicate } from './DocumentDuplicate';
 export { InformationCircle } from './InformationCircle';
+export { ListBullet } from './ListBullet';
 export { PencilSquare } from './PencilSquare';
 export { PlusCircle } from './PlusCircle';
 export { Warning } from './Warning';
+export { XCircle } from './XCircle';
 export { XMark } from './XMark';

src/assets/locales/en/translation.json

@@ -156,6 +156,7 @@
   "staked": "Staked",
   "sign_t&cs": "Sign T&Cs",
   "receivable_assets": "Receivable Assets",
+  "dismiss": "Dismiss",
   "redeem_page": {
     "maximum_in_single_request": "Max redeemable in single request",
     "redeem": "Redeem",
@@ -636,5 +637,80 @@
   "strategy": {
     "withdraw_rewards_in_wrapped": "Withdraw rewards in {{wrappedCurrencySymbol}}:",
     "update_position": "Update position"
+  },
+  "transaction": {
+    "recent_transactions": "Recent transactions",
+    "no_recent_transactions": "No recent transactions",
+    "confirm_transaction_wallet": "Confirm this transaction in your wallet",
+    "confirm_transaction": "Confirm transaction",
+    "transaction_processing": "Transaction processing",
+    "transaction_failed": "Transaction failed",
+    "transaction_successful": "Transaction successful",
+    "swapping_to": "Swapping {{fromAmount}} {{fromCurrency}} to {{toAmount}} {{toCurrency}}",
+    "swapped_to": "Swapped {{fromAmount}} {{fromCurrency}} to {{toAmount}} {{toCurrency}}",
+    "adding_liquidity_to_pool": "Adding liquidity to {{poolName}} Pool",
+    "added_liquidity_to_pool": "Added liquidity to {{poolName}} Pool",
+    "removing_liquidity_from_pool": "Removing liquidity from {{poolName}} Pool",
+    "removed_liquidity_from_pool": "Removed liquidity from {{poolName}} Pool",
+    "claiming_pool_rewards": "Claiming pools rewards",
+    "claimed_pool_rewards": "Claimed pools rewards",
+    "issuing_amount": "Issuing {{amount}} {{currency}}",
+    "issued_amount": "Issuing {{amount}} {{currency}}",
+    "redeeming_amount": "Redeeming {{amount}} {{currency}}",
+    "redeemed_amount": "Redeemed {{amount}} {{currency}}",
+    "burning_amount": "Burning {{amount}} {{currency}}",
+    "burned_amount": "Burned {{amount}} {{currency}}",
+    "retrying_redeem_id": "Retrying redeem {{resquestId}}",
+    "retried_redeem_id": "Retried redeem {{resquestId}}",
+    "reimbursing_redeem_id": "Reimbursing redeem {{resquestId}}",
+    "reimbersed_redeem_id": "Reimbursed redeem {{resquestId}}",
+    "executing_issue": "Executing issue",
+    "executed_issue": "Executed issue",
+    "transfering_amount_to_address": "Transfering {{amount}} {{currency}} to {{address}}",
+    "transfered_amount_to_address": "Transfered {{amount}} {{currency}} to {{address}}",
+    "transfering_amount_from_chain_to_chain": "Transfering {{amount}} {{currency}} from {{fromChain}} to {{toChain}}",
+    "transfered_amount_from_chain_to_chain": "Transfered {{amount}} {{currency}} from {{fromChain}} to {{toChain}}",
+    "claiming_lending_rewards": "Claiming lending rewards",
+    "claimed_lending_rewards": "Claimed lending rewards",
+    "borrowing_amount": "Borrowing {{amount}} {{currency}}",
+    "borrowed_amount": "Borrowed {{amount}} {{currency}}",
+    "lending_amount": "Lending {{amount}} {{currency}}",
+    "lent_amount": "Lent {{amount}} {{currency}}",
+    "repaying_amount": "Repaying {{amount}} {{currency}}",
+    "repaid_amount": "Repaid {{amount}} {{currency}}",
+    "repaying": "Repaying {{currency}}",
+    "repaid": "Repaid {{currency}}",
+    "withdrawing_amount": "Withdrawing {{amount}} {{currency}}",
+    "withdrew_amount": "Withdrew {{amount}} {{currency}}",
+    "withdrawing": "Withdrawing {{currency}}",
+    "withdrew": "Withdrew {{currency}}",
+    "disabling_loan_as_collateral": "Disabling {{currency}} as collateral",
+    "disabled_loan_as_collateral": "Disabled {{currency}} as collateral",
+    "enabling_loan_as_collateral": "Enabling {{currency}} as collateral",
+    "enabled_loan_as_collateral": "Enabled {{currency}} as collateral",
+    "creating_currency_vault": "Creating {{currency}} vault",
+    "created_currency_vault": "Created {{currency}} vault",
+    "depositing_amount_to_vault": "Depositing {{amount}} {{currency}} to vault",
+    "deposited_amount_to_vault": "Deposited {{amount}} {{currency}} to vault",
+    "withdrawing_amount_from_vault": "Withdrawing {{amount}} {{currency}} from vault",
+    "withdrew_amount_from_vault": "Withdrew {{amount}} {{currency}} from vault",
+    "claiming_vault_rewards": "Claiming vault rewards",
+    "claimed_vault_rewards": "Claimed vault rewards",
+    "staking_amount": "Staking {{amount}} {{currency}}",
+    "staked_amount": "Staking {{amount}} {{currency}}",
+    "adding_amount_to_staked_amount": "Adding {{amount}} {{currency}} to staked amount",
+    "added_amount_to_staked_amount": "Added {{amount}} {{currency}} to staked amount",
+    "increasing_stake_lock_time": "Increasing stake lock time",
+    "increased_stake_lock_time": "Increased stake lock time",
+    "withdrawing_stake": "Withdrawing stake",
+    "withdrew_stake": "Withdrew stake",
+    "claiming_staking_rewards": "Claiming staking rewards",
+    "claimed_staking_rewards": "Claimed staking rewards",
+    "increasing_stake_locked_time_amount": "Increasing stake locked time and amount",
+    "increased_stake_locked_time_amount": "Increased stake locked time and amount",
+    "requesting_vault_replacement": "Requesting vault replacement",
+    "requested_vault_replacement": "Requested vault replacement",
+    "claiming_vesting": "Claiming vesting",
+    "claimed_vesting": "Claimed vesting"
   }
 }

src/common/actions/general.actions.ts

@@ -4,6 +4,8 @@ import { BitcoinAmount, MonetaryAmount } from '@interlay/monetary-js';
 import { GovernanceTokenMonetaryAmount } from '@/config/relay-chains';
 
 import {
+  ADD_NOTIFICATION,
+  AddNotification,
   INIT_GENERAL_DATA_ACTION,
   InitGeneralDataAction,
   IS_BRIDGE_LOADED,
@@ -20,10 +22,12 @@ import {
   ShowSignTermsModal,
   UPDATE_HEIGHTS,
   UPDATE_TOTALS,
+  UPDATE_TRANSACTION_MODAL_STATUS,
   UpdateHeights,
-  UpdateTotals
+  UpdateTotals,
+  UpdateTransactionModal
 } from '../types/actions.types';
-import { ParachainStatus } from '../types/util.types';
+import { Notification, ParachainStatus, TransactionModalData } from '../types/util.types';
 
 export const isBridgeLoaded = (isLoaded = false): IsBridgeLoaded => ({
   type: IS_BRIDGE_LOADED,
@@ -86,3 +90,15 @@ export const updateTotalsAction = (
   totalLockedCollateralTokenAmount,
   totalWrappedTokenAmount
 });
+
+export const addNotification = (accountAddress: string, notification: Notification): AddNotification => ({
+  type: ADD_NOTIFICATION,
+  accountAddress,
+  notification
+});
+
+export const updateTransactionModal = (isOpen: boolean, data: TransactionModalData): UpdateTransactionModal => ({
+  type: UPDATE_TRANSACTION_MODAL_STATUS,
+  isOpen,
+  data
+});

src/common/reducers/general.reducer.ts

@@ -2,8 +2,10 @@ import { newMonetaryAmount } from '@interlay/interbtc-api';
 import { BitcoinAmount } from '@interlay/monetary-js';
 
 import { RELAY_CHAIN_NATIVE_TOKEN } from '@/config/relay-chains';
+import { TransactionStatus } from '@/utils/hooks/transaction/types';
 
 import {
+  ADD_NOTIFICATION,
   GeneralActions,
   INIT_GENERAL_DATA_ACTION,
   IS_BRIDGE_LOADED,
@@ -12,7 +14,8 @@ import {
   SHOW_BUY_MODAL,
   SHOW_SIGN_TERMS_MODAL,
   UPDATE_HEIGHTS,
-  UPDATE_TOTALS
+  UPDATE_TOTALS,
+  UPDATE_TRANSACTION_MODAL_STATUS
 } from '../types/actions.types';
 import { GeneralState, ParachainStatus } from '../types/util.types';
 
@@ -33,6 +36,11 @@ const initialState = {
     relayChainNativeToken: { usd: 0 },
     governanceToken: { usd: 0 },
     wrappedToken: { usd: 0 }
+  },
+  notifications: {},
+  transactionModal: {
+    isOpen: false,
+    data: { variant: TransactionStatus.CONFIRM }
   }
 };
 
@@ -65,6 +73,25 @@ export const generalReducer = (state: GeneralState = initialState, action: Gener
       return { ...state, isBuyModalOpen: action.isBuyModalOpen };
     case SHOW_SIGN_TERMS_MODAL:
       return { ...state, isSignTermsModalOpen: action.isSignTermsModalOpen };
+    case ADD_NOTIFICATION: {
+      const newAccountNotifications = [...(state.notifications[action.accountAddress] || []), action.notification];
+
+      return {
+        ...state,
+        notifications: {
+          ...state.notifications,
+          [action.accountAddress]: newAccountNotifications
+        }
+      };
+    }
+    case UPDATE_TRANSACTION_MODAL_STATUS:
+      return {
+        ...state,
+        transactionModal: {
+          ...state.transactionModal,
+          ...action
+        }
+      };
     default:
       return state;
   }

src/common/types/actions.types.ts

@@ -3,7 +3,7 @@ import { BitcoinAmount, MonetaryAmount } from '@interlay/monetary-js';
 
 import { GovernanceTokenMonetaryAmount } from '@/config/relay-chains';
 
-import { ParachainStatus, StoreType } from './util.types';
+import { Notification, ParachainStatus, StoreType, TransactionModalData } from './util.types';
 
 // GENERAL ACTIONS
 export const IS_BRIDGE_LOADED = 'IS_BRIDGE_LOADED';
@@ -20,6 +20,9 @@ export const SHOW_SIGN_TERMS_MODAL = 'SHOW_SIGN_TERMS_MODAL';
 export const UPDATE_HEIGHTS = 'UPDATE_HEIGHTS';
 export const UPDATE_TOTALS = 'UPDATE_TOTALS';
 export const SHOW_BUY_MODAL = 'SHOW_BUY_MODAL';
+export const ADD_NOTIFICATION = 'ADD_NOTIFICATION';
+export const SHOW_TRANSACTION_MODAL = 'SHOW_TRANSACTION_MODAL';
+export const UPDATE_TRANSACTION_MODAL_STATUS = 'UPDATE_TRANSACTION_MODAL_STATUS';
 
 export interface UpdateTotals {
   type: typeof UPDATE_TOTALS;
@@ -98,6 +101,18 @@ export interface ShowBuyModal {
   isBuyModalOpen: boolean;
 }
 
+export interface AddNotification {
+  type: typeof ADD_NOTIFICATION;
+  accountAddress: string;
+  notification: Notification;
+}
+
+export interface UpdateTransactionModal {
+  type: typeof UPDATE_TRANSACTION_MODAL_STATUS;
+  isOpen: boolean;
+  data: TransactionModalData;
+}
+
 export type GeneralActions =
   | IsBridgeLoaded
   | InitGeneralDataAction
@@ -110,7 +125,9 @@ export type GeneralActions =
   | UpdateHeights
   | UpdateTotals
   | ShowBuyModal
-  | ShowSignTermsModal;
+  | ShowSignTermsModal
+  | AddNotification
+  | UpdateTransactionModal;
 
 // REDEEM
 export const ADD_VAULT_REDEEMS = 'ADD_VAULT_REDEEMS';