From 522d4816e3045d5834140bc89c15594c4eb73515 Mon Sep 17 00:00:00 2001 From: yurixander <101931215+yurixander@users.noreply.github.com> Date: Wed, 20 Nov 2024 22:20:28 +0100 Subject: [PATCH 01/22] style(tangle-dapp): Design changes in jam meeting --- apps/tangle-dapp/app/bridge/page.tsx | 33 ---- apps/tangle-dapp/app/liquid-staking/page.tsx | 63 +------ apps/tangle-dapp/app/nomination/page.tsx | 44 +---- apps/tangle-dapp/app/page.tsx | 7 +- apps/tangle-dapp/app/restake/ErrorMessage.tsx | 2 +- apps/tangle-dapp/app/restake/TabListItem.tsx | 2 +- .../app/restake/deposit/ActionButton.tsx | 5 +- .../app/restake/deposit/DepositForm.tsx | 162 ++++++------------ .../app/restake/deposit/DestChainInput.tsx | 86 ---------- .../app/restake/deposit/SourceChainInput.tsx | 44 ++--- .../app/restake/deposit/TxDetails.tsx | 40 +++-- apps/tangle-dapp/app/restake/page.tsx | 39 ----- apps/tangle-dapp/components/Container.tsx | 11 ++ .../components/DetailsContainer.tsx | 7 + .../stakeAndUnstake/LsStakeCard.tsx | 5 +- .../OnboardingModal/OnboardingHelpButton.tsx | 42 ----- .../OnboardingModal/OnboardingItem.tsx | 31 ---- .../OnboardingModal/OnboardingModal.tsx | 103 ----------- .../components/OnboardingModal/index.ts | 2 - .../components/Sidebar/sidebarProps.ts | 2 +- .../components/TangleCard/TangleCard.tsx | 2 +- apps/tangle-dapp/containers/Layout/Layout.tsx | 3 - .../RecentTxContainer/RecentTxContainer.tsx | 76 -------- .../containers/RecentTxContainer/index.ts | 1 - .../TokenSelector/TokenSelector.tsx | 8 +- 25 files changed, 134 insertions(+), 686 deletions(-) delete mode 100644 apps/tangle-dapp/app/restake/deposit/DestChainInput.tsx create mode 100644 apps/tangle-dapp/components/Container.tsx create mode 100644 apps/tangle-dapp/components/DetailsContainer.tsx delete mode 100644 apps/tangle-dapp/components/OnboardingModal/OnboardingHelpButton.tsx delete mode 100644 apps/tangle-dapp/components/OnboardingModal/OnboardingItem.tsx delete mode 100644 apps/tangle-dapp/components/OnboardingModal/OnboardingModal.tsx delete mode 100644 apps/tangle-dapp/components/OnboardingModal/index.ts delete mode 100644 apps/tangle-dapp/containers/RecentTxContainer/RecentTxContainer.tsx delete mode 100644 apps/tangle-dapp/containers/RecentTxContainer/index.ts diff --git a/apps/tangle-dapp/app/bridge/page.tsx b/apps/tangle-dapp/app/bridge/page.tsx index 6cdf0d28fe..aa2ef0e921 100644 --- a/apps/tangle-dapp/app/bridge/page.tsx +++ b/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'; @@ -20,30 +11,6 @@ export const metadata: Metadata = createPageMetadata({ const Bridge: FC = () => { return (
- - - - - - - -
); diff --git a/apps/tangle-dapp/app/liquid-staking/page.tsx b/apps/tangle-dapp/app/liquid-staking/page.tsx index f061938a79..80c2974375 100644 --- a/apps/tangle-dapp/app/liquid-staking/page.tsx +++ b/apps/tangle-dapp/app/liquid-staking/page.tsx @@ -1,13 +1,6 @@ 'use client'; -import { - AddLineIcon, - CoinIcon, - EditLine, - Search, - WaterDropletIcon, -} from '@webb-tools/icons'; -import { OnboardingPageKey } from '@webb-tools/tangle-shared-ui/constants'; +import { AddLineIcon } from '@webb-tools/icons'; import useNetworkStore from '@webb-tools/tangle-shared-ui/context/useNetworkStore'; import useNetworkSwitcher from '@webb-tools/tangle-shared-ui/hooks/useNetworkSwitcher'; import { @@ -16,15 +9,12 @@ import { TabsList as WebbTabsList, TabsRoot, TabTrigger, - TANGLE_DOCS_LIQUID_STAKING_URL, Typography, } from '@webb-tools/webb-ui-components'; import { FC, useEffect, useState } from 'react'; import LsStakeCard from '../../components/LiquidStaking/stakeAndUnstake/LsStakeCard'; import LsUnstakeCard from '../../components/LiquidStaking/stakeAndUnstake/LsUnstakeCard'; -import OnboardingItem from '../../components/OnboardingModal/OnboardingItem'; -import OnboardingModal from '../../components/OnboardingModal/OnboardingModal'; import { LsSearchParamKey } from '../../constants/liquidStaking/types'; import LsCreatePoolModal from '../../containers/LsCreatePoolModal'; import LsMyProtocolsTable from '../../containers/LsMyProtocolsTable'; @@ -96,58 +86,7 @@ const LiquidStakingPage: FC = () => { setIsOpen={setIsCreatePoolModalOpen} /> - - - - - - - - - -
-
-
- - Tangle Liquid Staking - - - - Mint Liquid Staking Tokens (LSTs) to earn rewards & restake on - Tangle Mainnet. - -
- - {/** TODO: Waiting for price fetching API before showing this part. */} - {/*
- -
*/} -
-
- - - - - - - - - -
diff --git a/apps/tangle-dapp/app/page.tsx b/apps/tangle-dapp/app/page.tsx index 51b7fb3da5..d962b2e0b7 100644 --- a/apps/tangle-dapp/app/page.tsx +++ b/apps/tangle-dapp/app/page.tsx @@ -4,7 +4,6 @@ import { FC } from 'react'; import AccountSummaryCard from '../components/account/AccountSummaryCard'; import BalancesTableContainer from '../containers/BalancesTableContainer/BalancesTableContainer'; -import RecentTxContainer from '../containers/RecentTxContainer/RecentTxContainer'; import createPageMetadata from '../utils/createPageMetadata'; export const dynamic = 'force-static'; @@ -17,11 +16,7 @@ export const metadata: Metadata = createPageMetadata({ const AccountPage: FC = () => { return (
-
- - - -
+ Balances diff --git a/apps/tangle-dapp/app/restake/ErrorMessage.tsx b/apps/tangle-dapp/app/restake/ErrorMessage.tsx index b6df8b66af..fa4538e593 100644 --- a/apps/tangle-dapp/app/restake/ErrorMessage.tsx +++ b/apps/tangle-dapp/app/restake/ErrorMessage.tsx @@ -23,7 +23,7 @@ export default function ErrorMessage({

diff --git a/apps/tangle-dapp/app/restake/TabListItem.tsx b/apps/tangle-dapp/app/restake/TabListItem.tsx index 6831eb51ef..a9b7238049 100644 --- a/apps/tangle-dapp/app/restake/TabListItem.tsx +++ b/apps/tangle-dapp/app/restake/TabListItem.tsx @@ -30,7 +30,7 @@ export default function TabListItem({ - {(displayError ?? operatorAccountId) - ? 'Deposit + Delegate' - : 'Deposit'} + Deposit ); }} diff --git a/apps/tangle-dapp/app/restake/deposit/DepositForm.tsx b/apps/tangle-dapp/app/restake/deposit/DepositForm.tsx index b17c6a7ca8..796ead8377 100644 --- a/apps/tangle-dapp/app/restake/deposit/DepositForm.tsx +++ b/apps/tangle-dapp/app/restake/deposit/DepositForm.tsx @@ -4,7 +4,6 @@ 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 isDefined from '@webb-tools/dapp-types/utils/isDefined'; -import { ArrowRight } from '@webb-tools/icons/ArrowRight'; import { calculateTypedChainId } from '@webb-tools/sdk-core'; import { type TokenListCardProps } from '@webb-tools/webb-ui-components/components/ListCard/types'; import { Modal } from '@webb-tools/webb-ui-components/components/Modal'; @@ -24,11 +23,8 @@ import useRestakeTxEventHandlersWithNoti, { type Props, } from '../../..//data/restake/useRestakeTxEventHandlersWithNoti'; import AvatarWithText from '../../../components/AvatarWithText'; +import DarkContainer from '../../../components/Container'; import { ChainList } from '../../../components/Lists/ChainList'; -import { - OperatorConfig, - OperatorList, -} from '../../../components/Lists/OperatorList'; import { SUPPORTED_RESTAKE_DEPOSIT_TYPED_CHAIN_IDS } from '../../../constants/restake'; import { useRestakeContext } from '../../../context/RestakeContext'; import { @@ -47,7 +43,6 @@ import AssetList from '../AssetList'; import Form from '../Form'; import ModalContent from '../ModalContent'; import ActionButton from './ActionButton'; -import DestChainInput from './DestChainInput'; import SourceChainInput from './SourceChainInput'; import TxDetails from './TxDetails'; @@ -163,12 +158,6 @@ const DepositForm = ({ ...props }: DepositFormProps) => { open: openChainModal, } = useModal(); - const { - status: operatorModalOpen, - close: closeOperatorModal, - open: openOperatorModal, - } = useModal(); - const { status: tokenModalOpen, close: closeTokenModal, @@ -250,22 +239,6 @@ const DepositForm = ({ ...props }: DepositFormProps) => { [closeTokenModal, setValue], ); - const operators = useMemo(() => { - return Object.entries(operatorMap).map(([accountId, _operator]) => ({ - accountId, - name: operatorIdentities?.[accountId]?.name || '', - status: 'active', - })); - }, [operatorMap, operatorIdentities]); - - const handleOnSelectOperator = useCallback( - (operator: OperatorConfig) => { - setValue('operatorAccountId', operator.accountId); - closeOperatorModal(); - }, - [closeOperatorModal, setValue], - ); - const onSubmit = useCallback>( async (data) => { const { amount, depositAssetId, operatorAccountId } = data; @@ -306,85 +279,64 @@ const DepositForm = ({ ...props }: DepositFormProps) => { ); return ( -

-
-
- - - - - + + +
+
+ +
+ +
+ + + +
-
- - - -
-
- - - - - - - - - - - - - - - + + + + + + + + + + + ); }; diff --git a/apps/tangle-dapp/app/restake/deposit/DestChainInput.tsx b/apps/tangle-dapp/app/restake/deposit/DestChainInput.tsx deleted file mode 100644 index 55891973f2..0000000000 --- a/apps/tangle-dapp/app/restake/deposit/DestChainInput.tsx +++ /dev/null @@ -1,86 +0,0 @@ -'use client'; - -import isDefined from '@webb-tools/dapp-types/utils/isDefined'; -import { Avatar } from '@webb-tools/webb-ui-components/components/Avatar'; -import { TransactionInputCard } from '@webb-tools/webb-ui-components/components/TransactionInputCard'; -import { useMemo } from 'react'; -import type { UseFormWatch } from 'react-hook-form'; -import { formatUnits } from 'viem'; - -import AvatarWithText from '../../../components/AvatarWithText'; -import { useRestakeContext } from '../../../context/RestakeContext'; -import useRestakeDelegatorInfo from '../../../data/restake/useRestakeDelegatorInfo'; -import type { DepositFormFields } from '../../../types/restake'; -import type { IdentityType } from '../../../utils/polkadot'; -import SelectorPlaceholder from '../SelectorPlaceholder'; - -type Props = { - openOperatorModal: () => void; - watch: UseFormWatch; - operatorIdentities?: Record | null; -}; - -const DestChainInput = ({ - openOperatorModal, - watch, - operatorIdentities, -}: Props) => { - const operatorAccountId = watch('operatorAccountId'); - const selectedAssetId = watch('depositAssetId'); - - const { assetMap } = useRestakeContext(); - const { delegatorInfo } = useRestakeDelegatorInfo(); - - const depositedBalance = useMemo(() => { - if (!isDefined(selectedAssetId)) return; - - if (!isDefined(delegatorInfo)) return; - - const amount = delegatorInfo.deposits[selectedAssetId]?.amount; - if (!isDefined(amount)) return; - - const asset = assetMap[selectedAssetId]; - if (!isDefined(asset)) return; - - return +formatUnits(amount, asset.decimals); - }, [assetMap, delegatorInfo, selectedAssetId]); - - return ( - - - - - - - - }> - Operator - - ), - children: operatorAccountId && ( - - ), - }} - /> - - ); -}; - -export default DestChainInput; diff --git a/apps/tangle-dapp/app/restake/deposit/SourceChainInput.tsx b/apps/tangle-dapp/app/restake/deposit/SourceChainInput.tsx index 6c8b78b08c..c3548dd1c0 100644 --- a/apps/tangle-dapp/app/restake/deposit/SourceChainInput.tsx +++ b/apps/tangle-dapp/app/restake/deposit/SourceChainInput.tsx @@ -119,30 +119,32 @@ const SourceChainInput = ({ return ( // Pass token symbol to root here to share between max amount & token selection button - - - + + + + + + + - - - - + {amountError} - +
); }; diff --git a/apps/tangle-dapp/app/restake/deposit/TxDetails.tsx b/apps/tangle-dapp/app/restake/deposit/TxDetails.tsx index 4b7bd767e7..e3ff7e1b53 100644 --- a/apps/tangle-dapp/app/restake/deposit/TxDetails.tsx +++ b/apps/tangle-dapp/app/restake/deposit/TxDetails.tsx @@ -1,13 +1,16 @@ 'use client'; -import FeeDetails from '@webb-tools/webb-ui-components/components/FeeDetails'; import { useMemo } from 'react'; import { UseFormWatch } from 'react-hook-form'; +import DetailsContainer from '../../../components/DetailsContainer'; +import DetailItem from '../../../components/LiquidStaking/stakeAndUnstake/DetailItem'; +import { EMPTY_VALUE_PLACEHOLDER } from '../../../constants'; import { useRestakeContext } from '../../../context/RestakeContext'; import useRestakeConsts from '../../../data/restake/useRestakeConsts'; import useRestakeRewardConfig from '../../../data/restake/useRestakeRewardConfig'; import { DepositFormFields } from '../../../types/restake'; +import pluralize from '../../../utils/pluralize'; type Props = { watch: UseFormWatch; @@ -27,6 +30,7 @@ export default function TxDetails({ watch }: Props) { } const asset = assetMap[assetId]; + if (asset === undefined || asset.vaultId === null) { return null; } @@ -35,23 +39,21 @@ export default function TxDetails({ watch }: Props) { }, [assetId, assetMap, rewardConfig.configs]); return ( - + + + + + ); } diff --git a/apps/tangle-dapp/app/restake/page.tsx b/apps/tangle-dapp/app/restake/page.tsx index b605f9afef..d5fb53c00e 100644 --- a/apps/tangle-dapp/app/restake/page.tsx +++ b/apps/tangle-dapp/app/restake/page.tsx @@ -1,20 +1,11 @@ 'use client'; -import { - AddCircleLineIcon, - Search, - SparklingIcon, - UserLineIcon, -} from '@webb-tools/icons'; -import { OnboardingPageKey } from '@webb-tools/tangle-shared-ui/constants'; import { TANGLE_DOCS_RESTAKING_URL } from '@webb-tools/webb-ui-components'; import Button from '@webb-tools/webb-ui-components/components/buttons/Button'; import { Typography } from '@webb-tools/webb-ui-components/typography/Typography'; import { twMerge } from 'tailwind-merge'; import GlassCard from '../../components/GlassCard/GlassCard'; -import OnboardingItem from '../../components/OnboardingModal/OnboardingItem'; -import OnboardingModal from '../../components/OnboardingModal/OnboardingModal'; import StatItem from '../../components/StatItem'; import useRestakeDelegatorInfo from '../../data/restake/useRestakeDelegatorInfo'; import useRestakeOperatorMap from '../../data/restake/useRestakeOperatorMap'; @@ -52,36 +43,6 @@ export default function RestakePage() { return ( <> - - - - - - - - - -
= ({ children }) => { + return ( +
+ {children} +
+ ); +}; + +export default DarkContainer; diff --git a/apps/tangle-dapp/components/DetailsContainer.tsx b/apps/tangle-dapp/components/DetailsContainer.tsx new file mode 100644 index 0000000000..586a6ff63c --- /dev/null +++ b/apps/tangle-dapp/components/DetailsContainer.tsx @@ -0,0 +1,7 @@ +import { FC, PropsWithChildren } from 'react'; + +const DetailsContainer: FC = ({ children }) => { + return
{children}
; +}; + +export default DetailsContainer; diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx index 00e528a0cf..a75429b5f9 100644 --- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx +++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx @@ -30,6 +30,7 @@ import useSearchParamSync from '../../../hooks/useSearchParamSync'; import { TxStatus } from '../../../hooks/useSubstrateTx'; import getLsProtocolDef from '../../../utils/liquidStaking/getLsProtocolDef'; import scaleAmountByPercentage from '../../../utils/scaleAmountByPercentage'; +import DetailsContainer from '../../DetailsContainer'; import ExchangeRateDetailItem from './ExchangeRateDetailItem'; import FeeDetailItem from './FeeDetailItem'; import LsAgnosticBalance from './LsAgnosticBalance'; @@ -248,7 +249,7 @@ const LsStakeCard: FC = () => { /> {/* Details */} -
+ { isStaking protocolId={lsProtocolId} /> -
+ diff --git a/apps/tangle-dapp/components/OnboardingModal/OnboardingHelpButton.tsx b/apps/tangle-dapp/components/OnboardingModal/OnboardingHelpButton.tsx deleted file mode 100644 index d219d32436..0000000000 --- a/apps/tangle-dapp/components/OnboardingModal/OnboardingHelpButton.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { IconButton, Typography } from '@webb-tools/webb-ui-components'; -import { usePathname } from 'next/navigation'; -import { FC } from 'react'; - -import useOnboardingStore from '../../context/useOnboardingStore'; -import { PagePath } from '../../types'; - -// TODO: Edge case: Restake -> Deposit page is missing proper handling (the question mark / reopen button shows up, but has no effect). -const PAGES_WITH_ONBOARDING: PagePath[] = [ - PagePath.LIQUID_STAKING, - PagePath.RESTAKE, - PagePath.NOMINATION, - PagePath.BRIDGE, -]; - -const OnboardingHelpButton: FC = () => { - const { setOnboardingReopenFlag } = useOnboardingStore(); - const pathName = usePathname(); - - const isOnOnboardingPage = PAGES_WITH_ONBOARDING.some((pagePath) => - pathName.startsWith(pagePath), - ); - - // Don't render if on a page that doesn't have onboarding. - if (!isOnOnboardingPage) { - return null; - } - - return ( - setOnboardingReopenFlag(true)} - tooltip="Learn how to use this page" - className="rounded-full border-2 py-2 px-4 bg-mono-0/10 border-mono-60 dark:bg-mono-0/5 dark:border-mono-140 dark:hover:bg-mono-0/10" - > - - ? - - - ); -}; - -export default OnboardingHelpButton; diff --git a/apps/tangle-dapp/components/OnboardingModal/OnboardingItem.tsx b/apps/tangle-dapp/components/OnboardingModal/OnboardingItem.tsx deleted file mode 100644 index e6e5bd98da..0000000000 --- a/apps/tangle-dapp/components/OnboardingModal/OnboardingItem.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { IconBase } from '@webb-tools/icons/types'; -import { Typography } from '@webb-tools/webb-ui-components'; -import { FC, JSX } from 'react'; - -export type OnboardingItemProps = { - Icon: (props: IconBase) => JSX.Element; - title: string; - description: string; -}; - -const OnboardingItem: FC = ({ - title, - description, - Icon, -}) => { - return ( -
- - -
- - {title} - - - {description} -
-
- ); -}; - -export default OnboardingItem; diff --git a/apps/tangle-dapp/components/OnboardingModal/OnboardingModal.tsx b/apps/tangle-dapp/components/OnboardingModal/OnboardingModal.tsx deleted file mode 100644 index dfeca8838c..0000000000 --- a/apps/tangle-dapp/components/OnboardingModal/OnboardingModal.tsx +++ /dev/null @@ -1,103 +0,0 @@ -'use client'; - -import { OnboardingPageKey } from '@webb-tools/tangle-shared-ui/constants'; -import useLocalStorage, { - LocalStorageKey, -} from '@webb-tools/tangle-shared-ui/hooks/useLocalStorage'; -import { - Modal, - ModalBody, - ModalContent, - ModalFooterActions, - ModalHeader, - TANGLE_DOCS_URL, -} from '@webb-tools/webb-ui-components'; -import { FC, ReactElement, useEffect, useRef, useState } from 'react'; - -import useOnboardingStore from '../../context/useOnboardingStore'; -import { OnboardingItemProps } from './OnboardingItem'; - -export type OnboardingModalProps = { - title?: string; - pageKey: OnboardingPageKey; - learnMoreHref?: string; - children: - | ReactElement - | ReactElement[]; -}; - -const OnboardingModal: FC = ({ - title = 'Quick Start', - pageKey, - children, - learnMoreHref = TANGLE_DOCS_URL, -}) => { - const { onboardingReopenFlag, setOnboardingReopenFlag } = - useOnboardingStore(); - - const [isOpen, setIsOpen] = useState(false); - const seenRef = useRef(false); - - const { setWithPreviousValue, refresh } = useLocalStorage( - LocalStorageKey.ONBOARDING_MODALS_SEEN, - ); - - // Re-open the modal if the user has requested so by clicking the - // help button, which raises a global flag. - useEffect(() => { - if (onboardingReopenFlag) { - setOnboardingReopenFlag(false); - setIsOpen(true); - } - }, [onboardingReopenFlag, setOnboardingReopenFlag]); - - // On load, check if the user has seen this modal before. - // If not, then trigger the modal to be shown, and remember - // that it has been seen. - useEffect(() => { - // Handle any possible data race. - if (seenRef.current) { - return; - } - - const seenOpt = refresh(); - const seen = seenOpt.orElse([]); - - // The user hasn't seen this modal yet. Show it, and remember - // that it has been seen. - if (!seen.includes(pageKey)) { - seenRef.current = true; - setIsOpen(true); - - setWithPreviousValue((prev) => { - if (prev === null || prev.value === null) { - return [pageKey]; - } - - return [...prev.value, pageKey]; - }); - } - }, [pageKey, refresh, setWithPreviousValue]); - - return ( - - setIsOpen(false)} - isOpen={isOpen} - size="md" - > - setIsOpen(false)}>{title} - - {children} - - setIsOpen(false)} - confirmButtonText="Got It" - /> - - - ); -}; - -export default OnboardingModal; diff --git a/apps/tangle-dapp/components/OnboardingModal/index.ts b/apps/tangle-dapp/components/OnboardingModal/index.ts deleted file mode 100644 index e8e82237c8..0000000000 --- a/apps/tangle-dapp/components/OnboardingModal/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './OnboardingItem'; -export * from './OnboardingModal'; diff --git a/apps/tangle-dapp/components/Sidebar/sidebarProps.ts b/apps/tangle-dapp/components/Sidebar/sidebarProps.ts index f23b7aac01..4483ccac63 100644 --- a/apps/tangle-dapp/components/Sidebar/sidebarProps.ts +++ b/apps/tangle-dapp/components/Sidebar/sidebarProps.ts @@ -94,7 +94,7 @@ const SIDEBAR_FOOTER: SideBarFooterType = { Icon: DocumentationIcon, href: TANGLE_DOCS_URL, isInternal: false, - name: 'Tangle Docs', + name: 'Docs', useNextThemesForThemeToggle: true, }; diff --git a/apps/tangle-dapp/components/TangleCard/TangleCard.tsx b/apps/tangle-dapp/components/TangleCard/TangleCard.tsx index 01e70b6e71..2f4f329e60 100644 --- a/apps/tangle-dapp/components/TangleCard/TangleCard.tsx +++ b/apps/tangle-dapp/components/TangleCard/TangleCard.tsx @@ -14,7 +14,7 @@ const TangleCard = forwardRef, TangleCardProps>( className={twMerge( 'w-full flex items-center md:max-w-[556px] overflow-hidden space-y-0', 'relative rounded-2xl shadow-sm border p-6', - 'border-mono-0 bg-mono-0/70 dark:border-mono-160 dark:bg-mono-0/5', + 'border-mono-0 dark:border-mono-160 bg-glass dark:bg-glass_dark', className, )} > diff --git a/apps/tangle-dapp/containers/Layout/Layout.tsx b/apps/tangle-dapp/containers/Layout/Layout.tsx index 78cef5aadf..a6ef9c7234 100644 --- a/apps/tangle-dapp/containers/Layout/Layout.tsx +++ b/apps/tangle-dapp/containers/Layout/Layout.tsx @@ -17,7 +17,6 @@ import { MobileSidebar, Sidebar, } from '../../components'; -import OnboardingHelpButton from '../../components/OnboardingModal/OnboardingHelpButton'; import { IS_PRODUCTION_ENV } from '../../constants/env'; import ApiDevStatsContainer from '../DebugMetricsContainer'; import WalletAndChainContainer from '../WalletAndChainContainer/WalletAndChainContainer'; @@ -63,8 +62,6 @@ const Layout: FC> = ({ - -
diff --git a/apps/tangle-dapp/containers/RecentTxContainer/RecentTxContainer.tsx b/apps/tangle-dapp/containers/RecentTxContainer/RecentTxContainer.tsx deleted file mode 100644 index bfab89f7a4..0000000000 --- a/apps/tangle-dapp/containers/RecentTxContainer/RecentTxContainer.tsx +++ /dev/null @@ -1,76 +0,0 @@ -'use client'; - -import { makeExplorerUrl } from '@webb-tools/api-provider-environment/transaction/utils'; -import { ArrowRightUp } from '@webb-tools/icons'; -import useNetworkStore from '@webb-tools/tangle-shared-ui/context/useNetworkStore'; -import { ExplorerType } from '@webb-tools/tangle-shared-ui/types'; -import { Button, Typography } from '@webb-tools/webb-ui-components'; -import { TANGLE_DOCS_URL } from '@webb-tools/webb-ui-components/constants'; -import { FC, useMemo } from 'react'; - -import GlassCard from '../../components/GlassCard/GlassCard'; -import useActiveAccountAddress from '../../hooks/useActiveAccountAddress'; -import useAgnosticAccountInfo from '../../hooks/useAgnosticAccountInfo'; - -const RecentTxContainer: FC = () => { - const { network } = useNetworkStore(); - const activeAccountAddress = useActiveAccountAddress(); - const { isEvm } = useAgnosticAccountInfo(); - - const explorerUrl = useMemo(() => { - return isEvm - ? network.evmExplorerUrl - : (network.nativeExplorerUrl ?? network.polkadotJsDashboardUrl); - }, [ - isEvm, - network.evmExplorerUrl, - network.nativeExplorerUrl, - network.polkadotJsDashboardUrl, - ]); - - const accountExplorerUrl = useMemo(() => { - return activeAccountAddress && explorerUrl - ? makeExplorerUrl( - explorerUrl, - activeAccountAddress, - 'address', - isEvm ? ExplorerType.EVM : ExplorerType.Substrate, - ).toString() - : undefined; - }, [activeAccountAddress, explorerUrl, isEvm]); - - return ( - -
- -
- -
- - Welcome to Tangle dApp — Your portal to managing Tangle Network - assets and upcoming AVS Blueprints in Tangle's modular restaking - infrastructure. - - - -
- - ); -}; - -export default RecentTxContainer; diff --git a/apps/tangle-dapp/containers/RecentTxContainer/index.ts b/apps/tangle-dapp/containers/RecentTxContainer/index.ts deleted file mode 100644 index daea65d3d9..0000000000 --- a/apps/tangle-dapp/containers/RecentTxContainer/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './RecentTxContainer'; diff --git a/libs/webb-ui-components/src/components/TokenSelector/TokenSelector.tsx b/libs/webb-ui-components/src/components/TokenSelector/TokenSelector.tsx index 75a59f2058..3f2aa55d56 100644 --- a/libs/webb-ui-components/src/components/TokenSelector/TokenSelector.tsx +++ b/libs/webb-ui-components/src/components/TokenSelector/TokenSelector.tsx @@ -45,10 +45,10 @@ const TokenSelector = forwardRef( cx( 'group px-2 md:px-4 py-2 rounded-lg', 'flex items-center gap-2 max-w-fit', - 'bg-[#E2E5EB]/30 dark:bg-mono-160', - 'border border-transparent', - 'enabled:hover:border-mono-60', - 'dark:enabled:hover:border-mono-140', + 'bg-mono-40 dark:bg-mono-160', + 'border border-mono-60 dark:border-mono-140', + 'enabled:hover:border-mono-80', + 'dark:enabled:hover:border-mono-120', 'disabled:bg-[#E2E5EB]/20 dark:disabled:bg-[#3A3E53]/70', ), className, From 23fccf04b51d855b0049465cc8a4e4db69964e3e Mon Sep 17 00:00:00 2001 From: yurixander <101931215+yurixander@users.noreply.github.com> Date: Thu, 21 Nov 2024 00:31:14 +0100 Subject: [PATCH 02/22] style(tangle-dapp): Improve design consistency --- .../app/bridge/BridgeContainer.tsx | 69 +++++++++-------- apps/tangle-dapp/app/bridge/FeeDetails.tsx | 16 +++- apps/tangle-dapp/app/bridge/page.tsx | 6 +- .../[validatorAddress]/InfoCard.tsx | 6 +- .../nomination/[validatorAddress]/loading.tsx | 11 ++- apps/tangle-dapp/app/nomination/page.tsx | 26 +++---- apps/tangle-dapp/app/restake/ErrorMessage.tsx | 2 +- .../app/restake/deposit/DepositForm.tsx | 6 +- .../operators/[address]/OperatorInfoCard.tsx | 2 +- .../[address]/RegisteredBlueprintsCard.tsx | 2 +- apps/tangle-dapp/app/restake/page.tsx | 2 +- apps/tangle-dapp/components/AmountInput.tsx | 3 - apps/tangle-dapp/components/Container.tsx | 16 +++- .../components/{GlassCard => }/GlassCard.tsx | 16 +--- .../tangle-dapp/components/GlassCard/index.ts | 3 - .../tangle-dapp/components/GlassCard/types.ts | 5 -- .../TangleCard.tsx => GlassCardWithLogo.tsx} | 21 +++--- apps/tangle-dapp/components/InputWrapper.tsx | 18 +---- .../components/KeyStatsItem/KeyStatsItem.tsx | 2 +- .../LiquidStaking/LsMyPoolsTable.tsx | 7 +- .../stakeAndUnstake/DetailItem.tsx | 15 +++- .../stakeAndUnstake/FeeDetailItem.tsx | 13 +++- .../stakeAndUnstake/LsFeeWarning.tsx | 30 -------- .../stakeAndUnstake/LsStakeCard.tsx | 3 - .../stakeAndUnstake/LsUnstakeCard.tsx | 3 - .../NetworkSelectorButton/index.tsx | 16 ++-- .../NominatorStatsItem/NominatorStatsItem.tsx | 12 ++- .../components/NominatorStatsItem/types.ts | 9 --- .../components/TableStatus/TableStatus.tsx | 11 ++- .../components/TangleCard/index.ts | 5 -- .../components/TangleCard/types.ts | 3 - .../components/account/AccountSummaryCard.tsx | 6 +- .../components/account/Balance.tsx | 2 +- .../components/account/PillCard.tsx | 2 +- apps/tangle-dapp/components/index.ts | 2 +- .../components/tables/Operators/index.tsx | 9 +-- .../components/tables/Vaults/index.tsx | 9 +-- apps/tangle-dapp/components/tables/shared.ts | 9 --- .../BalancesTableContainer.tsx | 2 +- .../KeyStatsContainer/KeyStatsContainer.tsx | 8 +- .../containers/LsPoolsTable/LsPoolsTable.tsx | 6 +- .../NominationsPayoutsContainer.tsx | 4 +- .../NominatorStatsContainer.tsx | 27 +++---- .../ValidatorTablesContainer.tsx | 4 +- .../src/StatusIndicator/StatusIndicator.tsx | 2 +- libs/icons/src/useDynamicSVGImport.tsx | 34 ++++----- .../NetworkSelectorDropdown.tsx | 6 +- .../NetworkSelectorDropdown/index.tsx | 28 +------ .../IconWithTooltip/IconWithTooltip.tsx | 2 +- .../src/components/Input/Input.tsx | 75 +++++++------------ .../src/components/buttons/WalletButton.tsx | 38 +++++----- 51 files changed, 265 insertions(+), 369 deletions(-) rename apps/tangle-dapp/components/{GlassCard => }/GlassCard.tsx (67%) delete mode 100644 apps/tangle-dapp/components/GlassCard/index.ts delete mode 100644 apps/tangle-dapp/components/GlassCard/types.ts rename apps/tangle-dapp/components/{TangleCard/TangleCard.tsx => GlassCardWithLogo.tsx} (50%) delete mode 100644 apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsFeeWarning.tsx delete mode 100644 apps/tangle-dapp/components/NominatorStatsItem/types.ts delete mode 100644 apps/tangle-dapp/components/TangleCard/index.ts delete mode 100644 apps/tangle-dapp/components/TangleCard/types.ts delete mode 100644 apps/tangle-dapp/components/tables/shared.ts diff --git a/apps/tangle-dapp/app/bridge/BridgeContainer.tsx b/apps/tangle-dapp/app/bridge/BridgeContainer.tsx index 6f771a2214..9cf1dbc2ec 100644 --- a/apps/tangle-dapp/app/bridge/BridgeContainer.tsx +++ b/apps/tangle-dapp/app/bridge/BridgeContainer.tsx @@ -5,6 +5,7 @@ import { FC, useState } from 'react'; import { twMerge } from 'tailwind-merge'; import AddressInput, { AddressType } from '../../components/AddressInput'; +import Container from '../../components/Container'; import { useBridge } from '../../context/BridgeContext'; import useActiveAccountAddress from '../../hooks/useActiveAccountAddress'; import { isEVMChain } from '../../utils/bridge'; @@ -46,50 +47,48 @@ const BridgeContainer: FC = ({ className }) => { return ( <> -
-
-
- +
+ - + - - setIsAddressInputError(error ? true : false) - } - /> + + setIsAddressInputError(error ? true : false) + } + /> - {!hideFeeDetails && } -
- - + {!hideFeeDetails && }
-
+ + + = ({ }) => { return ( - {fee ? `${fee.toDecimalPlaces(5).toString()} ${symbol}` : 'N/A'} + {fee + ? `${fee.toDecimalPlaces(5).toString()} ${symbol}` + : EMPTY_VALUE_PLACEHOLDER} ); }; @@ -104,9 +107,16 @@ function formatTotalAmount( const symbolTotals: Record = {}; 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, ); diff --git a/apps/tangle-dapp/app/bridge/page.tsx b/apps/tangle-dapp/app/bridge/page.tsx index aa2ef0e921..59eefebbf3 100644 --- a/apps/tangle-dapp/app/bridge/page.tsx +++ b/apps/tangle-dapp/app/bridge/page.tsx @@ -9,11 +9,7 @@ export const metadata: Metadata = createPageMetadata({ }); const Bridge: FC = () => { - return ( -
- -
- ); + return ; }; export default Bridge; diff --git a/apps/tangle-dapp/app/nomination/[validatorAddress]/InfoCard.tsx b/apps/tangle-dapp/app/nomination/[validatorAddress]/InfoCard.tsx index 634405f754..ea63d1f0f6 100644 --- a/apps/tangle-dapp/app/nomination/[validatorAddress]/InfoCard.tsx +++ b/apps/tangle-dapp/app/nomination/[validatorAddress]/InfoCard.tsx @@ -14,7 +14,7 @@ import { shortenString } from '@webb-tools/webb-ui-components/utils/shortenStrin import { FC } from 'react'; import { twMerge } from 'tailwind-merge'; -import { TangleCard } from '../../../components'; +import { GlassCardWithLogo } from '../../../components'; import ValidatorSocials from '../../../components/ValidatorSocials'; import { EMPTY_VALUE_PLACEHOLDER } from '../../../constants'; import useValidatorInfoCard from '../../../data/validatorDetails/useValidatorInfoCard'; @@ -35,7 +35,7 @@ const InfoCard: FC = ({ useValidatorInfoCard(rpcEndpoint, validatorAddress); return ( - +
= ({ location={undefined} />
- + ); }; diff --git a/apps/tangle-dapp/app/nomination/[validatorAddress]/loading.tsx b/apps/tangle-dapp/app/nomination/[validatorAddress]/loading.tsx index e0f3464822..9d08529d53 100644 --- a/apps/tangle-dapp/app/nomination/[validatorAddress]/loading.tsx +++ b/apps/tangle-dapp/app/nomination/[validatorAddress]/loading.tsx @@ -1,14 +1,14 @@ import { Spinner } from '@webb-tools/icons'; import { SkeletonLoader, Typography } from '@webb-tools/webb-ui-components'; -import { GlassCard, TangleCard } from '../../../components'; +import { GlassCard, GlassCardWithLogo } from '../../../components'; import ValueSkeleton from './ValueSkeleton'; export default function Loading() { return (
- +
@@ -33,11 +33,13 @@ export default function Loading() {
- + + Role Distribution +
@@ -48,6 +50,7 @@ export default function Loading() { Node Specifications +
@@ -56,10 +59,12 @@ export default function Loading() { Active Services + Past Services
+
diff --git a/apps/tangle-dapp/app/nomination/page.tsx b/apps/tangle-dapp/app/nomination/page.tsx index da610bc20b..3b40b93dad 100644 --- a/apps/tangle-dapp/app/nomination/page.tsx +++ b/apps/tangle-dapp/app/nomination/page.tsx @@ -22,24 +22,22 @@ export const metadata: Metadata = createPageMetadata({ export default async function NominationPage() { return ( - <> -
-
- - Overview - +
+
+ + Overview + - -
+ +
- + - + - + - -
- + +
); } diff --git a/apps/tangle-dapp/app/restake/ErrorMessage.tsx b/apps/tangle-dapp/app/restake/ErrorMessage.tsx index fa4538e593..86442ef66f 100644 --- a/apps/tangle-dapp/app/restake/ErrorMessage.tsx +++ b/apps/tangle-dapp/app/restake/ErrorMessage.tsx @@ -28,7 +28,7 @@ export default function ErrorMessage({ )} > {isDefined(children) ? ( - + ) : null} { ); return ( - +
@@ -336,7 +336,7 @@ const DepositForm = ({ ...props }: DepositFormProps) => { - + ); }; diff --git a/apps/tangle-dapp/app/restake/operators/[address]/OperatorInfoCard.tsx b/apps/tangle-dapp/app/restake/operators/[address]/OperatorInfoCard.tsx index cde74f4dfc..3b57079aef 100644 --- a/apps/tangle-dapp/app/restake/operators/[address]/OperatorInfoCard.tsx +++ b/apps/tangle-dapp/app/restake/operators/[address]/OperatorInfoCard.tsx @@ -13,7 +13,7 @@ import useSWRImmutable from 'swr/immutable'; import { twMerge } from 'tailwind-merge'; import AvatarWithText from '../../../../components/AvatarWithText'; -import GlassCard from '../../../../components/GlassCard/GlassCard'; +import GlassCard from '../../../../components/GlassCard'; import ValidatorSocials from '../../../../components/ValidatorSocials'; import { EMPTY_VALUE_PLACEHOLDER } from '../../../../constants'; import type { diff --git a/apps/tangle-dapp/app/restake/operators/[address]/RegisteredBlueprintsCard.tsx b/apps/tangle-dapp/app/restake/operators/[address]/RegisteredBlueprintsCard.tsx index ac4de6621d..364daba7ba 100644 --- a/apps/tangle-dapp/app/restake/operators/[address]/RegisteredBlueprintsCard.tsx +++ b/apps/tangle-dapp/app/restake/operators/[address]/RegisteredBlueprintsCard.tsx @@ -10,7 +10,7 @@ import Link from 'next/link'; import type { ComponentProps, FC } from 'react'; import { twMerge } from 'tailwind-merge'; -import GlassCard from '../../../../components/GlassCard/GlassCard'; +import GlassCard from '../../../../components/GlassCard'; import { PagePath } from '../../../../types'; interface Props extends Partial> { diff --git a/apps/tangle-dapp/app/restake/page.tsx b/apps/tangle-dapp/app/restake/page.tsx index d5fb53c00e..14cb59df4e 100644 --- a/apps/tangle-dapp/app/restake/page.tsx +++ b/apps/tangle-dapp/app/restake/page.tsx @@ -5,7 +5,7 @@ import Button from '@webb-tools/webb-ui-components/components/buttons/Button'; import { Typography } from '@webb-tools/webb-ui-components/typography/Typography'; import { twMerge } from 'tailwind-merge'; -import GlassCard from '../../components/GlassCard/GlassCard'; +import GlassCard from '../../components/GlassCard'; import StatItem from '../../components/StatItem'; import useRestakeDelegatorInfo from '../../data/restake/useRestakeDelegatorInfo'; import useRestakeOperatorMap from '../../data/restake/useRestakeOperatorMap'; diff --git a/apps/tangle-dapp/components/AmountInput.tsx b/apps/tangle-dapp/components/AmountInput.tsx index 3d27effc16..b8bbe65c32 100644 --- a/apps/tangle-dapp/components/AmountInput.tsx +++ b/apps/tangle-dapp/components/AmountInput.tsx @@ -26,7 +26,6 @@ export type AmountInputProps = { wrapperClassName?: string; bodyClassName?: string; dropdownBodyClassName?: string; - errorMessageClassName?: string; }; const AmountInput: FC = ({ @@ -49,7 +48,6 @@ const AmountInput: FC = ({ wrapperClassName, bodyClassName, dropdownBodyClassName, - errorMessageClassName, }) => { const inputRef = useRef(null); const { nativeTokenSymbol } = useNetworkStore(); @@ -113,7 +111,6 @@ const AmountInput: FC = ({ wrapperClassName={wrapperClassName} bodyClassName={bodyClassName} dropdownBodyClassName={dropdownBodyClassName} - errorMessageClassName={errorMessageClassName} > = ({ children }) => { +export type ContainerProps = PropsWithChildren<{ + className?: string; +}>; + +const Container: FC = ({ children, className }) => { return ( -
+
{children}
); }; -export default DarkContainer; +export default Container; diff --git a/apps/tangle-dapp/components/GlassCard/GlassCard.tsx b/apps/tangle-dapp/components/GlassCard.tsx similarity index 67% rename from apps/tangle-dapp/components/GlassCard/GlassCard.tsx rename to apps/tangle-dapp/components/GlassCard.tsx index 3447bbb95c..3e87237166 100644 --- a/apps/tangle-dapp/components/GlassCard/GlassCard.tsx +++ b/apps/tangle-dapp/components/GlassCard.tsx @@ -1,26 +1,18 @@ import { Card } from '@webb-tools/webb-ui-components/components/Card'; -import { ElementRef, forwardRef } from 'react'; +import { ComponentProps, ElementRef, forwardRef } from 'react'; import { twMerge } from 'tailwind-merge'; -import { GlassCardProps } from './types'; +export type GlassCardProps = ComponentProps<'div'>; const GlassCard = forwardRef, GlassCardProps>( - ( - { - children, - className, - bgClassName = 'bg-glass dark:bg-glass_dark', - ...props - }, - ref, - ) => { + ({ children, className, ...props }, ref) => { return ( diff --git a/apps/tangle-dapp/components/GlassCard/index.ts b/apps/tangle-dapp/components/GlassCard/index.ts deleted file mode 100644 index 6a14fedf44..0000000000 --- a/apps/tangle-dapp/components/GlassCard/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { default as GlassCard } from './GlassCard'; - -export default GlassCard; diff --git a/apps/tangle-dapp/components/GlassCard/types.ts b/apps/tangle-dapp/components/GlassCard/types.ts deleted file mode 100644 index 04328690c9..0000000000 --- a/apps/tangle-dapp/components/GlassCard/types.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { ComponentProps } from 'react'; - -export type GlassCardProps = ComponentProps<'div'> & { - bgClassName?: string; -}; diff --git a/apps/tangle-dapp/components/TangleCard/TangleCard.tsx b/apps/tangle-dapp/components/GlassCardWithLogo.tsx similarity index 50% rename from apps/tangle-dapp/components/TangleCard/TangleCard.tsx rename to apps/tangle-dapp/components/GlassCardWithLogo.tsx index 2f4f329e60..d45fc275e8 100644 --- a/apps/tangle-dapp/components/TangleCard/TangleCard.tsx +++ b/apps/tangle-dapp/components/GlassCardWithLogo.tsx @@ -1,31 +1,32 @@ -import { Card } from '@webb-tools/webb-ui-components/components/Card'; -import { type ElementRef, forwardRef } from 'react'; +import { ComponentProps, type ElementRef, forwardRef } from 'react'; import { twMerge } from 'tailwind-merge'; -import TangleBigLogo from '../TangleBigLogo'; -import { TangleCardProps } from './types'; +import GlassCard from './GlassCard'; +import TangleBigLogo from './TangleBigLogo'; -const TangleCard = forwardRef, TangleCardProps>( +export type GlassCardWithLogoProps = ComponentProps<'div'>; + +const GlassCardWithLogo = forwardRef, GlassCardWithLogoProps>( ({ children, className, ...props }, ref) => { return ( - {children} - + ); }, ); -TangleCard.displayName = 'TangleCard'; +GlassCardWithLogo.displayName = 'GlassCardWithLogo'; -export default TangleCard; +export default GlassCardWithLogo; diff --git a/apps/tangle-dapp/components/InputWrapper.tsx b/apps/tangle-dapp/components/InputWrapper.tsx index 9963eb6419..4baa7d71fc 100644 --- a/apps/tangle-dapp/components/InputWrapper.tsx +++ b/apps/tangle-dapp/components/InputWrapper.tsx @@ -4,7 +4,6 @@ import { ChipColors, InfoIconWithTooltip, Label, - Typography, } from '@webb-tools/webb-ui-components'; import { Dispatch, @@ -16,6 +15,7 @@ import { } from 'react'; import { twMerge } from 'tailwind-merge'; +import ErrorMessage from '../app/restake/ErrorMessage'; import InputAction from '../containers/ManageProfileModalContainer/InputAction'; import { useErrorCountContext } from '../context/ErrorsContext'; @@ -34,7 +34,6 @@ export type InputWrapperProps = { wrapperClassName?: string; bodyClassName?: string; dropdownBodyClassName?: string; - errorMessageClassName?: string; isFullWidth?: boolean; isDisabled?: boolean; tooltip?: ReactNode; @@ -55,7 +54,6 @@ const InputWrapper: FC = ({ wrapperClassName, bodyClassName, dropdownBodyClassName, - errorMessageClassName, isFullWidth = false, isDisabled = false, tooltip, @@ -83,7 +81,7 @@ const InputWrapper: FC = ({ return (
@@ -161,17 +159,7 @@ const InputWrapper: FC = ({ )}
- {hasError && ( - - * {errorMessage} - - )} + {hasError && {errorMessage}}
); }; diff --git a/apps/tangle-dapp/components/KeyStatsItem/KeyStatsItem.tsx b/apps/tangle-dapp/components/KeyStatsItem/KeyStatsItem.tsx index ff88ff4663..2d6ea52fa4 100644 --- a/apps/tangle-dapp/components/KeyStatsItem/KeyStatsItem.tsx +++ b/apps/tangle-dapp/components/KeyStatsItem/KeyStatsItem.tsx @@ -60,7 +60,7 @@ const KeyStatsItem: FC = ({
{title} diff --git a/apps/tangle-dapp/components/LiquidStaking/LsMyPoolsTable.tsx b/apps/tangle-dapp/components/LiquidStaking/LsMyPoolsTable.tsx index ff17659021..8c6967c103 100644 --- a/apps/tangle-dapp/components/LiquidStaking/LsMyPoolsTable.tsx +++ b/apps/tangle-dapp/components/LiquidStaking/LsMyPoolsTable.tsx @@ -38,7 +38,6 @@ import { TableStatus } from '..'; import BlueIconButton from '../BlueIconButton'; import PercentageCell from '../tableCells/PercentageCell'; import TokenAmountCell from '../tableCells/TokenAmountCell'; -import { sharedTableStatusClxs } from '../tables/shared'; import UpdateCommissionModal from './UpdateCommissionModal'; export interface LsMyPoolRow extends LsPool { @@ -299,8 +298,7 @@ const LsMyPoolsTable: FC = ({ pools, isShown }) => { if (!isAccountConnected) { return ( @@ -308,8 +306,7 @@ const LsMyPoolsTable: FC = ({ pools, isShown }) => { } else if (pools.length === 0) { return ( = ({ title, tooltip, value }) => { +const DetailItem: FC = ({ + title, + tooltip, + value, + className, +}) => { return (
@@ -39,7 +46,11 @@ const DetailItem: FC = ({ title, tooltip, value }) => {
{typeof value === 'string' ? ( - + {value} ) : value === null ? ( diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/FeeDetailItem.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/FeeDetailItem.tsx index 9e2c58fac7..83fa5eae7c 100644 --- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/FeeDetailItem.tsx +++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/FeeDetailItem.tsx @@ -1,6 +1,7 @@ import { BN, BN_ZERO } from '@polkadot/util'; import { LsProtocolId } from '@webb-tools/tangle-shared-ui/types/liquidStaking'; import { FC, useMemo } from 'react'; +import { twMerge } from 'tailwind-merge'; import { EMPTY_VALUE_PLACEHOLDER } from '../../../constants'; import formatBn from '../../../utils/formatBn'; @@ -54,7 +55,17 @@ const FeeDetailItem: FC = ({ ? 'Fee' : `Fee (${formatFractional(feePercentage * 100)})`; - return ; + return ( + 0.1 && + 'text-yellow-500', + )} + /> + ); }; export default FeeDetailItem; diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsFeeWarning.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsFeeWarning.tsx deleted file mode 100644 index 2291f48334..0000000000 --- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsFeeWarning.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { LsProtocolId } from '@webb-tools/tangle-shared-ui/types/liquidStaking'; -import { Alert } from '@webb-tools/webb-ui-components'; -import { FC } from 'react'; - -import useLsFeePercentage from './useLsFeePercentage'; - -// 10%. -const THRESHOLD_PERCENTAGE = 0.1; - -export type LsFeeWarningProps = { - isMinting: boolean; - selectedProtocolId: LsProtocolId; -}; - -const LsFeeWarning: FC = ({ selectedProtocolId }) => { - const fee = useLsFeePercentage(selectedProtocolId, true); - - return ( - typeof fee === 'number' && - fee >= THRESHOLD_PERCENTAGE && ( - - ) - ); -}; - -export default LsFeeWarning; diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx index a75429b5f9..992eb9d176 100644 --- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx +++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx @@ -34,7 +34,6 @@ import DetailsContainer from '../../DetailsContainer'; import ExchangeRateDetailItem from './ExchangeRateDetailItem'; import FeeDetailItem from './FeeDetailItem'; import LsAgnosticBalance from './LsAgnosticBalance'; -import LsFeeWarning from './LsFeeWarning'; import LsInput from './LsInput'; import LsSelectLstModal from './LsSelectLstModal'; import UnstakePeriodDetailItem from './UnstakePeriodDetailItem'; @@ -264,8 +263,6 @@ const LsStakeCard: FC = () => { /> - -
- - )}
-
+ -
+
{
)}
-
+
{ headerClassName="w-full" additionalActionsCmp={ } - placeholder="Search validators..." + placeholder="Search validators by identity or address..." value={searchValue} onChange={(val) => setSearchValue(val)} isControlled diff --git a/libs/icons/src/StatusIndicator/StatusIndicator.tsx b/libs/icons/src/StatusIndicator/StatusIndicator.tsx index 4a05f72e05..8f62ad6a7e 100644 --- a/libs/icons/src/StatusIndicator/StatusIndicator.tsx +++ b/libs/icons/src/StatusIndicator/StatusIndicator.tsx @@ -29,7 +29,7 @@ const classes: { const StatusIndicator = forwardRef( ({ animated, variant = 'info', size = 12, ...props }, ref) => { - // We use haft size to make sure the component is corectly centered + // We use haft size to make sure the component is correctly centered. const haftSize = size / 2; return ( diff --git a/libs/icons/src/useDynamicSVGImport.tsx b/libs/icons/src/useDynamicSVGImport.tsx index aa5e986b19..2bbbfcafd4 100644 --- a/libs/icons/src/useDynamicSVGImport.tsx +++ b/libs/icons/src/useDynamicSVGImport.tsx @@ -1,21 +1,13 @@ 'use client'; -import React, { useEffect, useMemo, useState } from 'react'; +import React, { useEffect, useState } from 'react'; -/** - * Options for `useDynamicSVGImport` to import cryptocurrency icon dynamically - */ export interface DynamicSVGImportOptions { - /** - * A optional function which is called when finish loading SVG icon - */ onCompleted?: ( name: string, SvgIcon: React.FC> | undefined, ) => void; - /** - * An optional function for handle error when loading SVG icon - */ + onError?: React.ReactEventHandler; /** @@ -38,33 +30,34 @@ export function useDynamicSVGImport( const [importedIcon, setImportedIcon] = useState< React.ReactElement, 'svg'> | undefined >(); + const [loading, setLoading] = useState(true); const [error, setError] = useState(); const { onCompleted, onError } = options; - const _name = useMemo( - () => - typeof name === 'string' ? name.trim().toLowerCase() : 'placeholder', - [name], - ); + const name_ = + typeof name === 'string' ? name.trim().toLowerCase() : 'placeholder'; - const type = useMemo(() => options.type ?? 'token', [options]); + const type = options.type ?? 'token'; useEffect(() => { setLoading(true); + const importIcon = async (): Promise => { try { - const mod = await getIcon(type, _name); + const mod = await getIcon(type, name_); const Icon = mod.default; + setImportedIcon(); - onCompleted?.(_name, Icon); + onCompleted?.(name_, Icon); } catch (err) { if ((err as any).message.includes('Cannot find module')) { const mod = await getDefaultIcon(type); const Icon = mod.default; + setImportedIcon(); - onCompleted?.(_name, Icon); + onCompleted?.(name_, Icon); } else { console.error('IMPORT ERROR', (err as any).message); onError?.(err as any); @@ -74,8 +67,9 @@ export function useDynamicSVGImport( setLoading(false); } }; + importIcon(); - }, [_name, onCompleted, onError, type]); + }, [name_, onCompleted, onError, type]); return { error, loading, svgElement: importedIcon }; } diff --git a/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/NetworkSelectorDropdown.tsx b/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/NetworkSelectorDropdown.tsx index 9db5f87e2b..89adfba233 100644 --- a/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/NetworkSelectorDropdown.tsx +++ b/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/NetworkSelectorDropdown.tsx @@ -1,4 +1,4 @@ -import { ChainIcon } from '@webb-tools/icons'; +import { ChainIcon, StatusIndicator } from '@webb-tools/icons'; import { DropdownMenuItem, InfoIconWithTooltip, @@ -103,7 +103,7 @@ const NetworkOption: FC = ({ } onClick={handleClick} - className="w-full py-3" + className="flex justify-between w-full py-3" isActive={isSelected} >
@@ -112,6 +112,8 @@ const NetworkOption: FC = ({ {tooltip !== undefined && }
+ + {isSelected && } ); }; diff --git a/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/index.tsx b/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/index.tsx index bbf34c7673..2596a5a675 100644 --- a/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/index.tsx +++ b/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/index.tsx @@ -23,13 +23,7 @@ import useNetworkSwitcher from '../../hooks/useNetworkSwitcher'; import createCustomNetwork from '../../utils/createCustomNetwork'; import { NetworkSelectorDropdown } from './NetworkSelectorDropdown'; -export type NetworkSelectionButtonProps = { - isNetworkSwitchDisabled?: boolean; -}; - -const NetworkSelectionButton: FC = ({ - isNetworkSwitchDisabled = false, -}) => { +const NetworkSelectionButton: FC = () => { const { activeChain, activeWallet, isConnecting, loading, switchChain } = useWebContext(); @@ -78,26 +72,6 @@ const NetworkSelectionButton: FC = ({ switchChain(targetChain, activeWallet); }, [activeWallet, network.evmChainId, switchChain]); - if (isNetworkSwitchDisabled) { - return ( - - - - - - - - - Network can't be changed while you're in this page. - - - ); - } - return (
{isWrongEvmNetwork && ( diff --git a/libs/webb-ui-components/src/components/IconWithTooltip/IconWithTooltip.tsx b/libs/webb-ui-components/src/components/IconWithTooltip/IconWithTooltip.tsx index 5203b69ca1..c8f8610cbd 100644 --- a/libs/webb-ui-components/src/components/IconWithTooltip/IconWithTooltip.tsx +++ b/libs/webb-ui-components/src/components/IconWithTooltip/IconWithTooltip.tsx @@ -25,7 +25,7 @@ const IconWithTooltip: FC = ({ - + {content} diff --git a/libs/webb-ui-components/src/components/Input/Input.tsx b/libs/webb-ui-components/src/components/Input/Input.tsx index af3e30c4ef..d0df6855d7 100644 --- a/libs/webb-ui-components/src/components/Input/Input.tsx +++ b/libs/webb-ui-components/src/components/Input/Input.tsx @@ -68,13 +68,13 @@ export const Input: React.FC = (props) => { const [value, setValue] = useState(''); const [cursor, setCursor] = useState(null); - const controlledValue = useMemo( - () => (isControlled ? propValue : value), - [isControlled, propValue, value], - ); + const controlledValue = isControlled ? propValue : value; useEffect(() => { - if (!debounceTime) return; + if (!debounceTime) { + return; + } + const timeout = setTimeout(() => { onChange?.(controlledValue ?? ''); }, debounceTime); @@ -86,18 +86,19 @@ export const Input: React.FC = (props) => { inputRef?.current?.setSelectionRange(cursor, cursor); }, [inputRef, cursor, controlledValue]); - // Override the size of left icon prop to 'md' + // Override the size of left icon prop to 'md'. const leftIcon = useMemo(() => { if (!leftIconProp) { return; } + return React.cloneElement(leftIconProp, { ...leftIconProp.props, size: 'md', }); }, [leftIconProp]); - // Override the size of right icon prop to 'md' + // Override the size of right icon prop to 'md'. const rightIcon = useMemo(() => { if (!rightIconProp) { return; @@ -108,22 +109,16 @@ export const Input: React.FC = (props) => { }); }, [rightIconProp]); - const isInvalid = useMemo( - () => isInvalidProp || errorMessage, - [isInvalidProp, errorMessage], - ); + const isInvalid = isInvalidProp || errorMessage; - const paddingX = useMemo( - () => - leftIconProp && rightIconProp - ? ('px-8' as const) - : leftIconProp - ? ('pl-8 pr-4' as const) - : rightIconProp - ? ('pl-4 pr-8' as const) - : ('px-4' as const), - [leftIconProp, rightIconProp], - ); + const paddingX = + leftIconProp && rightIconProp + ? ('px-8' as const) + : leftIconProp + ? ('pl-8 pr-4' as const) + : rightIconProp + ? ('pl-4 pr-8' as const) + : ('px-4' as const); const inputClsxBase = useMemo( () => @@ -136,20 +131,14 @@ export const Input: React.FC = (props) => { ), [isInvalid, paddingX], ); - const inputClsxHover = useMemo( - () => 'hover:border-blue-40 dark:hover:border-blue-70', - [], - ); - const inputClsxFocus = useMemo( - () => - 'focus:bg-blue-0 focus:border-blue-40 dark:focus:bg-blue-120 dark:focus:border-blue-70', - [], - ); - const inputClsxDisabled = useMemo( - () => - 'disabled:text-mono-100 dark:disabled:text-mono-120 disabled:bg-mono-40 dark:disabled:bg-mono-160 disabled:cursor-not-allowed disabled:hover:border-mono-80 dark:disabled:hover:border-mono-120', - [], - ); + + const inputClsxHover = 'hover:border-blue-40 dark:hover:border-blue-70'; + + const inputClsxFocus = + 'focus:bg-blue-0 focus:border-blue-40 dark:focus:bg-blue-120 dark:focus:border-blue-70'; + + const inputClsxDisabled = + 'disabled:text-mono-100 dark:disabled:text-mono-120 disabled:bg-mono-40 dark:disabled:bg-mono-160 disabled:cursor-not-allowed disabled:hover:border-mono-80 dark:disabled:hover:border-mono-120'; const mergedInputClsx = useMemo( () => @@ -178,15 +167,9 @@ export const Input: React.FC = (props) => { ], ); - const iconClsx = useMemo( - () => - cx( - twMerge( - 'text-mono-140 dark:text-mono-40', - isDisabled ? 'text-mono-100 dark:text-mono-120' : '', - ), - ), - [isDisabled], + const iconClsx = twMerge( + 'text-mono-140 dark:text-mono-40', + isDisabled && 'text-mono-100 dark:text-mono-120', ); return ( @@ -225,7 +208,7 @@ export const Input: React.FC = (props) => { )}
- {errorMessage && ( + {errorMessage !== undefined && ( ( ( { accountName, wallet, address, className, addressClassname, ...props }, ref, ) => { - const addressClx = useMemo(() => { - return twMerge('truncate dark:text-mono-0', addressClassname); - }, [addressClassname]); - return (
); From cb518e8d5389394668b08829e7e8f42055d8cc52 Mon Sep 17 00:00:00 2001 From: yurixander <101931215+yurixander@users.noreply.github.com> Date: Thu, 21 Nov 2024 17:37:26 +0100 Subject: [PATCH 03/22] style(tangle-dapp): Improve table design consistency --- .../components/HeaderChip/ChipText.tsx | 2 +- .../LiquidStaking/LsMyPoolsTable.tsx | 4 +- .../LiquidStaking/stakeAndUnstake/LsInput.tsx | 2 +- .../NominationsTable/NominationsTable.tsx | 2 + .../ValidatorTable/ValidatorTable.tsx | 18 ++--- .../components/charts/RoleEarningsChart.tsx | 2 + .../components/tables/TableCellWrapper.tsx | 2 +- .../containers/LsPoolsTable/LsPoolsTable.tsx | 12 ++-- .../LsPoolsTable/LsProtocolsTable.tsx | 10 +-- .../useLsActivePoolDisplayName.ts | 5 +- .../data/liquidStaking/useLsPools.ts | 7 +- .../src/components/Table/Table.tsx | 68 +++++++++++++++++-- .../src/components/Table/types.ts | 8 +++ package.json | 2 +- yarn.lock | 17 ++++- 15 files changed, 120 insertions(+), 41 deletions(-) diff --git a/apps/tangle-dapp/components/HeaderChip/ChipText.tsx b/apps/tangle-dapp/components/HeaderChip/ChipText.tsx index 6c0b55cbcd..a373fa788d 100644 --- a/apps/tangle-dapp/components/HeaderChip/ChipText.tsx +++ b/apps/tangle-dapp/components/HeaderChip/ChipText.tsx @@ -16,7 +16,7 @@ const ChipText = ({ label }: Props) => { {label}:{' '} {isLoading ? ( diff --git a/apps/tangle-dapp/components/LiquidStaking/LsMyPoolsTable.tsx b/apps/tangle-dapp/components/LiquidStaking/LsMyPoolsTable.tsx index 8c6967c103..00e9a9ba46 100644 --- a/apps/tangle-dapp/components/LiquidStaking/LsMyPoolsTable.tsx +++ b/apps/tangle-dapp/components/LiquidStaking/LsMyPoolsTable.tsx @@ -23,6 +23,7 @@ import { Typography, } from '@webb-tools/webb-ui-components'; import { ActionItemType } from '@webb-tools/webb-ui-components/components/ActionsDropdown/types'; +import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types'; import assert from 'assert'; import { FC, useEffect, useMemo, useState } from 'react'; import { twMerge } from 'tailwind-merge'; @@ -299,7 +300,7 @@ const LsMyPoolsTable: FC = ({ pools, isShown }) => { return ( ); @@ -321,6 +322,7 @@ const LsMyPoolsTable: FC = ({ pools, isShown }) => { return ( <> 1 || pools.length === 0)} className={twMerge( diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsInput.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsInput.tsx index 3d28fa297b..ac9ed43171 100644 --- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsInput.tsx +++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsInput.tsx @@ -105,7 +105,7 @@ const LsInput = forwardRef(
diff --git a/apps/tangle-dapp/components/NominationsTable/NominationsTable.tsx b/apps/tangle-dapp/components/NominationsTable/NominationsTable.tsx index 9810b790e1..5ad64fbbea 100644 --- a/apps/tangle-dapp/components/NominationsTable/NominationsTable.tsx +++ b/apps/tangle-dapp/components/NominationsTable/NominationsTable.tsx @@ -18,6 +18,7 @@ import { Table, Typography, } from '@webb-tools/webb-ui-components'; +import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types'; import { FC, useState } from 'react'; import { Nominee } from '../../types'; @@ -139,6 +140,7 @@ const NominationsTable: FC = ({ return (
= ({ }); return ( -
-
- +
); }; diff --git a/apps/tangle-dapp/components/charts/RoleEarningsChart.tsx b/apps/tangle-dapp/components/charts/RoleEarningsChart.tsx index 966dc185d1..26f2e54587 100644 --- a/apps/tangle-dapp/components/charts/RoleEarningsChart.tsx +++ b/apps/tangle-dapp/components/charts/RoleEarningsChart.tsx @@ -119,6 +119,7 @@ const TooltipContent = ({ Era: {era} +
+ Reward: {getRoundedAmountString(reward)} {suffix ?? ''} diff --git a/apps/tangle-dapp/components/tables/TableCellWrapper.tsx b/apps/tangle-dapp/components/tables/TableCellWrapper.tsx index 4dd918bdcc..e05bd928b1 100644 --- a/apps/tangle-dapp/components/tables/TableCellWrapper.tsx +++ b/apps/tangle-dapp/components/tables/TableCellWrapper.tsx @@ -10,7 +10,7 @@ const TableCellWrapper: FC< return (
diff --git a/apps/tangle-dapp/containers/LsPoolsTable/LsPoolsTable.tsx b/apps/tangle-dapp/containers/LsPoolsTable/LsPoolsTable.tsx index 8f01fead50..30ed9b33ba 100644 --- a/apps/tangle-dapp/containers/LsPoolsTable/LsPoolsTable.tsx +++ b/apps/tangle-dapp/containers/LsPoolsTable/LsPoolsTable.tsx @@ -20,6 +20,7 @@ import { TooltipTrigger, Typography, } from '@webb-tools/webb-ui-components'; +import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types'; import { FC, useMemo, useState } from 'react'; import { twMerge } from 'tailwind-merge'; @@ -196,15 +197,10 @@ const LsPoolsTable: FC = ({ pools, isShown }) => { return (
= ({ pools, isShown }) => { nextPage={table.nextPage} setPageIndex={table.setPageIndex} title={pluralize('pool', pools.length === 0 || pools.length > 1)} - className="border-t-0 py-5" + className="border-t-0" /> ); diff --git a/apps/tangle-dapp/containers/LsPoolsTable/LsProtocolsTable.tsx b/apps/tangle-dapp/containers/LsPoolsTable/LsProtocolsTable.tsx index 033c34e683..651325048c 100644 --- a/apps/tangle-dapp/containers/LsPoolsTable/LsProtocolsTable.tsx +++ b/apps/tangle-dapp/containers/LsPoolsTable/LsProtocolsTable.tsx @@ -14,6 +14,7 @@ import { } from '@tanstack/react-table'; import { ChevronUp } from '@webb-tools/icons'; import { Button, Table, Typography } from '@webb-tools/webb-ui-components'; +import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types'; import { FC, useCallback, useMemo, useState } from 'react'; import { twMerge } from 'tailwind-merge'; @@ -196,19 +197,12 @@ const LsProtocolsTable: FC = () => { return (
); }; diff --git a/apps/tangle-dapp/data/liquidStaking/useLsActivePoolDisplayName.ts b/apps/tangle-dapp/data/liquidStaking/useLsActivePoolDisplayName.ts index a10968a14f..a465d1b7a2 100644 --- a/apps/tangle-dapp/data/liquidStaking/useLsActivePoolDisplayName.ts +++ b/apps/tangle-dapp/data/liquidStaking/useLsActivePoolDisplayName.ts @@ -1,4 +1,3 @@ -import { u8aToString } from '@polkadot/util'; import { useMemo } from 'react'; import { LsPoolDisplayName } from '../../constants/liquidStaking/types'; @@ -30,7 +29,9 @@ const useLsActivePoolDisplayName = (): ActivePoolDisplayNameReturn => { return null; } - return u8aToString(activePool[1].metadata.name); + const nameOpt = activePool[1].metadata.name; + + return nameOpt.isNone ? null : nameOpt.unwrap().toUtf8(); }, [activePool]); const displayName = useMemo(() => { diff --git a/apps/tangle-dapp/data/liquidStaking/useLsPools.ts b/apps/tangle-dapp/data/liquidStaking/useLsPools.ts index 80458bafba..faba2c954b 100644 --- a/apps/tangle-dapp/data/liquidStaking/useLsPools.ts +++ b/apps/tangle-dapp/data/liquidStaking/useLsPools.ts @@ -1,4 +1,4 @@ -import { BN_ZERO, u8aToString } from '@polkadot/util'; +import { BN_ZERO } from '@polkadot/util'; import { useMemo } from 'react'; import { LsPool } from '../../constants/liquidStaking/types'; @@ -73,7 +73,10 @@ const useLsPools = (): Map | null | Error => { .map(([, address, account]) => [address, account] as const); const membersMap = new Map(membersKeyValuePairs); - const name = u8aToString(tanglePool.metadata.name); + + const name = tanglePool.metadata.name.isNone + ? undefined + : tanglePool.metadata.name.unwrap().toUtf8(); const pool: LsPool = { id: poolId, diff --git a/libs/webb-ui-components/src/components/Table/Table.tsx b/libs/webb-ui-components/src/components/Table/Table.tsx index 7993460f13..bbd9ce6372 100644 --- a/libs/webb-ui-components/src/components/Table/Table.tsx +++ b/libs/webb-ui-components/src/components/Table/Table.tsx @@ -6,7 +6,50 @@ import { twMerge } from 'tailwind-merge'; import { Pagination } from '../Pagination'; import { TDataMemo as TData } from './TData'; import { THeaderMemo as THeader } from './THeader'; -import { TableProps } from './types'; +import { TableProps, TableVariant } from './types'; + +const getVariantContainerClass = (variant: TableVariant) => { + switch (variant) { + case TableVariant.DEFAULT: + return 'overflow-hidden border rounded-lg bg-mono-0 dark:bg-mono-180 border-mono-40 dark:border-mono-160'; + case TableVariant.GLASS_INNER: + return 'rounded-2xl overflow-hidden bg-mono-0 dark:bg-mono-180 px-3'; + case TableVariant.GLASS_OUTER: + return 'px-6 rounded-2xl overflow-hidden border border-mono-0 dark:border-mono-160 bg-[linear-gradient(180deg,rgba(255,255,255,0.20)0%,rgba(255,255,255,0.00)100%)] dark:bg-[linear-gradient(180deg,rgba(43,47,64,0.20)0%,rgba(43,47,64,0.00)100%)] backdrop-blur-2xl'; + } +}; + +const getVariantThClass = (variant: TableVariant) => { + switch (variant) { + case TableVariant.GLASS_INNER: + return 'py-3 !font-normal !bg-transparent border-t-0 border-b text-mono-120 dark:text-mono-100 border-mono-60 dark:border-mono-160'; + case TableVariant.GLASS_OUTER: + return 'py-0 border-t-0 !bg-transparent font-normal text-mono-120 dark:text-mono-100 border-b-0'; + case TableVariant.DEFAULT: + return ''; + } +}; + +const getVariantTdClass = (variant: TableVariant) => { + switch (variant) { + case TableVariant.GLASS_INNER: + return '!bg-inherit border-t-0'; + case TableVariant.GLASS_OUTER: + return 'border-0 !p-0 first:rounded-l-xl last:rounded-r-xl overflow-hidden'; + case TableVariant.DEFAULT: + return ''; + } +}; + +const getVariantTrClass = (variant: TableVariant) => { + switch (variant) { + case TableVariant.GLASS_OUTER: + return 'border-b border-mono-0 dark:border-mono-160 cursor-pointer'; + case TableVariant.GLASS_INNER: + case TableVariant.DEFAULT: + return ''; + } +}; export const Table = ({ isDisabledRowHoverStyle, @@ -25,6 +68,8 @@ export const Table = ({ trClassName, ref, getExpandedRowContent, + className, + variant, ...props }: TableProps) => { const getRowClickHandler = useCallback( @@ -42,7 +87,11 @@ export const Table = ({ ); return ( -
+
({ {headerGroup.headers.map((header) => ( ({ ))} + {table.getRowModel().rows.map((row) => ( {row.getVisibleCells().map((cell) => ( {flexRender( @@ -130,6 +187,7 @@ export const Table = ({ ))} + {isDisplayFooter && ( {table.getFooterGroups().map((footerGroup) => ( diff --git a/libs/webb-ui-components/src/components/Table/types.ts b/libs/webb-ui-components/src/components/Table/types.ts index 5c6892c103..ae2335b02e 100644 --- a/libs/webb-ui-components/src/components/Table/types.ts +++ b/libs/webb-ui-components/src/components/Table/types.ts @@ -5,6 +5,12 @@ import type { WebbComponentBase, } from '../../types'; +export enum TableVariant { + DEFAULT, + GLASS_INNER, + GLASS_OUTER, +} + /** * The `Table` props */ @@ -88,6 +94,8 @@ export interface TableProps * The optional function to get the expanded row content */ getExpandedRowContent?: (row: Row) => React.ReactNode; + + variant: TableVariant; } /** diff --git a/package.json b/package.json index 886a67d0fd..d3920467c9 100644 --- a/package.json +++ b/package.json @@ -192,7 +192,7 @@ "@webb-tools/interfaces": "1.0.11", "@webb-tools/sdk-core": "0.1.4-127", "@webb-tools/tangle-restaking-types": "^0.1.0", - "@webb-tools/tangle-substrate-types": "^0.9.0", + "@webb-tools/tangle-substrate-types": "^0.9.3", "@webb-tools/test-utils": "0.1.8", "@webb-tools/tokens": "1.0.11", "@webb-tools/utils": "1.0.11", diff --git a/yarn.lock b/yarn.lock index 1a97b340be..fc76b9052b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -18206,7 +18206,7 @@ __metadata: languageName: node linkType: hard -"@webb-tools/protocol-substrate-types@npm:@webb-tools/tangle-substrate-types@^0.9.0, @webb-tools/tangle-substrate-types@npm:^0.9.0": +"@webb-tools/protocol-substrate-types@npm:@webb-tools/tangle-substrate-types@^0.9.0": version: 0.9.0 resolution: "@webb-tools/tangle-substrate-types@npm:0.9.0" dependencies: @@ -18278,6 +18278,19 @@ __metadata: languageName: node linkType: hard +"@webb-tools/tangle-substrate-types@npm:^0.9.3": + version: 0.9.3 + resolution: "@webb-tools/tangle-substrate-types@npm:0.9.3" + dependencies: + "@polkadot/api": "npm:^13.2.1" + "@polkadot/typegen": "npm:^13.2.1" + "@polkadot/types": "npm:^13.2.1" + ecpair: "npm:^2.1.0" + tiny-secp256k1: "npm:^2.2.3" + checksum: 10c0/3178de3982543bdb7cde4c2bcd8d4b93c7f178e6d32961165c73f272c81b85b8ebe534422586cabbd26bb15bc5f679732b86f1334f7f43bb7af53d9d245ffd46 + languageName: node + linkType: hard + "@webb-tools/test-utils@npm:0.1.8": version: 0.1.8 resolution: "@webb-tools/test-utils@npm:0.1.8" @@ -46064,7 +46077,7 @@ __metadata: "@webb-tools/interfaces": "npm:1.0.11" "@webb-tools/sdk-core": "npm:0.1.4-127" "@webb-tools/tangle-restaking-types": "npm:^0.1.0" - "@webb-tools/tangle-substrate-types": "npm:^0.9.0" + "@webb-tools/tangle-substrate-types": "npm:^0.9.3" "@webb-tools/test-utils": "npm:0.1.8" "@webb-tools/tokens": "npm:1.0.11" "@webb-tools/utils": "npm:1.0.11" From e5c515a0b497caecf8656873e27e76ea55d4d0b4 Mon Sep 17 00:00:00 2001 From: yurixander <101931215+yurixander@users.noreply.github.com> Date: Thu, 21 Nov 2024 18:11:45 +0100 Subject: [PATCH 04/22] style(tangle-dapp): Continue improving table design consistency --- .../components/LiquidStaking/LsMyPoolsTable.tsx | 8 +------- .../components/PayoutTable/PayoutTable.tsx | 6 ++++-- .../ValidatorSelectionTable.tsx | 4 ++-- .../tangle-dapp/containers/LsMyProtocolsTable.tsx | 14 +++----------- .../containers/LsPoolsTable/LsProtocolsTable.tsx | 2 -- .../src/components/Pagination/Pagination.tsx | 2 +- .../src/components/Table/Table.tsx | 15 +++++++++++++++ .../src/components/Table/types.ts | 1 + 8 files changed, 27 insertions(+), 25 deletions(-) diff --git a/apps/tangle-dapp/components/LiquidStaking/LsMyPoolsTable.tsx b/apps/tangle-dapp/components/LiquidStaking/LsMyPoolsTable.tsx index 00e9a9ba46..3cbff5ce89 100644 --- a/apps/tangle-dapp/components/LiquidStaking/LsMyPoolsTable.tsx +++ b/apps/tangle-dapp/components/LiquidStaking/LsMyPoolsTable.tsx @@ -325,13 +325,7 @@ const LsMyPoolsTable: FC = ({ pools, isShown }) => { variant={TableVariant.GLASS_INNER} tableProps={table} title={pluralize('pool', pools.length > 1 || pools.length === 0)} - className={twMerge( - 'rounded-2xl overflow-hidden bg-mono-20 dark:bg-mono-200 px-3', - isShown ? 'animate-slide-down' : 'animate-slide-up', - )} - thClassName="py-3 !font-normal !bg-transparent border-t-0 border-b text-mono-120 dark:text-mono-100 border-mono-60 dark:border-mono-160" - tbodyClassName="!bg-transparent" - tdClassName="!bg-inherit border-t-0" + className={twMerge(isShown ? 'animate-slide-down' : 'animate-slide-up')} isPaginated /> diff --git a/apps/tangle-dapp/components/PayoutTable/PayoutTable.tsx b/apps/tangle-dapp/components/PayoutTable/PayoutTable.tsx index 58a86861a7..899689fa27 100644 --- a/apps/tangle-dapp/components/PayoutTable/PayoutTable.tsx +++ b/apps/tangle-dapp/components/PayoutTable/PayoutTable.tsx @@ -25,9 +25,11 @@ import { Table, Typography, } from '@webb-tools/webb-ui-components'; +import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types'; import { type FC, useState } from 'react'; import PayoutTxContainer from '../../containers/PayoutTxContainer/PayoutTxContainer'; +import pluralize from '../../utils/pluralize'; import { sortBnValueForPayout } from '../../utils/table'; import { HeaderCell, StringCell } from '../tableCells'; import TokenAmountCell from '../tableCells/TokenAmountCell'; @@ -231,11 +233,11 @@ const PayoutTable: FC = ({ <>
diff --git a/apps/tangle-dapp/components/ValidatorSelectionTable/ValidatorSelectionTable.tsx b/apps/tangle-dapp/components/ValidatorSelectionTable/ValidatorSelectionTable.tsx index 3341114797..98ff6258ef 100644 --- a/apps/tangle-dapp/components/ValidatorSelectionTable/ValidatorSelectionTable.tsx +++ b/apps/tangle-dapp/components/ValidatorSelectionTable/ValidatorSelectionTable.tsx @@ -26,6 +26,7 @@ import { Table, Typography, } from '@webb-tools/webb-ui-components'; +import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types'; import cx from 'classnames'; import React, { FC, @@ -280,10 +281,9 @@ const ValidatorSelectionTable: FC = ({ ) : (
- + @@ -227,19 +228,10 @@ const LsMyProtocolsTable: FC = () => { return (
); }; diff --git a/apps/tangle-dapp/containers/LsPoolsTable/LsProtocolsTable.tsx b/apps/tangle-dapp/containers/LsPoolsTable/LsProtocolsTable.tsx index 651325048c..91275baf45 100644 --- a/apps/tangle-dapp/containers/LsPoolsTable/LsProtocolsTable.tsx +++ b/apps/tangle-dapp/containers/LsPoolsTable/LsProtocolsTable.tsx @@ -201,8 +201,6 @@ const LsProtocolsTable: FC = () => { tableProps={table} getExpandedRowContent={getExpandedRowContent} onRowClick={onRowClick} - tableClassName="border-separate border-spacing-y-3 pt-3" - tbodyClassName="!bg-transparent" /> ); }; diff --git a/libs/webb-ui-components/src/components/Pagination/Pagination.tsx b/libs/webb-ui-components/src/components/Pagination/Pagination.tsx index bafa2d59fd..e926b29b13 100644 --- a/libs/webb-ui-components/src/components/Pagination/Pagination.tsx +++ b/libs/webb-ui-components/src/components/Pagination/Pagination.tsx @@ -60,7 +60,7 @@ export const Pagination = React.forwardRef(
{ return 'py-3 !font-normal !bg-transparent border-t-0 border-b text-mono-120 dark:text-mono-100 border-mono-60 dark:border-mono-160'; case TableVariant.GLASS_OUTER: return 'py-0 border-t-0 !bg-transparent font-normal text-mono-120 dark:text-mono-100 border-b-0'; + case TableVariant.NESTED_IN_MODAL: + return 'z-10 border-t-0 py-3 sticky top-0'; case TableVariant.DEFAULT: return ''; } @@ -36,6 +38,8 @@ const getVariantTdClass = (variant: TableVariant) => { return '!bg-inherit border-t-0'; case TableVariant.GLASS_OUTER: return 'border-0 !p-0 first:rounded-l-xl last:rounded-r-xl overflow-hidden'; + case TableVariant.NESTED_IN_MODAL: + return 'py-2 border-t-0'; case TableVariant.DEFAULT: return ''; } @@ -51,6 +55,16 @@ const getVariantTrClass = (variant: TableVariant) => { } }; +const getVariantTableClass = (variant: TableVariant) => { + switch (variant) { + case TableVariant.GLASS_OUTER: + return 'border-separate border-spacing-y-3 py-3'; + case TableVariant.GLASS_INNER: + case TableVariant.DEFAULT: + return ''; + } +}; + export const Table = ({ isDisabledRowHoverStyle, isDisplayFooter, @@ -96,6 +110,7 @@ export const Table = ({
diff --git a/libs/webb-ui-components/src/components/Table/types.ts b/libs/webb-ui-components/src/components/Table/types.ts index ae2335b02e..f185c5fcc5 100644 --- a/libs/webb-ui-components/src/components/Table/types.ts +++ b/libs/webb-ui-components/src/components/Table/types.ts @@ -9,6 +9,7 @@ export enum TableVariant { DEFAULT, GLASS_INNER, GLASS_OUTER, + NESTED_IN_MODAL, } /** From 0de113fae8ff7489989e5e1d747a1f843f725c33 Mon Sep 17 00:00:00 2001 From: yurixander <101931215+yurixander@users.noreply.github.com> Date: Thu, 21 Nov 2024 20:57:39 +0100 Subject: [PATCH 05/22] style(tangle-dapp): Use table variants --- .../restake/unstake/UnstakeRequestTable.tsx | 12 ++--- apps/tangle-dapp/app/restake/unstake/page.tsx | 4 +- .../LiquidStaking/LsValidatorTable.tsx | 5 +-- .../stakeAndUnstake/LsStakeCard.tsx | 2 +- .../UnstakeRequestsTable.tsx | 9 ++-- .../ValidatorSelectionTable.tsx | 44 +++++++++++-------- .../src/components/Modal/ModalContent.tsx | 2 +- .../src/components/Table/THeader.tsx | 2 +- .../src/components/Table/Table.tsx | 10 ++--- 9 files changed, 45 insertions(+), 45 deletions(-) diff --git a/apps/tangle-dapp/app/restake/unstake/UnstakeRequestTable.tsx b/apps/tangle-dapp/app/restake/unstake/UnstakeRequestTable.tsx index e1f30b466f..62c064dea6 100644 --- a/apps/tangle-dapp/app/restake/unstake/UnstakeRequestTable.tsx +++ b/apps/tangle-dapp/app/restake/unstake/UnstakeRequestTable.tsx @@ -14,11 +14,12 @@ import { TimeFillIcon } from '@webb-tools/icons/TimeFillIcon'; import { CheckBox } from '@webb-tools/webb-ui-components/components/CheckBox'; import { fuzzyFilter } from '@webb-tools/webb-ui-components/components/Filter/utils'; import { Table } from '@webb-tools/webb-ui-components/components/Table'; -import cx from 'classnames'; +import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types'; import { useMemo } from 'react'; import { formatUnits } from 'viem'; import AvatarWithText from '../../../components/AvatarWithText'; +import { EMPTY_VALUE_PLACEHOLDER } from '../../../constants'; import { useRestakeContext } from '../../../context/RestakeContext'; import useRestakeConsts from '../../../data/restake/useRestakeConsts'; import useRestakeCurrentRound from '../../../data/restake/useRestakeCurrentRound'; @@ -74,7 +75,7 @@ const columns = [ ready ) : value < 0 ? ( - 'N/A' + EMPTY_VALUE_PLACEHOLDER ) : ( @@ -166,12 +167,7 @@ const UnstakeRequestTable = ({ return ( <> -
+
{ /> ) : ( <> - + { > You will be able to withdraw your tokens after the unstake request has been processed. To unstake your tokens go to the unstake tab - to schedule request. + to schedule a request. )} diff --git a/apps/tangle-dapp/components/LiquidStaking/LsValidatorTable.tsx b/apps/tangle-dapp/components/LiquidStaking/LsValidatorTable.tsx index cfd2ec0c9f..83f63bc148 100644 --- a/apps/tangle-dapp/components/LiquidStaking/LsValidatorTable.tsx +++ b/apps/tangle-dapp/components/LiquidStaking/LsValidatorTable.tsx @@ -23,6 +23,7 @@ import { Table, Typography, } from '@webb-tools/webb-ui-components'; +import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types'; import { useEffect, useMemo, useRef, useState } from 'react'; import { useLsStore } from '../../data/liquidStaking/useLsStore'; @@ -194,9 +195,7 @@ export const LsValidatorTable = () => { />
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx index 992eb9d176..dc7be6783a 100644 --- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx +++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx @@ -74,7 +74,7 @@ const LsStakeCard: FC = () => { const fromLsInputRef = useRef(null); const actionText = useMemo(() => { - const defaultText = 'Mint'; + const defaultText = 'Stake'; if (lsPoolMembers === null) { return defaultText; diff --git a/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/UnstakeRequestsTable.tsx b/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/UnstakeRequestsTable.tsx index 67485484c2..24ecf03ed5 100644 --- a/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/UnstakeRequestsTable.tsx +++ b/apps/tangle-dapp/components/LiquidStaking/unstakeRequestsTable/UnstakeRequestsTable.tsx @@ -21,6 +21,7 @@ import { TANGLE_DOCS_LIQUID_STAKING_URL, Typography, } from '@webb-tools/webb-ui-components'; +import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types'; import assert from 'assert'; import BN from 'bn.js'; import { FC, ReactNode, useMemo } from 'react'; @@ -198,7 +199,7 @@ const UnstakeRequestsTable: FC = () => { else if (rows === null) { return ( } /> ); @@ -207,7 +208,7 @@ const UnstakeRequestsTable: FC = () => { else if (rows.length === 0) { return ( ); @@ -215,9 +216,7 @@ const UnstakeRequestsTable: FC = () => { return (
= ({ setSelectedValidators, pageSize = 20, }) => { - const [searchValue, setSearchValue] = useState(''); + const [searchQuery, setSearchQuery] = useState(''); + const [rowSelection, setRowSelection] = useState( defaultSelectedValidators.reduce((acc, address) => { acc[address] = true; return acc; }, {} as RowSelectionState), ); + const [sorting, setSorting] = useState([ { id: 'totalStakeAmount', @@ -78,7 +81,7 @@ const ValidatorSelectionTable: FC = ({ SortingColumn['toggleSorting'] | null >(null); - // Sync the selected validators with the parent state + // Sync the selected validators with the parent state. useEffect(() => { startTransition(() => { setSelectedValidators(new Set(Object.keys(rowSelection))); @@ -125,7 +128,7 @@ const ValidatorSelectionTable: FC = ({ ); }, sortingFn: (rowA, rowB, columnId) => - sortValidatorsBasedOnSortingFn( + sortValidatorsBy( rowA, rowB, columnId, @@ -155,7 +158,7 @@ const ValidatorSelectionTable: FC = ({ ), sortingFn: (rowA, rowB, columnId) => - sortValidatorsBasedOnSortingFn( + sortValidatorsBy( rowA, rowB, columnId, @@ -173,7 +176,7 @@ const ValidatorSelectionTable: FC = ({ ), sortingFn: (rowA, rowB, columnId) => - sortValidatorsBasedOnSortingFn( + sortValidatorsBy( rowA, rowB, columnId, @@ -194,7 +197,7 @@ const ValidatorSelectionTable: FC = ({ ), sortingFn: (rowA, rowB, columnId) => - sortValidatorsBasedOnSortingFn( + sortValidatorsBy( rowA, rowB, columnId, @@ -228,7 +231,7 @@ const ValidatorSelectionTable: FC = ({ columnFilters: [ { id: 'address', - value: searchValue, + value: searchQuery, }, ], }, @@ -252,7 +255,7 @@ const ValidatorSelectionTable: FC = ({ autoResetPageIndex: false, enableSortingRemoval: false, }), - [allValidators, columns, rowSelection, searchValue, sorting, pageSize], + [allValidators, columns, rowSelection, searchQuery, sorting, pageSize], ); const table = useReactTable(tableProps); @@ -264,8 +267,8 @@ const ValidatorSelectionTable: FC = ({ id="search-validators-selection" rightIcon={} placeholder="Search validators..." - value={searchValue} - onChange={(val) => setSearchValue(val)} + value={searchQuery} + onChange={setSearchQuery} className="mb-1" isControlled /> @@ -283,11 +286,11 @@ const ValidatorSelectionTable: FC = ({
))} @@ -306,21 +309,24 @@ const ValidatorSelectionTable: FC = ({ ); }; -export default React.memo(ValidatorSelectionTable); - -function sortValidatorsBasedOnSortingFn( +const sortValidatorsBy = ( rowA: Row, rowB: Row, columnId: string, sortFn: SortingFn, isDesc: boolean, -) { +) => { const rowASelected = rowA.getIsSelected(); const rowBSelected = rowB.getIsSelected(); - // Prioritize selected validators - if (rowASelected && !rowBSelected) return isDesc ? 1 : -1; - if (!rowASelected && rowBSelected) return isDesc ? -1 : 1; + // Prioritize selected validators by pinning them to the top. + if (rowASelected && !rowBSelected) { + return isDesc ? 1 : -1; + } else if (!rowASelected && rowBSelected) { + return isDesc ? -1 : 1; + } return sortFn(rowA, rowB, columnId); -} +}; + +export default React.memo(ValidatorSelectionTable); diff --git a/libs/webb-ui-components/src/components/Modal/ModalContent.tsx b/libs/webb-ui-components/src/components/Modal/ModalContent.tsx index c23eebac7f..e268fb2de2 100644 --- a/libs/webb-ui-components/src/components/Modal/ModalContent.tsx +++ b/libs/webb-ui-components/src/components/Modal/ModalContent.tsx @@ -14,7 +14,7 @@ const getTailwindSizeClass = (size: ModalContentProps['size']) => { case 'md': return 'max-w-[600px]'; case 'lg': - return 'max-w-[840px]'; + return 'max-w-[800px]'; } }; diff --git a/libs/webb-ui-components/src/components/Table/THeader.tsx b/libs/webb-ui-components/src/components/Table/THeader.tsx index 004c231b48..e2cc4bc8d2 100644 --- a/libs/webb-ui-components/src/components/Table/THeader.tsx +++ b/libs/webb-ui-components/src/components/Table/THeader.tsx @@ -12,7 +12,7 @@ export const THeader = forwardRef(
{ const getVariantThClass = (variant: TableVariant) => { switch (variant) { case TableVariant.GLASS_INNER: - return 'py-3 !font-normal !bg-transparent border-t-0 border-b text-mono-120 dark:text-mono-100 border-mono-60 dark:border-mono-160'; + return 'py-3 !font-normal !bg-transparent border-b text-mono-120 dark:text-mono-100 border-mono-60 dark:border-mono-160'; case TableVariant.GLASS_OUTER: - return 'py-0 border-t-0 !bg-transparent font-normal text-mono-120 dark:text-mono-100 border-b-0'; + return 'py-0 !bg-transparent font-normal text-mono-120 dark:text-mono-100 border-b-0'; case TableVariant.NESTED_IN_MODAL: - return 'z-10 border-t-0 py-3 sticky top-0'; + return 'z-10 py-3 sticky top-0'; case TableVariant.DEFAULT: return ''; } @@ -35,11 +35,11 @@ const getVariantThClass = (variant: TableVariant) => { const getVariantTdClass = (variant: TableVariant) => { switch (variant) { case TableVariant.GLASS_INNER: - return '!bg-inherit border-t-0'; + return '!bg-inherit'; case TableVariant.GLASS_OUTER: return 'border-0 !p-0 first:rounded-l-xl last:rounded-r-xl overflow-hidden'; case TableVariant.NESTED_IN_MODAL: - return 'py-2 border-t-0'; + return 'py-2'; case TableVariant.DEFAULT: return ''; } From f518cf07d9891b26f03e74f83ea5558dbbaf6f47 Mon Sep 17 00:00:00 2001 From: yurixander <101931215+yurixander@users.noreply.github.com> Date: Fri, 22 Nov 2024 00:02:24 +0100 Subject: [PATCH 06/22] style(tangle-dapp): Fix more design details --- apps/tangle-dapp/app/claim/layout.tsx | 21 +-- apps/tangle-dapp/app/loading.tsx | 5 +- .../NodeSpecificationsTable.tsx | 127 +++++++----------- .../app/restake/OperatorsTable.tsx | 3 +- .../app/restake/unstake/TxInfo.tsx | 36 +++-- .../components/Breadcrumbs/utils.tsx | 4 +- .../components/Sidebar/sidebarProps.ts | 4 +- .../components/tables/Operators/index.tsx | 36 ++--- libs/icons/src/HomeFillIcon.tsx | 10 ++ libs/icons/src/Spinner.tsx | 22 +-- libs/icons/src/index.ts | 1 + .../WalletModalContainer.tsx | 2 +- .../src/components/Modal/ModalContent.tsx | 33 +++-- .../src/components/Modal/types.ts | 5 - .../src/components/SideBar/MobileSidebar.tsx | 117 ++++++++++------ .../src/components/SideBar/SideBarItems.tsx | 2 + .../src/components/SideBar/types.ts | 1 + .../src/components/Table/THeader.tsx | 2 +- .../components/WalletModal/WalletModal.tsx | 6 +- 19 files changed, 212 insertions(+), 225 deletions(-) create mode 100644 libs/icons/src/HomeFillIcon.tsx diff --git a/apps/tangle-dapp/app/claim/layout.tsx b/apps/tangle-dapp/app/claim/layout.tsx index 98277d639e..8355c05844 100644 --- a/apps/tangle-dapp/app/claim/layout.tsx +++ b/apps/tangle-dapp/app/claim/layout.tsx @@ -4,6 +4,7 @@ import FAQSection from '@webb-tools/webb-ui-components/containers/FAQSection'; import { Metadata } from 'next'; import type { FC, PropsWithChildren } from 'react'; +import Container from '../../components/Container'; import faqItems from '../../constants/faq'; import { OpenGraphPageImageUrl } from '../../constants/openGraph'; import createPageMetadata from '../../utils/createPageMetadata'; @@ -19,17 +20,19 @@ export const metadata: Metadata = createPageMetadata({ const Layout: FC = ({ children }) => { return ( - - {children} + + + {children} - + - - - + + + + ); }; diff --git a/apps/tangle-dapp/app/loading.tsx b/apps/tangle-dapp/app/loading.tsx index 375787dca0..b9c23eae7d 100644 --- a/apps/tangle-dapp/app/loading.tsx +++ b/apps/tangle-dapp/app/loading.tsx @@ -1,5 +1,4 @@ import SkeletonLoader from '@webb-tools/webb-ui-components/components/SkeletonLoader'; -import { Typography } from '@webb-tools/webb-ui-components/typography/Typography/Typography'; import type { FC } from 'react'; const LoadingPage: FC = () => { @@ -11,9 +10,7 @@ const LoadingPage: FC = () => { - - Balances - + diff --git a/apps/tangle-dapp/app/nomination/[validatorAddress]/NodeSpecificationsTable.tsx b/apps/tangle-dapp/app/nomination/[validatorAddress]/NodeSpecificationsTable.tsx index 4052ea11e5..9ab9b97120 100644 --- a/apps/tangle-dapp/app/nomination/[validatorAddress]/NodeSpecificationsTable.tsx +++ b/apps/tangle-dapp/app/nomination/[validatorAddress]/NodeSpecificationsTable.tsx @@ -8,15 +8,12 @@ import { getSortedRowModel, useReactTable, } from '@tanstack/react-table'; -import { - Chip, - fuzzyFilter, - Table, - Typography, -} from '@webb-tools/webb-ui-components'; +import { fuzzyFilter, Table, Typography } from '@webb-tools/webb-ui-components'; +import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types'; import cx from 'classnames'; -import { FC, useMemo } from 'react'; +import { FC } from 'react'; +import { TableStatus } from '../../../components'; import ContainerSkeleton from '../../../components/skeleton/ContainerSkeleton'; import { HeaderCell } from '../../../components/tableCells'; import useNodeSpecifications from '../../../data/validatorDetails/useNodeSpecifications'; @@ -30,65 +27,42 @@ const columnHelper = createColumnHelper(); const columns = [ columnHelper.accessor('os', { - header: () => ( - + header: () => , + cell: (props) => ( + + {props.getValue()} {props.row.original.isVirtualMachine && 'VM'} + + ), + }), + columnHelper.accessor('linuxDistribution', { + header: () => , + cell: (props) => ( + {props.getValue()} ), - cell: (props) => { - return {props.getValue()}; - }, }), columnHelper.accessor('version', { header: () => , - cell: (props) => { - return ( - - {props.getValue()} - - ); - }, + cell: (props) => ( + {props.getValue()} + ), + }), + columnHelper.accessor('linuxKernel', { + header: () => , + cell: (props) => ( + {props.getValue()} + ), }), columnHelper.accessor('cpuCores', { header: () => , - cell: (props) => { - return {props.getValue()}; - }, + cell: (props) => ( + {props.getValue()} + ), }), columnHelper.accessor('memory', { header: () => , - cell: (props) => { - return {props.getValue()}GB; - }, - }), - columnHelper.accessor('isVirtualMachine', { - header: () => ( - + cell: (props) => ( + {props.getValue()}GB ), - cell: (props) => { - return ( - - {props.getValue() ? 'Yes' : 'No'} - - ); - }, - }), - columnHelper.accessor('linuxDistribution', { - header: () => ( - - ), - cell: (props) => { - return {props.getValue()}; - }, - }), - columnHelper.accessor('linuxKernel', { - header: () => , - cell: (props) => { - return {props.getValue()}; - }, }), ]; @@ -96,7 +70,8 @@ const NodeSpecificationsTable: FC = ({ validatorAddress, }) => { const { data, isLoading, error } = useNodeSpecifications(validatorAddress); - const nodeSpecifications = useMemo(() => data.nodeSpecifications, [data]); + + const nodeSpecifications = data.nodeSpecifications; const table = useReactTable({ data: nodeSpecifications, @@ -117,40 +92,32 @@ const NodeSpecificationsTable: FC = ({ Node Specifications -
+
{/* Loading */} {isLoading && } {/* Error */} - {!isLoading && error && ( -
- - Oops! There was an error when retrieving the data - -
+ {!isLoading && error !== null && ( + )} {/* No data */} - {!isLoading && !error && nodeSpecifications.length === 0 && ( -
- - No node specifications from this validator was found! - -
+ {!isLoading && error === null && nodeSpecifications.length === 0 && ( + )} - {/* Successfully get the data */} - {!isLoading && !error && nodeSpecifications.length > 0 && ( + {/* Success; show the table */} + {!isLoading && error === null && nodeSpecifications.length > 0 && ( diff --git a/apps/tangle-dapp/app/restake/OperatorsTable.tsx b/apps/tangle-dapp/app/restake/OperatorsTable.tsx index 7c6e83b42f..eb284e1df3 100644 --- a/apps/tangle-dapp/app/restake/OperatorsTable.tsx +++ b/apps/tangle-dapp/app/restake/OperatorsTable.tsx @@ -59,13 +59,14 @@ const OperatorsTable: FC = ({ } - placeholder="Search identity or address" + placeholder="Search by identity or address..." className="w-1/3 mb-1.5 ml-auto -mt-[54px]" isControlled debounceTime={500} value={globalFilter} onChange={setGlobalFilter} /> + { const { delegationBondLessDelay } = useRestakeConsts(); - const items = useMemo( - () => [ - // TOOD: Add fee value - { - name: 'Fee', - }, - { - name: 'Unstake Period', - value: + // TODO: Add fee value. + return ( + + + + + ); - - return ; }; export default TxInfo; diff --git a/apps/tangle-dapp/components/Breadcrumbs/utils.tsx b/apps/tangle-dapp/components/Breadcrumbs/utils.tsx index 9d6ba64b7c..149b8731f9 100644 --- a/apps/tangle-dapp/components/Breadcrumbs/utils.tsx +++ b/apps/tangle-dapp/components/Breadcrumbs/utils.tsx @@ -3,11 +3,11 @@ import { CoinLine, GiftLineIcon, GridFillIcon, + HomeFillIcon, ShuffleLine, TokenSwapFill, WaterDropletIcon, } from '@webb-tools/icons'; -import { UserFillIcon } from '@webb-tools/icons'; import { IconBase } from '@webb-tools/icons/types'; import { shortenString } from '@webb-tools/webb-ui-components'; import assert from 'assert'; @@ -19,7 +19,7 @@ import isSubstrateAddress from '../../utils/isSubstrateAddress'; const BREADCRUMB_ICONS: Record JSX.Element> = { [PagePath.CLAIM_AIRDROP]: GiftLineIcon, - [PagePath.ACCOUNT]: UserFillIcon, + [PagePath.ACCOUNT]: HomeFillIcon, [PagePath.NOMINATION]: CoinLine, [PagePath.BLUEPRINTS]: GridFillIcon, [PagePath.SERVICES]: GridFillIcon, diff --git a/apps/tangle-dapp/components/Sidebar/sidebarProps.ts b/apps/tangle-dapp/components/Sidebar/sidebarProps.ts index 4483ccac63..5d87d15734 100644 --- a/apps/tangle-dapp/components/Sidebar/sidebarProps.ts +++ b/apps/tangle-dapp/components/Sidebar/sidebarProps.ts @@ -8,10 +8,10 @@ import { GiftLineIcon, GlobalLine, GridFillIcon, + HomeFillIcon, PolkadotJs, ShuffleLine, TokenSwapFill, - UserFillIcon, WaterDropletIcon, } from '@webb-tools/icons'; import { @@ -36,7 +36,7 @@ const SIDEBAR_STATIC_ITEMS: SideBarItemProps[] = [ href: PagePath.ACCOUNT, isInternal: true, isNext: true, - Icon: UserFillIcon, + Icon: HomeFillIcon, subItems: [], }, { diff --git a/apps/tangle-dapp/components/tables/Operators/index.tsx b/apps/tangle-dapp/components/tables/Operators/index.tsx index 4d6c9e216a..751e5fb396 100644 --- a/apps/tangle-dapp/components/tables/Operators/index.tsx +++ b/apps/tangle-dapp/components/tables/Operators/index.tsx @@ -15,6 +15,7 @@ import { Table, Typography, } from '@webb-tools/webb-ui-components'; +import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types'; import Link from 'next/link'; import { FC } from 'react'; import { twMerge } from 'tailwind-merge'; @@ -23,6 +24,7 @@ import { EMPTY_VALUE_PLACEHOLDER } from '../../../constants'; import { PagePath, QueryParamKey } from '../../../types'; import formatFractional from '../../../utils/formatFractional'; import getTVLToDisplay from '../../../utils/getTVLToDisplay'; +import pluralize from '../../../utils/pluralize'; import { getSortAddressOrIdentityFnc } from '../../../utils/table'; import { TableStatus } from '../../TableStatus'; import TableCellWrapper from '../TableCellWrapper'; @@ -219,37 +221,21 @@ const OperatorsTable: FC = ({ return (
); }; diff --git a/libs/icons/src/HomeFillIcon.tsx b/libs/icons/src/HomeFillIcon.tsx new file mode 100644 index 0000000000..1315918318 --- /dev/null +++ b/libs/icons/src/HomeFillIcon.tsx @@ -0,0 +1,10 @@ +import { createIcon } from './create-icon'; +import { IconBase } from './types'; + +export const HomeFillIcon = (props: IconBase) => { + return createIcon({ + ...props, + d: 'M20 20.0001C20 20.5524 19.5523 21.0001 19 21.0001H5C4.44772 21.0001 4 20.5524 4 20.0001V11.0001H1L11.3273 1.61162C11.7087 1.26488 12.2913 1.26488 12.6727 1.61162L23 11.0001H20V20.0001Z', + displayName: 'HomeFillIcon', + }); +}; diff --git a/libs/icons/src/Spinner.tsx b/libs/icons/src/Spinner.tsx index 005319bbfc..561e8326ed 100644 --- a/libs/icons/src/Spinner.tsx +++ b/libs/icons/src/Spinner.tsx @@ -5,26 +5,18 @@ import { createIcon } from './create-icon'; import { IconBase } from './types'; export const Spinner = React.memo((props) => { - // Spin animation attach to className - const className = twMerge( - props.className, - 'animate-spin !fill-transparent !stroke-none', - ); - return createIcon({ ...props, - className, + className: twMerge( + props.className, + 'animate-spin !fill-transparent !stroke-none', + ), + style: { animationDuration: '0.8s' }, path: [ , - , ], diff --git a/libs/icons/src/index.ts b/libs/icons/src/index.ts index 93d67aa0e4..bfae83d4f2 100644 --- a/libs/icons/src/index.ts +++ b/libs/icons/src/index.ts @@ -154,6 +154,7 @@ export { default as WalletPayIcon } from './WalletPayIcon'; export * from './WaterDropletIcon'; export { default as WebbLogoIcon } from './WebbLogoIcon'; export * from './YouTubeFill'; +export * from './HomeFillIcon'; // Wallet icons export * from './wallets'; diff --git a/libs/tangle-shared-ui/src/components/ConnectWalletButton/WalletModalContainer.tsx b/libs/tangle-shared-ui/src/components/ConnectWalletButton/WalletModalContainer.tsx index 5b909edade..38ba67a56b 100644 --- a/libs/tangle-shared-ui/src/components/ConnectWalletButton/WalletModalContainer.tsx +++ b/libs/tangle-shared-ui/src/components/ConnectWalletButton/WalletModalContainer.tsx @@ -61,7 +61,7 @@ const WalletModalContainer = () => { notificationApi={notificationApi} apiConfig={apiConfig} targetTypedChainIds={targetTypedChainIds} - contentDefaultText="Connect your EVM or Substrate wallet to interact on the Tangle Network" + contentDefaultText="Connect your EVM or Substrate wallet to interact with the Tangle Network." /> ); }; diff --git a/libs/webb-ui-components/src/components/Modal/ModalContent.tsx b/libs/webb-ui-components/src/components/Modal/ModalContent.tsx index e268fb2de2..fc8d250e71 100644 --- a/libs/webb-ui-components/src/components/Modal/ModalContent.tsx +++ b/libs/webb-ui-components/src/components/Modal/ModalContent.tsx @@ -23,7 +23,6 @@ export const ModalContent = forwardRef( { children, isOpen = false, - usePortal, className, overrideTransitionContentProps, overrideTransitionOverlayProps, @@ -36,39 +35,43 @@ export const ModalContent = forwardRef( const isSmOrLess = useIsBreakpoint('sm', true); const isMdOrLess = useIsBreakpoint('md', true); - const inner = ( + return ( @@ -101,11 +104,5 @@ export const ModalContent = forwardRef( ); - - if (usePortal) { - return {inner}; - } - - return inner; }, ); diff --git a/libs/webb-ui-components/src/components/Modal/types.ts b/libs/webb-ui-components/src/components/Modal/types.ts index 19526ccf2a..cbfb041d6a 100644 --- a/libs/webb-ui-components/src/components/Modal/types.ts +++ b/libs/webb-ui-components/src/components/Modal/types.ts @@ -9,11 +9,6 @@ export interface ModalContentProps extends DialogContentProps { */ isOpen: boolean; - /** - * Whether using portal to render modal - */ - usePortal?: boolean; - /** * Props to override the transition component */ diff --git a/libs/webb-ui-components/src/components/SideBar/MobileSidebar.tsx b/libs/webb-ui-components/src/components/SideBar/MobileSidebar.tsx index dded20dbec..25d23c7b5d 100644 --- a/libs/webb-ui-components/src/components/SideBar/MobileSidebar.tsx +++ b/libs/webb-ui-components/src/components/SideBar/MobileSidebar.tsx @@ -1,9 +1,10 @@ 'use client'; -import { forwardRef } from 'react'; +import { forwardRef, Fragment, useState } from 'react'; import { twMerge } from 'tailwind-merge'; import * as Dialog from '@radix-ui/react-dialog'; import { HamburgerMenu } from '@webb-tools/icons'; +import { Transition, TransitionChild } from '@headlessui/react'; import { SideBarLogo } from './Logo'; import { SideBarItems } from './SideBarItems'; @@ -22,17 +23,24 @@ export const MobileSidebar = forwardRef( overrideContentProps, pathnameOrHash, ActionButton, + onSideBarToggle, + isExpandedByDefault, + isExpanded, ...props }, ref, ) => { + const [isOpen, setIsOpen] = useState( + isExpandedByDefault ?? isExpanded ?? false, + ); + return (
- + ( /> - - + + + + - - Sidebar Menu + + Sidebar Menu - - Sidebar Menu - + + Sidebar Menu + -
- +
+ + + setIsOpen(false)} + /> +
- -
- - - - + + +
); diff --git a/libs/webb-ui-components/src/components/SideBar/SideBarItems.tsx b/libs/webb-ui-components/src/components/SideBar/SideBarItems.tsx index 6bcc1523f3..16133d595c 100644 --- a/libs/webb-ui-components/src/components/SideBar/SideBarItems.tsx +++ b/libs/webb-ui-components/src/components/SideBar/SideBarItems.tsx @@ -13,6 +13,7 @@ export const SideBarItems: FC = ({ isExpanded, className, ActionButton, + onItemClick, }) => { const [activeItem, setActiveItem] = useState(() => { const activeItemIndex = items.findIndex((item) => { @@ -59,6 +60,7 @@ export const SideBarItems: FC = ({ isExpanded={isExpanded} isActive={activeItem === idx} setIsActive={() => setActiveItem(idx)} + onClick={onItemClick} /> ); })} diff --git a/libs/webb-ui-components/src/components/SideBar/types.ts b/libs/webb-ui-components/src/components/SideBar/types.ts index 9d355e4cc2..ae70fec897 100644 --- a/libs/webb-ui-components/src/components/SideBar/types.ts +++ b/libs/webb-ui-components/src/components/SideBar/types.ts @@ -42,6 +42,7 @@ export interface SideBarItemsProps { isExpanded: boolean; className?: string; pathnameOrHash?: string; + onItemClick?: () => void; } export type SideBarItemProps = { diff --git a/libs/webb-ui-components/src/components/Table/THeader.tsx b/libs/webb-ui-components/src/components/Table/THeader.tsx index e2cc4bc8d2..83d91f70dc 100644 --- a/libs/webb-ui-components/src/components/Table/THeader.tsx +++ b/libs/webb-ui-components/src/components/Table/THeader.tsx @@ -12,7 +12,7 @@ export const THeader = forwardRef(
= ({ return ( - resetState()}> + resetState()} + onInteractOutside={() => handleOpenChange(false)} + > From 1c4ac87d2de87fd9e5f371fed34b8312881da8dd Mon Sep 17 00:00:00 2001 From: yurixander <101931215+yurixander@users.noreply.github.com> Date: Fri, 22 Nov 2024 01:13:10 +0100 Subject: [PATCH 07/22] style(tangle-dapp): Consistent containers --- apps/tangle-dapp/app/bridge/BridgeContainer.tsx | 4 ++-- apps/tangle-dapp/app/bridge/ChainSelectors.tsx | 4 ++-- .../tangle-dapp/app/bridge/hooks/useActionButton.ts | 8 +++++--- apps/tangle-dapp/app/restake/ActionButtonBase.tsx | 3 +-- apps/tangle-dapp/components/InputWrapper.tsx | 2 +- .../LiquidStaking/stakeAndUnstake/LsInput.tsx | 2 +- .../LiquidStaking/stakeAndUnstake/LsStakeCard.tsx | 5 +++-- .../KeyStatsContainer/KeyStatsContainer.tsx | 4 ++-- .../NominationsPayoutsContainer.tsx | 4 ++-- .../ConnectWalletButton/ConnectWalletButton.tsx | 2 +- .../components/NetworkSelectorDropdown/index.tsx | 4 ++-- .../src/components/TokenSelector/TokenSelector.tsx | 13 ++++--------- .../src/components/buttons/ChainOrTokenButton.tsx | 11 +++++------ 13 files changed, 31 insertions(+), 35 deletions(-) diff --git a/apps/tangle-dapp/app/bridge/BridgeContainer.tsx b/apps/tangle-dapp/app/bridge/BridgeContainer.tsx index 9cf1dbc2ec..e1456585a4 100644 --- a/apps/tangle-dapp/app/bridge/BridgeContainer.tsx +++ b/apps/tangle-dapp/app/bridge/BridgeContainer.tsx @@ -51,11 +51,11 @@ const BridgeContainer: FC = ({ className }) => { className={twMerge( 'w-full max-w-[550px]', 'shadow-webb-lg dark:shadow-webb-lg-dark', - 'flex flex-col gap-10', + 'flex flex-col gap-7', className, )} > -
+
diff --git a/apps/tangle-dapp/app/bridge/ChainSelectors.tsx b/apps/tangle-dapp/app/bridge/ChainSelectors.tsx index 8cde93da7d..5517cebf53 100644 --- a/apps/tangle-dapp/app/bridge/ChainSelectors.tsx +++ b/apps/tangle-dapp/app/bridge/ChainSelectors.tsx @@ -101,7 +101,7 @@ const ChainSelectors: FC = () => { { { - if (isRequiredToConnectWallet || isSelectedNetworkAndSourceChainMismatch) - return 'Connecting...'; - if (isTransferring) return 'Transferring...'; + if (isRequiredToConnectWallet || isSelectedNetworkAndSourceChainMismatch) { + return 'Connecting'; + } else if (isTransferring) { + return 'Transferring'; + } }, [ isRequiredToConnectWallet, isSelectedNetworkAndSourceChainMismatch, diff --git a/apps/tangle-dapp/app/restake/ActionButtonBase.tsx b/apps/tangle-dapp/app/restake/ActionButtonBase.tsx index d54d30b630..5512f73c50 100644 --- a/apps/tangle-dapp/app/restake/ActionButtonBase.tsx +++ b/apps/tangle-dapp/app/restake/ActionButtonBase.tsx @@ -24,13 +24,12 @@ export default function ActionButtonBase({ if (loading) return { isLoading: true, - loadingText: 'Loading...', }; if (isConnecting) return { isLoading: true, - loadingText: 'Connecting...', + loadingText: 'Connecting', }; return { diff --git a/apps/tangle-dapp/components/InputWrapper.tsx b/apps/tangle-dapp/components/InputWrapper.tsx index 4baa7d71fc..6ad5adb9cc 100644 --- a/apps/tangle-dapp/components/InputWrapper.tsx +++ b/apps/tangle-dapp/components/InputWrapper.tsx @@ -91,7 +91,7 @@ const InputWrapper: FC = ({ 'px-2.5 lg:px-4 py-2', 'flex items-center justify-between gap-2', 'w-[356px] max-w-[356px]', - 'bg-mono-20 dark:bg-mono-170', + 'bg-mono-20 dark:bg-mono-180', 'border border-mono-40 dark:border-mono-170', hasError && 'border-red-70 dark:border-red-50', isFullWidth && 'w-full max-w-full', diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsInput.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsInput.tsx index ac9ed43171..66a797716a 100644 --- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsInput.tsx +++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsInput.tsx @@ -105,7 +105,7 @@ const LsInput = forwardRef(
diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx index dc7be6783a..057ae370f8 100644 --- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx +++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx @@ -30,6 +30,7 @@ import useSearchParamSync from '../../../hooks/useSearchParamSync'; import { TxStatus } from '../../../hooks/useSubstrateTx'; import getLsProtocolDef from '../../../utils/liquidStaking/getLsProtocolDef'; import scaleAmountByPercentage from '../../../utils/scaleAmountByPercentage'; +import Container from '../../Container'; import DetailsContainer from '../../DetailsContainer'; import ExchangeRateDetailItem from './ExchangeRateDetailItem'; import FeeDetailItem from './FeeDetailItem'; @@ -214,7 +215,7 @@ const LsStakeCard: FC = () => { }, [lsPools]); return ( -
+ { setIsOpen={setIsSelectTokenModalOpen} onSelect={setLsPoolId} /> -
+ ); }; diff --git a/apps/tangle-dapp/containers/KeyStatsContainer/KeyStatsContainer.tsx b/apps/tangle-dapp/containers/KeyStatsContainer/KeyStatsContainer.tsx index 61c8636bc8..835365bfa0 100644 --- a/apps/tangle-dapp/containers/KeyStatsContainer/KeyStatsContainer.tsx +++ b/apps/tangle-dapp/containers/KeyStatsContainer/KeyStatsContainer.tsx @@ -19,10 +19,10 @@ export const KeyStatsContainer = () => {
div]:border-r [&>div]:border-r-mono-40 [&>div]:dark:border-r-mono-160', + '[&>div]:border-r [&>div]:border-r-mono-80 [&>div]:dark:border-r-mono-160', '[&>div]:even:border-none lg:[&>div]:even:border-r', 'lg:[&>div]:inline-block lg:[&>div]:basis-0 lg:[&>div]:grow', - '[&>div]:border-b [&>div]:border-b-mono-40 [&>div]:dark:border-b-mono-160', + '[&>div]:border-b [&>div]:border-b-mono-80 [&>div]:dark:border-b-mono-160', )} > diff --git a/apps/tangle-dapp/containers/NominationsPayoutsContainer/NominationsPayoutsContainer.tsx b/apps/tangle-dapp/containers/NominationsPayoutsContainer/NominationsPayoutsContainer.tsx index 7f68c68257..aac9452ddf 100644 --- a/apps/tangle-dapp/containers/NominationsPayoutsContainer/NominationsPayoutsContainer.tsx +++ b/apps/tangle-dapp/containers/NominationsPayoutsContainer/NominationsPayoutsContainer.tsx @@ -189,7 +189,7 @@ const DelegationsPayoutsContainer: FC = () => { buttonProps={{ isLoading: loading || isConnecting, isDisabled: isMobile, - loadingText: isConnecting ? 'Connecting...' : 'Loading...', + loadingText: isConnecting ? 'Connecting' : 'Loading...', onClick: () => toggleModal(true), }} icon="🔗" @@ -224,7 +224,7 @@ const DelegationsPayoutsContainer: FC = () => { buttonProps={{ isLoading: loading || isConnecting, isDisabled: isMobile, - loadingText: isConnecting ? 'Connecting...' : 'Loading...', + loadingText: isConnecting ? 'Connecting' : undefined, onClick: () => toggleModal(true), }} icon="🔗" diff --git a/libs/tangle-shared-ui/src/components/ConnectWalletButton/ConnectWalletButton.tsx b/libs/tangle-shared-ui/src/components/ConnectWalletButton/ConnectWalletButton.tsx index d40953d542..899f51bf7a 100644 --- a/libs/tangle-shared-ui/src/components/ConnectWalletButton/ConnectWalletButton.tsx +++ b/libs/tangle-shared-ui/src/components/ConnectWalletButton/ConnectWalletButton.tsx @@ -49,7 +49,7 @@ const ConnectWalletButton = () => { ) : ( - ) + ) : (
( leaveTo="opacity-0" {...overrideTransitionOverlayProps} > - @@ -75,7 +75,7 @@ export const ModalContent = forwardRef( )} {...overrideTransitionContentProps} > - ( )} ref={ref} > - - Modal - + Modal - - Modal - + Modal {children} - + ); diff --git a/libs/webb-ui-components/src/components/TransactionInputCard/TransactionInputCard.tsx b/libs/webb-ui-components/src/components/TransactionInputCard/TransactionInputCard.tsx index b0178b5d17..fce18d7bba 100644 --- a/libs/webb-ui-components/src/components/TransactionInputCard/TransactionInputCard.tsx +++ b/libs/webb-ui-components/src/components/TransactionInputCard/TransactionInputCard.tsx @@ -69,12 +69,8 @@ const TransactionInputCardRoot = forwardRef< {...props} ref={ref} className={twMerge( - 'w-full rounded-xl px-3 py-1.5 space-y-2', - 'bg-gradient-to-b', - 'from-[rgba(255,_255,_255,_0.18)] to-[rgba(255,_255,_255,_0.6)]', - 'hover:from-[rgba(255,_255,_255,_0.3)] hover:to-mono-0', - 'dark:from-[rgba(43,_47,_64,_0.4)] dark:to-[rgba(112,_122,_166,_0.04)]', - 'dark:hover:from-[rgba(43,_47,_64,_0.5)] dark:hover:to-[rgba(112,_122,_166,_0.05)]', + 'w-full rounded-xl p-4 space-y-2', + 'bg-mono-20 dark:bg-mono-180', className, )} > @@ -97,6 +93,7 @@ const TransactionInputCardRoot = forwardRef< ); }, ); + TransactionInputCardRoot.displayName = 'TransactionInputCardRoot'; const TransactionChainSelector = forwardRef( @@ -221,12 +218,15 @@ const TransactionMaxAmountButton = forwardRef< const buttonCnt = useMemo(() => { const amount = - typeof maxAmount === 'number' ? toFixed(maxAmount, 5) : '--'; - const fmtAmount = + // TODO: Use empty placeholder constant instead, once it's moved to Webb UI lib. + typeof maxAmount === 'number' ? toFixed(maxAmount, 5) : '—'; + + const formattedAmount = typeof amount === 'number' ? getRoundedAmountString(amount, 5) : amount; + const tokenSym = tokenSymbol ?? ''; - return `${fmtAmount} ${tokenSym}`.trim(); + return `${formattedAmount} ${tokenSym}`.trim(); }, [maxAmount, tokenSymbol]); const disabled = useMemo( @@ -304,6 +304,7 @@ const TransactionMaxAmountButton = forwardRef< {buttonCnt} + {tooltipBody === undefined ? accountType === 'note' diff --git a/libs/webb-ui-components/src/components/WalletConnectionCard/WalletConnectionCard.tsx b/libs/webb-ui-components/src/components/WalletConnectionCard/WalletConnectionCard.tsx index 9919340cdc..f8fb3ea4ed 100644 --- a/libs/webb-ui-components/src/components/WalletConnectionCard/WalletConnectionCard.tsx +++ b/libs/webb-ui-components/src/components/WalletConnectionCard/WalletConnectionCard.tsx @@ -65,7 +65,7 @@ export const WalletConnectionCard = forwardRef< )} ref={ref} > -
+
@@ -120,7 +120,7 @@ export const WalletConnectionCard = forwardRef<
) : ( -
+
= ({ wallets, onWalletSelect, className }) => { return ( -
-
- + {wallets.map((wallet) => ( + onWalletSelect?.(wallet)} > - Select below - +
+ {wallet.Logo} -
    - {wallets.map((wallet) => ( - onWalletSelect?.(wallet)} - > -
    - {wallet.Logo} - - - {wallet.title} - -
    -     - ))} -
-
-
+ + {wallet.title} + +
+ + ))} + ); }; @@ -341,7 +329,7 @@ const DownloadWallet: FC< } > = ({ downloadWalletURL, getHelpURL, connectingWallet, failedWallet }) => { return downloadWalletURL || getHelpURL ? ( -
+
Date: Fri, 22 Nov 2024 15:26:11 +0100 Subject: [PATCH 09/22] style(tangle-dapp): Small improvements --- apps/tangle-dapp/app/claim/layout.tsx | 6 ++--- .../components/account/Actions.tsx | 6 ++--- .../containers/LsCreatePoolModal.tsx | 24 +++++++++---------- .../TransferTxContainer.tsx | 4 ++-- libs/icons/src/Spinner.tsx | 8 +++---- .../src/components/Tooltip/Tooltip.tsx | 5 ++-- 6 files changed, 26 insertions(+), 27 deletions(-) diff --git a/apps/tangle-dapp/app/claim/layout.tsx b/apps/tangle-dapp/app/claim/layout.tsx index 8355c05844..c543553023 100644 --- a/apps/tangle-dapp/app/claim/layout.tsx +++ b/apps/tangle-dapp/app/claim/layout.tsx @@ -4,7 +4,7 @@ import FAQSection from '@webb-tools/webb-ui-components/containers/FAQSection'; import { Metadata } from 'next'; import type { FC, PropsWithChildren } from 'react'; -import Container from '../../components/Container'; +import { GlassCard } from '../../components'; import faqItems from '../../constants/faq'; import { OpenGraphPageImageUrl } from '../../constants/openGraph'; import createPageMetadata from '../../utils/createPageMetadata'; @@ -21,7 +21,7 @@ export const metadata: Metadata = createPageMetadata({ const Layout: FC = ({ children }) => { return ( - + {children} @@ -32,7 +32,7 @@ const Layout: FC = ({ children }) => { answerClassName="[&_a:hover]:text-mono-100 [&_a]:underline" /> - + ); }; diff --git a/apps/tangle-dapp/components/account/Actions.tsx b/apps/tangle-dapp/components/account/Actions.tsx index a7f866a16e..a0247a4a52 100644 --- a/apps/tangle-dapp/components/account/Actions.tsx +++ b/apps/tangle-dapp/components/account/Actions.tsx @@ -1,11 +1,11 @@ 'use client'; import { - ArrowLeftRightLineIcon, CoinsLineIcon, CoinsStackedLineIcon, GiftLineIcon, LockUnlockLineIcon, + SendPlanLineIcon, } from '@webb-tools/icons'; import useNetworkStore from '@webb-tools/tangle-shared-ui/context/useNetworkStore'; import { FC, useState } from 'react'; @@ -50,8 +50,8 @@ const Actions: FC = () => { <>
setIsTransferModalOpen(true)} // Disable while no account is connected, or when the active // account has no funds. diff --git a/apps/tangle-dapp/containers/LsCreatePoolModal.tsx b/apps/tangle-dapp/containers/LsCreatePoolModal.tsx index c34ba44401..be7fb8382a 100644 --- a/apps/tangle-dapp/containers/LsCreatePoolModal.tsx +++ b/apps/tangle-dapp/containers/LsCreatePoolModal.tsx @@ -123,18 +123,6 @@ const LsCreatePoolModal: FC = ({ - {/** - * In case that a testnet is selected, it's helpful to let the users - * know that the pool will be created on the testnet, and that - * it won't be accessible on other networks. - */} - {!isLiveNetwork && ( - - )} -
= ({ setValue={setBouncerAddress} wrapperOverrides={{ isFullWidth: true }} /> + + {/** + * In case that a testnet is selected, it's helpful to let the users + * know that the pool will be created on the testnet, and that + * it won't be accessible on other networks. + */} + {!isLiveNetwork && ( + + )} = ({ onCloseAutoFocus={reset} > setIsModalOpen(false)}> - Transfer {nativeTokenSymbol} Tokens + Send {nativeTokenSymbol} Tokens Quickly transfer your {nativeTokenSymbol} tokens to an account on - the Tangle Network. You can choose to send to either an EVM or a + the Tangle network. You can choose to send to either an EVM or a Substrate address. diff --git a/libs/icons/src/Spinner.tsx b/libs/icons/src/Spinner.tsx index 561e8326ed..19d6eb9ad0 100644 --- a/libs/icons/src/Spinner.tsx +++ b/libs/icons/src/Spinner.tsx @@ -12,14 +12,14 @@ export const Spinner = React.memo((props) => { 'animate-spin !fill-transparent !stroke-none', ), style: { animationDuration: '0.8s' }, - path: [ + path: ( , - ], + /> + ), displayName: 'Spinner', viewBox: '0 0 20 20', }); diff --git a/libs/webb-ui-components/src/components/Tooltip/Tooltip.tsx b/libs/webb-ui-components/src/components/Tooltip/Tooltip.tsx index 06eef44320..735e9fa053 100644 --- a/libs/webb-ui-components/src/components/Tooltip/Tooltip.tsx +++ b/libs/webb-ui-components/src/components/Tooltip/Tooltip.tsx @@ -35,13 +35,12 @@ export const TooltipBody: React.FC = ({ 'radix-side-right:animate-slide-left-fade', 'radix-side-bottom:animate-slide-up-fade', 'radix-side-left:animate-slide-right-fade', - 'inline-flex items-center break-all rounded p-2', - 'bg-mono-20 dark:bg-mono-160', + 'inline-flex items-center break-all rounded px-3 py-2', + 'bg-mono-20 dark:bg-mono-190', 'webb-shadow-sm z-[9999]', )} {...props} > -
Date: Fri, 22 Nov 2024 17:46:38 +0100 Subject: [PATCH 10/22] style(tangle-dapp): Remove breadcrumbs as not useful --- .../components/Breadcrumbs/Breadcrumbs.tsx | 71 ----------- .../components/Breadcrumbs/index.ts | 1 - .../components/Breadcrumbs/utils.tsx | 120 ------------------ .../components/tableCells/HeaderCell.tsx | 13 +- apps/tangle-dapp/containers/Layout/Layout.tsx | 5 - .../src/components/Modal/ModalContent.tsx | 2 +- .../src/components/Table/THeader.tsx | 2 +- .../src/components/Tooltip/Tooltip.tsx | 3 +- 8 files changed, 13 insertions(+), 204 deletions(-) delete mode 100644 apps/tangle-dapp/components/Breadcrumbs/Breadcrumbs.tsx delete mode 100644 apps/tangle-dapp/components/Breadcrumbs/index.ts delete mode 100644 apps/tangle-dapp/components/Breadcrumbs/utils.tsx diff --git a/apps/tangle-dapp/components/Breadcrumbs/Breadcrumbs.tsx b/apps/tangle-dapp/components/Breadcrumbs/Breadcrumbs.tsx deleted file mode 100644 index 1b858c625a..0000000000 --- a/apps/tangle-dapp/components/Breadcrumbs/Breadcrumbs.tsx +++ /dev/null @@ -1,71 +0,0 @@ -'use client'; - -import { IconBase } from '@webb-tools/icons/types'; -import { - Breadcrumbs as BreadcrumbsCmp, - BreadcrumbsItem, -} from '@webb-tools/webb-ui-components'; -import cx from 'classnames'; -import Link from 'next/link'; -import { usePathname } from 'next/navigation'; -import { FC, ReactElement, useMemo } from 'react'; - -import { getBreadcrumbIcon, getBreadcrumbLabel } from './utils'; - -export type BreadcrumbType = { - label: string; - isLast: boolean; - icon?: ReactElement; - href: string; - className?: string; -}; - -const Breadcrumbs: FC<{ className?: string }> = ({ className }) => { - const fullPathname = usePathname(); - - const pathNames = fullPathname - .split('/') - .filter((segment) => segment.trim() !== ''); - - const breadCrumbs = useMemo(() => { - return pathNames.map((pathName, index) => { - const Icon = getBreadcrumbIcon(pathName, index, pathNames); - const label = getBreadcrumbLabel(pathName, index, pathNames); - - return { - label, - isLast: index === pathNames.length - 1, - href: `/${pathNames.slice(0, index + 1).join('/')}`, - icon: - Icon !== null ? ( - - ) : undefined, - }; - }); - }, [pathNames]); - - return ( -
- - {breadCrumbs.map((breadcrumb, index) => ( - /** - * Data on the client-side needs to be up-to-date when the user navigates to a page - * Therefore, do not need to prefetch routes in breadcrumb items - */ - - - {breadcrumb.label} - - - ))} - -
- ); -}; - -export default Breadcrumbs; diff --git a/apps/tangle-dapp/components/Breadcrumbs/index.ts b/apps/tangle-dapp/components/Breadcrumbs/index.ts deleted file mode 100644 index 0835ba0b68..0000000000 --- a/apps/tangle-dapp/components/Breadcrumbs/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Breadcrumbs } from './Breadcrumbs'; diff --git a/apps/tangle-dapp/components/Breadcrumbs/utils.tsx b/apps/tangle-dapp/components/Breadcrumbs/utils.tsx deleted file mode 100644 index 149b8731f9..0000000000 --- a/apps/tangle-dapp/components/Breadcrumbs/utils.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import { - CodeFill, - CoinLine, - GiftLineIcon, - GridFillIcon, - HomeFillIcon, - ShuffleLine, - TokenSwapFill, - WaterDropletIcon, -} from '@webb-tools/icons'; -import { IconBase } from '@webb-tools/icons/types'; -import { shortenString } from '@webb-tools/webb-ui-components'; -import assert from 'assert'; -import capitalize from 'lodash/capitalize'; -import { JSX } from 'react'; - -import { PagePath } from '../../types'; -import isSubstrateAddress from '../../utils/isSubstrateAddress'; - -const BREADCRUMB_ICONS: Record JSX.Element> = { - [PagePath.CLAIM_AIRDROP]: GiftLineIcon, - [PagePath.ACCOUNT]: HomeFillIcon, - [PagePath.NOMINATION]: CoinLine, - [PagePath.BLUEPRINTS]: GridFillIcon, - [PagePath.SERVICES]: GridFillIcon, - [PagePath.RESTAKE]: TokenSwapFill, - [PagePath.RESTAKE_DEPOSIT]: TokenSwapFill, - [PagePath.RESTAKE_STAKE]: TokenSwapFill, - [PagePath.RESTAKE_OPERATOR]: TokenSwapFill, - [PagePath.BRIDGE]: ShuffleLine, - [PagePath.LIQUID_STAKING]: WaterDropletIcon, -}; - -const BREADCRUMB_LABELS: Partial> = { - [PagePath.SERVICES]: 'Service Overview', - [PagePath.CLAIM_AIRDROP]: 'Claim Airdrop', - [PagePath.LIQUID_STAKING]: 'Liquid Staking', -}; - -const isPagePath = (pathName: string): pathName is PagePath => { - return Object.values(PagePath).includes(pathName as PagePath); -}; - -const isSubPath = ( - page: PagePath, - expectedIndex: number, - expectedLength: number, - actualIndex: number, - pathNames: string[], -): boolean => { - assert( - expectedIndex < expectedLength && actualIndex < pathNames.length, - 'Index should be in bounds', - ); - - if (pathNames.length === 0) { - return false; - } - - const pagePath = '/' + pathNames[0]; - - return ( - pagePath === page && - actualIndex === expectedIndex && - pathNames.length === expectedLength - ); -}; - -export const getBreadcrumbLabel = ( - pathName: string, - index: number, - pathNames: string[], -): string => { - // Special case for the Service Details page. - if ( - pathNames.length === 2 && - index === 1 && - pathNames[0] === PagePath.SERVICES.substring(1) - ) { - return `Details: ${pathName}`; - } - - const pathNameWithSlash = '/' + pathName; - - const knownLabel = isPagePath(pathNameWithSlash) - ? BREADCRUMB_LABELS[pathNameWithSlash] - : undefined; - - if (knownLabel !== undefined) { - return knownLabel; - } - - // In the case that the pathname is a Substrate address, shorten it - // to a more readable format, and to prevent overflow. - if (isSubstrateAddress(pathName)) { - return shortenString(pathName); - } - - // decode special character encoding (Ex: "%20" -> " ") - return capitalize(decodeURI(pathName)); -}; - -export const getBreadcrumbIcon = ( - pathName: string, - index: number, - pathNames: string[], -): ((props: IconBase) => JSX.Element) | null => { - // Special case for the Service Details page. - if (isSubPath(PagePath.SERVICES, 1, 2, index, pathNames)) { - return CodeFill; - } - - const pathNameWithSlash = '/' + pathName; - - const knownIcon = isPagePath(pathNameWithSlash) - ? BREADCRUMB_ICONS[pathNameWithSlash] - : undefined; - - return knownIcon ?? null; -}; diff --git a/apps/tangle-dapp/components/tableCells/HeaderCell.tsx b/apps/tangle-dapp/components/tableCells/HeaderCell.tsx index 7d5e31e5a2..c312946ffa 100644 --- a/apps/tangle-dapp/components/tableCells/HeaderCell.tsx +++ b/apps/tangle-dapp/components/tableCells/HeaderCell.tsx @@ -11,21 +11,26 @@ const HeaderCell: FC = ({ title, tooltip, className, - titleVariant = 'body1', + titleVariant = 'body2', }) => { return ( {title} - {tooltip && } + {tooltip !== undefined && ( + + )} ); }; diff --git a/apps/tangle-dapp/containers/Layout/Layout.tsx b/apps/tangle-dapp/containers/Layout/Layout.tsx index a6ef9c7234..1d0f7d9d28 100644 --- a/apps/tangle-dapp/containers/Layout/Layout.tsx +++ b/apps/tangle-dapp/containers/Layout/Layout.tsx @@ -12,7 +12,6 @@ import { useLayoutBgClassName } from '@webb-tools/webb-ui-components/next-utils' import { type FC, type PropsWithChildren } from 'react'; import { - Breadcrumbs, BridgeTxQueueDropdown, MobileSidebar, Sidebar, @@ -54,8 +53,6 @@ const Layout: FC> = ({
- -
@@ -65,8 +62,6 @@ const Layout: FC> = ({
- - {children}
diff --git a/libs/webb-ui-components/src/components/Modal/ModalContent.tsx b/libs/webb-ui-components/src/components/Modal/ModalContent.tsx index 211d7c16e2..c69c126e78 100644 --- a/libs/webb-ui-components/src/components/Modal/ModalContent.tsx +++ b/libs/webb-ui-components/src/components/Modal/ModalContent.tsx @@ -68,7 +68,7 @@ export const ModalContent = forwardRef( isMdOrLess ? 'duration-200' : 'duration-100', )} leaveFrom={twMerge( - isMdOrLess ? 'translate-y-0' : 'opacity-100 scale-100 top-0', + isMdOrLess ? 'translate-y-0' : 'opacity-100 top-0', )} leaveTo={twMerge( isMdOrLess ? 'translate-y-full' : 'opacity-0 top-[calc(50%+15px)]', diff --git a/libs/webb-ui-components/src/components/Table/THeader.tsx b/libs/webb-ui-components/src/components/Table/THeader.tsx index 83d91f70dc..bb6064202d 100644 --- a/libs/webb-ui-components/src/components/Table/THeader.tsx +++ b/libs/webb-ui-components/src/components/Table/THeader.tsx @@ -12,7 +12,7 @@ export const THeader = forwardRef(
= ({ 'radix-side-bottom:animate-slide-up-fade', 'radix-side-left:animate-slide-right-fade', 'inline-flex items-center break-all rounded px-3 py-2', - 'bg-mono-20 dark:bg-mono-190', + 'bg-mono-20 dark:bg-mono-200', + 'border border-mono-60 dark:border-mono-180', 'webb-shadow-sm z-[9999]', )} {...props} From 3eb020f62aeb875467ceb8ef4d1012b3388a991a Mon Sep 17 00:00:00 2001 From: yurixander <101931215+yurixander@users.noreply.github.com> Date: Sat, 23 Nov 2024 04:07:46 +0100 Subject: [PATCH 11/22] style(tangle-dapp): More fixes --- .../app/bridge/AmountAndTokenInput.tsx | 8 +- apps/tangle-dapp/app/bridge/FeeDetails.tsx | 2 +- .../app/restake/deposit/TxDetails.tsx | 2 +- .../app/restake/unstake/TxInfo.tsx | 3 +- .../restake/unstake/UnstakeRequestTable.tsx | 2 +- apps/tangle-dapp/components/InputWrapper.tsx | 4 +- .../stakeAndUnstake/LsAgnosticBalance.tsx | 4 +- .../stakeAndUnstake/LsNetworkSwitcher.tsx | 16 +- .../stakeAndUnstake/LsUnstakeCard.tsx | 145 +++++++-------- .../components/ServiceTable/ServiceTable.tsx | 169 ------------------ .../components/ServiceTable/index.ts | 1 - .../components/ServiceTable/types.ts | 6 - apps/tangle-dapp/components/index.ts | 2 - .../components/tables/VaultAssets/index.tsx | 5 +- .../components/tables/VaultAssets/types.ts | 2 +- .../liquidStaking/tangle/useLsCreatePoolTx.ts | 2 + .../data/restake/useRestakeAssetMap.ts | 6 - .../data/restake/useRestakeDelegatorInfo.ts | 10 +- .../NetworkSelectorDropdown/index.tsx | 7 +- .../src/components/Modal/ModalContent.tsx | 2 + .../SkeletonLoader/SkeletonLoader.tsx | 16 +- .../WalletConnectionCard.tsx | 139 +++----------- .../components/WalletModal/WalletModal.tsx | 10 +- 23 files changed, 153 insertions(+), 410 deletions(-) delete mode 100644 apps/tangle-dapp/components/ServiceTable/ServiceTable.tsx delete mode 100644 apps/tangle-dapp/components/ServiceTable/index.ts delete mode 100644 apps/tangle-dapp/components/ServiceTable/types.ts diff --git a/apps/tangle-dapp/app/bridge/AmountAndTokenInput.tsx b/apps/tangle-dapp/app/bridge/AmountAndTokenInput.tsx index aded207e24..3ddaf65957 100644 --- a/apps/tangle-dapp/app/bridge/AmountAndTokenInput.tsx +++ b/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'; @@ -11,7 +16,6 @@ import { twMerge } from 'tailwind-merge'; import AmountInput from '../../components/AmountInput'; import { AssetConfig, AssetList } from '../../components/Lists/AssetList'; -import { EMPTY_VALUE_PLACEHOLDER } from '../../constants'; import { BRIDGE_SUPPORTED_TOKENS } from '../../constants/bridge'; import { useBridge } from '../../context/BridgeContext'; import { BridgeTokenId } from '../../types/bridge'; diff --git a/apps/tangle-dapp/app/bridge/FeeDetails.tsx b/apps/tangle-dapp/app/bridge/FeeDetails.tsx index 83f535e37b..0e11e16acc 100644 --- a/apps/tangle-dapp/app/bridge/FeeDetails.tsx +++ b/apps/tangle-dapp/app/bridge/FeeDetails.tsx @@ -1,12 +1,12 @@ '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'; import Decimal from 'decimal.js'; import { FC, useMemo } from 'react'; -import { EMPTY_VALUE_PLACEHOLDER } from '../../constants'; import { useBridge } from '../../context/BridgeContext'; import useSelectedToken from './hooks/useSelectedToken'; import useTypedChainId from './hooks/useTypedChainId'; diff --git a/apps/tangle-dapp/app/restake/deposit/TxDetails.tsx b/apps/tangle-dapp/app/restake/deposit/TxDetails.tsx index e3ff7e1b53..6e2bb84730 100644 --- a/apps/tangle-dapp/app/restake/deposit/TxDetails.tsx +++ b/apps/tangle-dapp/app/restake/deposit/TxDetails.tsx @@ -1,11 +1,11 @@ 'use client'; +import { EMPTY_VALUE_PLACEHOLDER } from '@webb-tools/webb-ui-components'; import { useMemo } from 'react'; import { UseFormWatch } from 'react-hook-form'; import DetailsContainer from '../../../components/DetailsContainer'; import DetailItem from '../../../components/LiquidStaking/stakeAndUnstake/DetailItem'; -import { EMPTY_VALUE_PLACEHOLDER } from '../../../constants'; import { useRestakeContext } from '../../../context/RestakeContext'; import useRestakeConsts from '../../../data/restake/useRestakeConsts'; import useRestakeRewardConfig from '../../../data/restake/useRestakeRewardConfig'; diff --git a/apps/tangle-dapp/app/restake/unstake/TxInfo.tsx b/apps/tangle-dapp/app/restake/unstake/TxInfo.tsx index ecbef0ae79..74d1488d94 100644 --- a/apps/tangle-dapp/app/restake/unstake/TxInfo.tsx +++ b/apps/tangle-dapp/app/restake/unstake/TxInfo.tsx @@ -1,6 +1,7 @@ +import { EMPTY_VALUE_PLACEHOLDER } from '@webb-tools/webb-ui-components'; + import DetailsContainer from '../../../components/DetailsContainer'; import DetailItem from '../../../components/LiquidStaking/stakeAndUnstake/DetailItem'; -import { EMPTY_VALUE_PLACEHOLDER } from '../../../constants'; import useRestakeConsts from '../../../data/restake/useRestakeConsts'; const TxInfo = () => { diff --git a/apps/tangle-dapp/app/restake/unstake/UnstakeRequestTable.tsx b/apps/tangle-dapp/app/restake/unstake/UnstakeRequestTable.tsx index 958d934b31..b295bbdc90 100644 --- a/apps/tangle-dapp/app/restake/unstake/UnstakeRequestTable.tsx +++ b/apps/tangle-dapp/app/restake/unstake/UnstakeRequestTable.tsx @@ -12,6 +12,7 @@ import { import { CheckboxCircleFill } from '@webb-tools/icons/CheckboxCircleFill'; import { TimeFillIcon } from '@webb-tools/icons/TimeFillIcon'; import type { IdentityType } from '@webb-tools/tangle-shared-ui/utils/polkadot/identity'; +import { EMPTY_VALUE_PLACEHOLDER } from '@webb-tools/webb-ui-components'; import { CheckBox } from '@webb-tools/webb-ui-components/components/CheckBox'; import { fuzzyFilter } from '@webb-tools/webb-ui-components/components/Filter/utils'; import { Table } from '@webb-tools/webb-ui-components/components/Table'; @@ -20,7 +21,6 @@ import { useMemo } from 'react'; import { formatUnits } from 'viem'; import AvatarWithText from '../../../components/AvatarWithText'; -import { EMPTY_VALUE_PLACEHOLDER } from '../../../constants'; import { useRestakeContext } from '../../../context/RestakeContext'; import useRestakeConsts from '../../../data/restake/useRestakeConsts'; import useRestakeCurrentRound from '../../../data/restake/useRestakeCurrentRound'; diff --git a/apps/tangle-dapp/components/InputWrapper.tsx b/apps/tangle-dapp/components/InputWrapper.tsx index 6ad5adb9cc..2ebe7b1575 100644 --- a/apps/tangle-dapp/components/InputWrapper.tsx +++ b/apps/tangle-dapp/components/InputWrapper.tsx @@ -91,8 +91,8 @@ const InputWrapper: FC = ({ 'px-2.5 lg:px-4 py-2', 'flex items-center justify-between gap-2', 'w-[356px] max-w-[356px]', - 'bg-mono-20 dark:bg-mono-180', - 'border border-mono-40 dark:border-mono-170', + 'bg-mono-20 dark:bg-mono-160', + 'border border-transparent', hasError && 'border-red-70 dark:border-red-50', isFullWidth && 'w-full max-w-full', wrapperClassName, diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsAgnosticBalance.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsAgnosticBalance.tsx index 2c553a04f3..0bf649d70c 100644 --- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsAgnosticBalance.tsx +++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsAgnosticBalance.tsx @@ -1,5 +1,6 @@ 'use client'; +import { BN } from '@polkadot/util'; import { WalletFillIcon, WalletLineIcon } from '@webb-tools/icons'; import { SkeletonLoader, @@ -66,8 +67,7 @@ const LsAgnosticBalance: FC = ({ const isClickable = onlyShowTooltipWhenBalanceIsSet && - balance !== null && - typeof balance !== 'string' && + balance instanceof BN && !balance.isZero(); const handleClick = useCallback(() => { diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsNetworkSwitcher.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsNetworkSwitcher.tsx index cdab60f8fc..8c0de09552 100644 --- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsNetworkSwitcher.tsx +++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsNetworkSwitcher.tsx @@ -12,6 +12,7 @@ import { useModal, } from '@webb-tools/webb-ui-components'; import { FC, useCallback, useMemo } from 'react'; +import { twMerge } from 'tailwind-merge'; import { IS_PRODUCTION_ENV } from '../../../constants/env'; import { LS_NETWORKS } from '../../../constants/liquidStaking/constants'; @@ -47,7 +48,13 @@ const LsNetworkSwitcher: FC = ({ } = useModal(false); const base = ( -
+
@@ -56,12 +63,7 @@ const LsNetworkSwitcher: FC = ({
- {!isReadOnly && ( - - )} + {!isReadOnly && }
); diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsUnstakeCard.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsUnstakeCard.tsx index f92d7330e5..a67d998eff 100644 --- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsUnstakeCard.tsx +++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsUnstakeCard.tsx @@ -30,6 +30,7 @@ import useSearchParamSync from '../../../hooks/useSearchParamSync'; import { TxStatus } from '../../../hooks/useSubstrateTx'; import getLsProtocolDef from '../../../utils/liquidStaking/getLsProtocolDef'; import scaleAmountByPercentage from '../../../utils/scaleAmountByPercentage'; +import Container from '../../Container'; import ExchangeRateDetailItem from './ExchangeRateDetailItem'; import FeeDetailItem from './FeeDetailItem'; import LsAgnosticBalance from './LsAgnosticBalance'; @@ -193,81 +194,85 @@ const LsUnstakeCard: FC = () => { return ( <> - {/* TODO: Have a way to trigger a refresh of the amount once the wallet balance (max) button is clicked. Need to signal to the liquid staking input to update its display amount based on the `fromAmount` prop. */} - setIsSelectTokenModalOpen(true) : undefined - } - /> - - - - + + {/* TODO: Have a way to trigger a refresh of the amount once the wallet balance (max) button is clicked. Need to signal to the liquid staking input to update its display amount based on the `fromAmount` prop. */} + setIsSelectTokenModalOpen(true) + : undefined + } + /> - {/* Details */} -
- + - - -
- - + {/* Details */} +
+ + + + + +
+ + + (); - -const EARNINGS_COLUMN_IDX = 5; - -const staticColumns = [ - columnHelper.accessor('serviceType', { - header: () => , - cell: (props) => ( - - {props.getValue()} - - ), - }), - columnHelper.accessor('id', { - header: () => ( - - ), - cell: (props) => , - }), - columnHelper.accessor('participants', { - header: () => ( - - ), - cell: (props) => {props.getValue().length}, - }), - columnHelper.accessor('threshold', { - header: () => , - cell: (props) => { - const thresholds = props.getValue(); - return typeof thresholds === 'number' ? ( - {thresholds} - ) : ( - EMPTY_VALUE_PLACEHOLDER - ); - }, - }), - // TODO: hide this column because we cannot get inactive jobs for now - // columnHelper.accessor('jobsCount', { - // header: () => , - // cell: (props) => { - // const jobsCount = props.getValue(); - // return jobsCount ? : EMPTY_VALUE_PLACEHOLDER; - // }, - // }), - columnHelper.accessor('expirationBlock', { - header: () => ( - - ), - cell: (props) => ( - - ), - }), - columnHelper.accessor('id', { - id: 'details', - header: () => null, - cell: (props) => ( - - ), - }), -]; - -const ServiceTable: FC = ({ data, pageSize }) => { - const formatNativeTokenAmount = useFormatNativeTokenAmount(); - - const columns = useMemo( - () => [ - ...staticColumns.slice(0, EARNINGS_COLUMN_IDX), - columnHelper.accessor('earnings', { - header: () => ( - - ), - cell: (props) => { - const earnings = props.getValue(); - - return earnings ? ( - - ) : ( - EMPTY_VALUE_PLACEHOLDER - ); - }, - }), - ...staticColumns.slice(EARNINGS_COLUMN_IDX), - ], - [formatNativeTokenAmount], - ); - - const table = useReactTable({ - data, - columns, - initialState: { - pagination: { - pageSize, - }, - }, - filterFns: { - fuzzy: fuzzyFilter, - }, - globalFilterFn: fuzzyFilter, - getCoreRowModel: getCoreRowModel(), - getFilteredRowModel: getFilteredRowModel(), - getSortedRowModel: getSortedRowModel(), - getPaginationRowModel: getPaginationRowModel(), - }); - - return ( -
- - - ); -}; - -export default ServiceTable; diff --git a/apps/tangle-dapp/components/ServiceTable/index.ts b/apps/tangle-dapp/components/ServiceTable/index.ts deleted file mode 100644 index 4e81929eeb..0000000000 --- a/apps/tangle-dapp/components/ServiceTable/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ServiceTable } from './ServiceTable'; diff --git a/apps/tangle-dapp/components/ServiceTable/types.ts b/apps/tangle-dapp/components/ServiceTable/types.ts deleted file mode 100644 index f3f2b2f061..0000000000 --- a/apps/tangle-dapp/components/ServiceTable/types.ts +++ /dev/null @@ -1,6 +0,0 @@ -import type { Service } from '../../types'; - -export interface ServiceTableProps { - data: Service[]; - pageSize: number; -} diff --git a/apps/tangle-dapp/components/index.ts b/apps/tangle-dapp/components/index.ts index f386eb1649..9dc527bff3 100644 --- a/apps/tangle-dapp/components/index.ts +++ b/apps/tangle-dapp/components/index.ts @@ -1,5 +1,4 @@ export * from './BondedTokensBalanceInfo'; -export * from './Breadcrumbs'; export { default as BridgeTxQueueDropdown } from './BridgeTxQueueDropdown'; export { default as GlassCard } from './GlassCard'; export { default as GlassCardWithLogo } from './GlassCardWithLogo'; @@ -9,7 +8,6 @@ export * from './NominationsTable'; export * from './NominatorStatsItem'; export * from './PayoutTable'; export * from './ServicesKeyMetricItem'; -export * from './ServiceTable'; export * from './Sidebar'; export * from './skeleton'; export * from './TableStatus'; diff --git a/apps/tangle-dapp/components/tables/VaultAssets/index.tsx b/apps/tangle-dapp/components/tables/VaultAssets/index.tsx index d21a19b1a8..5fa8190cd5 100644 --- a/apps/tangle-dapp/components/tables/VaultAssets/index.tsx +++ b/apps/tangle-dapp/components/tables/VaultAssets/index.tsx @@ -11,6 +11,7 @@ import { twMerge } from 'tailwind-merge'; import formatTangleBalance from '../../../utils/formatTangleBalance'; import getTVLToDisplay from '../../../utils/getTVLToDisplay'; +import pluralize from '../../../utils/pluralize'; import type { Props, VaultAssetData } from './types'; const columnHelper = createColumnHelper(); @@ -37,7 +38,7 @@ const columns = [ }), ]; -const VaultAssetsTable: FC = ({ data = [], isShown }) => { +const VaultAssetsTable: FC = ({ data, isShown }) => { const table = useReactTable( useMemo( () => @@ -59,7 +60,7 @@ const VaultAssetsTable: FC = ({ data = [], isShown }) => { return (
{ toSubstrateAddress(context.nominatorAddress), toSubstrateAddress(context.bouncerAddress), context.name, + context.iconUrl ?? null, ); }, []); diff --git a/apps/tangle-dapp/data/restake/useRestakeAssetMap.ts b/apps/tangle-dapp/data/restake/useRestakeAssetMap.ts index 80cf4a4d19..3980f2a761 100644 --- a/apps/tangle-dapp/data/restake/useRestakeAssetMap.ts +++ b/apps/tangle-dapp/data/restake/useRestakeAssetMap.ts @@ -5,12 +5,6 @@ import { useObservableState } from 'observable-hooks'; import useRestakeAssetIds from './useRestakeAssetIds'; -/** - * Hook to retrieve the asset map for restaking. - * @returns - * - `assetMap`: The asset map. - * - `assetMap$`: The observable for the asset map. - */ export default function useRestakeAssetMap() { const { apiRx } = usePolkadotApi(); const { activeChain } = useWebContext(); diff --git a/apps/tangle-dapp/data/restake/useRestakeDelegatorInfo.ts b/apps/tangle-dapp/data/restake/useRestakeDelegatorInfo.ts index 8a68a0b42e..43d2a9e40a 100644 --- a/apps/tangle-dapp/data/restake/useRestakeDelegatorInfo.ts +++ b/apps/tangle-dapp/data/restake/useRestakeDelegatorInfo.ts @@ -12,12 +12,6 @@ import { map, of, switchMap } from 'rxjs'; import useSubstrateAddress from '../../hooks/useSubstrateAddress'; import type { DelegatorInfo } from '../../types/restake'; -/** - * Hook to retrieve the delegator info for restaking. - * @returns - * - `delegatorInfo`: The delegator info. - * - `delegatorInfo$`: The observable for the delegator info. - */ export default function useRestakeDelegatorInfo() { const activeAddress = useSubstrateAddress(); @@ -132,9 +126,7 @@ function getStatus( ): DelegatorInfo['status'] { if (status.isActive) { return 'Active'; - } - - if (status.isLeavingScheduled) { + } else if (status.isLeavingScheduled) { return { LeavingScheduled: status.asLeavingScheduled.toNumber(), }; diff --git a/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/index.tsx b/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/index.tsx index 9679f953fe..2eddd95d90 100644 --- a/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/index.tsx +++ b/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/index.tsx @@ -134,10 +134,9 @@ const TriggerButton: FC = ({ disabled={isLoading} className={twMerge( 'rounded-lg border-2 p-2', - 'bg-mono-0/10 border-mono-60', - 'hover:bg-mono-0/30', - 'dark:bg-mono-0/5 dark:border-mono-140', - 'dark:hover:bg-mono-0/10', + 'bg-mono-0/10 dark:bg-mono-0/5', + 'hover:bg-mono-200 dark:hover:bg-mono-0/10', + 'border-mono-60 dark:border-mono-140', 'flex items-center gap-2', className, )} diff --git a/libs/webb-ui-components/src/components/Modal/ModalContent.tsx b/libs/webb-ui-components/src/components/Modal/ModalContent.tsx index c69c126e78..05f735bb42 100644 --- a/libs/webb-ui-components/src/components/Modal/ModalContent.tsx +++ b/libs/webb-ui-components/src/components/Modal/ModalContent.tsx @@ -79,6 +79,8 @@ export const ModalContent = forwardRef( forceMount {...props} className={twMerge( + // Prevent the focus border from showing. + 'focus:outline-none', 'fixed z-50 w-full', 'bg-mono-0 dark:bg-mono-180 rounded-2xl', '-translate-x-1/2 left-1/2', diff --git a/libs/webb-ui-components/src/components/SkeletonLoader/SkeletonLoader.tsx b/libs/webb-ui-components/src/components/SkeletonLoader/SkeletonLoader.tsx index 8bc943ef4b..ea372c9b0a 100644 --- a/libs/webb-ui-components/src/components/SkeletonLoader/SkeletonLoader.tsx +++ b/libs/webb-ui-components/src/components/SkeletonLoader/SkeletonLoader.tsx @@ -8,15 +8,15 @@ const SkeletonLoader: FC = ({ size = 'md', className, }) => { - const baseClassNames = - 'animate-pulse bg-slate-200 dark:bg-mono-160 w-full rounded-md'; - - const classNames = twMerge( - baseClassNames, - getSkeletonClassNamesBySize(size), - className, + return ( +
); - return
; }; export default SkeletonLoader; diff --git a/libs/webb-ui-components/src/components/WalletConnectionCard/WalletConnectionCard.tsx b/libs/webb-ui-components/src/components/WalletConnectionCard/WalletConnectionCard.tsx index f8fb3ea4ed..68e0614f35 100644 --- a/libs/webb-ui-components/src/components/WalletConnectionCard/WalletConnectionCard.tsx +++ b/libs/webb-ui-components/src/components/WalletConnectionCard/WalletConnectionCard.tsx @@ -1,18 +1,14 @@ 'use client'; import { Wallet } from '@webb-tools/dapp-config'; -import { Close, Spinner, WalletLineIcon } from '@webb-tools/icons'; +import { Spinner, WalletLineIcon } from '@webb-tools/icons'; import { FC, cloneElement, forwardRef, useMemo } from 'react'; import { twMerge } from 'tailwind-merge'; -import useIsBreakpoint from '../../hooks/useIsBreakpoint'; import { PropsOf } from '../../types'; import { Typography } from '../../typography'; import { ListItem } from '../ListCard/ListItem'; import { Button } from '../buttons'; import { WalletConnectionCardProps } from './types'; -import { ModalTitle } from '../Modal/ModalTitle'; -import { DialogClose } from '@radix-ui/react-dialog'; -import { ModalDescription } from '../Modal/ModalDescription'; export const WalletConnectionCard = forwardRef< HTMLDivElement, @@ -23,7 +19,7 @@ export const WalletConnectionCard = forwardRef< className, connectingWalletId, errorBtnText = 'Try Again', - errorMessage = 'Connection Failed! Please try again.', + errorMessage = 'Connection failed, please try again.', failedWalletId, onWalletSelect, onClose, @@ -37,8 +33,6 @@ export const WalletConnectionCard = forwardRef< }, ref, ) => { - const isDesktop = useIsBreakpoint('md'); - const connectingWallet = useMemo(() => { if (!connectingWalletId) { return; @@ -55,123 +49,40 @@ export const WalletConnectionCard = forwardRef< return wallets.find((wallet) => wallet.id === failedWalletId); }, [failedWalletId, wallets]); - if (isDesktop) { - return ( -
-
-
- - - Connect a Wallet - - - - - Select a wallet from the list below - -
- -
- - {/** Wallet frame */} -
- {/** Top */} -
- - - -
- - {/** Content */} -
- -
- - {/** Bottom */} - -
-
- ); - } - return (
-
-
- - - Connect a Wallet - - - - - Select a wallet from the list below - -
- - - - +
+
- {!failedWallet && !connectingWallet ? ( - + {/** Content */} + - ) : ( -
- -
- )} - + {/** Bottom */} + +
); }, @@ -302,7 +213,7 @@ const WalletList: FC< } > = ({ wallets, onWalletSelect, className }) => { return ( -
    +
      {wallets.map((wallet) => ( = ({ isOpen={isModalOpen} onCloseAutoFocus={() => resetState()} onInteractOutside={() => handleOpenChange(false)} + className="overflow-hidden min-h-[450px]" > + handleOpenChange(false)} + className="border-b border-mono-40 dark:border-mono-160 pb-4" + > + Connect Wallet + + From f9bac33ea33b54fc216e32fbf748428384be7a77 Mon Sep 17 00:00:00 2001 From: yurixander <101931215+yurixander@users.noreply.github.com> Date: Sat, 23 Nov 2024 16:29:33 +0100 Subject: [PATCH 12/22] style(tangle-dapp): Fix connect wallet responsiveness --- .../components/WalletConnectionCard/WalletConnectionCard.tsx | 4 ++-- .../src/components/WalletModal/WalletModal.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/libs/webb-ui-components/src/components/WalletConnectionCard/WalletConnectionCard.tsx b/libs/webb-ui-components/src/components/WalletConnectionCard/WalletConnectionCard.tsx index 68e0614f35..455e343e2f 100644 --- a/libs/webb-ui-components/src/components/WalletConnectionCard/WalletConnectionCard.tsx +++ b/libs/webb-ui-components/src/components/WalletConnectionCard/WalletConnectionCard.tsx @@ -58,12 +58,12 @@ export const WalletConnectionCard = forwardRef< )} ref={ref} > -
      +
      {/** Wallet frame */} -
      +
      {/** Content */} = ({ isOpen={isModalOpen} onCloseAutoFocus={() => resetState()} onInteractOutside={() => handleOpenChange(false)} - className="overflow-hidden min-h-[450px]" + className="overflow-hidden" > handleOpenChange(false)} From c77c33a3fef205007663d7b2c264844f70b50073 Mon Sep 17 00:00:00 2001 From: yurixander <101931215+yurixander@users.noreply.github.com> Date: Sat, 23 Nov 2024 19:21:46 +0100 Subject: [PATCH 13/22] style(tangle-dapp): Theme fixes --- apps/tangle-dapp/app/claim/layout.tsx | 2 +- .../app/restake/deposit/SourceChainInput.tsx | 2 +- .../app/restake/stake/StakeInput.tsx | 2 +- apps/tangle-dapp/app/restake/unstake/page.tsx | 2 +- .../tangle-dapp/app/restake/withdraw/page.tsx | 2 +- apps/tangle-dapp/components/Container.tsx | 5 ++++- .../restake => components}/ErrorMessage.tsx | 0 apps/tangle-dapp/components/InputWrapper.tsx | 2 +- .../stakeAndUnstake/DropdownChevronIcon.tsx | 2 +- .../LiquidStaking/stakeAndUnstake/LsInput.tsx | 8 ++----- .../stakeAndUnstake/SelectedPoolIndicator.tsx | 2 +- .../NetworkSelectorDropdown.tsx | 1 + .../NetworkSelectorDropdown/index.tsx | 16 ++++++-------- .../components/buttons/ChainOrTokenButton.tsx | 2 ++ .../src/components/buttons/WalletButton.tsx | 9 ++++---- .../src/components/buttons/types.ts | 22 ++++--------------- 16 files changed, 32 insertions(+), 47 deletions(-) rename apps/tangle-dapp/{app/restake => components}/ErrorMessage.tsx (100%) diff --git a/apps/tangle-dapp/app/claim/layout.tsx b/apps/tangle-dapp/app/claim/layout.tsx index c543553023..3555c9dba0 100644 --- a/apps/tangle-dapp/app/claim/layout.tsx +++ b/apps/tangle-dapp/app/claim/layout.tsx @@ -26,7 +26,7 @@ const Layout: FC = ({ children }) => { - + = ({ children, className }) => { return (
      diff --git a/apps/tangle-dapp/app/restake/ErrorMessage.tsx b/apps/tangle-dapp/components/ErrorMessage.tsx similarity index 100% rename from apps/tangle-dapp/app/restake/ErrorMessage.tsx rename to apps/tangle-dapp/components/ErrorMessage.tsx diff --git a/apps/tangle-dapp/components/InputWrapper.tsx b/apps/tangle-dapp/components/InputWrapper.tsx index 2ebe7b1575..4e02581b29 100644 --- a/apps/tangle-dapp/components/InputWrapper.tsx +++ b/apps/tangle-dapp/components/InputWrapper.tsx @@ -15,7 +15,7 @@ import { } from 'react'; import { twMerge } from 'tailwind-merge'; -import ErrorMessage from '../app/restake/ErrorMessage'; +import ErrorMessage from './ErrorMessage'; import InputAction from '../containers/ManageProfileModalContainer/InputAction'; import { useErrorCountContext } from '../context/ErrorsContext'; diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/DropdownChevronIcon.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/DropdownChevronIcon.tsx index 50b45b634b..c79a8cc55b 100644 --- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/DropdownChevronIcon.tsx +++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/DropdownChevronIcon.tsx @@ -14,7 +14,7 @@ const DropdownChevronIcon: FC = ({ return (
      (
      - {errorMessage !== null && ( - - * {errorMessage} - - )} + {errorMessage !== null && {errorMessage}}
      ); }, diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/SelectedPoolIndicator.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/SelectedPoolIndicator.tsx index f798f089d9..c1e9d19e9e 100644 --- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/SelectedPoolIndicator.tsx +++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/SelectedPoolIndicator.tsx @@ -23,7 +23,7 @@ const SelectedPoolIndicator: FC = ({ onClick }) => { className={twMerge( 'group flex gap-2 justify-center items-center bg-mono-40 dark:bg-mono-170 px-4 py-2 rounded-lg', onClick !== undefined && - 'cursor-pointer hover:bg-mono-20 hover:dark:bg-mono-160', + 'cursor-pointer hover:bg-mono-60 hover:hover:dark:bg-mono-160', )} > {name !== null && ( diff --git a/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/NetworkSelectorDropdown.tsx b/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/NetworkSelectorDropdown.tsx index 89adfba233..8b32145a8a 100644 --- a/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/NetworkSelectorDropdown.tsx +++ b/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/NetworkSelectorDropdown.tsx @@ -110,6 +110,7 @@ const NetworkOption: FC = ({ {name} + {tooltip !== undefined && }
      diff --git a/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/index.tsx b/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/index.tsx index 2eddd95d90..d21e909ad7 100644 --- a/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/index.tsx +++ b/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/index.tsx @@ -80,10 +80,9 @@ const NetworkSelectionButton: FC = () => {
      @@ -133,11 +132,10 @@ const TriggerButton: FC = ({ type="button" disabled={isLoading} className={twMerge( - 'rounded-lg border-2 p-2', - 'bg-mono-0/10 dark:bg-mono-0/5', - 'hover:bg-mono-200 dark:hover:bg-mono-0/10', - 'border-mono-60 dark:border-mono-140', - 'flex items-center gap-2', + 'flex items-center gap-2 rounded-lg p-2', + 'bg-transparent dark:bg-transparent', + 'hover:bg-mono-100/10 dark:hover:bg-mono-0/10', + 'border-2 border-mono-60 dark:border-mono-140', className, )} > diff --git a/libs/webb-ui-components/src/components/buttons/ChainOrTokenButton.tsx b/libs/webb-ui-components/src/components/buttons/ChainOrTokenButton.tsx index 309746dd4d..5f0b33d391 100644 --- a/libs/webb-ui-components/src/components/buttons/ChainOrTokenButton.tsx +++ b/libs/webb-ui-components/src/components/buttons/ChainOrTokenButton.tsx @@ -62,10 +62,12 @@ const ChainOrTokenButton = forwardRef< name={value} /> )} +

      {value ?? placeholder}

      + {!disabled && ( ( type="button" ref={ref} className={twMerge( - 'rounded-lg border-2 py-2 px-4 max-w-52', - 'bg-mono-0/10 border-mono-60', - 'hover:bg-mono-0/30', - 'dark:bg-mono-0/5 dark:border-mono-140', - 'dark:hover:bg-mono-0/10', + 'rounded-lg py-2 px-4 max-w-56', + 'bg-mono-0/10 dark:bg-mono-0/5', + 'hover:bg-mono-100/10 dark:hover:bg-mono-0/10', + 'border-2 border-mono-60 dark:border-mono-140', className, )} > diff --git a/libs/webb-ui-components/src/components/buttons/types.ts b/libs/webb-ui-components/src/components/buttons/types.ts index 254e4ac695..55df4559f8 100644 --- a/libs/webb-ui-components/src/components/buttons/types.ts +++ b/libs/webb-ui-components/src/components/buttons/types.ts @@ -176,30 +176,21 @@ export type ButtonClassNames = { } & Record; }; -/** - * The ChainOrTokenButtonProps component props - */ export type ChainOrTokenButtonProps = PropsOf<'button'> & { + placeholder?: string; + iconClassName?: string; + iconType: 'chain' | 'token'; + /** * The text to display in the button */ value?: string; - /** - * The placeholder to display when the value is not set - */ - placeholder?: string; - /** * The status of the button */ status?: StatusIndicatorProps['variant']; - /** - * The className of the icon - */ - iconClassName?: string; - /** * The className of the chain name */ @@ -209,11 +200,6 @@ export type ChainOrTokenButtonProps = PropsOf<'button'> & { * The className of the dropdown icon */ dropdownClassName?: string; - - /** - * The icon's type - */ - iconType: 'chain' | 'token'; }; /** From 8f57947a0601f01a42ef73acd8b9fa72b59893c1 Mon Sep 17 00:00:00 2001 From: yurixander <101931215+yurixander@users.noreply.github.com> Date: Sat, 23 Nov 2024 22:13:05 +0100 Subject: [PATCH 14/22] style(tangle-dapp): Improve colors --- apps/tangle-dapp/app/bridge/lib/balance/substrate.ts | 4 ++-- .../LiquidStaking/stakeAndUnstake/LsAgnosticBalance.tsx | 2 +- apps/tangle-dapp/components/account/ActionItem.tsx | 4 +++- apps/tangle-dapp/components/account/Balance.tsx | 2 +- .../containers/BalancesTableContainer/BalanceAction.tsx | 2 +- apps/tangle-dapp/data/balances/useBalances.ts | 4 ++-- apps/tangle-dapp/utils/polkadot/balance.ts | 2 +- .../src/components/HiddenValue/HiddenValueEye.tsx | 7 +++++-- .../src/components/SideBar/StyledItem.tsx | 2 +- 9 files changed, 17 insertions(+), 12 deletions(-) diff --git a/apps/tangle-dapp/app/bridge/lib/balance/substrate.ts b/apps/tangle-dapp/app/bridge/lib/balance/substrate.ts index dda457210f..7bb33285e7 100644 --- a/apps/tangle-dapp/app/bridge/lib/balance/substrate.ts +++ b/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( diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsAgnosticBalance.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsAgnosticBalance.tsx index 0bf649d70c..1cab888baf 100644 --- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsAgnosticBalance.tsx +++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsAgnosticBalance.tsx @@ -97,7 +97,7 @@ const LsAgnosticBalance: FC = ({ )} {formattedBalance === null ? ( - + ) : ( = ({
      diff --git a/apps/tangle-dapp/components/account/Balance.tsx b/apps/tangle-dapp/components/account/Balance.tsx index 8fa3ab2bfd..7c068eb3bc 100644 --- a/apps/tangle-dapp/components/account/Balance.tsx +++ b/apps/tangle-dapp/components/account/Balance.tsx @@ -32,7 +32,7 @@ const Balance: FC = () => { Transferable Balance - +
      diff --git a/apps/tangle-dapp/containers/BalancesTableContainer/BalanceAction.tsx b/apps/tangle-dapp/containers/BalancesTableContainer/BalanceAction.tsx index 6faf35f2fe..f9f97aa781 100644 --- a/apps/tangle-dapp/containers/BalancesTableContainer/BalanceAction.tsx +++ b/apps/tangle-dapp/containers/BalancesTableContainer/BalanceAction.tsx @@ -29,7 +29,7 @@ const BalanceAction: FC<{ const iconButton = ( { // Note that without the null/undefined check, an error // reports that `num` is undefined for some reason. Might be // a gap in the type definitions of PolkadotJS. - const transferable = calculateTransferrableBalance(data); + const transferable = calculateTransferableBalance(data); return { free: data.free.toBn(), diff --git a/apps/tangle-dapp/utils/polkadot/balance.ts b/apps/tangle-dapp/utils/polkadot/balance.ts index 2d043f2299..66cd8d5b6e 100644 --- a/apps/tangle-dapp/utils/polkadot/balance.ts +++ b/apps/tangle-dapp/utils/polkadot/balance.ts @@ -2,7 +2,7 @@ import { PalletBalancesAccountData } from '@polkadot/types/lookup'; import { BN, BN_ZERO, bnMax } from '@polkadot/util'; // TODO: Update calculation with provided definition from Polkadot docs: https://wiki.polkadot.network/docs/learn-account-balances -export function calculateTransferrableBalance( +export function calculateTransferableBalance( accInfo: PalletBalancesAccountData, ) { const maxFrozen = bnMax( diff --git a/libs/webb-ui-components/src/components/HiddenValue/HiddenValueEye.tsx b/libs/webb-ui-components/src/components/HiddenValue/HiddenValueEye.tsx index eb686c3a61..a1468c5f53 100644 --- a/libs/webb-ui-components/src/components/HiddenValue/HiddenValueEye.tsx +++ b/libs/webb-ui-components/src/components/HiddenValue/HiddenValueEye.tsx @@ -3,11 +3,14 @@ import { type FC } from 'react'; import { IconButton } from '../buttons'; import { useHiddenValue } from '../../hooks'; -export const HiddenValueEye: FC = () => { +export const HiddenValueEye: FC<{ className?: string }> = ({ className }) => { const [isHiddenValue, setIsHiddenValue] = useHiddenValue(); return ( - setIsHiddenValue((prev) => !prev)}> + setIsHiddenValue((prev) => !prev)} + > {isHiddenValue ? : } ); diff --git a/libs/webb-ui-components/src/components/SideBar/StyledItem.tsx b/libs/webb-ui-components/src/components/SideBar/StyledItem.tsx index 9bb90f0d81..c1728185bd 100644 --- a/libs/webb-ui-components/src/components/SideBar/StyledItem.tsx +++ b/libs/webb-ui-components/src/components/SideBar/StyledItem.tsx @@ -27,7 +27,7 @@ const StyledItem = forwardRef( ? 'text-mono-200 dark:text-mono-0' : 'text-mono-100 dark:text-mono-120', isExpanded && 'hover:bg-mono-20 dark:hover:bg-mono-190', - isExpanded ? 'justify-between px-2 py-3' : 'justify-center', + isExpanded ? 'justify-between px-4 py-3' : 'justify-center', isActive && (subItemsCount === 0 || !isExpanded) && 'bg-mono-20 dark:bg-mono-190', From 9813bfb91ac668ef6c15e6ced5072e9eb6ff1531 Mon Sep 17 00:00:00 2001 From: yurixander <101931215+yurixander@users.noreply.github.com> Date: Sat, 23 Nov 2024 22:55:14 +0100 Subject: [PATCH 15/22] fix(tangle-dapp): Fix sidebar toggle bug --- .../stakeAndUnstake/LsSelectLstModal.tsx | 32 ++++++++++++------- .../stakeAndUnstake/LsStakeCard.tsx | 2 +- .../{EmptyList.tsx => ListStatus.tsx} | 6 ++-- .../ConnectWalletButton/WalletDropdown.tsx | 1 + .../NetworkSelectorDropdown.tsx | 21 +++++++----- 5 files changed, 39 insertions(+), 23 deletions(-) rename apps/tangle-dapp/components/{EmptyList.tsx => ListStatus.tsx} (83%) diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsSelectLstModal.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsSelectLstModal.tsx index 29aebe5383..3064fa21f3 100644 --- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsSelectLstModal.tsx +++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsSelectLstModal.tsx @@ -18,12 +18,12 @@ import { import formatBn from '../../../utils/formatBn'; import formatFractional from '../../../utils/formatFractional'; import getLsProtocolDef from '../../../utils/liquidStaking/getLsProtocolDef'; -import EmptyList from '../../EmptyList'; import { ListCardWrapper } from '../../Lists/ListCardWrapper'; +import ListStatus from '../../ListStatus'; import SkeletonRows from '../SkeletonRows'; export type LsSelectLstModalProps = { - pools: LsPool[] | null; + pools: LsPool[] | Error | null; isOpen: boolean; setIsOpen: (isOpen: boolean) => void; onSelect: (lsPoolId: number) => void; @@ -40,8 +40,8 @@ const LsSelectLstModal: FC = ({ const [searchQuery, setSearchQuery] = useState(''); const filteredPools = useMemo(() => { - if (pools === null) { - return null; + if (!Array.isArray(pools)) { + return pools; } return pools.filter((pool) => { @@ -53,8 +53,8 @@ const LsSelectLstModal: FC = ({ // Sort pools by highest TVL in descending order. const sortedPools = useMemo(() => { - if (filteredPools === null) { - return null; + if (!Array.isArray(filteredPools)) { + return filteredPools; } return filteredPools.toSorted((a, b) => { @@ -70,7 +70,7 @@ const LsSelectLstModal: FC = ({ size="md" className={twMerge( 'max-h-[600px]', - pools !== null && pools.length > 0 && 'h-full', + Array.isArray(pools) && pools.length > 0 && 'h-full', )} > = ({
        - {pools !== null && pools.length === 0 ? ( - + ) : Array.isArray(sortedPools) && + sortedPools.length === 0 && + searchQuery.length > 0 ? ( + + ) : Array.isArray(sortedPools) && sortedPools.length === 0 ? ( + ) : ( diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx index 071442d370..e78a1bda1d 100644 --- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx +++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx @@ -208,7 +208,7 @@ const LsStakeCard: FC = () => { const allPools = useMemo(() => { if (!(lsPools instanceof Map)) { - return null; + return lsPools; } return Array.from(lsPools.values()); diff --git a/apps/tangle-dapp/components/EmptyList.tsx b/apps/tangle-dapp/components/ListStatus.tsx similarity index 83% rename from apps/tangle-dapp/components/EmptyList.tsx rename to apps/tangle-dapp/components/ListStatus.tsx index 57df086b26..f13e34254a 100644 --- a/apps/tangle-dapp/components/EmptyList.tsx +++ b/apps/tangle-dapp/components/ListStatus.tsx @@ -2,13 +2,13 @@ import { Typography } from '@webb-tools/webb-ui-components'; import { FC } from 'react'; import { twMerge } from 'tailwind-merge'; -export type EmptyListProps = { +export type ListStatusProps = { className?: string; title: string; description: string; }; -const EmptyList: FC = ({ title, description, className }) => { +const ListStatus: FC = ({ title, description, className }) => { return (
        = ({ title, description, className }) => { ); }; -export default EmptyList; +export default ListStatus; diff --git a/libs/tangle-shared-ui/src/components/ConnectWalletButton/WalletDropdown.tsx b/libs/tangle-shared-ui/src/components/ConnectWalletButton/WalletDropdown.tsx index 237166e455..b8d359934d 100644 --- a/libs/tangle-shared-ui/src/components/ConnectWalletButton/WalletDropdown.tsx +++ b/libs/tangle-shared-ui/src/components/ConnectWalletButton/WalletDropdown.tsx @@ -98,6 +98,7 @@ const WalletDropdown: FC<{
      +
      diff --git a/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/NetworkSelectorDropdown.tsx b/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/NetworkSelectorDropdown.tsx index 8b32145a8a..2428d12aae 100644 --- a/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/NetworkSelectorDropdown.tsx +++ b/libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/NetworkSelectorDropdown.tsx @@ -104,17 +104,22 @@ const NetworkOption: FC = ({ leftIcon={} onClick={handleClick} className="flex justify-between w-full py-3" - isActive={isSelected} > -
      - - {name} - +
      +
      + + {name} + - {tooltip !== undefined && } -
      + {tooltip !== undefined && } +
      - {isSelected && } + {isSelected && } +
      ); }; From 21fd882074737e36f624fa3892f683c72b8bc913 Mon Sep 17 00:00:00 2001 From: yurixander <101931215+yurixander@users.noreply.github.com> Date: Sun, 24 Nov 2024 18:04:56 +0100 Subject: [PATCH 16/22] refactor(tangle-dapp): Minor changes --- .../components/GlassCardWithLogo.tsx | 2 +- .../components/HeaderChip/ChipText.tsx | 2 +- .../components/account/Actions.tsx | 1 - .../src/components/Modal/Modal.tsx | 8 ++--- .../SkeletonLoader/SkeletonLoader.tsx | 36 ++++++++++++++++--- .../src/components/SkeletonLoader/types.ts | 14 -------- .../src/components/SkeletonLoader/utils.ts | 26 -------------- 7 files changed, 38 insertions(+), 51 deletions(-) delete mode 100644 libs/webb-ui-components/src/components/SkeletonLoader/types.ts delete mode 100644 libs/webb-ui-components/src/components/SkeletonLoader/utils.ts diff --git a/apps/tangle-dapp/components/GlassCardWithLogo.tsx b/apps/tangle-dapp/components/GlassCardWithLogo.tsx index d45fc275e8..cc7a6c7c44 100644 --- a/apps/tangle-dapp/components/GlassCardWithLogo.tsx +++ b/apps/tangle-dapp/components/GlassCardWithLogo.tsx @@ -21,7 +21,7 @@ const GlassCardWithLogo = forwardRef, GlassCardWithLogoProps>( > {children} - + ); }, diff --git a/apps/tangle-dapp/components/HeaderChip/ChipText.tsx b/apps/tangle-dapp/components/HeaderChip/ChipText.tsx index a373fa788d..462b57415f 100644 --- a/apps/tangle-dapp/components/HeaderChip/ChipText.tsx +++ b/apps/tangle-dapp/components/HeaderChip/ChipText.tsx @@ -20,7 +20,7 @@ const ChipText = ({ label }: Props) => { > {label}:{' '} {isLoading ? ( - + ) : error ? ( 'Error' ) : data === null ? null : ( diff --git a/apps/tangle-dapp/components/account/Actions.tsx b/apps/tangle-dapp/components/account/Actions.tsx index a0247a4a52..9e3dfa0fe6 100644 --- a/apps/tangle-dapp/components/account/Actions.tsx +++ b/apps/tangle-dapp/components/account/Actions.tsx @@ -126,7 +126,6 @@ const Actions: FC = () => {
      - {/* TODO: Might be better to use a hook instead of doing it this way. */}
      = ({ +export const Modal: FC = ({ children, open, defaultOpen = false, @@ -21,8 +21,8 @@ export const Modal: FC = ({ ); return ( - + {children} - + ); }; diff --git a/libs/webb-ui-components/src/components/SkeletonLoader/SkeletonLoader.tsx b/libs/webb-ui-components/src/components/SkeletonLoader/SkeletonLoader.tsx index ea372c9b0a..490de23bfd 100644 --- a/libs/webb-ui-components/src/components/SkeletonLoader/SkeletonLoader.tsx +++ b/libs/webb-ui-components/src/components/SkeletonLoader/SkeletonLoader.tsx @@ -1,18 +1,46 @@ import { type FC } from 'react'; import { twMerge } from 'tailwind-merge'; -import { getSkeletonClassNamesBySize } from './utils'; -import type { SkeletonLoaderProps } from './types'; +export type SkeletonSize = 'md' | 'lg' | 'xl'; + +export interface SkeletonLoaderProps { + /** + * The icon size, possible values: `md` (16px), `lg` (24px), `xl` (48px) + * @default "md" + */ + size?: SkeletonSize; + + className?: string; + + as?: 'div' | 'span'; +} + +export function getHeightBySize(size: SkeletonSize) { + switch (size) { + case 'xl': { + return 'h-12' as const; + } + case 'lg': { + return 'h-6' as const; + } + case 'md': { + return 'h-4' as const; + } + } +} const SkeletonLoader: FC = ({ size = 'md', className, + as = 'div', }) => { + const Component = as; + return ( -
      diff --git a/libs/webb-ui-components/src/components/SkeletonLoader/types.ts b/libs/webb-ui-components/src/components/SkeletonLoader/types.ts deleted file mode 100644 index 3ffaa92866..0000000000 --- a/libs/webb-ui-components/src/components/SkeletonLoader/types.ts +++ /dev/null @@ -1,14 +0,0 @@ -export type SkeletonSize = 'md' | 'lg' | 'xl'; - -export interface SkeletonLoaderProps { - /** - * The icon size, possible values: `md` (16px), `lg` (24px), `xl` (48px) - * @default "md" - */ - size?: SkeletonSize; - - /** - * The optional class name for overriding the style of the skeleton - */ - className?: string; -} diff --git a/libs/webb-ui-components/src/components/SkeletonLoader/utils.ts b/libs/webb-ui-components/src/components/SkeletonLoader/utils.ts deleted file mode 100644 index 2b7ed094f2..0000000000 --- a/libs/webb-ui-components/src/components/SkeletonLoader/utils.ts +++ /dev/null @@ -1,26 +0,0 @@ -import type { SkeletonSize } from './types'; - -/** - * Get the icon size in pixel based on text - * @param size Represent the skeleton size - * @returns The height of the skeleton - */ -export function getSkeletonClassNamesBySize(size: SkeletonSize) { - switch (size) { - case 'xl': { - return 'h-12' as const; - } - - case 'lg': { - return 'h-6' as const; - } - - case 'md': { - return 'h-4' as const; - } - - default: { - throw new Error('Unknown skeleton size'); - } - } -} From 7a1b38527c32a68a5cb224eb1b5ed32254241f14 Mon Sep 17 00:00:00 2001 From: yurixander <101931215+yurixander@users.noreply.github.com> Date: Sun, 24 Nov 2024 19:18:32 +0100 Subject: [PATCH 17/22] refactor(tangle-dapp): Reuse `Card` component --- apps/tangle-dapp/app/claim/layout.tsx | 6 +- .../nomination/[validatorAddress]/loading.tsx | 13 +- .../app/restake/deposit/DepositForm.tsx | 6 +- .../operators/[address]/OperatorInfoCard.tsx | 12 +- .../[address]/RegisteredBlueprintsCard.tsx | 9 +- apps/tangle-dapp/app/restake/page.tsx | 17 +- apps/tangle-dapp/components/Container.tsx | 24 --- apps/tangle-dapp/components/GlassCard.tsx | 27 ---- .../components/GlassCardWithLogo.tsx | 44 +++-- .../stakeAndUnstake/LsStakeCard.tsx | 6 +- .../stakeAndUnstake/LsUnstakeCard.tsx | 7 +- .../UnstakeRequestsTable.tsx | 8 +- .../components/account/AccountSummaryCard.tsx | 34 ++-- .../components/account/Actions.tsx | 152 ++++++++---------- .../components/account/PillCard.tsx | 14 +- apps/tangle-dapp/components/index.ts | 1 - .../BalancesTableContainer.tsx | 7 +- .../KeyStatsContainer/KeyStatsContainer.tsx | 7 +- .../NominatorStatsContainer.tsx | 27 ++-- .../src/components/Card/Card.tsx | 51 ++++-- .../src/components/Card/types.ts | 6 - 21 files changed, 232 insertions(+), 246 deletions(-) delete mode 100644 apps/tangle-dapp/components/Container.tsx delete mode 100644 apps/tangle-dapp/components/GlassCard.tsx delete mode 100644 libs/webb-ui-components/src/components/Card/types.ts diff --git a/apps/tangle-dapp/app/claim/layout.tsx b/apps/tangle-dapp/app/claim/layout.tsx index 3555c9dba0..f6d590ba2b 100644 --- a/apps/tangle-dapp/app/claim/layout.tsx +++ b/apps/tangle-dapp/app/claim/layout.tsx @@ -1,10 +1,10 @@ +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'; import { Metadata } from 'next'; import type { FC, PropsWithChildren } from 'react'; -import { GlassCard } from '../../components'; import faqItems from '../../constants/faq'; import { OpenGraphPageImageUrl } from '../../constants/openGraph'; import createPageMetadata from '../../utils/createPageMetadata'; @@ -21,7 +21,7 @@ export const metadata: Metadata = createPageMetadata({ const Layout: FC = ({ children }) => { return ( - + {children} @@ -32,7 +32,7 @@ const Layout: FC = ({ children }) => { answerClassName="[&_a:hover]:text-mono-100 [&_a]:underline" /> - + ); }; diff --git a/apps/tangle-dapp/app/nomination/[validatorAddress]/loading.tsx b/apps/tangle-dapp/app/nomination/[validatorAddress]/loading.tsx index 9d08529d53..eb986b6de8 100644 --- a/apps/tangle-dapp/app/nomination/[validatorAddress]/loading.tsx +++ b/apps/tangle-dapp/app/nomination/[validatorAddress]/loading.tsx @@ -1,7 +1,12 @@ import { Spinner } from '@webb-tools/icons'; -import { SkeletonLoader, Typography } from '@webb-tools/webb-ui-components'; +import { + Card, + CardVariant, + SkeletonLoader, + Typography, +} from '@webb-tools/webb-ui-components'; -import { GlassCard, GlassCardWithLogo } from '../../../components'; +import { GlassCardWithLogo } from '../../../components'; import ValueSkeleton from './ValueSkeleton'; export default function Loading() { @@ -35,7 +40,7 @@ export default function Loading() {
      - + Role Distribution @@ -43,7 +48,7 @@ export default function Loading() {
      -       +
      diff --git a/apps/tangle-dapp/app/restake/deposit/DepositForm.tsx b/apps/tangle-dapp/app/restake/deposit/DepositForm.tsx index 10f4d009dc..8b99bfe529 100644 --- a/apps/tangle-dapp/app/restake/deposit/DepositForm.tsx +++ b/apps/tangle-dapp/app/restake/deposit/DepositForm.tsx @@ -7,6 +7,7 @@ import isDefined from '@webb-tools/dapp-types/utils/isDefined'; import { calculateTypedChainId } from '@webb-tools/sdk-core'; import useRestakeOperatorMap from '@webb-tools/tangle-shared-ui/data/restake/useRestakeOperatorMap'; import { useRpcSubscription } from '@webb-tools/tangle-shared-ui/hooks/usePolkadotApi'; +import { Card } from '@webb-tools/webb-ui-components'; import { type TokenListCardProps } from '@webb-tools/webb-ui-components/components/ListCard/types'; import { Modal } from '@webb-tools/webb-ui-components/components/Modal'; import { useModal } from '@webb-tools/webb-ui-components/hooks/useModal'; @@ -25,7 +26,6 @@ import useRestakeTxEventHandlersWithNoti, { type Props, } from '../../..//data/restake/useRestakeTxEventHandlersWithNoti'; import AvatarWithText from '../../../components/AvatarWithText'; -import Container from '../../../components/Container'; import { ChainList } from '../../../components/Lists/ChainList'; import { SUPPORTED_RESTAKE_DEPOSIT_TYPED_CHAIN_IDS } from '../../../constants/restake'; import { useRestakeContext } from '../../../context/RestakeContext'; @@ -279,7 +279,7 @@ const DepositForm = ({ ...props }: DepositFormProps) => { ); return ( - +
      @@ -336,7 +336,7 @@ const DepositForm = ({ ...props }: DepositFormProps) => { - + ); }; diff --git a/apps/tangle-dapp/app/restake/operators/[address]/OperatorInfoCard.tsx b/apps/tangle-dapp/app/restake/operators/[address]/OperatorInfoCard.tsx index 3e319b0400..6fa724c998 100644 --- a/apps/tangle-dapp/app/restake/operators/[address]/OperatorInfoCard.tsx +++ b/apps/tangle-dapp/app/restake/operators/[address]/OperatorInfoCard.tsx @@ -7,6 +7,7 @@ import type { OperatorMetadata, } from '@webb-tools/tangle-shared-ui/types/restake'; import { getAccountInfo } from '@webb-tools/tangle-shared-ui/utils/polkadot/identity'; +import { Card, CardVariant } from '@webb-tools/webb-ui-components'; import { Chip } from '@webb-tools/webb-ui-components/components/Chip'; import InfoIconWithTooltip from '@webb-tools/webb-ui-components/components/IconWithTooltip/InfoIconWithTooltip'; import { KeyValueWithButton } from '@webb-tools/webb-ui-components/components/KeyValueWithButton'; @@ -19,12 +20,11 @@ import useSWRImmutable from 'swr/immutable'; import { twMerge } from 'tailwind-merge'; import AvatarWithText from '../../../../components/AvatarWithText'; -import GlassCard from '../../../../components/GlassCard'; import ValidatorSocials from '../../../../components/ValidatorSocials'; import type { DelegatorInfo } from '../../../../types/restake'; import getTVLToDisplay from '../../../../utils/getTVLToDisplay'; -interface Props extends Partial> { +interface Props extends Partial> { operatorAddress: string; operatorData: OperatorMetadata | undefined; operatorMap: OperatorMap; @@ -104,7 +104,11 @@ const OperatorInfoCard: FC = ({ }, [operatorInfo?.email, operatorInfo?.twitter, operatorInfo?.web]); return ( - +
      = ({
      -       + ); }; diff --git a/apps/tangle-dapp/app/restake/operators/[address]/RegisteredBlueprintsCard.tsx b/apps/tangle-dapp/app/restake/operators/[address]/RegisteredBlueprintsCard.tsx index 364daba7ba..80a92df65c 100644 --- a/apps/tangle-dapp/app/restake/operators/[address]/RegisteredBlueprintsCard.tsx +++ b/apps/tangle-dapp/app/restake/operators/[address]/RegisteredBlueprintsCard.tsx @@ -1,6 +1,7 @@ 'use client'; import { ExternalLinkLine, GithubFill } from '@webb-tools/icons'; +import { Card, CardVariant } from '@webb-tools/webb-ui-components'; import { Avatar } from '@webb-tools/webb-ui-components/components/Avatar'; import { ScrollArea } from '@webb-tools/webb-ui-components/components/ScrollArea'; import SkeletonLoader from '@webb-tools/webb-ui-components/components/SkeletonLoader'; @@ -10,10 +11,9 @@ import Link from 'next/link'; import type { ComponentProps, FC } from 'react'; import { twMerge } from 'tailwind-merge'; -import GlassCard from '../../../../components/GlassCard'; import { PagePath } from '../../../../types'; -interface Props extends Partial> { +interface Props extends Partial> { isLoading?: boolean; error?: string | null; blueprints: @@ -47,7 +47,8 @@ const RegisteredBlueprintsCard: FC = ({ const isEmpty = blueprints.length === 0; return ( - @@ -127,7 +128,7 @@ const RegisteredBlueprintsCard: FC = ({
    )} - + ); }; diff --git a/apps/tangle-dapp/app/restake/page.tsx b/apps/tangle-dapp/app/restake/page.tsx index 98ef6db5ec..9849306f87 100644 --- a/apps/tangle-dapp/app/restake/page.tsx +++ b/apps/tangle-dapp/app/restake/page.tsx @@ -1,12 +1,15 @@ 'use client'; import useRestakeOperatorMap from '@webb-tools/tangle-shared-ui/data/restake/useRestakeOperatorMap'; -import { TANGLE_DOCS_RESTAKING_URL } from '@webb-tools/webb-ui-components'; +import { + Card, + CardVariant, + TANGLE_DOCS_RESTAKING_URL, +} from '@webb-tools/webb-ui-components'; import Button from '@webb-tools/webb-ui-components/components/buttons/Button'; import { Typography } from '@webb-tools/webb-ui-components/typography/Typography'; import { twMerge } from 'tailwind-merge'; -import GlassCard from '../../components/GlassCard'; import StatItem from '../../components/StatItem'; import useRestakeDelegatorInfo from '../../data/restake/useRestakeDelegatorInfo'; import useRestakeTVL from '../../data/restake/useRestakeTVL'; @@ -45,7 +48,8 @@ export default function RestakePage() { <>
    -
    - + - Read more - +
    ; - -const Container: FC = ({ children, className }) => { - return ( -
    - {children} -
    - ); -}; - -export default Container; diff --git a/apps/tangle-dapp/components/GlassCard.tsx b/apps/tangle-dapp/components/GlassCard.tsx deleted file mode 100644 index 3e87237166..0000000000 --- a/apps/tangle-dapp/components/GlassCard.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { Card } from '@webb-tools/webb-ui-components/components/Card'; -import { ComponentProps, ElementRef, forwardRef } from 'react'; -import { twMerge } from 'tailwind-merge'; - -export type GlassCardProps = ComponentProps<'div'>; - -const GlassCard = forwardRef, GlassCardProps>( - ({ children, className, ...props }, ref) => { - return ( - - {children} - - ); - }, -); - -GlassCard.displayName = 'GlassCard'; - -export default GlassCard; diff --git a/apps/tangle-dapp/components/GlassCardWithLogo.tsx b/apps/tangle-dapp/components/GlassCardWithLogo.tsx index cc7a6c7c44..dd688e31c5 100644 --- a/apps/tangle-dapp/components/GlassCardWithLogo.tsx +++ b/apps/tangle-dapp/components/GlassCardWithLogo.tsx @@ -1,32 +1,26 @@ -import { ComponentProps, type ElementRef, forwardRef } from 'react'; +import { Card, CardVariant } from '@webb-tools/webb-ui-components'; +import { FC, PropsWithChildren } from 'react'; import { twMerge } from 'tailwind-merge'; -import GlassCard from './GlassCard'; import TangleBigLogo from './TangleBigLogo'; -export type GlassCardWithLogoProps = ComponentProps<'div'>; +const GlassCardWithLogo: FC> = ({ + children, + className, +}) => { + return ( + + {children} -const GlassCardWithLogo = forwardRef, GlassCardWithLogoProps>( - ({ children, className, ...props }, ref) => { - return ( - - {children} - - - - ); - }, -); - -GlassCardWithLogo.displayName = 'GlassCardWithLogo'; + + + ); +}; export default GlassCardWithLogo; diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx index e78a1bda1d..727c3117ce 100644 --- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx +++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsStakeCard.tsx @@ -7,6 +7,7 @@ import '@webb-tools/tangle-restaking-types'; import { BN } from '@polkadot/util'; import { ArrowDownIcon } from '@webb-tools/icons'; import { LsProtocolId } from '@webb-tools/tangle-shared-ui/types/liquidStaking'; +import { Card } from '@webb-tools/webb-ui-components'; import Button from '@webb-tools/webb-ui-components/components/buttons/Button'; import { EMPTY_VALUE_PLACEHOLDER } from '@webb-tools/webb-ui-components/constants'; import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'; @@ -30,7 +31,6 @@ import useSearchParamSync from '../../../hooks/useSearchParamSync'; import { TxStatus } from '../../../hooks/useSubstrateTx'; import getLsProtocolDef from '../../../utils/liquidStaking/getLsProtocolDef'; import scaleAmountByPercentage from '../../../utils/scaleAmountByPercentage'; -import Container from '../../Container'; import DetailsContainer from '../../DetailsContainer'; import ExchangeRateDetailItem from './ExchangeRateDetailItem'; import FeeDetailItem from './FeeDetailItem'; @@ -215,7 +215,7 @@ const LsStakeCard: FC = () => { }, [lsPools]); return ( - + { setIsOpen={setIsSelectTokenModalOpen} onSelect={setLsPoolId} /> - + ); }; diff --git a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsUnstakeCard.tsx b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsUnstakeCard.tsx index a67d998eff..607fac3783 100644 --- a/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsUnstakeCard.tsx +++ b/apps/tangle-dapp/components/LiquidStaking/stakeAndUnstake/LsUnstakeCard.tsx @@ -7,7 +7,7 @@ import '@webb-tools/tangle-restaking-types'; import { BN } from '@polkadot/util'; import { ArrowDownIcon } from '@radix-ui/react-icons'; import { LsProtocolId } from '@webb-tools/tangle-shared-ui/types/liquidStaking'; -import { Button } from '@webb-tools/webb-ui-components'; +import { Button, Card } from '@webb-tools/webb-ui-components'; import { EMPTY_VALUE_PLACEHOLDER } from '@webb-tools/webb-ui-components/constants'; import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { z } from 'zod'; @@ -30,7 +30,6 @@ import useSearchParamSync from '../../../hooks/useSearchParamSync'; import { TxStatus } from '../../../hooks/useSubstrateTx'; import getLsProtocolDef from '../../../utils/liquidStaking/getLsProtocolDef'; import scaleAmountByPercentage from '../../../utils/scaleAmountByPercentage'; -import Container from '../../Container'; import ExchangeRateDetailItem from './ExchangeRateDetailItem'; import FeeDetailItem from './FeeDetailItem'; import LsAgnosticBalance from './LsAgnosticBalance'; @@ -194,7 +193,7 @@ const LsUnstakeCard: FC = () => { return ( <> - + {/* TODO: Have a way to trigger a refresh of the amount once the wallet balance (max) button is clicked. Need to signal to the liquid staking input to update its display amount based on the `fromAmount` prop. */} { > Schedule Unstake - + { return (
    - { )}
    )} - + {rows !== null && rows.length === 0 && (
    diff --git a/apps/tangle-dapp/components/account/AccountSummaryCard.tsx b/apps/tangle-dapp/components/account/AccountSummaryCard.tsx index 15bd00928a..609cc43dd6 100644 --- a/apps/tangle-dapp/components/account/AccountSummaryCard.tsx +++ b/apps/tangle-dapp/components/account/AccountSummaryCard.tsx @@ -1,18 +1,19 @@ 'use client'; -import type { PropsOf } from '@webb-tools/webb-ui-components/types'; -import type { ElementRef } from 'react'; -import { forwardRef } from 'react'; +import { FC, useState } from 'react'; +import TransferTxContainer from '../../containers/TransferTxContainer/TransferTxContainer'; import GlassCardWithLogo from '../GlassCardWithLogo'; import AccountAddress from './AccountAddress'; import Actions from './Actions'; import Balance from './Balance'; -const AccountSummaryCard = forwardRef, PropsOf<'div'>>( - (props, ref) => { - return ( - +const AccountSummaryCard: FC<{ className?: string }> = ({ className }) => { + const [isTransferModalOpen, setIsTransferModalOpen] = useState(false); + + return ( + <> +
    @@ -20,13 +21,22 @@ const AccountSummaryCard = forwardRef, PropsOf<'div'>>( - + setIsTransferModalOpen(true)} />
    - ); - }, -); -AccountSummaryCard.displayName = 'AccountSummaryCard'; + {/** + * Keep transfer modal outside to prevent it getting stuck + * within the card. Interestingly, the modal gets caught within + * the card due to the backdrop filter applied to the glass card + * due to some internal CSS logic regarding stacking contexts. + */} + + + ); +}; export default AccountSummaryCard; diff --git a/apps/tangle-dapp/components/account/Actions.tsx b/apps/tangle-dapp/components/account/Actions.tsx index 9e3dfa0fe6..802371db6d 100644 --- a/apps/tangle-dapp/components/account/Actions.tsx +++ b/apps/tangle-dapp/components/account/Actions.tsx @@ -8,9 +8,8 @@ import { SendPlanLineIcon, } from '@webb-tools/icons'; import useNetworkStore from '@webb-tools/tangle-shared-ui/context/useNetworkStore'; -import { FC, useState } from 'react'; +import { FC } from 'react'; -import TransferTxContainer from '../../containers/TransferTxContainer/TransferTxContainer'; import useBalances from '../../data/balances/useBalances'; import useAirdropEligibility from '../../data/claims/useAirdropEligibility'; import usePayoutsAvailability from '../../data/payouts/usePayoutsAvailability'; @@ -23,9 +22,10 @@ import formatTangleBalance from '../../utils/formatTangleBalance'; import ActionItem from './ActionItem'; import WithdrawEvmBalanceAction from './WithdrawEvmBalanceAction'; -const Actions: FC = () => { +const Actions: FC<{ openTransferModal: () => void }> = ({ + openTransferModal, +}) => { const { nativeTokenSymbol } = useNetworkStore(); - const [isTransferModalOpen, setIsTransferModalOpen] = useState(false); const { execute: executeVestTx, status: vestTxStatus } = useVestTx(); const { isEligible: isAirdropEligible } = useAirdropEligibility(); @@ -47,92 +47,82 @@ const Actions: FC = () => { : null; return ( - <> -
    +
    + + + + + {isPayoutsAvailable && ( setIsTransferModalOpen(true)} - // Disable while no account is connected, or when the active - // account has no funds. - isDisabled={ - activeAccountAddress === null || - transferableBalance === null || - transferableBalance.isZero() - } + hasNotificationDot + label="Payouts" + Icon={CoinsLineIcon} + internalHref={StaticSearchQueryPath.PayoutsTable} + tooltip="You have payouts available. Click here to visit the Payouts page." /> + )} + {isAirdropEligible && ( + Congratulations, you are eligible for the Tangle Network airdrop! + Click here to visit the Claim Airdrop page. + + } /> + )} - {isPayoutsAvailable && ( - - )} - - {isAirdropEligible && ( - - Congratulations, you are eligible for the Tangle Network - airdrop! Click here to visit the Claim Airdrop{' '} - page. + There are {formattedClaimableTokenAmount}{' '} + vested tokens that are ready to be claimed. Use this action to + release them. - } - /> - )} - - {/* This is a special case, so hide it for most users if they're not vesting */} - {isVesting && ( - - There are {formattedClaimableTokenAmount}{' '} - vested tokens that are ready to be claimed. Use this action to - release them. - - ) : ( - <> - There are vesting schedules in this account, but no tokens - have vested yet. - - ) - } - /> - )} - - -
    - -
    - + There are vesting schedules in this account, but no tokens have + vested yet. + + ) + } /> -
    - + )} + + +
    ); }; diff --git a/apps/tangle-dapp/components/account/PillCard.tsx b/apps/tangle-dapp/components/account/PillCard.tsx index 4a76657d8d..7bb9a1710c 100644 --- a/apps/tangle-dapp/components/account/PillCard.tsx +++ b/apps/tangle-dapp/components/account/PillCard.tsx @@ -1,10 +1,13 @@ import { IconBase } from '@webb-tools/icons/types'; -import { SkeletonLoader, Typography } from '@webb-tools/webb-ui-components'; +import { + Card, + CardVariant, + SkeletonLoader, + Typography, +} from '@webb-tools/webb-ui-components'; import { FC } from 'react'; import { twMerge } from 'tailwind-merge'; -import GlassCard from '../GlassCard'; - export type PillCardProps = { isFirst?: boolean; isLast?: boolean; @@ -37,7 +40,8 @@ const PillCard: FC = ({ : 'border-b md:border-r'; return ( -
    @@ -53,7 +57,7 @@ const PillCard: FC = ({ {value !== null ? value : }
    -     + ); }; diff --git a/apps/tangle-dapp/components/index.ts b/apps/tangle-dapp/components/index.ts index 9dc527bff3..6cd3844f26 100644 --- a/apps/tangle-dapp/components/index.ts +++ b/apps/tangle-dapp/components/index.ts @@ -1,6 +1,5 @@ export * from './BondedTokensBalanceInfo'; export { default as BridgeTxQueueDropdown } from './BridgeTxQueueDropdown'; -export { default as GlassCard } from './GlassCard'; export { default as GlassCardWithLogo } from './GlassCardWithLogo'; export * from './HeaderChip'; export * from './KeyStatsItem'; diff --git a/apps/tangle-dapp/containers/BalancesTableContainer/BalancesTableContainer.tsx b/apps/tangle-dapp/containers/BalancesTableContainer/BalancesTableContainer.tsx index ce52462dd8..479981d5dd 100644 --- a/apps/tangle-dapp/containers/BalancesTableContainer/BalancesTableContainer.tsx +++ b/apps/tangle-dapp/containers/BalancesTableContainer/BalancesTableContainer.tsx @@ -12,12 +12,13 @@ import useLocalStorage, { LocalStorageKey, } from '@webb-tools/tangle-shared-ui/hooks/useLocalStorage'; import { + Card, + CardVariant, InfoIconWithTooltip, Typography, } from '@webb-tools/webb-ui-components'; import { FC, useCallback, useEffect, useState } from 'react'; -import GlassCard from '../../components/GlassCard'; import TangleTokenIcon from '../../components/TangleTokenIcon'; import useBalances from '../../data/balances/useBalances'; import useVestingInfo from '../../data/vesting/useVestingInfo'; @@ -84,7 +85,7 @@ const BalancesTableContainer: FC = () => { return ( <> - +
    {/* Asset column */}
    @@ -167,7 +168,7 @@ const BalancesTableContainer: FC = () => {
    {hasLocks && !isDetailsCollapsed && } - + { return ( - {
    -     + ); }; diff --git a/apps/tangle-dapp/containers/NominatorStatsContainer/NominatorStatsContainer.tsx b/apps/tangle-dapp/containers/NominatorStatsContainer/NominatorStatsContainer.tsx index 2de85fc206..e512e48ec0 100644 --- a/apps/tangle-dapp/containers/NominatorStatsContainer/NominatorStatsContainer.tsx +++ b/apps/tangle-dapp/containers/NominatorStatsContainer/NominatorStatsContainer.tsx @@ -3,7 +3,12 @@ import { BN_ZERO } from '@polkadot/util'; import { useWebContext } from '@webb-tools/api-provider-environment'; import useNetworkStore from '@webb-tools/tangle-shared-ui/context/useNetworkStore'; -import { Button, Divider } from '@webb-tools/webb-ui-components'; +import { + Button, + Card, + CardVariant, + Divider, +} from '@webb-tools/webb-ui-components'; import { SOCIAL_URLS_RECORD, TANGLE_DOCS_STAKING_URL, @@ -14,11 +19,7 @@ import Link from 'next/link'; import { type FC, useCallback, useMemo, useState } from 'react'; import React from 'react'; -import { - GlassCard, - NominatorStatsItem, - UnbondingStatsItem, -} from '../../components'; +import { NominatorStatsItem, UnbondingStatsItem } from '../../components'; import useBalances from '../../data/balances/useBalances'; import useTotalPayoutRewards from '../../data/NominatorStats/useTotalPayoutRewards'; import useIsBondedOrNominating from '../../data/staking/useIsBondedOrNominating'; @@ -70,7 +71,10 @@ const NominatorStatsContainer: FC = () => { return (
    - +
    { )}
    -     + - +
    {
    )}
    - +
    { + switch (variant) { + case CardVariant.GLASS: + return 'p-6 space-y-0 rounded-2xl border border-mono-0 dark:border-mono-160 bg-glass dark:bg-glass_dark backdrop-blur-2xl'; + case CardVariant.DEFAULT: + return ''; + } +}; /** - * The `Card` component - * Sets up styles, and spacing vertically between `block` components + * Sets up styles, and spacing vertically between `block` components. * * @example * @@ -12,8 +29,10 @@ import { CardProps } from './types'; * * ... * + * * * + * *
    * ETH * DOT @@ -23,18 +42,20 @@ import { CardProps } from './types'; * ``` */ export const Card = React.forwardRef( - ({ children, className, ...props }, ref) => { - const cardClsx = useMemo( - () => - twMerge( - 'flex flex-col w-full p-4 space-y-6 rounded-lg bg-mono-0 dark:bg-mono-180', - className, - ), - [className], - ); - + ({ children, className, variant = CardVariant.DEFAULT, ...props }, ref) => { return ( -
    +
    {children}
    ); diff --git a/libs/webb-ui-components/src/components/Card/types.ts b/libs/webb-ui-components/src/components/Card/types.ts deleted file mode 100644 index c91a424860..0000000000 --- a/libs/webb-ui-components/src/components/Card/types.ts +++ /dev/null @@ -1,6 +0,0 @@ -import type { WebbComponentBase } from '../../types'; - -/** - * The `Card` props - */ -export type CardProps = WebbComponentBase; From 3e19f875b82ba6ba8859247d672d18c48dda5d19 Mon Sep 17 00:00:00 2001 From: yurixander <101931215+yurixander@users.noreply.github.com> Date: Sun, 24 Nov 2024 20:27:25 +0100 Subject: [PATCH 18/22] style(tangle-dapp): Improve bg color consistency --- .../app/bridge/AmountAndTokenInput.tsx | 3 ++- apps/tangle-dapp/app/bridge/BridgeContainer.tsx | 14 ++++++-------- apps/tangle-dapp/app/bridge/ChainSelectors.tsx | 12 +++++------- apps/tangle-dapp/components/InputWrapper.tsx | 4 ++-- .../stakeAndUnstake/SelectedPoolIndicator.tsx | 3 ++- .../components/Lists/ListCardWrapper.tsx | 2 +- .../src/components/ListCard/ListItem.tsx | 2 -- .../src/components/Modal/ModalContent.tsx | 5 +++-- .../components/buttons/ChainOrTokenButton.tsx | 17 +++++++++++++---- 9 files changed, 34 insertions(+), 28 deletions(-) diff --git a/apps/tangle-dapp/app/bridge/AmountAndTokenInput.tsx b/apps/tangle-dapp/app/bridge/AmountAndTokenInput.tsx index 3ddaf65957..d0fcb6bb01 100644 --- a/apps/tangle-dapp/app/bridge/AmountAndTokenInput.tsx +++ b/apps/tangle-dapp/app/bridge/AmountAndTokenInput.tsx @@ -142,7 +142,8 @@ const AmountAndTokenInput: FC = () => {
    diff --git a/apps/tangle-dapp/app/bridge/BridgeContainer.tsx b/apps/tangle-dapp/app/bridge/BridgeContainer.tsx index e1456585a4..9e49116062 100644 --- a/apps/tangle-dapp/app/bridge/BridgeContainer.tsx +++ b/apps/tangle-dapp/app/bridge/BridgeContainer.tsx @@ -1,11 +1,11 @@ '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'; import AddressInput, { AddressType } from '../../components/AddressInput'; -import Container from '../../components/Container'; import { useBridge } from '../../context/BridgeContext'; import useActiveAccountAddress from '../../hooks/useActiveAccountAddress'; import { isEVMChain } from '../../utils/bridge'; @@ -15,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 = ({ className }) => { const { @@ -47,11 +47,9 @@ const BridgeContainer: FC = ({ className }) => { return ( <> - @@ -88,7 +86,7 @@ const BridgeContainer: FC = ({ className }) => { > {buttonText} - + { return (
    {/* Source Chain Selector */} -
    +
    {/* Destination Chain Selector */} -
    +
+
{
-
- - - ( -
- - - - {activeChain.name} - -
- ), - } - : {})} - /> - + + + + ( +
+ + + + {activeChain.name} + +
+ ), + } + : {})} + /> + , + disabled: , + }).current + } + /> + + + , - disabled: , + placeholder: , + onClick: openWithdrawModal, }).current } /> - - - , - onClick: openWithdrawModal, - }).current - } - /> - - {errors.amount?.message} - - - - - - {(isLoading, loadingText) => { - const activeChainSupported = - isDefined(activeTypedChainId) && - SUPPORTED_RESTAKE_DEPOSIT_TYPED_CHAIN_IDS.includes( - activeTypedChainId, - ); - if (!activeChainSupported) { + {errors.amount?.message} + + + + + + {(isLoading, loadingText) => { + const activeChainSupported = + isDefined(activeTypedChainId) && + SUPPORTED_RESTAKE_DEPOSIT_TYPED_CHAIN_IDS.includes( + activeTypedChainId, + ); + + if (!activeChainSupported) { + return ( + + ); + } + return ( ); - } - - return ( - - ); - }} - - + }} + + +
{/** Hardcoded for the margin top to ensure the component is align to same card content */} diff --git a/apps/tangle-dapp/components/tables/Operators/VaultsDropdown.tsx b/apps/tangle-dapp/components/tables/Operators/VaultsDropdown.tsx index f585d7e0bb..66820e333f 100644 --- a/apps/tangle-dapp/components/tables/Operators/VaultsDropdown.tsx +++ b/apps/tangle-dapp/components/tables/Operators/VaultsDropdown.tsx @@ -9,6 +9,7 @@ import { DropdownBody, } from '@webb-tools/webb-ui-components/components/Dropdown'; import { Table } from '@webb-tools/webb-ui-components/components/Table'; +import { TableVariant } from '@webb-tools/webb-ui-components/components/Table/types'; import { Typography } from '@webb-tools/webb-ui-components/typography/Typography'; import { getRoundedAmountString } from '@webb-tools/webb-ui-components/utils/getRoundedAmountString'; import cx from 'classnames'; @@ -64,7 +65,9 @@ const VaultsDropdown: FC<{ vaultTokens: VaultToken[] }> = ({ vaultTokens }) => { + {/** TODO: Check styling after max depth issue is fixed. */}
= ({ data, isShown }) => { ), ); + // TODO: Check styling after max depth issue is fixed. return (
= ({ ); } + // TODO: Check styling after max depth issue is fixed. return (
{ const getVariantTdClass = (variant: TableVariant) => { switch (variant) { case TableVariant.GLASS_INNER: - return '!bg-inherit'; + return '!bg-inherit border-t-0'; case TableVariant.GLASS_OUTER: return 'border-0 !p-0 first:rounded-l-xl last:rounded-r-xl overflow-hidden'; case TableVariant.NESTED_IN_MODAL: - return 'py-2'; + return 'py-2 border-t-0'; case TableVariant.DEFAULT: return ''; } From 1fd6403a36f7715e8570764e64c240255339f7e2 Mon Sep 17 00:00:00 2001 From: yurixander <101931215+yurixander@users.noreply.github.com> Date: Mon, 25 Nov 2024 02:24:37 +0100 Subject: [PATCH 22/22] ci(tangle-dapp): Fix build error --- .../liquidStaking/tangle/useLsCreatePoolTx.ts | 2 -- .../liquidStaking/useLsActivePoolDisplayName.ts | 4 +--- .../data/liquidStaking/useLsPools.ts | 5 +---- package.json | 2 +- yarn.lock | 17 ++--------------- 5 files changed, 5 insertions(+), 25 deletions(-) diff --git a/apps/tangle-dapp/data/liquidStaking/tangle/useLsCreatePoolTx.ts b/apps/tangle-dapp/data/liquidStaking/tangle/useLsCreatePoolTx.ts index b4e7c9288d..99add03ecc 100644 --- a/apps/tangle-dapp/data/liquidStaking/tangle/useLsCreatePoolTx.ts +++ b/apps/tangle-dapp/data/liquidStaking/tangle/useLsCreatePoolTx.ts @@ -13,7 +13,6 @@ import toEvmAddress32 from '../../../utils/toEvmAddress32'; export type LsCreatePoolTxContext = { name: string; - iconUrl?: string; initialBondAmount: BN; rootAddress: Address | SubstrateAddress; nominatorAddress: Address | SubstrateAddress; @@ -29,7 +28,6 @@ const useLsCreatePoolTx = () => { toSubstrateAddress(context.nominatorAddress), toSubstrateAddress(context.bouncerAddress), context.name, - context.iconUrl ?? null, ); }, []); diff --git a/apps/tangle-dapp/data/liquidStaking/useLsActivePoolDisplayName.ts b/apps/tangle-dapp/data/liquidStaking/useLsActivePoolDisplayName.ts index a465d1b7a2..a553d789ac 100644 --- a/apps/tangle-dapp/data/liquidStaking/useLsActivePoolDisplayName.ts +++ b/apps/tangle-dapp/data/liquidStaking/useLsActivePoolDisplayName.ts @@ -29,9 +29,7 @@ const useLsActivePoolDisplayName = (): ActivePoolDisplayNameReturn => { return null; } - const nameOpt = activePool[1].metadata.name; - - return nameOpt.isNone ? null : nameOpt.unwrap().toUtf8(); + return activePool[1].metadata.name.toUtf8(); }, [activePool]); const displayName = useMemo(() => { diff --git a/apps/tangle-dapp/data/liquidStaking/useLsPools.ts b/apps/tangle-dapp/data/liquidStaking/useLsPools.ts index faba2c954b..99dad0442a 100644 --- a/apps/tangle-dapp/data/liquidStaking/useLsPools.ts +++ b/apps/tangle-dapp/data/liquidStaking/useLsPools.ts @@ -73,10 +73,7 @@ const useLsPools = (): Map | null | Error => { .map(([, address, account]) => [address, account] as const); const membersMap = new Map(membersKeyValuePairs); - - const name = tanglePool.metadata.name.isNone - ? undefined - : tanglePool.metadata.name.unwrap().toUtf8(); + const name = tanglePool.metadata.name.toUtf8(); const pool: LsPool = { id: poolId, diff --git a/package.json b/package.json index 48f08d5cab..413c0a14f4 100644 --- a/package.json +++ b/package.json @@ -192,7 +192,7 @@ "@webb-tools/interfaces": "1.0.11", "@webb-tools/sdk-core": "0.1.4-127", "@webb-tools/tangle-restaking-types": "^0.1.0", - "@webb-tools/tangle-substrate-types": "^0.9.3", + "@webb-tools/tangle-substrate-types": "0.9.0", "@webb-tools/test-utils": "0.1.8", "@webb-tools/tokens": "1.0.11", "@webb-tools/utils": "1.0.11", diff --git a/yarn.lock b/yarn.lock index 050b213001..2187bba2e0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -18206,7 +18206,7 @@ __metadata: languageName: node linkType: hard -"@webb-tools/protocol-substrate-types@npm:@webb-tools/tangle-substrate-types@^0.9.0": +"@webb-tools/protocol-substrate-types@npm:@webb-tools/tangle-substrate-types@^0.9.0, @webb-tools/tangle-substrate-types@npm:0.9.0": version: 0.9.0 resolution: "@webb-tools/tangle-substrate-types@npm:0.9.0" dependencies: @@ -18278,19 +18278,6 @@ __metadata: languageName: node linkType: hard -"@webb-tools/tangle-substrate-types@npm:^0.9.3": - version: 0.9.3 - resolution: "@webb-tools/tangle-substrate-types@npm:0.9.3" - dependencies: - "@polkadot/api": "npm:^13.2.1" - "@polkadot/typegen": "npm:^13.2.1" - "@polkadot/types": "npm:^13.2.1" - ecpair: "npm:^2.1.0" - tiny-secp256k1: "npm:^2.2.3" - checksum: 10c0/3178de3982543bdb7cde4c2bcd8d4b93c7f178e6d32961165c73f272c81b85b8ebe534422586cabbd26bb15bc5f679732b86f1334f7f43bb7af53d9d245ffd46 - languageName: node - linkType: hard - "@webb-tools/test-utils@npm:0.1.8": version: 0.1.8 resolution: "@webb-tools/test-utils@npm:0.1.8" @@ -46077,7 +46064,7 @@ __metadata: "@webb-tools/interfaces": "npm:1.0.11" "@webb-tools/sdk-core": "npm:0.1.4-127" "@webb-tools/tangle-restaking-types": "npm:^0.1.0" - "@webb-tools/tangle-substrate-types": "npm:^0.9.3" + "@webb-tools/tangle-substrate-types": "npm:0.9.0" "@webb-tools/test-utils": "npm:0.1.8" "@webb-tools/tokens": "npm:1.0.11" "@webb-tools/utils": "npm:1.0.11"