Merge pull request #2229 from webb-tools/develop

[RELEASE] 2024 April 12 - Tangle Dapp
tangle-network · Apr 12, 2024 · 3814ce8 · 3814ce8
2 parents fb4540d + 037d15f
commit 3814ce8
Show file tree

Hide file tree

Showing 15 changed files with 187 additions and 307 deletions.
diff --git a/apps/tangle-dapp/CHANGELOG.md b/apps/tangle-dapp/CHANGELOG.md
@@ -165,3 +165,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - EVM transfers for EVM -> Substrate now work correctly - https://github.com/webb-tools/webb-dapp/pull/2202
 - Free balance for EVM accounts is now shown correctly - https://github.com/webb-tools/webb-dapp/pull/2205
 - `Open Explorer` link now opens Polkadot/Substrate Explorer or Blockscout, depending on whether the active/connected account is a Substrate or EVM account - https://github.com/webb-tools/webb-dapp/pull/2205
+
+## [0.0.7] - 2024-04-12
+
+### Added
+
+- Added `View Account` button to Nomination page - https://github.com/webb-tools/webb-dapp/pull/2211
+
+### Changed
+
+- Vesting schedules are now sorted by earliest unlock block, in ascending order - https://github.com/webb-tools/webb-dapp/pull/2218
+- UI now gets updated after transaction completes, not before - https://github.com/webb-tools/webb-dapp/pull/2222
+
+### Fixed
+
+- Use proper balance for account summary card (free vs. transferrable) - https://github.com/webb-tools/webb-dapp/pull/2209
+- Validator list was in a perpetual loading state under mainnet network - https://github.com/webb-tools/webb-dapp/pull/2220
+- Visual improvements - https://github.com/webb-tools/webb-dapp/pull/2223
+- Add or switch chain on EVM wallets to the active chain on the Tangle dApp - https://github.com/webb-tools/webb-dapp/pull/2225
+- Significantly improved performance of all transactions in the Nomination page - https://github.com/webb-tools/webb-dapp/pull/2222
+
+### Removed
+
+- Transaction confirmation modal, replaced with a notification that also includes a link to the explorer - https://github.com/webb-tools/webb-dapp/pull/2222
diff --git a/apps/tangle-dapp/containers/BondMoreTxContainer/BondMoreTxContainer.tsx b/apps/tangle-dapp/containers/BondMoreTxContainer/BondMoreTxContainer.tsx
@@ -2,7 +2,6 @@
 
 import { BN, BN_ZERO } from '@polkadot/util';
 import { useWebContext } from '@webb-tools/api-provider-environment';
-import { isSubstrateAddress } from '@webb-tools/dapp-types';
 import {
   Button,
   Modal,
@@ -17,7 +16,6 @@ import Link from 'next/link';
 import { type FC, useCallback, useEffect, useMemo, useState } from 'react';
 
 import AmountInput from '../../components/AmountInput/AmountInput';
-import { useTxConfirmationModal } from '../../context/TxConfirmationContext';
 import useNetworkStore from '../../context/useNetworkStore';
 import useTokenWalletFreeBalance from '../../data/NominatorStats/useTokenWalletFreeBalance';
 import useExecuteTxWithNotification from '../../hooks/useExecuteTxWithNotification';
@@ -33,7 +31,6 @@ const BondMoreTxContainer: FC<BondMoreTxContainerProps> = ({
   const { notificationApi } = useWebbUI();
   const { activeAccount } = useWebContext();
   const executeTx = useExecuteTxWithNotification();
-  const { setTxConfirmationState } = useTxConfirmationModal();
   const [amountToBond, setAmountToBond] = useState<BN | null>(null);
   const { rpcEndpoint, nativeTokenSymbol } = useNetworkStore();
   const [isBondMoreTxLoading, setIsBondMoreTxLoading] = useState(false);
@@ -86,40 +83,25 @@ const BondMoreTxContainer: FC<BondMoreTxContainerProps> = ({
     setIsBondMoreTxLoading(true);
 
     try {
-      if (amountToBond === null) {
-        throw new Error('Amount to bond more is required.');
-      }
+      if (amountToBond === null) return;
       const bondingAmount = +formatBnToDisplayAmount(amountToBond);
-      const hash = await executeTx(
+      await executeTx(
         () => bondExtraTokensEvm(walletAddress, bondingAmount),
         () =>
           bondExtraTokensSubstrate(rpcEndpoint, walletAddress, bondingAmount),
         `Successfully bonded ${bondingAmount} ${nativeTokenSymbol}.`,
         'Failed to bond extra tokens!'
       );
 
-      setTxConfirmationState({
-        isOpen: true,
-        status: 'success',
-        hash: hash,
-        txType: isSubstrateAddress(walletAddress) ? 'substrate' : 'evm',
-      });
-    } catch {
-      setTxConfirmationState({
-        isOpen: true,
-        status: 'error',
-        hash: '',
-        txType: isSubstrateAddress(walletAddress) ? 'substrate' : 'evm',
-      });
-    } finally {
       closeModal();
+    } catch {
+      setIsBondMoreTxLoading(false);
     }
   }, [
     amountToBond,
     closeModal,
     executeTx,
     rpcEndpoint,
-    setTxConfirmationState,
     walletAddress,
     nativeTokenSymbol,
   ]);

diff --git a/apps/tangle-dapp/containers/PayoutAllTxContainer/PayoutAllTxContainer.tsx b/apps/tangle-dapp/containers/PayoutAllTxContainer/PayoutAllTxContainer.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { useWebContext } from '@webb-tools/api-provider-environment';
-import { isSubstrateAddress } from '@webb-tools/dapp-types';
 import {
   Button,
   InputField,
@@ -14,7 +13,6 @@ import {
 import { WEBB_TANGLE_DOCS_STAKING_URL } from '@webb-tools/webb-ui-components/constants';
 import { type FC, useCallback, useMemo, useState } from 'react';
 
-import { useTxConfirmationModal } from '../../context/TxConfirmationContext';
 import useNetworkStore from '../../context/useNetworkStore';
 import useExecuteTxWithNotification from '../../hooks/useExecuteTxWithNotification';
 import { batchPayoutStakers as batchPayoutStakersEvm } from '../../utils/evm';
@@ -31,7 +29,6 @@ const PayoutAllTxContainer: FC<PayoutAllTxContainerProps> = ({
   const { activeAccount } = useWebContext();
   const executeTx = useExecuteTxWithNotification();
   const { rpcEndpoint } = useNetworkStore();
-  const { setTxConfirmationState } = useTxConfirmationModal();
   const [isPayoutAllTxLoading, setIsPayoutAllTxLoading] = useState(false);
 
   const walletAddress = useMemo(() => {
@@ -69,7 +66,7 @@ const PayoutAllTxContainer: FC<PayoutAllTxContainerProps> = ({
     setIsPayoutAllTxLoading(true);
 
     try {
-      const hash = await executeTx(
+      await executeTx(
         () => batchPayoutStakersEvm(walletAddress, payoutValidatorsAndEras),
         () =>
           batchPayoutStakersSubstrate(
@@ -91,28 +88,15 @@ const PayoutAllTxContainer: FC<PayoutAllTxContainerProps> = ({
       );
 
       updatePayouts(updatedPayouts);
-
-      setTxConfirmationState({
-        isOpen: true,
-        status: 'success',
-        hash: hash,
-        txType: isSubstrateAddress(walletAddress) ? 'substrate' : 'evm',
-      });
     } catch {
-      setTxConfirmationState({
-        isOpen: true,
-        status: 'error',
-        hash: '',
-        txType: isSubstrateAddress(walletAddress) ? 'substrate' : 'evm',
-      });
+      setIsPayoutAllTxLoading(false);
     } finally {
       closeModal();
     }
   }, [
     executeTx,
     payouts,
     updatePayouts,
-    setTxConfirmationState,
     walletAddress,
     payoutValidatorsAndEras,
     rpcEndpoint,

diff --git a/apps/tangle-dapp/containers/PayoutTxContainer/PayoutTxContainer.tsx b/apps/tangle-dapp/containers/PayoutTxContainer/PayoutTxContainer.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { useWebContext } from '@webb-tools/api-provider-environment';
-import { isSubstrateAddress } from '@webb-tools/dapp-types';
 import {
   Button,
   InputField,
@@ -14,7 +13,6 @@ import {
 import { WEBB_TANGLE_DOCS_STAKING_URL } from '@webb-tools/webb-ui-components/constants';
 import { type FC, useCallback, useMemo, useState } from 'react';
 
-import { useTxConfirmationModal } from '../../context/TxConfirmationContext';
 import useNetworkStore from '../../context/useNetworkStore';
 import useExecuteTxWithNotification from '../../hooks/useExecuteTxWithNotification';
 import { payoutStakers as payoutStakersEvm } from '../../utils/evm';
@@ -31,7 +29,6 @@ const PayoutTxContainer: FC<PayoutTxContainerProps> = ({
   const { activeAccount } = useWebContext();
   const { validatorAddress, era } = payoutTxProps;
   const executeTx = useExecuteTxWithNotification();
-  const { setTxConfirmationState } = useTxConfirmationModal();
   const { rpcEndpoint } = useNetworkStore();
   const [isPayoutTxLoading, setIsPayoutTxLoading] = useState(false);
 
@@ -54,7 +51,7 @@ const PayoutTxContainer: FC<PayoutTxContainerProps> = ({
     setIsPayoutTxLoading(true);
 
     try {
-      const hash = await executeTx(
+      await executeTx(
         () => payoutStakersEvm(walletAddress, validatorAddress, Number(era)),
         () =>
           payoutStakersSubstrate(
@@ -77,29 +74,18 @@ const PayoutTxContainer: FC<PayoutTxContainerProps> = ({
 
       updatePayouts(updatedPayouts);
 
-      setTxConfirmationState({
-        isOpen: true,
-        status: 'success',
-        hash,
-        txType: isSubstrateAddress(validatorAddress) ? 'substrate' : 'evm',
-      });
-    } catch {
-      setTxConfirmationState({
-        isOpen: true,
-        status: 'error',
-        hash: '',
-        txType: isSubstrateAddress(validatorAddress) ? 'substrate' : 'evm',
-      });
-    } finally {
       closeModal();
+
+      closeModal();
+    } catch {
+      setIsPayoutTxLoading(false);
     }
   }, [
     closeModal,
     era,
     executeTx,
     payouts,
     rpcEndpoint,
-    setTxConfirmationState,
     updatePayouts,
     validatorAddress,
     walletAddress,

diff --git a/apps/tangle-dapp/containers/RebondTxContainer/RebondTxContainer.tsx b/apps/tangle-dapp/containers/RebondTxContainer/RebondTxContainer.tsx
@@ -18,7 +18,6 @@ import { type FC, useCallback, useMemo, useState } from 'react';
 
 import { BondedTokensBalanceInfo } from '../../components';
 import AmountInput from '../../components/AmountInput/AmountInput';
-import { useTxConfirmationModal } from '../../context/TxConfirmationContext';
 import useNetworkStore from '../../context/useNetworkStore';
 import useTotalUnbondedAndUnbondingAmount from '../../data/NominatorStats/useTotalUnbondedAndUnbondingAmount';
 import useUnbondingAmountSubscription from '../../data/NominatorStats/useUnbondingAmountSubscription';
@@ -36,7 +35,6 @@ const RebondTxContainer: FC<RebondTxContainerProps> = ({
   const { notificationApi } = useWebbUI();
   const { activeAccount } = useWebContext();
   const executeTx = useExecuteTxWithNotification();
-  const { setTxConfirmationState } = useTxConfirmationModal();
   const { rpcEndpoint, nativeTokenSymbol } = useNetworkStore();
 
   const [amountToRebond, setAmountToRebond] = useState<BN | null>(null);
@@ -110,35 +108,22 @@ const RebondTxContainer: FC<RebondTxContainerProps> = ({
         throw new Error('There is no amount to rebond.');
       }
       const rebondAmount = +formatBnToDisplayAmount(amountToRebond);
-      const hash = await executeTx(
+      await executeTx(
         () => rebondTokensEvm(walletAddress, rebondAmount),
         () => rebondTokensSubstrate(rpcEndpoint, walletAddress, rebondAmount),
         `Successfully rebonded ${rebondAmount} ${nativeTokenSymbol}.`,
         'Failed to rebond tokens!'
       );
 
-      setTxConfirmationState({
-        isOpen: true,
-        status: 'success',
-        hash,
-        txType: isSubstrateAddress(walletAddress) ? 'substrate' : 'evm',
-      });
-    } catch {
-      setTxConfirmationState({
-        isOpen: true,
-        status: 'error',
-        hash: '',
-        txType: isSubstrateAddress(walletAddress) ? 'substrate' : 'evm',
-      });
-    } finally {
       closeModal();
+    } catch {
+      setIsRebondTxLoading(false);
     }
   }, [
     amountToRebond,
     closeModal,
     executeTx,
     rpcEndpoint,
-    setTxConfirmationState,
     walletAddress,
     nativeTokenSymbol,
   ]);

diff --git a/apps/tangle-dapp/containers/StopNominationTxContainer/StopNominationTxContainer.tsx b/apps/tangle-dapp/containers/StopNominationTxContainer/StopNominationTxContainer.tsx
@@ -15,7 +15,6 @@ import { WEBB_TANGLE_DOCS_STAKING_URL } from '@webb-tools/webb-ui-components/con
 import Link from 'next/link';
 import { type FC, useCallback, useMemo, useState } from 'react';
 
-import { useTxConfirmationModal } from '../../context/TxConfirmationContext';
 import useNetworkStore from '../../context/useNetworkStore';
 import useNominations from '../../data/NominationsPayouts/useNominations';
 import useExecuteTxWithNotification from '../../hooks/useExecuteTxWithNotification';
@@ -30,7 +29,6 @@ const StopNominationTxContainer: FC<StopNominationTxContainerProps> = ({
 }) => {
   const { activeAccount } = useWebContext();
   const executeTx = useExecuteTxWithNotification();
-  const { setTxConfirmationState } = useTxConfirmationModal();
   const { rpcEndpoint } = useNetworkStore();
 
   const [isStopNominationTxLoading, setIsStopNominationTxLoading] =
@@ -70,36 +68,17 @@ const StopNominationTxContainer: FC<StopNominationTxContainerProps> = ({
     setIsStopNominationTxLoading(true);
 
     try {
-      const hash = await executeTx(
+      await executeTx(
         () => stopNominationEvm(walletAddress),
         () => stopNominationSubstrate(rpcEndpoint, walletAddress),
         `Successfully stopped nomination!`,
         'Failed to stop nomination!'
       );
-
-      setTxConfirmationState({
-        isOpen: true,
-        status: 'success',
-        hash,
-        txType: isSubstrateAddress(walletAddress) ? 'substrate' : 'evm',
-      });
-    } catch {
-      setTxConfirmationState({
-        isOpen: true,
-        status: 'error',
-        hash: '',
-        txType: isSubstrateAddress(walletAddress) ? 'substrate' : 'evm',
-      });
-    } finally {
       closeModal();
+    } catch {
+      setIsStopNominationTxLoading(false);
     }
-  }, [
-    closeModal,
-    executeTx,
-    rpcEndpoint,
-    setTxConfirmationState,
-    walletAddress,
-  ]);
+  }, [closeModal, executeTx, rpcEndpoint, walletAddress]);
 
   return (
     <Modal open>

diff --git a/apps/tangle-dapp/containers/UnbondTxContainer/UnbondTxContainer.tsx b/apps/tangle-dapp/containers/UnbondTxContainer/UnbondTxContainer.tsx
@@ -17,7 +17,6 @@ import Link from 'next/link';
 import { type FC, useCallback, useMemo, useState } from 'react';
 
 import AmountInput from '../../components/AmountInput/AmountInput';
-import { useTxConfirmationModal } from '../../context/TxConfirmationContext';
 import useNetworkStore from '../../context/useNetworkStore';
 import useTotalStakedAmountSubscription from '../../data/NominatorStats/useTotalStakedAmountSubscription';
 import useUnbondingAmountSubscription from '../../data/NominatorStats/useUnbondingAmountSubscription';
@@ -35,7 +34,6 @@ const UnbondTxContainer: FC<UnbondTxContainerProps> = ({
   const { notificationApi } = useWebbUI();
   const { activeAccount } = useWebContext();
   const executeTx = useExecuteTxWithNotification();
-  const { setTxConfirmationState } = useTxConfirmationModal();
   const { rpcEndpoint, nativeTokenSymbol } = useNetworkStore();
 
   const [amountToUnbond, setAmountToUnbond] = useState<BN | null>(null);
@@ -136,36 +134,23 @@ const UnbondTxContainer: FC<UnbondTxContainerProps> = ({
         throw new Error('Amount to unbond is required.');
       }
       const unbondingAmount = +formatBnToDisplayAmount(amountToUnbond);
-      const hash = await executeTx(
+      await executeTx(
         () => unbondTokensEvm(walletAddress, unbondingAmount),
         () =>
           unbondTokensSubstrate(rpcEndpoint, walletAddress, unbondingAmount),
         `Successfully unbonded ${unbondingAmount} ${nativeTokenSymbol}.`,
         'Failed to unbond tokens!'
       );
 
-      setTxConfirmationState({
-        isOpen: true,
-        status: 'success',
-        hash: hash,
-        txType: isSubstrateAddress(walletAddress) ? 'substrate' : 'evm',
-      });
-    } catch {
-      setTxConfirmationState({
-        isOpen: true,
-        status: 'error',
-        hash: '',
-        txType: isSubstrateAddress(walletAddress) ? 'substrate' : 'evm',
-      });
-    } finally {
       closeModal();
+    } catch {
+      setIsUnbondTxLoading(false);
     }
   }, [
     amountToUnbond,
     closeModal,
     executeTx,
     rpcEndpoint,
-    setTxConfirmationState,
     walletAddress,
     nativeTokenSymbol,
   ]);