Merge pull request #2340 from webb-tools/develop

.github/workflows/check-build.yml

@@ -20,7 +20,7 @@ jobs:
         uses: styfle/[email protected]
         with:
           access_token: ${{ secrets.GITHUB_TOKEN }}
-      - uses: actions/[email protected].4
+      - uses: actions/[email protected].6
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:

.github/workflows/check-lint.yml

@@ -18,7 +18,7 @@ jobs:
         uses: styfle/[email protected]
         with:
           access_token: ${{ secrets.GITHUB_TOKEN }}
-      - uses: actions/[email protected].4
+      - uses: actions/[email protected].6
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
@@ -40,7 +40,7 @@ jobs:
         uses: styfle/[email protected]
         with:
           access_token: ${{ secrets.GITHUB_TOKEN }}
-      - uses: actions/[email protected].4
+      - uses: actions/[email protected].6
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
@@ -58,7 +58,7 @@ jobs:
         uses: styfle/[email protected]
         with:
           access_token: ${{ secrets.GITHUB_TOKEN }}
-      - uses: actions/[email protected].4
+      - uses: actions/[email protected].6
       - name: Link Checker
         uses: lycheeverse/[email protected]
         with:

.github/workflows/codeql-analysis.yml

@@ -33,7 +33,7 @@ jobs:
         with:
           access_token: ${{ github.token }}
       - name: Checkout repository
-        uses: actions/[email protected].4
+        uses: actions/[email protected].6
         with:
           # We must fetch at least the immediate parents so that if this is
           # a pull request then we can checkout the head.

.github/workflows/deploy-bridge-dapp-dev.yml

@@ -24,7 +24,7 @@ jobs:
         uses: styfle/[email protected]
         with:
           access_token: ${{ github.token }}
-      - uses: actions/[email protected].4
+      - uses: actions/[email protected].6
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:

.github/workflows/deploy-faucet.yml

@@ -29,7 +29,7 @@ jobs:
         with:
           access_token: ${{ secrets.GITHUB_TOKEN }}
 
-      - uses: actions/[email protected].4
+      - uses: actions/[email protected].6
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:

.github/workflows/deploy-stats-dapp-dev.yml

@@ -25,7 +25,7 @@ jobs:
         uses: styfle/[email protected]
         with:
           access_token: ${{ secrets.GITHUB_TOKEN }}
-      - uses: actions/[email protected].4
+      - uses: actions/[email protected].6
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:

.github/workflows/deploy-storybook-docs.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 🛎️
-        uses: actions/[email protected].4
+        uses: actions/[email protected].6
         with:
           persist-credentials: false
       - name: Install and Build 🔧

.github/workflows/release.yml

@@ -26,7 +26,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       #Check out
-      - uses: actions/[email protected].4
+      - uses: actions/[email protected].6
         with:
           fetch-depth: 100
 

.github/workflows/ui-review.yml

@@ -18,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     # Job steps
     steps:
-      - uses: actions/[email protected].4
+      - uses: actions/[email protected].6
         with:
           fetch-depth: 0
       - name: Install dependencies

apps/bridge-dapp/src/components/Header/ActiveChainDropdown.tsx

@@ -1,4 +1,4 @@
-import { DropdownMenuTrigger as DropdownButton } from '@radix-ui/react-dropdown-menu';
+import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu';
 import {
   useWebContext,
   useConnectWallet,
@@ -14,7 +14,7 @@ import {
 } from '@webb-tools/webb-ui-components/components/Dropdown';
 import { MenuItem } from '@webb-tools/webb-ui-components/components/MenuItem';
 import { ScrollArea } from '@webb-tools/webb-ui-components/components/ScrollArea';
-import ChainButtonCmp from '@webb-tools/webb-ui-components/components/buttons/ChainButton';
+import ChainOrTokenButton from '@webb-tools/webb-ui-components/components/buttons/ChainOrTokenButton';
 import { useWebbUI } from '@webb-tools/webb-ui-components/hooks/useWebbUI';
 import { useCallback, useMemo } from 'react';
 import useChainsFromRoute from '../../hooks/useChainsFromRoute';
@@ -64,14 +64,15 @@ const ActiveChainDropdown = () => {
 
   return (
     <Dropdown>
-      <DropdownButton asChild disabled={loading}>
-        <ChainButtonCmp
-          chain={chain}
+      <DropdownMenuTrigger asChild disabled={loading}>
+        <ChainOrTokenButton
+          value={chain?.name}
           status="success"
           placeholder={activeChain === null ? 'Unsupported Chain' : undefined}
-          textClassname="hidden lg:!block"
+          textClassName="hidden lg:!block"
+          iconType="chain"
         />
-      </DropdownButton>
+      </DropdownMenuTrigger>
       <DropdownBody className="mt-2">
         <ScrollArea className="h-[var(--dropdown-height)]">
           <ul>

apps/bridge-dapp/src/pages/Account/AccountSummaryCard.tsx

@@ -1,4 +1,4 @@
-import { DropdownMenuTrigger as DropdownButton } from '@radix-ui/react-dropdown-menu';
+import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu';
 import { useWebContext } from '@webb-tools/api-provider-environment';
 import { ZERO_BIG_INT } from '@webb-tools/dapp-config/constants';
 import ArrowLeftRightLineIcon from '@webb-tools/icons/ArrowLeftRightLineIcon';
@@ -174,7 +174,7 @@ function TotalShieldedBalance() {
         </Typography>
 
         <Dropdown>
-          <DropdownButton
+          <DropdownMenuTrigger
             className={cx(
               'flex items-center gap-1 disabled:cursor-not-allowed',
               {
@@ -193,7 +193,7 @@ function TotalShieldedBalance() {
             </Typography>
 
             <ChevronDown className="mx-2 transition-transform duration-300 ease-in-out enabled:group-radix-state-open:rotate-180" />
-          </DropdownButton>
+          </DropdownMenuTrigger>
 
           <DropdownBody className="mt-2" align="center">
             <ScrollArea className="max-h-[var(--dropdown-height)]">

apps/bridge-dapp/src/pages/Hubble/Bridge/SelectChain.tsx

@@ -128,9 +128,11 @@ const useChains = (
     return [];
   }
 
-  return Object.keys(anchorRec).map((typedChainId) => {
-    return apiConfig.chains[parseInt(typedChainId)];
-  });
+  return Object.keys(anchorRec)
+    .map((typedChainId) => {
+      return apiConfig.chains[parseInt(typedChainId)];
+    })
+    .filter(Boolean);
 };
 
 /**

apps/hubble-stats/README.md

@@ -14,6 +14,36 @@
     <br />
 </p>
 
-## Run the Hubble Stats
+## Run Hubble Stats
 
-TBD
+Once the development environment is set up, you may proceed to install the required dependencies and run the dapp locally.
+
+1. Clone this repo
+
+   ```bash
+   git clone [email protected]:webb-tools/webb-dapp.git
+   ```
+
+2. Install dependencies by `yarn`
+
+   ```bash
+    yarn install
+   ```
+
+3. Start the dApp by the following command:
+
+   ```bash
+   yarn nx serve hubble-stats
+   ```
+
+Visit `http://localhost:4200/` to see the Hubble Stats app!
+
+Happy hacking!
+
+<h2 id="help"> Need help? </h2>
+
+If you need help or you want to additional information please:
+
+- Refer to the [Webb Official Documentation](https://docs.webb.tools/).
+- If you have feedback on how to improve the Webb Dapp interface or you have a specific question? Check out the [Webb Dapp Feedback Discussion](https://github.com/webb-tools/feedback/discussions/categories/webb-dapp-feedback).
+- If you found a bug please [open an issue](https://github.com/webb-tools/webb-dapp/issues/new/choose) or [join our Discord](https://discord.gg/jUDeFpggrR) server to report it.

apps/tangle-dapp/CHANGELOG.md

@@ -211,3 +211,35 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix cursor moves to the end when changing value in input - https://github.com/webb-tools/webb-dapp/pull/2234.
 - UI improvements on Tangle Dapp (Key Stats Item + Fix Footer bottom bound + Static Tangle Icon) - https://github.com/webb-tools/webb-dapp/pull/2256.
 - Fix account explorer link in wallet dropdown - https://github.com/webb-tools/webb-dapp/pull/2261.
+
+## [0.0.9] - 2024-05-27
+
+### Added
+
+- Add # of Active Services and Restake Amount to Validators Table in Nomination - https://github.com/webb-tools/webb-dapp/pull/2283
+- Backend Integration for Service Info Card and Participants table - https://github.com/webb-tools/webb-dapp/pull/2285
+- Added Loading Account Page - https://github.com/webb-tools/webb-dapp/pull/2300
+- Get Permitted Caller for Tangle Dapp - https://github.com/webb-tools/webb-dapp/pull/2303
+- Integrate backend on Active Service table on Overview page - https://github.com/webb-tools/webb-dapp/pull/2304
+- Add new Bridge page to the site with current functionalities of Bridge Container: select and switch Source & Destination Chain - https://github.com/webb-tools/webb-dapp/pull/2307
+- Switch chains in EVM wallets when switching networks - https://github.com/webb-tools/webb-dapp/pull/2311
+- Update Substrate wallet metadata when appropriate - https://github.com/webb-tools/webb-dapp/pull/2314
+- Added payouts loading state - https://github.com/webb-tools/webb-dapp/pull/2315
+- Show longest vesting schedule info - https://github.com/webb-tools/webb-dapp/pull/2324
+- Setup the code logic to handle different scenarios of bridging - https://github.com/webb-tools/webb-dapp/pull/2329
+
+### Changed
+
+- Update Chip for Restaking Service to normal case - https://github.com/webb-tools/webb-dapp/pull/2282
+- Font updated from Breeze Sans to Satoshi - https://github.com/webb-tools/webb-dapp/pull/2299
+- Transaction notification updates and Update HiddenValue to always display \*\*\*\* to increase privacy for users - https://github.com/webb-tools/webb-dapp/pull/2317
+- Update OpenGraph metadata and images - https://github.com/webb-tools/webb-dapp/pull/2323
+- README updated - https://github.com/webb-tools/webb-dapp/pull/2335
+
+### Fixed
+
+- Improve Balance Display - https://github.com/webb-tools/webb-dapp/pull/2289
+- Resolve Maximum Nomination Amount Error - https://github.com/webb-tools/webb-dapp/pull/2290
+- Slow Rendering of Checkboxes When Clicked - https://github.com/webb-tools/webb-dapp/pull/2291
+- Adjusted the dropdown body to be scrollable on webb-ui-kit, fixed the wrong theme icon and updated the background color of the theme switcher to improve the visual on the sidebar, show the correct number of active nominators on the nomination page, show cached stats value (if existed) instead of loading animation on the nomination page and show the correct staked amounts on the validators table - https://github.com/webb-tools/webb-dapp/pull/2294
+- Fixed total unclaimed payouts rewards bug and actual staked percentage bug - https://github.com/webb-tools/webb-dapp/pull/2335

apps/tangle-dapp/README.md

@@ -1,19 +1,49 @@
 <div align="center">
 <a href="https://www.webb.tools/">
 
-![Webb Logo](../../.github/assets/webb_banner_light.png#gh-light-mode-only)
-![Webb Logo](../../.github/assets/webb_banner_dark.png#gh-dark-mode-only)
+![Webb Logo](../../.github/assets/tangle-banner.png)
 </a>
 
   </div>
 
-# Tangle dApp - EVM Staking UI
+# Tangle dApp
 
 <p align="left">
-    <strong>EVM Staking UI</strong>
+    <strong>An interface for nominating validators on the Tangle network, managing account, bridging TNT, and more.</strong>
     <br />
 </p>
 
-## Run the Tangle dApp
+## Run Tangle dApp
 
-TBD
+Once the development environment is set up, you may proceed to install the required dependencies and run the dapp locally.
+
+1. Clone this repo
+
+   ```bash
+   git clone [email protected]:webb-tools/webb-dapp.git
+   ```
+
+2. Install dependencies by `yarn`
+
+   ```bash
+    yarn install
+   ```
+⚠️ **REQUIRED:** Node.js version >= v18.19.0
+
+3. Start the dApp by the following command:
+
+   ```bash
+   yarn nx serve tangle-dapp
+   ```
+
+Visit `http://localhost:4200/` to see the Tangle dApp!
+
+Happy hacking!
+
+<h2 id="help"> Need help? </h2>
+
+If you need help or you want to additional information please:
+
+- Refer to the [Tangle Network Official Documentation](https://docs.tangle.tools/).
+- If you have feedback on how to improve the Webb Dapp interface or you have a specific question? Check out the [Webb Dapp Feedback Discussion](https://github.com/webb-tools/feedback/discussions/categories/webb-dapp-feedback).
+- If you found a bug please [open an issue](https://github.com/webb-tools/webb-dapp/issues/new/choose) or [join our Discord](https://discord.gg/jUDeFpggrR) server to report it.

apps/tangle-dapp/app/bridge/AmountAndTokenInput.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { DropdownMenuTrigger as DropdownTrigger } from '@radix-ui/react-dropdown-menu';
+import { TokenIcon } from '@webb-tools/icons/TokenIcon';
+import ChainOrTokenButton from '@webb-tools/webb-ui-components/components/buttons/ChainOrTokenButton';
+import {
+  Dropdown,
+  DropdownBody,
+} from '@webb-tools/webb-ui-components/components/Dropdown';
+import { MenuItem } from '@webb-tools/webb-ui-components/components/MenuItem';
+import { ScrollArea } from '@webb-tools/webb-ui-components/components/ScrollArea';
+import { FC } from 'react';
+
+import AmountInput from '../../components/AmountInput/AmountInput';
+import { BRIDGE_SUPPORTED_TOKENS } from '../../constants/bridge';
+import { useBridge } from '../../context/BridgeContext';
+
+const AmountAndTokenInput: FC = () => {
+  const {
+    amount,
+    setAmount,
+    selectedTokenId,
+    setSelectedTokenId,
+    tokenIdOptions,
+  } = useBridge();
+
+  return (
+    <div className="flex items-center gap-2 bg-mono-20 dark:bg-mono-160 rounded-lg pr-4">
+      <AmountInput
+        id="bridge-amount-input"
+        title="Amount"
+        amount={amount}
+        setAmount={setAmount}
+        baseInputOverrides={{
+          isFullWidth: true,
+        }}
+        placeholder=""
+        wrapperClassName="!pr-0"
+      />
+      <Dropdown>
+        <DropdownTrigger asChild>
+          <ChainOrTokenButton
+            value={BRIDGE_SUPPORTED_TOKENS[selectedTokenId].symbol}
+            status="success"
+            className="w-[130px] bg-mono-0 dark:bg-mono-140 border-0 px-3"
+            iconType="token"
+          />
+        </DropdownTrigger>
+        <DropdownBody className="border-0 w-[119px] min-w-fit mr-[11px]">
+          <ScrollArea className="max-h-[300px] w-[130px]">
+            <ul>
+              {tokenIdOptions.map((tokenId) => {
+                const token = BRIDGE_SUPPORTED_TOKENS[tokenId];
+                return (
+                  <li key={tokenId}>
+                    <MenuItem
+                      startIcon={<TokenIcon size="lg" name={token.symbol} />}
+                      onSelect={() => setSelectedTokenId(tokenId)}
+                      className="px-3 normal-case"
+                    >
+                      {token.symbol}
+                    </MenuItem>
+                  </li>
+                );
+              })}
+            </ul>
+          </ScrollArea>
+        </DropdownBody>
+      </Dropdown>
+    </div>
+  );
+};
+
+export default AmountAndTokenInput;