tangle-network · AtelyPham · Nov 13, 2023 · Nov 1, 2023 · Nov 2, 2023 · Nov 2, 2023
@@ -236,7 +236,6 @@ function useDepositButtonProps({
           destTypedIdNum,
           destAnchorId,
           fungible.symbol,
-          fungible.decimals,
           amountBig
         );
 

@@ -277,7 +277,6 @@ function useTransferButtonProps({
             !!fungibleCfg.addresses.get(parseInt(note.note.targetChainId))
         );
 
-        const fungibleDecimals = fungibleCfg.decimals;
         const amountBig = BigInt(amount);
 
         // Get the notes that will be spent for this withdraw
@@ -340,7 +339,6 @@ function useTransferButtonProps({
                 srcTypedChainId,
                 anchorId,
                 fungibleCfg.symbol,
-                fungibleDecimals,
                 changeAmount
               )
             : undefined;

@@ -351,7 +351,6 @@ function useWithdrawButtonProps({
                 srcTypedChainId,
                 anchorId,
                 fungibleCfg.symbol,
-                fungibleDecimals,
                 changeAmount
               )
             : undefined;

@@ -266,6 +266,18 @@ function createWebpack(env, mode = 'production') {
       new MiniCssExtractPlugin({
         filename: '[name].[contenthash:8].css',
       }),
+
+      /**
+       * Ignore the critical dependency warning for @webb-tools/utils
+       * as the library uses dynamic imports for the fixtures in fixtures.ts
+       */
+      new webpack.ContextReplacementPlugin(
+        /\/@webb-tools\/utils\//,
+        (/** @type {{ dependencies: { critical: any; }[]; }} */ data) => {
+          delete data.dependencies[0].critical;
+          return data;
+        }
+      ),
     ].concat(plugins),
     resolve: {
       alias: {

@@ -285,6 +285,18 @@ function createWebpackBase() {
       new webpack.DefinePlugin({
         ...bridgeEnvVars,
       }),
+
+      /**
+       * Ignore the critical dependency warning for @webb-tools/utils
+       * as the library uses dynamic imports for the fixtures in fixtures.ts
+       */
+      new webpack.ContextReplacementPlugin(
+        /\/@webb-tools\/utils\//,
+        (/** @type {{ dependencies: { critical: any; }[]; }} */ data) => {
+          delete data.dependencies[0].critical;
+          return data;
+        }
+      ),
     ]
       .concat(plugins)
       .filter(Boolean),

@@ -1,11 +1,11 @@
 import '@webb-tools/webb-ui-components/tailwind.css';
 
-import NextThemeProvider from '@webb-tools/api-provider-environment/NextThemeProvider';
 import { TANGLE_DAPP_URL } from '@webb-tools/webb-ui-components/constants';
 import { Metadata } from 'next';
 import type React from 'react';
 
 import { Layout } from '../containers';
+import Providers from './providers';
 
 export const metadata: Metadata = {
   title: {
@@ -49,9 +49,9 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body className="flex h-screen bg-body">
-        <NextThemeProvider>
+        <Providers>
           <Layout>{children}</Layout>
-        </NextThemeProvider>
+        </Providers>
       </body>
     </html>
   );

@@ -0,0 +1,36 @@
+'use client';
+
+import {
+  AppEvent,
+  NextThemeProvider,
+  WebbProvider,
+} from '@webb-tools/api-provider-environment';
+import { WebbUIProvider } from '@webb-tools/webb-ui-components';
+import NextAdapterApp from 'next-query-params/app';
+import qs from 'query-string';
+import type { PropsWithChildren } from 'react';
+import { QueryParamProvider } from 'use-query-params';
+
+const appEvent = new AppEvent();
+
+const Providers = ({ children }: PropsWithChildren) => {
+  return (
+    <NextThemeProvider>
+      <WebbUIProvider hasErrorBoudary>
+        <WebbProvider appEvent={appEvent} applicationName="Tangle Dapp">
+          <QueryParamProvider
+            adapter={NextAdapterApp}
+            options={{
+              searchStringToObject: qs.parse,
+              objectToSearchString: qs.stringify,
+            }}
+          >
+            {children}
+          </QueryParamProvider>
+        </WebbProvider>
+      </WebbUIProvider>
+    </NextThemeProvider>
+  );
+};
+
+export default Providers;
@@ -0,0 +1,31 @@
+'use client';
+
+import { useWebContext } from '@webb-tools/api-provider-environment/webb-context/webb-context';
+import ChainButtonCmp from '@webb-tools/webb-ui-components/components/buttons/ChainButton';
+import { useMemo } from 'react';
+
+const ChainSelector = () => {
+  const { activeChain, activeAccount } = useWebContext();
+
+  const chain = useMemo(() => {
+    if (activeChain) {
+      return activeChain;
+    }
+  }, [activeChain]);
+
+  return (
+    <>
+      {activeAccount && chain && (
+        <ChainButtonCmp
+          chain={chain}
+          status="success"
+          placeholder={activeChain === null ? 'Unsupported Chain' : undefined}
+          textClassname="hidden lg:block"
+          disabled
+        />
+      )}
+    </>
+  );
+};
+
+export default ChainSelector;
@@ -0,0 +1 @@
+export { default as ChainSelector } from './ChainSelector';
@@ -0,0 +1,149 @@
+'use client';
+
+import { Trigger as DropdownTrigger } from '@radix-ui/react-dropdown-menu';
+import { Account } from '@webb-tools/abstract-api-provider';
+import { useWebContext } from '@webb-tools/api-provider-environment';
+import { ManagedWallet, WalletConfig } from '@webb-tools/dapp-config';
+import { WebbError, WebbErrorCodes } from '@webb-tools/dapp-types';
+import {
+  ExternalLinkLine,
+  LoginBoxLineIcon,
+  WalletLineIcon,
+} from '@webb-tools/icons';
+import { useWallets } from '@webb-tools/react-hooks';
+import { isViemError, WebbWeb3Provider } from '@webb-tools/web3-api-provider';
+import {
+  Button,
+  Dropdown,
+  DropdownBody,
+  KeyValueWithButton,
+  Typography,
+  useWebbUI,
+  WalletButton,
+} from '@webb-tools/webb-ui-components';
+import { FC, useCallback, useMemo } from 'react';
+
+export const WalletDropdown: FC<{ account: Account; wallet: WalletConfig }> = ({
+  account,
+  wallet,
+}) => {
+  const { activeApi, activeChain, inactivateApi } = useWebContext();
+
+  const { notificationApi } = useWebbUI();
+
+  // Get all managed wallets
+  const { wallets } = useWallets();
+
+  const currentManagedWallet = useMemo<ManagedWallet | undefined>(() => {
+    return wallets.find((w) => w.connected);
+  }, [wallets]);
+
+  // Calculate the account explorer url
+  const accountExplorerUrl = useMemo(() => {
+    if (!activeChain?.blockExplorers) return '#';
+
+    const url = activeChain.blockExplorers.default.url;
+
+    return new URL(`/address/${account.address}`, url).toString();
+  }, [activeChain, account]);
+
+  // Funciton to switch account within the connected wallet
+  const handleSwitchAccount = useCallback(async () => {
+    // Switch account only support on web3 provider
+    if (!activeApi || !(activeApi instanceof WebbWeb3Provider)) {
+      return;
+    }
+
+    try {
+      const walletClient = activeApi.walletClient;
+
+      await walletClient.requestPermissions({ eth_accounts: {} });
+    } catch (error) {
+      let message = WebbError.from(WebbErrorCodes.SwitchAccountFailed).message;
+
+      if (isViemError(error)) {
+        message = error.shortMessage;
+      }
+
+      notificationApi({ variant: 'error', message });
+    }
+  }, [activeApi, notificationApi]);
+
+  // Disconnect function
+  // TODO: The disconnect function does not work properly
+  const handleDisconnect = useCallback(async () => {
+    try {
+      if (currentManagedWallet && currentManagedWallet.canEndSession) {
+        currentManagedWallet.endSession();
+      }
+
+      await inactivateApi();
+    } catch {
+      const message = WebbError.getErrorMessage(
+        WebbErrorCodes.FailedToDisconnect
+      ).message;
+
+      notificationApi({ variant: 'error', message });
+    }
+  }, [currentManagedWallet, inactivateApi, notificationApi]);
+
+  return (
+    <Dropdown>
+      <DropdownTrigger asChild>
+        <WalletButton
+          wallet={wallet}
+          address={account.address}
+          addressClassname="hidden lg:block"
+        />
+      </DropdownTrigger>
+
+      <DropdownBody className="mt-6 w-[480px] p-4 space-y-4 dark:bg-mono-160">
+        <div className="flex items-center justify-between">
+          <div className="flex space-x-2">
+            {wallet.Logo}
+
+            <div>
+              <Typography variant="h5" fw="bold" className="capitalize">
+                {account.name || wallet.name}
+              </Typography>
+
+              <div className="flex items-center space-x-1">
+                <KeyValueWithButton
+                  className="mt-0.5"
+                  isHiddenLabel
+                  keyValue={account.address}
+                  size="sm"
+                  labelVariant="body1"
+                  valueVariant="body1"
+                />
+
+                <a href={accountExplorerUrl} target="_blank" rel="noreferrer">
+                  <ExternalLinkLine />
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center justify-end space-x-2.5">
+            <Button
+              onClick={handleSwitchAccount}
+              leftIcon={<WalletLineIcon className="!fill-current" size="lg" />}
+              variant="link"
+            >
+              Switch
+            </Button>
+
+            <Button
+              onClick={handleDisconnect}
+              leftIcon={
+                <LoginBoxLineIcon className="!fill-current" size="lg" />
+              }
+              variant="link"
+            >
+              Disconnect
+            </Button>
+          </div>
+        </div>
+      </DropdownBody>
+    </Dropdown>
+  );
+};
@@ -0,0 +1 @@
+export * from './WalletDropdown';