style(tangle-dapp): Incorporate design updates from @monaiuu (#2781)

tangle-network · Jan 31, 2025 · e7d2066 · e7d2066
1 parent 5ef6c42
commit e7d2066
Show file tree

Hide file tree

Showing 21 changed files with 245 additions and 174 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -3,4 +3,4 @@
 # These owners will be the default owners for everything in
 # the repo. Unless a later match takes precedence,
 # they will be requested for review when someone opens a pull request.
-*       @AtelyPham @devpavan04 @yurixander
+*       @AtelyPham @devpavan04 @yurixander @monaiuu
diff --git a/apps/tangle-dapp/src/components/RestakeDetailCard/index.tsx b/apps/tangle-dapp/src/components/RestakeDetailCard/index.tsx
@@ -24,7 +24,7 @@ const RestakeDetailCardRoot = forwardRef<
     <div
       {...props}
       className={twMerge(
-        'px-4 py-6 rounded-2xl bg-linear-table space-y-4 min-w-[600px]',
+        'px-4 py-6 rounded-2xl bg-linear-table space-y-4 md:min-w-[600px]',
         className,
       )}
       ref={ref}

diff --git a/apps/tangle-dapp/src/components/account/RewardsAndPoints.tsx b/apps/tangle-dapp/src/components/account/RewardsAndPoints.tsx
@@ -70,8 +70,16 @@ const RewardsAndPoints = () => {
             variant="h4"
             fw="bold"
             className="text-mono-140 dark:text-mono-40"
+            component="span"
           >
             {totalRewardsFormatted ?? EMPTY_VALUE_PLACEHOLDER}{' '}
+          </Typography>
+
+          <Typography
+            variant="body1"
+            className="text-mono-140 dark:text-mono-40"
+            component="span"
+          >
             {activeChain?.nativeCurrency.symbol}
           </Typography>
 
@@ -92,7 +100,24 @@ const RewardsAndPoints = () => {
         error={pointsError}
         tooltip="Points earned toward airdrop through network participant"
       >
-        {points?.account?.totalPoints ?? EMPTY_VALUE_PLACEHOLDER} XP
+        <div className="flex items-baseline gap-2">
+          <Typography
+            variant="h4"
+            fw="bold"
+            className="text-mono-140 dark:text-mono-40"
+            component="span"
+          >
+            {points?.account?.totalPoints ?? EMPTY_VALUE_PLACEHOLDER}
+          </Typography>
+
+          <Typography
+            variant="body1"
+            className="text-mono-140 dark:text-mono-40"
+            component="span"
+          >
+            XP
+          </Typography>
+        </div>
       </KeyStatsItem>
     </div>
   );

diff --git a/apps/tangle-dapp/src/components/restaking/StyleContainer.tsx b/apps/tangle-dapp/src/components/restaking/StyleContainer.tsx
@@ -9,7 +9,7 @@ const StyleContainer = forwardRef<
     <div
       {...props}
       ref={ref}
-      className={twMerge('w-full max-w-lg mx-auto', className)}
+      className={twMerge('w-full md:max-w-lg mx-auto', className)}
     >
       {children}
     </div>

diff --git a/apps/tangle-dapp/src/containers/restaking/RestakeOverviewTabs.tsx b/apps/tangle-dapp/src/containers/restaking/RestakeOverviewTabs.tsx
@@ -168,10 +168,11 @@ const RestakeOverviewTabs: FC<Props> = ({
       value={tab}
       onValueChange={(tab) => setTab(tab as RestakeTab)}
       headerClassName="w-full"
+      className="space-y-9"
     >
       <TabContent
         value={RestakeTab.RESTAKE}
-        className="flex justify-center min-w-[480px] mx-auto"
+        className="flex justify-center md:min-w-[480px] mx-auto"
       >
         {getFormOfRestakeAction(action)}
       </TabContent>

diff --git a/apps/tangle-dapp/src/containers/restaking/SelectOperatorModal.tsx b/apps/tangle-dapp/src/containers/restaking/SelectOperatorModal.tsx
@@ -48,7 +48,7 @@ const SelectOperatorModal = ({
     <ListModal
       isOpen={isOpen}
       setIsOpen={setIsOpen}
-      searchInputId="restake-unstake-operator-search"
+      searchInputId="restake-undelegate-operator-search"
       searchPlaceholder="Search operators by account ID..."
       items={delegations}
       title="Select Operator"

diff --git a/apps/tangle-dapp/src/containers/restaking/UnstakeRequestTable.tsx b/apps/tangle-dapp/src/containers/restaking/UnstakeRequestTable.tsx
@@ -53,7 +53,7 @@ const COLUMNS = [
   COLUMN_HELPER.accessor('operatorAccountId', {
     id: 'select',
     enableSorting: false,
-    header: () => <TableCell>Request</TableCell>,
+    header: () => <TableCell>Operator</TableCell>,
     cell: (props) => (
       <div className="flex items-center justify-start gap-2">
         <CheckBox

diff --git a/apps/tangle-dapp/src/containers/restaking/UnstakeRequestTableActions.tsx b/apps/tangle-dapp/src/containers/restaking/UnstakeRequestTableActions.tsx
@@ -70,7 +70,7 @@ const UnstakeRequestTableActions: FC<Props> = ({
         onClick={handleCancelUnstake}
         variant="secondary"
       >
-        Cancel Unstake
+        Cancel Undelegate
       </Button>
 
       <Button

diff --git a/apps/tangle-dapp/src/containers/restaking/WithdrawRequestTable.tsx b/apps/tangle-dapp/src/containers/restaking/WithdrawRequestTable.tsx
@@ -48,7 +48,7 @@ const COLUMNS = [
   COLUMN_HELPER.accessor('assetId', {
     id: 'select',
     enableSorting: false,
-    header: () => <TableCell>Request</TableCell>,
+    header: () => <TableCell>Amount</TableCell>,
     cell: (props) => (
       <div className="flex items-center justify-start gap-2">
         <CheckBox
@@ -59,21 +59,13 @@ const COLUMNS = [
         />
 
         <Typography variant="body1">
-          {props.row.original.assetSymbol}
+          {props.row.original.amount} {props.row.original.assetSymbol}
         </Typography>
       </div>
     ),
   }),
-  COLUMN_HELPER.accessor('amount', {
-    header: () => <TableCell>Amount</TableCell>,
-    cell: (props) => (
-      <TableCell fw="normal" className="text-mono-200 dark:text-mono-0">
-        {props.getValue()} {props.row.original.assetSymbol}
-      </TableCell>
-    ),
-  }),
   COLUMN_HELPER.accessor('sessionsRemaining', {
-    header: () => 'Time Remaining',
+    header: () => <TableCell>Time Remaining</TableCell>,
     sortingFn: (a, b) =>
       a.original.sessionsRemaining - b.original.sessionsRemaining,
     cell: (props) => {

diff --git a/apps/tangle-dapp/src/hooks/useTxNotification.tsx b/apps/tangle-dapp/src/hooks/useTxNotification.tsx
@@ -42,10 +42,10 @@ const SUCCESS_MESSAGES: Record<TxName, string> = {
   [TxName.RESTAKE_JOIN_OPERATORS]: 'Joined as an operator',
   [TxName.RESTAKE_DEPOSIT]: 'Deposited tokens',
   [TxName.RESTAKE_DELEGATE]: 'Delegated tokens',
-  [TxName.RESTAKE_UNSTAKE]: 'Scheduled unstake request',
+  [TxName.RESTAKE_UNSTAKE]: 'Scheduled undelegate request',
   [TxName.RESTAKE_WITHDRAW]: 'Withdrawal scheduled',
-  [TxName.RESTAKE_CANCEL_UNSTAKE]: 'Unstake request(s) cancelled',
-  [TxName.RESTAKE_EXECUTE_UNSTAKE]: 'Unstake request executed',
+  [TxName.RESTAKE_CANCEL_UNSTAKE]: 'Undelegate request(s) cancelled',
+  [TxName.RESTAKE_EXECUTE_UNSTAKE]: 'Undelegate request executed',
   [TxName.RESTAKE_EXECUTE_WITHDRAW]: 'Withdraw request executed',
   [TxName.RESTAKE_CANCEL_WITHDRAW]: 'Withdraw request(s) cancelled',
   [TxName.CLAIM_REWARDS]: 'Claimed rewards',

diff --git a/apps/tangle-dapp/src/pages/restake/AnimatedTable.tsx b/apps/tangle-dapp/src/pages/restake/AnimatedTable.tsx
@@ -1,27 +1,30 @@
 import cx from 'classnames';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, HTMLMotionProps, motion } from 'framer-motion';
 import type { FC, PropsWithChildren } from 'react';
 
-type Props = PropsWithChildren & {
-  isTableOpen?: boolean;
-  isMediumScreen?: boolean;
-};
+type Props = PropsWithChildren<
+  {
+    isTableOpen?: boolean;
+  } & HTMLMotionProps<'div'>
+>;
 
 export const AnimatedTable: FC<Props> = ({
   children,
-  isMediumScreen,
   isTableOpen,
+  className,
+  ...props
 }) => {
   return (
     <AnimatePresence>
-      {(!isMediumScreen || isTableOpen) && (
+      {isTableOpen && (
         <motion.div
-          key="unstake-request-table"
-          className={cx('max-w-lg origin-[0_0_0]')}
+          key="undelegate-request-table"
+          className={cx('max-w-lg origin-[0_0_0]', className)}
           transition={{ duration: 0.15 }}
           initial={{ opacity: 0, scale: 0 }}
           animate={{ opacity: 1, scale: 1 }}
           exit={{ opacity: 0, scale: 0 }}
+          {...props}
         >
           {children}
         </motion.div>

diff --git a/apps/tangle-dapp/src/pages/restake/delegate/ActionButton.tsx b/apps/tangle-dapp/src/pages/restake/delegate/ActionButton.tsx
@@ -32,13 +32,13 @@ export default function ActionButton({
   const displayError = useMemo(
     () => {
       return errors.operatorAccountId !== undefined || !operatorAccountId
-        ? 'Select an operator'
+        ? 'Select Operator'
         : errors.assetId !== undefined || !assetId
-          ? 'Select an asset'
+          ? 'Select Asset'
           : !amount
-            ? 'Enter an amount'
+            ? 'Enter Amount'
             : errors.amount !== undefined
-              ? 'Invalid amount'
+              ? 'Invalid Amount'
               : undefined;
     },
     // prettier-ignore

diff --git a/apps/tangle-dapp/src/pages/restake/delegate/StakeInput.tsx b/apps/tangle-dapp/src/pages/restake/delegate/StakeInput.tsx
@@ -1,11 +1,13 @@
 import { ZERO_BIG_INT } from '@webb-tools/dapp-config/constants';
 import isDefined from '@webb-tools/dapp-types/utils/isDefined';
 import type { Noop } from '@webb-tools/dapp-types/utils/types';
+import LockFillIcon from '@webb-tools/icons/LockFillIcon';
+import { LockLineIcon } from '@webb-tools/icons/LockLineIcon';
 import type { DelegatorInfo } from '@webb-tools/tangle-shared-ui/types/restake';
 import type { IdentityType } from '@webb-tools/tangle-shared-ui/utils/polkadot/identity';
 import type { TextFieldInputProps } from '@webb-tools/webb-ui-components/components/TextField/types';
 import { TransactionInputCard } from '@webb-tools/webb-ui-components/components/TransactionInputCard';
-import { FC, useCallback, useMemo } from 'react';
+import { FC, useCallback, useMemo, useRef } from 'react';
 import type {
   UseFormRegister,
   UseFormSetValue,
@@ -14,12 +16,12 @@ import type {
 import { formatUnits } from 'viem';
 import AvatarWithText from '../../../components/AvatarWithText';
 import ErrorMessage from '../../../components/ErrorMessage';
+import useRestakeAsset from '../../../data/restake/useRestakeAsset';
 import useRestakeConsts from '../../../data/restake/useRestakeConsts';
 import type { DelegationFormFields } from '../../../types/restake';
 import decimalsToStep from '../../../utils/decimalsToStep';
 import { getAmountValidation } from '../../../utils/getAmountValidation';
 import AssetPlaceholder from '../AssetPlaceholder';
-import useRestakeAsset from '../../../data/restake/useRestakeAsset';
 
 type Props = {
   amountError: string | undefined;
@@ -138,7 +140,13 @@ const StakeInput: FC<Props> = ({
 
           <TransactionInputCard.MaxAmountButton
             accountType="note"
-            tooltipBody="Deposited"
+            tooltipBody="Available Balance"
+            Icon={
+              useRef({
+                enabled: <LockLineIcon />,
+                disabled: <LockFillIcon />,
+              }).current
+            }
           />
         </TransactionInputCard.Header>
 

diff --git a/apps/tangle-dapp/src/pages/restake/delegate/index.tsx b/apps/tangle-dapp/src/pages/restake/delegate/index.tsx
@@ -261,7 +261,7 @@ const RestakeDelegateForm: FC = () => {
   );
 
   return (
-    <StyleContainer className="min-w-[512px]">
+    <StyleContainer className="md:min-w-[512px]">
       <RestakeTabs />
 
       <Card withShadow tightPadding>
@@ -301,6 +301,9 @@ const RestakeDelegateForm: FC = () => {
             searchPlaceholder="Search for asset or enter token address"
             getItemKey={(item) => item.id}
             onSelect={handleAssetSelect}
+            filterItem={(item, query) =>
+              filterBy(query, [item.name, item.symbol, item.id])
+            }
             renderItem={(asset) => {
               const fmtBalance = formatDisplayAmount(
                 asset.balance,

diff --git a/apps/tangle-dapp/src/pages/restake/deposit/ActionButton.tsx b/apps/tangle-dapp/src/pages/restake/deposit/ActionButton.tsx
@@ -32,11 +32,11 @@ export default function ActionButton({
       {(isLoading, loadingText) => {
         const displayError =
           errors.sourceTypedChainId !== undefined
-            ? `Select a source chain`
+            ? `Select Source Chain`
             : errors.depositAssetId !== undefined
-              ? `Select an asset`
+              ? `Select Asset`
               : errors.amount !== undefined
-                ? `Enter an amount`
+                ? `Enter Amount`
                 : undefined;
 
         if (activeTypedChainId !== sourceTypedChainId) {

diff --git a/apps/tangle-dapp/src/pages/restake/deposit/DepositForm.tsx b/apps/tangle-dapp/src/pages/restake/deposit/DepositForm.tsx
@@ -1,12 +1,16 @@
+import { BN } from '@polkadot/util';
 import { useWebContext } from '@webb-tools/api-provider-environment/webb-context';
 import { ChainConfig } from '@webb-tools/dapp-config';
 import { ZERO_BIG_INT } from '@webb-tools/dapp-config/constants';
+import { PresetTypedChainId } from '@webb-tools/dapp-types';
 import { calculateTypedChainId } from '@webb-tools/dapp-types/TypedChainId';
 import isDefined from '@webb-tools/dapp-types/utils/isDefined';
 import { TokenIcon } from '@webb-tools/icons';
 import ListModal from '@webb-tools/tangle-shared-ui/components/ListModal';
 import { useRestakeContext } from '@webb-tools/tangle-shared-ui/context/RestakeContext';
 import { useRpcSubscription } from '@webb-tools/tangle-shared-ui/hooks/usePolkadotApi';
+import useTangleEvmErc20Balances from '@webb-tools/tangle-shared-ui/hooks/useTangleEvmErc20Balances';
+import { RestakeAsset } from '@webb-tools/tangle-shared-ui/types/restake';
 import {
   AmountFormatStyle,
   Card,
@@ -19,6 +23,7 @@ import {
   ModalContent,
 } from '@webb-tools/webb-ui-components/components/Modal';
 import { useModal } from '@webb-tools/webb-ui-components/hooks/useModal';
+import assert from 'assert';
 import {
   type ComponentProps,
   FC,
@@ -31,25 +36,21 @@ import { type SubmitHandler, useForm } from 'react-hook-form';
 import { formatUnits } from 'viem';
 import { ChainList } from '../../../components/Lists/ChainList';
 import LogoListItem from '../../../components/Lists/LogoListItem';
+import StyleContainer from '../../../components/restaking/StyleContainer';
 import { SUPPORTED_RESTAKE_DEPOSIT_TYPED_CHAIN_IDS } from '../../../constants/restake';
+import useRestakeApi from '../../../data/restake/useRestakeApi';
+import useRestakeAsset from '../../../data/restake/useRestakeAsset';
 import useActiveTypedChainId from '../../../hooks/useActiveTypedChainId';
 import useQueryState from '../../../hooks/useQueryState';
 import { QueryParamKey } from '../../../types';
 import { DepositFormFields } from '../../../types/restake';
 import filterBy from '../../../utils/filterBy';
+import parseChainUnits from '../../../utils/parseChainUnits';
 import Form from '../Form';
 import RestakeTabs from '../RestakeTabs';
 import ActionButton from './ActionButton';
-import SourceChainInput from './SourceChainInput';
 import Details from './Details';
-import { BN } from '@polkadot/util';
-import parseChainUnits from '../../../utils/parseChainUnits';
-import { PresetTypedChainId } from '@webb-tools/dapp-types';
-import useRestakeApi from '../../../data/restake/useRestakeApi';
-import assert from 'assert';
-import { RestakeAsset } from '@webb-tools/tangle-shared-ui/types/restake';
-import useRestakeAsset from '../../../data/restake/useRestakeAsset';
-import useTangleEvmErc20Balances from '@webb-tools/tangle-shared-ui/hooks/useTangleEvmErc20Balances';
+import SourceChainInput from './SourceChainInput';
 
 const getDefaultTypedChainId = (
   activeTypedChainId: number | null,
@@ -277,7 +278,7 @@ const DepositForm: FC<Props> = (props) => {
   );
 
   return (
-    <div className="min-w-[512px]">
+    <StyleContainer className="md:min-w-[512px]">
       <RestakeTabs />
 
       <Card withShadow tightPadding>
@@ -356,7 +357,7 @@ const DepositForm: FC<Props> = (props) => {
           />
         </Form>
       </Card>
-    </div>
+    </StyleContainer>
   );
 };