style(tangle-dapp): Design changes in jam meeting

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

@@ -1,7 +1,12 @@
 'use client';
 
 import { makeExplorerUrl } from '@webb-tools/api-provider-environment/transaction/utils';
-import { Modal, ModalContent, useModal } from '@webb-tools/webb-ui-components';
+import {
+  EMPTY_VALUE_PLACEHOLDER,
+  Modal,
+  ModalContent,
+  useModal,
+} from '@webb-tools/webb-ui-components';
 import ChainOrTokenButton from '@webb-tools/webb-ui-components/components/buttons/ChainOrTokenButton';
 import SkeletonLoader from '@webb-tools/webb-ui-components/components/SkeletonLoader';
 import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
@@ -134,10 +139,11 @@ const AmountAndTokenInput: FC = () => {
   }, [tokenBalances, selectedToken.id]);
 
   return (
-    <div className="relative">
+    <div className="flex flex-col gap-2 justify-center items-end">
       <div
         className={twMerge(
-          'w-full flex items-center gap-2 bg-mono-20 dark:bg-mono-170 rounded-lg pr-4',
+          'w-full flex items-center gap-2 rounded-lg pr-4',
+          'bg-mono-20 dark:bg-mono-180',
           isAmountInputError && 'border border-red-70 dark:border-red-50',
         )}
       >
@@ -150,7 +156,7 @@ const AmountAndTokenInput: FC = () => {
             isFullWidth: true,
           }}
           placeholder=""
-          wrapperClassName="!pr-0 !border-0"
+          wrapperClassName="!pr-0 !border-0 dark:bg-mono-180"
           max={balance ? convertDecimalToBn(balance, decimals) : null}
           maxErrorMessage="Insufficient balance"
           min={minAmount ? convertDecimalToBn(minAmount, decimals) : null}
@@ -159,15 +165,14 @@ const AmountAndTokenInput: FC = () => {
           setErrorMessage={(error) =>
             setIsAmountInputError(error ? true : false)
           }
-          errorMessageClassName="absolute left-0 bottom-[-24px] !text-[14px] !leading-[21px]"
         />
 
         {/* Token Selector */}
         <ChainOrTokenButton
           value={selectedToken.symbol}
           iconType="token"
           onClick={openTokenModal}
-          className="w-[130px] border-0 px-3 bg-mono-40 dark:bg-mono-140"
+          className="min-w-[130px]"
           status="success"
         />
       </div>
@@ -178,14 +183,11 @@ const AmountAndTokenInput: FC = () => {
           className="w-[100px] absolute right-0 bottom-[-24px]"
         />
       ) : (
-        <Typography
-          variant="body2"
-          className="absolute right-0 bottom-[-24px] text-mono-120 dark:text-mono-100"
-        >
+        <Typography variant="body2">
           Balance:{' '}
           {selectedAssetBalance !== null
             ? `${selectedAssetBalance.toString()} ${selectedToken.symbol}`
-            : 'N/A'}
+            : EMPTY_VALUE_PLACEHOLDER}
         </Typography>
       )}
 

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { Card } from '@webb-tools/webb-ui-components';
 import Button from '@webb-tools/webb-ui-components/components/buttons/Button';
 import { FC, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
@@ -14,9 +15,9 @@ import ChainSelectors from './ChainSelectors';
 import FeeDetails from './FeeDetails';
 import useActionButton from './hooks/useActionButton';
 
-interface BridgeContainerProps {
+type BridgeContainerProps = {
   className?: string;
-}
+};
 
 const BridgeContainer: FC<BridgeContainerProps> = ({ className }) => {
   const {
@@ -46,50 +47,50 @@ const BridgeContainer: FC<BridgeContainerProps> = ({ className }) => {
 
   return (
     <>
-      <div
+      <Card
+        withShadow
         className={twMerge(
-          'max-w-[640px] min-h-[580px] bg-mono-0 dark:bg-mono-190 p-5 md:p-8 rounded-xl',
-          'shadow-webb-lg dark:shadow-webb-lg-dark',
-          'flex flex-col',
+          'flex flex-col gap-7 w-full max-w-[590px]',
           className,
         )}
       >
-        <div className="flex flex-col justify-between flex-1">
-          <div className="flex flex-col gap-10">
-            <ChainSelectors />
-
-            <AmountAndTokenInput />
+        <div className="flex flex-col gap-7">
+          <ChainSelectors />
 
-            <AddressInput
-              id="bridge-destination-address-input"
-              type={
-                isEVMChain(selectedDestinationChain)
-                  ? AddressType.EVM
-                  : AddressType.Substrate
-              }
-              title="Recipient Address"
-              wrapperOverrides={{ isFullWidth: true }}
-              value={destinationAddress}
-              setValue={setDestinationAddress}
-              setErrorMessage={(error) =>
-                setIsAddressInputError(error ? true : false)
-              }
-            />
+          <AmountAndTokenInput />
 
-            {!hideFeeDetails && <FeeDetails />}
-          </div>
+          <AddressInput
+            id="bridge-destination-address-input"
+            type={
+              isEVMChain(selectedDestinationChain)
+                ? AddressType.EVM
+                : AddressType.Substrate
+            }
+            title="Recipient Address"
+            wrapperOverrides={{
+              isFullWidth: true,
+              wrapperClassName: 'dark:bg-mono-180',
+            }}
+            value={destinationAddress}
+            setValue={setDestinationAddress}
+            setErrorMessage={(error) =>
+              setIsAddressInputError(error ? true : false)
+            }
+          />
 
-          <Button
-            isFullWidth
-            isDisabled={isDisabled}
-            isLoading={isLoading}
-            onClick={buttonAction}
-            loadingText={buttonLoadingText}
-          >
-            {buttonText}
-          </Button>
+          {!hideFeeDetails && <FeeDetails />}
         </div>
-      </div>
+
+        <Button
+          isFullWidth
+          isDisabled={isDisabled}
+          isLoading={isLoading}
+          onClick={buttonAction}
+          loadingText={buttonLoadingText}
+        >
+          {buttonText}
+        </Button>
+      </Card>
 
       <BridgeConfirmationModal
         isOpen={isConfirmModalOpen}

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

@@ -90,7 +90,7 @@ const ChainSelectors: FC = () => {
   return (
     <div className="flex flex-col md:flex-row justify-center md:justify-between items-center md:items-end md:gap-3">
       {/* Source Chain Selector */}
-      <div className="flex flex-col gap-2 w-full">
+      <div className="flex flex-col gap-2 flex-1">
         <Label
           className="text-mono-120 dark:text-mono-120 font-bold"
           htmlFor="bridge-source-chain-selector"
@@ -100,23 +100,22 @@ const ChainSelectors: FC = () => {
 
         <ChainOrTokenButton
           value={selectedSourceChain.name}
-          textClassName="text-xl"
-          className="w-full !p-4 bg-mono-20 dark:bg-mono-170 border-0 hover:bg-mono-20 dark:hover:bg-mono-170 text-nowrap"
+          className="w-full min-h-[72px] dark:bg-mono-180"
           iconType="chain"
           onClick={openSourceChainModal}
           disabled={sourceChainOptions.length <= 1}
         />
       </div>
 
       <div
-        className="cursor-pointer px-1 pt-5 md:pt-0 md:pb-5"
+        className="flex-shrink cursor-pointer px-1 pt-5 md:pt-0 md:pb-5"
         onClick={onSwitchChains}
       >
         <ArrowRight size="lg" className="rotate-90 md:rotate-0" />
       </div>
 
       {/* Destination Chain Selector */}
-      <div className="flex flex-col gap-2 w-full">
+      <div className="flex flex-col gap-2 flex-1">
         <Label
           className="text-mono-120 dark:text-mono-120 font-bold"
           htmlFor="bridge-destination-chain-selector"
@@ -126,8 +125,7 @@ const ChainSelectors: FC = () => {
 
         <ChainOrTokenButton
           value={selectedDestinationChain.name}
-          textClassName="text-xl"
-          className="w-full !p-4 bg-mono-20 dark:bg-mono-170 border-0 hover:bg-mono-20 dark:hover:bg-mono-170 text-nowrap"
+          className="w-full min-h-[72px] dark:bg-mono-180"
           iconType="chain"
           onClick={openDestinationChainModal}
           disabled={destinationChainOptions.length <= 1}

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { EMPTY_VALUE_PLACEHOLDER } from '@webb-tools/webb-ui-components';
 import FeeDetailsCmp from '@webb-tools/webb-ui-components/components/FeeDetails';
 import type { FeeItem } from '@webb-tools/webb-ui-components/components/FeeDetails/types';
 import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
@@ -93,7 +94,9 @@ const FeeValueCmp: FC<{ fee: Decimal | null; symbol: string }> = ({
 }) => {
   return (
     <Typography variant="body1" className="!text-mono-200 dark:!text-mono-0">
-      {fee ? `${fee.toDecimalPlaces(5).toString()} ${symbol}` : 'N/A'}
+      {fee
+        ? `${fee.toDecimalPlaces(5).toString()} ${symbol}`
+        : EMPTY_VALUE_PLACEHOLDER}
     </Typography>
   );
 };
@@ -104,9 +107,16 @@ function formatTotalAmount(
   const symbolTotals: Record<string, Decimal> = {};
 
   for (const [, item] of Object.entries(feeItems)) {
-    if (item === null) continue;
+    if (item === null) {
+      continue;
+    }
+
     const { amount, symbol } = item;
-    if (!amount) continue;
+
+    if (!amount) {
+      continue;
+    }
+
     symbolTotals[symbol] = (symbolTotals[symbol] ?? new Decimal(0)).plus(
       amount,
     );

apps/tangle-dapp/app/bridge/hooks/useActionButton.ts

@@ -155,9 +155,11 @@ export default function useActionButton({
   ]);
 
   const buttonLoadingText = useMemo(() => {
-    if (isRequiredToConnectWallet || isSelectedNetworkAndSourceChainMismatch)
-      return 'Connecting...';
-    if (isTransferring) return 'Transferring...';
+    if (isRequiredToConnectWallet || isSelectedNetworkAndSourceChainMismatch) {
+      return 'Connecting';
+    } else if (isTransferring) {
+      return 'Transferring';
+    }
   }, [
     isRequiredToConnectWallet,
     isSelectedNetworkAndSourceChainMismatch,

apps/tangle-dapp/app/bridge/lib/balance/substrate.ts

@@ -1,7 +1,7 @@
 import { ApiPromise } from '@polkadot/api';
 import Decimal from 'decimal.js';
 
-import { calculateTransferrableBalance } from '../../../../utils/polkadot/balance';
+import { calculateTransferableBalance } from '../../../../utils/polkadot/balance';
 
 export async function getSubstrateNativeTransferable(params?: {
   api: ApiPromise;
@@ -10,7 +10,7 @@ export async function getSubstrateNativeTransferable(params?: {
   if (!params) return null;
   const { api, accAddress } = params;
   const accInfo = (await api.query.system.account(accAddress)).data;
-  const transferable = calculateTransferrableBalance(accInfo);
+  const transferable = calculateTransferableBalance(accInfo);
 
   // Convert to the right format based on the chain's decimals
   return new Decimal(transferable.toString()).div(

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

@@ -1,15 +1,6 @@
-import {
-  ExchangeFunds,
-  TokenSwapLineIcon,
-  WalletLineIcon,
-} from '@webb-tools/icons';
-import { OnboardingPageKey } from '@webb-tools/tangle-shared-ui/constants';
-import { TANGLE_DOCS_URL } from '@webb-tools/webb-ui-components';
 import { Metadata } from 'next';
 import { FC } from 'react';
 
-import OnboardingItem from '../../components/OnboardingModal/OnboardingItem';
-import OnboardingModal from '../../components/OnboardingModal/OnboardingModal';
 import createPageMetadata from '../../utils/createPageMetadata';
 import BridgeContainer from './BridgeContainer';
 
@@ -18,35 +9,7 @@ export const metadata: Metadata = createPageMetadata({
 });
 
 const Bridge: FC = () => {
-  return (
-    <div>
-      <OnboardingModal
-        title="Get Started with Bridging"
-        pageKey={OnboardingPageKey.BRIDGE}
-        learnMoreHref={TANGLE_DOCS_URL}
-      >
-        <OnboardingItem
-          Icon={WalletLineIcon}
-          title="Connect EVM or Substrate Wallet"
-          description="Connect your EVM or Substrate wallet depending on the intended source chain. For example, if bridging in assets from Ethereum, connect your MetaMask or EVM-based wallet."
-        />
-
-        <OnboardingItem
-          Icon={ExchangeFunds}
-          title="Bridge EVM Assets"
-          description="Select source and destination chains, amount, and the recipient account's address to bridge in your EVM-based assets into Tangle to start restaking."
-        />
-
-        <OnboardingItem
-          Icon={TokenSwapLineIcon}
-          title="Restake Your Assets"
-          description="After bridging, use the restake page to leverage your bridged assets in restaking in order to earn yield and help secure and power Blueprint services on Tangle."
-        />
-      </OnboardingModal>
-
-      <BridgeContainer className="mx-auto" />
-    </div>
-  );
+  return <BridgeContainer className="mx-auto" />;
 };
 
 export default Bridge;

apps/tangle-dapp/app/claim/layout.tsx

@@ -1,3 +1,4 @@
+import { Card, CardVariant } from '@webb-tools/webb-ui-components';
 import { Divider } from '@webb-tools/webb-ui-components/components/Divider';
 import { AppTemplate } from '@webb-tools/webb-ui-components/containers/AppTemplate';
 import FAQSection from '@webb-tools/webb-ui-components/containers/FAQSection';
@@ -19,17 +20,19 @@ export const metadata: Metadata = createPageMetadata({
 
 const Layout: FC<PropsWithChildren> = ({ children }) => {
   return (
-    <AppTemplate.Root className="bg-glass dark:bg-glass_dark">
-      {children}
+    <AppTemplate.Root className="border-none p-0 rounded-none">
+      <Card variant={CardVariant.GLASS} className="space-y-4 py-8">
+        {children}
 
-      <Divider className="my-16 bg-mono-180 dark:bg-mono-120" />
+        <Divider className="my-16 bg-mono-180 dark:bg-mono-120" />
 
-      <AppTemplate.Content>
-        <FAQSection
-          items={faqItems}
-          answerClassName="[&_a:hover]:text-mono-100 [&_a]:underline"
-        />
-      </AppTemplate.Content>
+        <AppTemplate.Content className="w-full">
+          <FAQSection
+            items={faqItems}
+            answerClassName="[&_a:hover]:text-mono-100 [&_a]:underline"
+          />
+        </AppTemplate.Content>
+      </Card>
     </AppTemplate.Root>
   );
 };