[RELEASE] 2024 March 29 - Tangle Dapp (#2159)

tangle-network · Mar 30, 2024 · 643184b · 643184b
1 parent a80f383
commit 643184b
Show file tree

Hide file tree

Showing 167 changed files with 4,366 additions and 2,079 deletions.
diff --git a/.lycheeignore b/.lycheeignore
@@ -35,3 +35,4 @@ https://github.com/webb-tools/webb-dapp/releases/tag/v1.0.8
 https://github.com/webb-tools/webb-dapp/releases/tag/v1.0.9
 https://github.com/webb-tools/webb-dapp/releases/tag/v1.0.10
 https://github.com/webb-tools/webb-dapp/releases/tag/v1.0.11
+https://github.com/webb-tools/webb-dapp/releases/tag/v1.0.12
diff --git a/apps/bridge-dapp/src/containers/WalletModalContainer/WalletModalContainer.tsx b/apps/bridge-dapp/src/containers/WalletModalContainer/WalletModalContainer.tsx
@@ -36,6 +36,7 @@ export const WalletModalContainer = () => {
       supportedWallets={supportedWallets}
       notificationApi={notificationApi}
       apiConfig={apiConfig}
+      contentDefaultText="Connect your wallet to start bridging your tokens privately across chains"
     />
   );
 };
diff --git a/apps/faucet/src/constants/sidebar.ts b/apps/faucet/src/constants/sidebar.ts
@@ -18,7 +18,7 @@ import {
   DKG_STATS_PROPOSALS_URL,
   TANGLE_DOCS_URL,
   TANGLE_MKT_URL,
-  TANGLE_TESTNET_EXPLORER_URL,
+  TANGLE_TESTNET_EVM_EXPLORER_URL,
   TANGLE_TESTNET_NATIVE_EXPLORER_URL,
 } from '@webb-tools/webb-ui-components/constants';
 
@@ -78,7 +78,7 @@ const items: SideBarItemProps[] = [
   },
   {
     Icon: GlobalLine,
-    href: TANGLE_TESTNET_EXPLORER_URL,
+    href: TANGLE_TESTNET_EVM_EXPLORER_URL,
     isInternal: false,
     name: 'EVM Explorer',
     subItems: [],

diff --git a/apps/tangle-dapp/CHANGELOG.md b/apps/tangle-dapp/CHANGELOG.md
@@ -116,3 +116,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 - Addressed major performance issues on nominations page by batching requests - https://github.com/webb-tools/webb-dapp/pull/2107
+
+## [0.0.5] - 2024-03-29
+
+### Added
+
+- Intermediate loading page state is now shown when switching between pages; a compromise of Next.js' SSR - https://github.com/webb-tools/webb-dapp/pull/2151
+
+### Changed
+
+- Updated `Connect a Wallet` modal's text content, fixed some typos - https://github.com/webb-tools/webb-dapp/pull/2121
+- Updated airdrop claim page's text content, use $TNT - https://github.com/webb-tools/webb-dapp/pull/2122
+- Token symbol is now loaded from chain instead of being hard-coded - https://github.com/webb-tools/webb-dapp/pull/2141
+- Tangle token icon was updated with new styling - https://github.com/webb-tools/webb-dapp/pull/2147
+- Tangle Network's whitepaper link was updated to a new URL - https://github.com/webb-tools/webb-dapp/pull/2157
+- Account page's balances, text copy, and vesting information was updated to be more accurate and easy to understand - https://github.com/webb-tools/webb-dapp/pull/2145
+
+### Fixed
+
+- Breadcrumbs of homepage from `Nomination` to `Account` pages - https://github.com/webb-tools/webb-dapp/pull/2128
+- Layout should always be scrollable - https://github.com/webb-tools/webb-dapp/pull/2128
+- Sidebar Substrate Portal & EVM Explorer links should change depending on active network - https://github.com/webb-tools/webb-dapp/pull/2129
+- Fixed issue regarding `getValidatorIdentity` not properly returning the identity names of validators - https://github.com/webb-tools/webb-dapp/pull/2154
+- Fixed performance bug in Nomination page, now is back to normal speed - https://github.com/webb-tools/webb-dapp/pull/2150
diff --git a/apps/tangle-dapp/README.md b/apps/tangle-dapp/README.md
@@ -7,13 +7,13 @@
 
   </div>
 
-# Tangle Dapp - EVM Staking UI
+# Tangle dApp - EVM Staking UI
 
 <p align="left">
     <strong>EVM Staking UI</strong>
     <br />
 </p>
 
-## Run the Tangle Dapp
+## Run the Tangle dApp
 
 TBD
diff --git a/apps/tangle-dapp/app/claim/EligibleSection.tsx b/apps/tangle-dapp/app/claim/EligibleSection.tsx
@@ -24,7 +24,7 @@ import { isHex } from 'viem';
 
 import ClaimingAccountInput from '../../components/claims/ClaimingAccountInput';
 import ClaimRecipientInput from '../../components/claims/ClaimRecipientInput';
-import useRpcEndpointStore from '../../context/useRpcEndpointStore';
+import useNetworkStore from '../../context/useNetworkStore';
 import toAsciiHex from '../../utils/claims/toAsciiHex';
 import getStatement from '../../utils/getStatement';
 import { getPolkadotApiPromise } from '../../utils/polkadot';
@@ -53,7 +53,7 @@ const EligibleSection: FC<Props> = ({
   const [recipient, setRecipient] = useState(activeAccount?.address ?? '');
   const [recipientErrorMsg, setRecipientErrorMsg] = useState('');
   const [step, setStep] = useState(Step.INPUT_ADDRESS);
-  const { rpcEndpoint } = useRpcEndpointStore();
+  const { rpcEndpoint } = useNetworkStore();
 
   // Validate recipient input address after 500 ms
   useEffect(() => {
@@ -116,10 +116,11 @@ const EligibleSection: FC<Props> = ({
         statementSentence
       );
 
-      const hash = await sendTransaction(tx);
+      const txReceiptHash = await sendTransaction(tx);
       const newSearchParams = new URLSearchParams(searchParams.toString());
 
-      newSearchParams.set('h', hash);
+      // TODO: Need to centralize these search parameters in an enum, in case they ever change.
+      newSearchParams.set('h', txReceiptHash);
       newSearchParams.set('rpcEndpoint', rpcEndpoint);
       onClaimCompleted(accountId);
 
@@ -175,7 +176,7 @@ const EligibleSection: FC<Props> = ({
 
         <div className="flex flex-col gap-4 p-4 border rounded-xl border-mono-0 dark:border-mono-180 shadow-[0px_4px_8px_0px_rgba(0,0,0,0.08)] bg-glass dark:bg-glass_dark">
           <Typography variant="body1" fw="bold" ta="center">
-            You will receive...
+            You will receive the liquid balance of...
           </Typography>
 
           <Typography variant="h4" fw="bold" ta="center">
@@ -188,6 +189,9 @@ const EligibleSection: FC<Props> = ({
                 }`
               : ''}
           </Typography>
+          <Typography variant="body1" fw="bold" ta="center">
+            any additional balance will be vesting in your account.
+          </Typography>
         </div>
 
         <Typography className="px-4" variant="h5" ta="center">

diff --git a/apps/tangle-dapp/app/claim/loading.tsx b/apps/tangle-dapp/app/claim/loading.tsx
@@ -0,0 +1,44 @@
+import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
+import { AppTemplate } from '@webb-tools/webb-ui-components/containers/AppTemplate';
+import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
+
+export default function Loading() {
+  return (
+    <AppTemplate.Content>
+      <AppTemplate.Title
+        title="Claim your $TNT airdrop"
+        subTitle="CLAIM AIRDROP"
+        overrideSubTitleProps={{
+          className: 'text-blue-70 dark:text-blue-50',
+        }}
+      />
+
+      <AppTemplate.DescriptionContainer>
+        <AppTemplate.Description
+          variant="mkt-body2"
+          className="text-mono-140 dark:text-mono-80"
+        >
+          As part of {"Tangle's"} initial launch, the Tangle Network is
+          distributing 5 million TNT tokens to the community. Check eligibility
+          below to see if you qualify for TNT airdrop!
+        </AppTemplate.Description>
+      </AppTemplate.DescriptionContainer>
+
+      <AppTemplate.Body>
+        <Typography variant="mkt-body2" ta="center" fw="bold">
+          Connect your EVM or Substrate wallet to check eligibility:
+        </Typography>
+
+        <div className="space-y-2">
+          <Button isFullWidth isDisabled>
+            Connect EVM Wallet
+          </Button>
+
+          <Button variant="secondary" isDisabled isFullWidth>
+            Connect Substrate Wallet
+          </Button>
+        </div>
+      </AppTemplate.Body>
+    </AppTemplate.Content>
+  );
+}
diff --git a/apps/tangle-dapp/app/claim/page.tsx b/apps/tangle-dapp/app/claim/page.tsx
@@ -16,10 +16,7 @@ import { useWebbUI } from '@webb-tools/webb-ui-components/hooks/useWebbUI';
 import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { TANGLE_TOKEN_UNIT } from '../../constants/index';
-import useRpcEndpointStore from '../../context/useRpcEndpointStore';
-import { LocalStorageKey } from '../../hooks/useLocalStorage';
-import useLocalStorage from '../../hooks/useLocalStorage';
+import useNetworkStore from '../../context/useNetworkStore';
 import { getPolkadotApiPromise } from '../../utils/polkadot';
 import EligibleSection from './EligibleSection';
 import NotEligibleSection from './NotEligibleSection';
@@ -31,7 +28,7 @@ export default function Page() {
   const { toggleModal, isWalletConnected } = useConnectWallet();
   const { activeAccount, loading, isConnecting } = useWebContext();
   const { notificationApi } = useWebbUI();
-  const { rpcEndpoint } = useRpcEndpointStore();
+  const { rpcEndpoint } = useNetworkStore();
 
   // Default to null to indicate that we are still checking
   // If false, then we know that the user is not eligible
@@ -42,59 +39,31 @@ export default function Page() {
 
   const [checkingEligibility, setCheckingEligibility] = useState(false);
 
-  const { setWithPreviousValue: setEligibilityCache } = useLocalStorage(
-    LocalStorageKey.AIRDROP_ELIGIBILITY_CACHE,
-    true
-  );
-
-  // Update the eligibility cache in local storage once it
-  // is known whether the user is eligible or not for the airdrop.
-  // This is reused in the account page, to avoid checking eligibility
-  // multiple times.
-  useEffect(() => {
-    if (activeAccount !== null && claimInfo !== null) {
-      setEligibilityCache((previous) => ({
-        ...previous,
-        [activeAccount.address]: claimInfo !== false,
-      }));
-    }
-  }, [activeAccount, claimInfo, setEligibilityCache]);
-
   // After the user has claimed the airdrop, we can remove the
   // eligibility from the cache, to avoid showing incorrect information
   // when navigating back to the claim page.
-  const handleClaimCompletion = useCallback(
-    (accountAddress: string) => {
-      eligibilityCache.delete(accountAddress);
-      setClaimInfo(null);
-
-      // Mark active account address as no longer eligible in the
-      // local storage after claiming the airdrop.
-      setEligibilityCache((previous) => ({
-        ...previous,
-        [accountAddress]: false,
-      }));
-    },
-    [setEligibilityCache]
-  );
+  const handleClaimCompletion = useCallback((accountAddress: string) => {
+    eligibilityCache.delete(accountAddress);
+    setClaimInfo(null);
+  }, []);
 
   const { title, subTitle } = useMemo(() => {
     if (claimInfo === null) {
       return {
-        title: `Claim your $${TANGLE_TOKEN_UNIT} Airdrop`,
+        title: `Claim your $TNT airdrop`,
         subTitle: 'CLAIM AIRDROP',
       };
     }
 
     if (claimInfo === false) {
       return {
-        title: `You are not eligible for $${TANGLE_TOKEN_UNIT} Airdrop`,
+        title: `You are not eligible for $TNT airdrop`,
         subTitle: 'OOPS!',
       };
     }
 
     return {
-      title: `You have unclaimed $${TANGLE_TOKEN_UNIT} Airdrop!`,
+      title: `You have unclaimed $TNT airdrop!`,
       subTitle: 'GREAT NEWS!',
     };
   }, [claimInfo]);
@@ -175,21 +144,19 @@ export default function Page() {
           {claimInfo === null ? (
             <>
               As part of {"Tangle's"} initial launch, the Tangle Network is
-              distributing 5 million {TANGLE_TOKEN_UNIT} tokens to the
-              community. Check eligibility below to see if you qualify for{' '}
-              {TANGLE_TOKEN_UNIT} Airdrop!
+              distributing 5 million TNT tokens to the community. Check
+              eligibility below to see if you qualify for TNT airdrop!
             </>
           ) : claimInfo ? (
             <>
-              You are eligible for ${TANGLE_TOKEN_UNIT} airdrop! View your
-              tokens below, and start the claiming process.
+              You are eligible for $TNT airdrop! View your tokens below, and
+              start the claiming process.
             </>
           ) : (
             <>
-              You are not eligible for ${TANGLE_TOKEN_UNIT} airdrop. You can
-              still participate in the Tangle Network by acquiring $
-              {TANGLE_TOKEN_UNIT} or you can try again with a different account
-              by disconnecting your current wallet.
+              You are not eligible for $TNT airdrop. You can still participate
+              in the Tangle Network by acquiring $ TNT or you can try again with
+              a different account by disconnecting your current wallet.
             </>
           )}
         </AppTemplate.Description>

diff --git a/apps/tangle-dapp/app/claim/success/SuccessClient.tsx b/apps/tangle-dapp/app/claim/success/SuccessClient.tsx
@@ -11,8 +11,6 @@ import { AppTemplate } from '@webb-tools/webb-ui-components/containers/AppTempla
 import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
 import { type FC, useMemo } from 'react';
 
-import { TANGLE_TOKEN_UNIT } from '../../../constants';
-
 const SuccessClient: FC<{ blockHash: HexString }> = ({ blockHash }) => {
   const { apiConfig } = useWebContext();
 
@@ -31,7 +29,7 @@ const SuccessClient: FC<{ blockHash: HexString }> = ({ blockHash }) => {
   return (
     <AppTemplate.Content>
       <AppTemplate.Title
-        title={`You have successfully claimed $${TANGLE_TOKEN_UNIT} Airdrop!`}
+        title={`You have successfully claimed $TNT airdrop!`}
         subTitle="CONGRATULATIONS!"
         overrideSubTitleProps={{
           className: 'text-blue-70 dark:text-blue-50',
@@ -47,9 +45,9 @@ const SuccessClient: FC<{ blockHash: HexString }> = ({ blockHash }) => {
           />
 
           <Typography variant="body1" ta="center">
-            You have successfully claimed ${TANGLE_TOKEN_UNIT} Airdrop! Your
-            transaction has been confirmed on the Tangle Network. You can view
-            your transaction on the explorer below.
+            You have successfully claimed TNT airdrop! Your transaction has been
+            confirmed on the Tangle Network. You can view your transaction on
+            the explorer below.
           </Typography>
 
           {txExplorerUrl ? (

diff --git a/apps/tangle-dapp/app/layout.tsx b/apps/tangle-dapp/app/layout.tsx
@@ -18,20 +18,20 @@ export const viewport: Viewport = {
 
 export const metadata: Metadata = {
   title: {
-    default: 'Tangle Dapp',
-    template: 'Tangle Dapp | %s',
+    default: 'Tangle dApp',
+    template: 'Tangle dApp | %s',
   },
-  description: 'Welcome to Tangle Dapp!',
+  description: 'Welcome to Tangle dApp!',
   metadataBase: process.env.URL
     ? new URL(process.env.URL)
     : process.env.PORT != null
     ? new URL(`http://localhost:${process.env.PORT}`)
     : null,
   openGraph: {
-    title: 'Tangle Dapp',
-    description: 'Welcome to Tangle Dapp!',
+    title: 'Tangle dApp',
+    description: 'Welcome to Tangle dApp!',
     url: TANGLE_DAPP_URL,
-    siteName: 'Tangle Dapp',
+    siteName: 'Tangle dApp',
     images: [
       {
         alt: 'Optimized Og Image Alt',
@@ -48,8 +48,8 @@ export const metadata: Metadata = {
   },
   twitter: {
     card: 'summary_large_image',
-    title: 'Tangle Dapp',
-    description: 'Welcome to Tangle Dapp!',
+    title: 'Tangle dApp',
+    description: 'Welcome to Tangle dApp!',
   },
 };
 

diff --git a/apps/tangle-dapp/app/nomination/[validatorAddress]/TotalRestaked.tsx b/apps/tangle-dapp/app/nomination/[validatorAddress]/TotalRestaked.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import { Typography } from '@webb-tools/webb-ui-components';
+import { FC } from 'react';
+
+import useNetworkStore from '../../../context/useNetworkStore';
+
+const TotalRestaked: FC<{ totalRestaked: number }> = ({ totalRestaked }) => {
+  const { nativeTokenSymbol } = useNetworkStore();
+
+  return (
+    <Typography variant="h4" fw="bold" className="whitespace-nowrap">
+      {totalRestaked} {nativeTokenSymbol}
+    </Typography>
+  );
+};
+
+export default TotalRestaked;
diff --git a/apps/tangle-dapp/app/nomination/[validatorAddress]/ValidatorOverviewCard.tsx b/apps/tangle-dapp/app/nomination/[validatorAddress]/ValidatorOverviewCard.tsx
@@ -9,8 +9,8 @@ import { shortenString } from '@webb-tools/webb-ui-components/utils/shortenStrin
 import { twMerge } from 'tailwind-merge';
 
 import { SocialChip, TangleBigLogo } from '../../../components';
-import { TANGLE_TOKEN_UNIT } from '../../../constants';
 import getValidatorOverviewData from '../../../data/getValidatorOverviewData';
+import TotalRestaked from './TotalRestaked';
 
 interface ValidatorOverviewCardProps {
   validatorAddress: string;
@@ -86,9 +86,7 @@ export default async function ValidatorOverviewCard({
               Total Restaked
             </Typography>
             <div className="flex gap-3 items-center">
-              <Typography variant="h4" fw="bold" className="whitespace-nowrap">
-                {totalRestaked} {TANGLE_TOKEN_UNIT}
-              </Typography>
+              <TotalRestaked totalRestaked={totalRestaked} />
               <Chip color="dark-grey">{restakingMethod ?? 'N/A'}</Chip>
             </div>
           </div>