{
- closeOperatorModal();
+ setIsOperatorModalOpen(false);
const { formattedAmount, assetId, operatorAccountId } = item;
+
const commonOpts = {
shouldDirty: true,
shouldValidate: true,
@@ -423,4 +411,4 @@ const Page = () => {
);
};
-export default Page;
+export default RestakeUnstakePage;
diff --git a/apps/tangle-dapp/src/pages/restake/withdraw/TxInfo.tsx b/apps/tangle-dapp/src/pages/restake/withdraw/TxInfo.tsx
index ef685fdaa7..b8f5462969 100644
--- a/apps/tangle-dapp/src/pages/restake/withdraw/TxInfo.tsx
+++ b/apps/tangle-dapp/src/pages/restake/withdraw/TxInfo.tsx
@@ -4,6 +4,7 @@ import { EMPTY_VALUE_PLACEHOLDER } from '@webb-tools/webb-ui-components/constant
import DetailsContainer from '../../../components/DetailsContainer';
import DetailItem from '../../../components/LiquidStaking/stakeAndUnstake/DetailItem';
import useRestakeConsts from '../../../data/restake/useRestakeConsts';
+import pluralize from '@webb-tools/webb-ui-components/utils/pluralize';
const TxInfo = () => {
const { leaveDelegatorsDelay } = useRestakeConsts();
@@ -17,7 +18,7 @@ const TxInfo = () => {
title="Withdraw delay"
value={
isDefined(leaveDelegatorsDelay)
- ? `${leaveDelegatorsDelay} sessions`
+ ? `${leaveDelegatorsDelay} ${pluralize('session', leaveDelegatorsDelay !== 1)}`
: leaveDelegatorsDelay
}
/>
diff --git a/apps/tangle-dapp/src/pages/restake/withdraw/WithdrawModal.tsx b/apps/tangle-dapp/src/pages/restake/withdraw/WithdrawModal.tsx
index 1ef8d47a4b..c21ef323c9 100644
--- a/apps/tangle-dapp/src/pages/restake/withdraw/WithdrawModal.tsx
+++ b/apps/tangle-dapp/src/pages/restake/withdraw/WithdrawModal.tsx
@@ -2,18 +2,17 @@ import { DEFAULT_DECIMALS } from '@webb-tools/dapp-config/constants';
import { TokenIcon } from '@webb-tools/icons/TokenIcon';
import { useRestakeContext } from '@webb-tools/tangle-shared-ui/context/RestakeContext';
import { DelegatorInfo } from '@webb-tools/tangle-shared-ui/types/restake';
-import { ListItem } from '@webb-tools/webb-ui-components/components/ListCard/ListItem';
-import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
import { useMemo } from 'react';
-import { twMerge } from 'tailwind-merge';
import { formatUnits } from 'viem';
-import ModalContent from '../ModalContent';
-import ModalContentList from '../ModalContentList';
+import ListModal from '@webb-tools/tangle-shared-ui/components/ListModal';
+import searchBy from '../../../utils/searchBy';
+import LogoListItem from '../../../components/Lists/LogoListItem';
+import addCommasToNumber from '@webb-tools/webb-ui-components/utils/addCommasToNumber';
type Props = {
delegatorInfo: DelegatorInfo | null;
isOpen: boolean;
- onClose: () => void;
+ setIsOpen: (isOpen: boolean) => void;
onItemSelected: (item: {
assetId: string;
amount: bigint;
@@ -24,7 +23,7 @@ type Props = {
const WithdrawModal = ({
delegatorInfo,
isOpen,
- onClose,
+ setIsOpen,
onItemSelected,
}: Props) => {
const { assetMap } = useRestakeContext();
@@ -44,99 +43,54 @@ const WithdrawModal = ({
}, [delegatorInfo]);
return (
-
- {
- if (!searchText) {
- return true;
- }
+ setIsOpen={setIsOpen}
+ searchInputId="restake-withdraw-asset-search"
+ searchPlaceholder="Search assets..."
+ items={deposits}
+ titleWhenEmpty="No Assets Found"
+ descriptionWhenEmpty="This account has no assets to withdraw."
+ onSelect={(item) => {
+ const asset = assetMap[item.assetId];
+ const decimals = asset?.decimals || DEFAULT_DECIMALS;
+ const fmtAmount = formatUnits(item.amount, decimals);
- const asset = assetMap[assetId];
- const assetSymbol = asset?.symbol || 'Unknown';
+ onItemSelected({
+ ...item,
+ formattedAmount: fmtAmount,
+ });
+ }}
+ filterItem={({ assetId }, query) => {
+ const asset = assetMap[assetId];
- return (
- assetSymbol.toLowerCase().includes(searchText.toLowerCase()) ||
- amount.toString().includes(searchText)
- );
- }}
- renderEmpty={{
- title: 'No Asset Found',
- description:
- 'You can try to deposit or delegate an asset to an operator.',
- }}
- renderItem={(item) => {
- const { amount, assetId } = item;
- const asset = assetMap[assetId];
+ return searchBy(query, [asset?.name, asset?.id, asset?.vaultId]);
+ }}
+ renderItem={({ amount, assetId }) => {
+ const asset = assetMap[assetId];
- const decimals = asset?.decimals || DEFAULT_DECIMALS;
- const assetSymbol = asset?.symbol || 'Unknown';
+ if (asset === undefined) {
+ return null;
+ }
- const fmtAmount = formatUnits(amount, decimals);
+ const fmtAmount = addCommasToNumber(
+ formatUnits(amount, asset.decimals),
+ );
- return (
-
- onItemSelected({
- ...item,
- formattedAmount: fmtAmount,
- })
- }
- >
-
-
-
-
-
- {assetSymbol}
-
-
-
- Asset ID: {assetId}
-
-
-
-
- {fmtAmount}
-
-
- {asset.vaultId && (
-
- Vault ID: {asset.vaultId}
-
- )}
-
-
- );
- }}
- />
-
+ return (
+ }
+ leftUpperContent={`${asset.name} (${asset.symbol})`}
+ leftBottomContent={`Asset ID: ${assetId}`}
+ rightUpperText={fmtAmount}
+ rightBottomText={
+ asset.vaultId !== null ? `Vault ID: ${asset.vaultId}` : undefined
+ }
+ />
+ );
+ }}
+ />
);
};
diff --git a/apps/tangle-dapp/src/pages/restake/withdraw/index.tsx b/apps/tangle-dapp/src/pages/restake/withdraw/index.tsx
index 9c53ede456..57dcfedb38 100644
--- a/apps/tangle-dapp/src/pages/restake/withdraw/index.tsx
+++ b/apps/tangle-dapp/src/pages/restake/withdraw/index.tsx
@@ -19,7 +19,6 @@ import type { TextFieldInputProps } from '@webb-tools/webb-ui-components/compone
import { TransactionInputCard } from '@webb-tools/webb-ui-components/components/TransactionInputCard';
import { useModal } from '@webb-tools/webb-ui-components/hooks/useModal';
import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
-import cx from 'classnames';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { type SubmitHandler, useForm } from 'react-hook-form';
import { formatUnits, parseUnits } from 'viem';
@@ -42,15 +41,15 @@ import ActionButtonBase from '../ActionButtonBase';
import { AnimatedTable } from '../AnimatedTable';
import AssetPlaceholder from '../AssetPlaceholder';
import { ExpandTableButton } from '../ExpandTableButton';
-import RestakeTabs from '../RestakeTabs';
import StyleContainer from '../StyleContainer';
import SupportedChainModal from '../SupportedChainModal';
import useSwitchChain from '../useSwitchChain';
import TxInfo from './TxInfo';
import WithdrawModal from './WithdrawModal';
import WithdrawRequestTable from './WithdrawRequestTable';
+import RestakeTabs from '../RestakeTabs';
-const Page = () => {
+const RestakeWithdrawPage = () => {
const {
register,
setValue: setFormValue,
@@ -67,11 +66,7 @@ const Page = () => {
const { activeChain } = useWebContext();
const { assetMap } = useRestakeContext();
- const {
- status: isWithdrawModalOpen,
- open: openWithdrawModal,
- close: closeWithdrawModal,
- } = useModal();
+ const [isWithdrawModalOpen, setIsWithdrawModalOpen] = useState(false);
const {
status: isChainModalOpen,
@@ -207,22 +202,11 @@ const Page = () => {
);
return (
-
-
+
+
-
+
{!isWithdrawRequestTableOpen && isMediumScreen && (
{
)}
{
className="text-mono-120 dark:text-mono-100"
>
You will be able to withdraw your tokens after the unstake
- schedule is completed. To unstake your tokens go to the unstake
- tab to schedule request.
+ schedule is completed. To unstake your tokens, use the unstake
+ tab.
)}
@@ -361,11 +350,12 @@ const Page = () => {
{
- closeWithdrawModal();
+ setIsWithdrawModalOpen(false);
const { formattedAmount, assetId } = item;
+
const commonOpts = {
shouldDirty: true,
shouldValidate: true,
@@ -393,4 +383,4 @@ const Page = () => {
);
};
-export default Page;
+export default RestakeWithdrawPage;
diff --git a/apps/tangle-dapp/src/types/index.ts b/apps/tangle-dapp/src/types/index.ts
index 364d865739..306b2f68e4 100644
--- a/apps/tangle-dapp/src/types/index.ts
+++ b/apps/tangle-dapp/src/types/index.ts
@@ -16,10 +16,8 @@ export enum PagePath {
BLUEPRINTS_DETAILS = '/blueprints/:id',
SERVICES = '/services',
RESTAKE = '/restake',
- RESTAKE_OVERVIEW = '/restake/overview',
- RESTAKE_DEPOSIT = '/restake/deposit',
- RESTAKE_STAKE = '/restake/stake',
- RESTAKE_UNSTAKE = '/restake/unstake',
+ RESTAKE_DELEGATE = '/restake/delegate',
+ RESTAKE_UNDELEGATE = '/restake/undelegate',
RESTAKE_WITHDRAW = '/restake/withdraw',
RESTAKE_OPERATOR = '/restake/operators',
LIQUID_STAKING = '/liquid-staking',
diff --git a/apps/tangle-dapp/src/utils/createSearchFilterFn.ts b/apps/tangle-dapp/src/utils/createSearchFilterFn.ts
new file mode 100644
index 0000000000..57431db9d7
--- /dev/null
+++ b/apps/tangle-dapp/src/utils/createSearchFilterFn.ts
@@ -0,0 +1,26 @@
+const createSearchFilterFn = (keys: Array) => {
+ return (item: T, query: string): boolean => {
+ const normalizedQuery = query.trim().toLowerCase();
+
+ if (normalizedQuery === '') {
+ return true;
+ }
+
+ // In case that the keys contain duplicates.
+ const uniqueKeys = new Set(keys);
+
+ return Array.from(uniqueKeys).some((key) => {
+ const value = item[key];
+
+ if (!(typeof value === 'string' || typeof value === 'number')) {
+ return false;
+ }
+
+ const normalizedValue = value.toString().toLowerCase();
+
+ return normalizedValue.includes(normalizedValue);
+ });
+ };
+};
+
+export default createSearchFilterFn;
diff --git a/apps/tangle-dapp/src/utils/isEnumValue.ts b/apps/tangle-dapp/src/utils/isEnumValue.ts
new file mode 100644
index 0000000000..e077c300d0
--- /dev/null
+++ b/apps/tangle-dapp/src/utils/isEnumValue.ts
@@ -0,0 +1,21 @@
+/**
+ * Check whether a value is a valid enum value.
+ *
+ * Note that this won't work for enums with overlapping values
+ * (e.g. `enum Foo { A = 1, B = 1 }`).
+ */
+const isEnumValue = (value: unknown, enumObj: T): value is T[keyof T] => {
+ // Just to be safe.
+ if (
+ value === undefined ||
+ value === null ||
+ typeof enumObj !== 'object' ||
+ enumObj === null
+ ) {
+ return false;
+ }
+
+ return Object.values(enumObj).includes(value);
+};
+
+export default isEnumValue;
diff --git a/apps/tangle-dapp/src/utils/searchBy.ts b/apps/tangle-dapp/src/utils/searchBy.ts
new file mode 100644
index 0000000000..49dbf3a927
--- /dev/null
+++ b/apps/tangle-dapp/src/utils/searchBy.ts
@@ -0,0 +1,22 @@
+const searchBy = (
+ query: string,
+ data: Array,
+): boolean => {
+ const normalizedQuery = query.trim().toLowerCase();
+
+ if (normalizedQuery === '') {
+ return true;
+ }
+
+ return data.some((value) => {
+ if (value === undefined || value === null) {
+ return false;
+ }
+
+ const normalizedValue = value.toString().toLowerCase();
+
+ return normalizedValue.includes(normalizedQuery);
+ });
+};
+
+export default searchBy;
diff --git a/apps/tangle-dapp/tailwind.config.js b/apps/tangle-dapp/tailwind.config.js
index 52dc940589..101dc14512 100644
--- a/apps/tangle-dapp/tailwind.config.js
+++ b/apps/tangle-dapp/tailwind.config.js
@@ -35,7 +35,7 @@ export default {
validator_table_dark:
'linear-gradient(180deg, #707AA600 0%, #2B2F4066 40%)',
purple_gradient:
- 'linear-gradient(79deg, #b6b8dd 8.85%, #d9ddf2 55.91%, #dbbdcd 127.36%), #fff',
+ 'linear-gradient(79deg, #b6b8dd 8.85%, #d9ddf2 55.91%, #dbbdcd 127.36%)',
purple_gradient_dark:
'linear-gradient(79deg, rgba(30, 32, 65, 0.8) 8.85%, rgba(38, 52, 116, 0.8) 55.91%, rgba(113, 61, 89, 0.8) 127.36%)',
},
diff --git a/libs/dapp-config/src/chains/evm/customChains/tangleLocalEvm.ts b/libs/dapp-config/src/chains/evm/customChains/tangleLocalEvm.ts
index c7e335894f..1719ae8222 100644
--- a/libs/dapp-config/src/chains/evm/customChains/tangleLocalEvm.ts
+++ b/libs/dapp-config/src/chains/evm/customChains/tangleLocalEvm.ts
@@ -5,7 +5,7 @@ import { TANGLE_LOCAL_HTTP_RPC_ENDPOINT } from '../../../constants';
const tangleLocalEVM = defineChain({
id: EVMChainId.TangleLocalEVM,
- name: 'Tangle Local EVM',
+ name: 'Tangle Local (EVM)',
nativeCurrency: {
name: 'Local Test Tangle Network Token',
symbol: 'tTNT',
diff --git a/libs/dapp-config/src/chains/evm/customChains/tangleTestnetEVM.ts b/libs/dapp-config/src/chains/evm/customChains/tangleTestnetEVM.ts
index f1d28b55f7..added3b84a 100644
--- a/libs/dapp-config/src/chains/evm/customChains/tangleTestnetEVM.ts
+++ b/libs/dapp-config/src/chains/evm/customChains/tangleTestnetEVM.ts
@@ -8,7 +8,7 @@ import {
const tangleTestnetEVM = defineChain({
id: EVMChainId.TangleTestnetEVM,
- name: 'Tangle Testnet EVM',
+ name: 'Tangle Testnet (EVM)',
nativeCurrency: {
name: 'Test Tangle Network Token',
symbol: 'tTNT',
diff --git a/libs/dapp-config/src/chains/evm/index.tsx b/libs/dapp-config/src/chains/evm/index.tsx
index d4940b45a2..efafb3000f 100644
--- a/libs/dapp-config/src/chains/evm/index.tsx
+++ b/libs/dapp-config/src/chains/evm/index.tsx
@@ -206,7 +206,7 @@ export const chainsConfig = {
chainType: ChainType.EVM,
group: 'tangle',
tag: 'test',
- displayName: 'Tangle Testnet',
+ displayName: 'Tangle Testnet (EVM)',
} satisfies ChainConfig,
[PresetTypedChainId.TangleLocalEVM]: {
@@ -214,6 +214,7 @@ export const chainsConfig = {
chainType: ChainType.EVM,
group: 'tangle',
tag: 'dev',
+ displayName: 'Tangle Local (EVM)',
} satisfies ChainConfig,
// Localnet
diff --git a/libs/dapp-config/src/chains/substrate/index.tsx b/libs/dapp-config/src/chains/substrate/index.tsx
index 5c350c5226..9ec85e6325 100644
--- a/libs/dapp-config/src/chains/substrate/index.tsx
+++ b/libs/dapp-config/src/chains/substrate/index.tsx
@@ -44,7 +44,7 @@ export const chainsConfig = {
group: 'tangle',
tag: 'test',
id: SubstrateChainId.TangleTestnetNative,
- name: 'Tangle Testnet Native',
+ name: 'Tangle Testnet',
nativeCurrency: {
name: 'Tangle',
symbol: TANGLE_TESTNET_NATIVE_TOKEN_SYMBOL,
@@ -70,7 +70,7 @@ export const chainsConfig = {
group: 'tangle',
tag: 'dev',
id: SubstrateChainId.TangleLocalNative,
- name: 'Tangle Local Native',
+ name: 'Tangle Local',
nativeCurrency: {
name: 'Local Tangle Token',
symbol: 'tTNT',
diff --git a/libs/icons/src/TokenIcon.tsx b/libs/icons/src/TokenIcon.tsx
index 39fa0d0b70..f2351e1cfc 100644
--- a/libs/icons/src/TokenIcon.tsx
+++ b/libs/icons/src/TokenIcon.tsx
@@ -12,7 +12,7 @@ export const TokenIcon: React.FC<
TokenIconBase & {
isActive?: boolean;
customLoadingCmp?: React.ReactNode;
- spinnersize?: TokenIconBase['size'];
+ spinnerSize?: TokenIconBase['size'];
}
> = (props) => {
const {
@@ -24,7 +24,7 @@ export const TokenIcon: React.FC<
size = 'md',
onClick,
customLoadingCmp,
- spinnersize,
+ spinnerSize,
...restProps
} = props;
@@ -56,7 +56,7 @@ export const TokenIcon: React.FC<
if (error !== undefined) {
return {error.message};
} else if (loading) {
- return customLoadingCmp ?? ;
+ return customLoadingCmp ?? ;
}
if (svgElement) {
diff --git a/libs/icons/src/utils.ts b/libs/icons/src/utils.ts
index 1de66b74d1..1d4e64b7b6 100644
--- a/libs/icons/src/utils.ts
+++ b/libs/icons/src/utils.ts
@@ -32,29 +32,16 @@ export function getFillColor(darkMode?: boolean) {
}
}
-/**
- * Get the icon size in pixel based on text
- * @param size Represent the icon size in text
- * @returns The icon in pixel
- */
export function getIconSizeInPixel(size: IconSize) {
switch (size) {
- case '2xl': {
+ case '2xl':
return '48px' as const;
- }
-
- case 'xl': {
+ case 'xl':
return '40px' as const;
- }
-
- case 'lg': {
- return '32px' as const;
- }
-
- case 'md': {
+ case 'lg':
return '24px' as const;
- }
-
+ case 'md':
+ return '16px' as const;
default: {
throw new Error('Unknown icon size');
}
diff --git a/libs/tangle-shared-ui/src/components/ConnectWalletButton/WalletDropdown.tsx b/libs/tangle-shared-ui/src/components/ConnectWalletButton/WalletDropdown.tsx
index b5896688f1..d2711113aa 100644
--- a/libs/tangle-shared-ui/src/components/ConnectWalletButton/WalletDropdown.tsx
+++ b/libs/tangle-shared-ui/src/components/ConnectWalletButton/WalletDropdown.tsx
@@ -65,7 +65,6 @@ const WalletDropdown: FC<{
accountName={accountName}
wallet={wallet}
address={accountAddress}
- addressClassname="hidden lg:block"
/>
diff --git a/libs/tangle-shared-ui/src/components/ListModal.tsx b/libs/tangle-shared-ui/src/components/ListModal.tsx
new file mode 100644
index 0000000000..9c68d2fd57
--- /dev/null
+++ b/libs/tangle-shared-ui/src/components/ListModal.tsx
@@ -0,0 +1,179 @@
+import { Search } from '@webb-tools/icons';
+import {
+ Input,
+ ListItem,
+ ListStatus,
+ Modal,
+ ModalContent,
+ ModalHeader,
+} from '@webb-tools/webb-ui-components';
+import { useMemo, useState } from 'react';
+import SkeletonRows from './SkeletonRows';
+import { twMerge } from 'tailwind-merge';
+import { ScrollArea } from '@radix-ui/react-scroll-area';
+
+export type ListModalProps = {
+ isOpen: boolean;
+ setIsOpen: (isOpen: boolean) => void;
+ title: string;
+ showSearch?: boolean;
+ searchInputId: string;
+ searchPlaceholder: string;
+ titleWhenEmpty: string;
+ descriptionWhenEmpty: string;
+ renderItem: (item: T) => JSX.Element | null;
+ getItemKey?: (item: T) => string;
+ onSelect: (item: T) => void;
+ sorting?: (a: T, b: T) => number;
+
+ /**
+ * Provide a function to help determine whether to include an item in the list once a search query is provided.
+ *
+ * If not defined, the search input will not be displayed because it cannot be determined how to filter the items.
+ */
+ filterItem?: (item: T, searchQuery: string) => boolean;
+
+ /**
+ * The items to display in the list.
+ *
+ * If `null`, `undefined`, or `false`, the list will display a loading state.
+ */
+ items: T[] | null | undefined | false | Error;
+};
+
+const ListModal = ({
+ title,
+ isOpen,
+ setIsOpen,
+ filterItem,
+ sorting,
+ titleWhenEmpty,
+ descriptionWhenEmpty,
+ showSearch = true,
+ searchPlaceholder,
+ searchInputId,
+ items,
+ renderItem,
+ getItemKey,
+ onSelect,
+}: ListModalProps) => {
+ const [searchQuery, setSearchQuery] = useState('');
+
+ const isSearching = searchQuery.trim().length > 0;
+
+ const sortedItems = useMemo(() => {
+ if (!Array.isArray(items) || sorting === undefined) {
+ return items;
+ }
+
+ return items.toSorted(sorting);
+ }, [items, sorting]);
+
+ const processedItems = useMemo(() => {
+ if (
+ !isSearching ||
+ filterItem === undefined ||
+ !Array.isArray(sortedItems)
+ ) {
+ return sortedItems;
+ }
+
+ return sortedItems.filter((item) => filterItem(item, searchQuery));
+ }, [filterItem, isSearching, sortedItems, searchQuery]);
+
+ const isLoading = !Array.isArray(processedItems);
+ const isEmpty = !isSearching && !isLoading && processedItems.length === 0;
+
+ return (
+
+ setIsOpen(false)}
+ size="md"
+ className={twMerge(
+ 'max-h-[600px]',
+ Array.isArray(processedItems) &&
+ processedItems.length > 0 &&
+ 'h-full',
+ )}
+ >
+ setIsOpen(false)}>
+ {title}
+
+
+
+ {showSearch && filterItem !== undefined && !isEmpty && !isLoading && (
+
+ }
+ placeholder={searchPlaceholder}
+ value={searchQuery}
+ onChange={setSearchQuery}
+ inputClassName="placeholder:text-mono-80 dark:placeholder:text-mono-120"
+ />
+
+ )}
+
+
+
+ {items instanceof Error ? (
+
+ ) : isLoading ? (
+
+
+
+ ) : isEmpty ? (
+
+ ) : isSearching && processedItems.length === 0 ? (
+
+ ) : (
+
+
+ {processedItems.map((item, index) => {
+ const key =
+ getItemKey !== undefined
+ ? getItemKey(item)
+ : index.toString();
+
+ const itemContent = renderItem(item);
+
+ // Ignore the item if the render function returns `null`.
+ if (itemContent === null) {
+ return null;
+ }
+
+ return (
+ onSelect(item)}
+ className="w-full flex items-center gap-4 justify-between max-w-full min-h-[60px] py-3 cursor-pointer"
+ >
+ {itemContent}
+
+ );
+ })}
+
+
+ )}
+
+
+
+
+ {title}
+
+
+
+ {description}
+
+
+
+
+ }
+ >
+ {buttonText}
+
+
+
-
-
- Create your first{' '}
- Blueprint
-
-
- Set up a minimal Tangle Blueprint in minutes accompanied by a
- step-by-step guide.
-
- }
- >
- Create Blueprint
-
-
-
(
- (
- {
- onChange,
- onClose,
- popularTokens,
- selectTokens,
- title = 'Select a Token',
- type = 'token',
- unavailableTokens,
- value: selectedAsset,
- overrideInputProps,
- renderEmpty,
- alertTitle,
- overrideScrollAreaProps,
- ...props
- },
- ref,
- ) => {
- // Search text
- const [searchText, setSearchText] = useState('');
-
- const isEmpty = useMemo(
- () =>
- !popularTokens.length &&
- !selectTokens.length &&
- !unavailableTokens.length,
- [popularTokens, selectTokens, unavailableTokens],
- );
-
- const getFilterList = useCallback(
- (list: AssetType[]) =>
- list.filter(
- (r) =>
- r.name.toLowerCase().includes(searchText.toLowerCase()) ||
- r.symbol.toString().includes(searchText.toLowerCase()) ||
- r.assetBalanceProps?.balance
- ?.toString()
- .includes(searchText.toLowerCase()),
- ),
- [searchText],
- );
-
- const { filteredPopular, filteredSelect } = useMemo(
- () => ({
- filteredPopular: getFilterList(popularTokens),
- filteredSelect: getFilterList(selectTokens),
- filteredUnavailable: getFilterList(unavailableTokens),
- }),
- [getFilterList, popularTokens, selectTokens, unavailableTokens],
- );
-
- return (
-
- {/** The search input */}
- {!isEmpty && (
-
- }
- placeholder="Search pool or enter token address"
- value={searchText}
- onChange={(val) => setSearchText(val.toString())}
- {...overrideInputProps}
- />
-
- )}
-
- {/** Popular tokens */}
- {filteredPopular.length > 0 ? (
-
-
- Popular {type}
-
-
-
- {filteredPopular.map((current, idx) => (
- onChange?.(current)}
- isDropdown={false}
- >
- {current.symbol}
-
- ))}
-
-
- {filteredSelect.length > 0 && (
-
-
- Select {type}
-
-
- {/** Token list */}
-
-
- {filteredSelect.map((current, idx) => (
- onChange?.(current)}
- />
- ))}
-
-
-
- )}
-
- {unavailableTokens.length ? (
-
-
- Unavailable {type}
-
-
- {/** Token list */}
-
-
- {unavailableTokens.map((current, idx) => (
-
- ))}
-
-
-
- ) : null}
-
- {filteredSelect.length === 0 && (
-
- {typeof renderEmpty === 'function' ? (
- renderEmpty()
- ) : (
-
- No {type} Found.
-
- )}
-
- )}
-
- );
- },
-);
diff --git a/libs/webb-ui-components/src/components/ListCard/index.ts b/libs/webb-ui-components/src/components/ListCard/index.ts
index 9b878f436d..099eb460f7 100644
--- a/libs/webb-ui-components/src/components/ListCard/index.ts
+++ b/libs/webb-ui-components/src/components/ListCard/index.ts
@@ -3,5 +3,4 @@ export { default as ContractListCard } from './ContractListCard';
export * from './ListCardWrapper';
export * from './ListItem';
export { default as RelayerListCard } from './RelayerListCard';
-export * from './TokenListCard';
export { default as TokenListItem } from './TokenListItem';
diff --git a/libs/webb-ui-components/src/components/ListCard/types.ts b/libs/webb-ui-components/src/components/ListCard/types.ts
index c3a671db88..41696bd0ac 100644
--- a/libs/webb-ui-components/src/components/ListCard/types.ts
+++ b/libs/webb-ui-components/src/components/ListCard/types.ts
@@ -6,15 +6,9 @@ import type { InputProps } from '../Input';
import type { Typography } from '../../typography/Typography';
export type ChainType = {
- /**
- * The typed chain id
- */
typedChainId: number;
-
- /**
- * The chain name
- */
name: string;
+ isDisabled?: boolean;
/**
* The chain tag (use to categorize the chain)
@@ -25,11 +19,6 @@ export type ChainType = {
* Whether the current chain needs to switch wallet
*/
needSwitchWallet?: boolean;
-
- /**
- * Whether the chain is disabled
- */
- isDisabled?: boolean;
};
export type RelayerType = {
@@ -44,26 +33,15 @@ export type RelayerType = {
*/
name?: string;
- /**
- * External url
- */
- externalUrl: string;
-
- /**
- * Relayer percentage
- */
- percentage?: number;
-
/**
* Relayer theme (use for Identicon theme)
* @default 'polkadot'
*/
theme?: AvatarProps['theme'];
- /**
- * Whether the relayer is disabled
- */
+ percentage?: number;
isDisabled?: boolean;
+ externalUrl: string;
};
export type AssetBalanceType = {
@@ -188,14 +166,7 @@ export interface ListCardWrapperProps
*/
overrideTitleProps?: ComponentProps
;
- /**
- * The callback involke when pressing the close button
- */
onClose?: () => void;
-
- /**
- * Hide Close buttonƒ
- */
hideCloseButton?: boolean;
}
@@ -205,9 +176,6 @@ export interface ChainListCardProps extends Omit, 'onChange'> {
*/
chainType: 'source' | 'dest';
- /**
- * The callback involke when pressing the close button
- */
onClose?: () => void;
/**
@@ -273,9 +241,6 @@ export interface RelayerListCardProps
*/
isDisconnected?: boolean;
- /**
- * The callback involke when pressing the close button
- */
onClose?: () => void;
/**
@@ -320,21 +285,6 @@ export interface TokenListCardProps
*/
type?: 'token' | 'pool' | 'asset';
- /**
- * The popular token list
- */
- popularTokens: AssetType[];
-
- /**
- * The selected token list
- */
- selectTokens: AssetType[];
-
- /**
- * The unavailable token list
- */
- unavailableTokens: AssetType[];
-
/**
* The current selected token, use to control the component
*/
@@ -351,14 +301,15 @@ export interface TokenListCardProps
alertTitle?: string;
/**
- * Override the input props
+ * Function to render body when the list is empty
*/
- overrideInputProps?: Partial;
+ renderEmpty?: () => React.ReactNode;
/**
- * Function to render body when the list is empty
+ * The description to show when the list is empty.
*/
- renderEmpty?: () => React.ReactNode;
+ descriptionWhenEmpty?: string;
- overrideScrollAreaProps?: ComponentProps;
+ selectTokens: AssetType[];
+ overrideInputProps?: Partial;
}
diff --git a/libs/webb-ui-components/src/components/ListStatus.tsx b/libs/webb-ui-components/src/components/ListStatus.tsx
new file mode 100644
index 0000000000..18cadb7289
--- /dev/null
+++ b/libs/webb-ui-components/src/components/ListStatus.tsx
@@ -0,0 +1,48 @@
+import { FC } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { Typography } from '../typography';
+
+export type ListStatusProps = {
+ emoji?: string;
+ className?: string;
+ title: string;
+ description?: string;
+};
+
+export const ListStatus: FC = ({
+ emoji = '🔍',
+ title,
+ description,
+ className,
+}) => {
+ return (
+
+
+ {emoji}
+
+
+
+ {title}
+
+
+ {description !== undefined && (
+
+ {description}
+
+ )}
+
+ );
+};
diff --git a/libs/webb-ui-components/src/components/SideBar/SideBar.tsx b/libs/webb-ui-components/src/components/SideBar/SideBar.tsx
index 5d35e8ff1a..59ebc1465d 100644
--- a/libs/webb-ui-components/src/components/SideBar/SideBar.tsx
+++ b/libs/webb-ui-components/src/components/SideBar/SideBar.tsx
@@ -81,8 +81,6 @@ export const SideBar = forwardRef(
}
}, [isSidebarOpen, onSideBarToggle, setIsSidebarOpen]);
- console.log('items', items);
-
return (
(
>
{items
.filter((item) => !item.isInternal)
- .map((item) => (
-
+ .map((item, index) => (
+
(
() =>
twMerge(
cx(
- 'group p-2 md:px-4 rounded-lg',
- 'flex items-center gap-2 max-w-fit',
+ 'group px-4 py-2 rounded-full',
+ 'flex items-center gap-1 max-w-fit',
+ 'border border-mono-100 dark:border-mono-140',
'bg-mono-40 dark:bg-mono-170',
- 'enabled:hover:bg-mono-20 enabled:hover:dark:bg-mono-160',
+ 'enabled:hover:bg-mono-60 enabled:hover:dark:bg-mono-160',
'disabled:bg-[#E2E5EB]/20 dark:disabled:bg-[#3A3E53]/70',
),
className,
@@ -56,36 +57,42 @@ const TokenSelector = forwardRef(
const disabled = isActive || isDisabled;
+ const icon =
+ tokenType === 'shielded' ? (
+
+ ) : typeof children === 'string' ? (
+
+ ) : Icon ? (
+ Icon
+ ) : null;
+
return (
);
},
diff --git a/libs/webb-ui-components/src/containers/GovernanceContractDetailCard/types.ts b/libs/webb-ui-components/src/containers/GovernanceContractDetailCard/types.ts
index 7067b7a1c4..25fe764ecb 100644
--- a/libs/webb-ui-components/src/containers/GovernanceContractDetailCard/types.ts
+++ b/libs/webb-ui-components/src/containers/GovernanceContractDetailCard/types.ts
@@ -20,7 +20,7 @@ export interface ContractDetailCardProps {
governanceFncNames: string[];
/**
- * All the chain options to be be chosen
+ * All the chain options to be chosen
*/
typedChainIdSelections: number[];
}
diff --git a/libs/webb-ui-components/src/containers/TransferCard/TransferCard.tsx b/libs/webb-ui-components/src/containers/TransferCard/TransferCard.tsx
index d26b5906d3..593305e3ce 100644
--- a/libs/webb-ui-components/src/containers/TransferCard/TransferCard.tsx
+++ b/libs/webb-ui-components/src/containers/TransferCard/TransferCard.tsx
@@ -12,9 +12,7 @@ import {
RecipientInput,
RelayerInput,
TokenInput,
- ConnectWalletMobileButton,
} from '../../components';
-import { useCheckMobile } from '../../hooks';
import { Typography } from '../../typography';
import { TransferCardProps } from './types';
@@ -40,7 +38,6 @@ export const TransferCard = forwardRef(
},
ref,
) => {
- const { isMobile } = useCheckMobile();
const bridgeAssetProps = useMemo(
() => ({
...bridgeAssetInputProps,
@@ -89,17 +86,13 @@ export const TransferCard = forwardRef(
- {!isMobile ? (
-
- ) : (
-
- )}
+
{buttonDesc && (
{
- state: WebbUIErrorBoudaryState = {
+ state: WebbUIErrorBoundaryState = {
hasError: false,
error: null,
errorInfo: null,
diff --git a/libs/webb-ui-components/src/containers/WebbUIErrorBoundary/index.ts b/libs/webb-ui-components/src/containers/WebbUIErrorBoundary/index.ts
new file mode 100644
index 0000000000..c51dbb9aaa
--- /dev/null
+++ b/libs/webb-ui-components/src/containers/WebbUIErrorBoundary/index.ts
@@ -0,0 +1 @@
+export * from './WebbUIErrorBoundary';
diff --git a/libs/webb-ui-components/src/containers/WebbUIErrorBoudary/types.ts b/libs/webb-ui-components/src/containers/WebbUIErrorBoundary/types.ts
similarity index 74%
rename from libs/webb-ui-components/src/containers/WebbUIErrorBoudary/types.ts
rename to libs/webb-ui-components/src/containers/WebbUIErrorBoundary/types.ts
index 9d581dd193..d17159e5c0 100644
--- a/libs/webb-ui-components/src/containers/WebbUIErrorBoudary/types.ts
+++ b/libs/webb-ui-components/src/containers/WebbUIErrorBoundary/types.ts
@@ -1,13 +1,13 @@
import type LoggerService from '@webb-tools/browser-utils/logger/LoggerService';
import type { ErrorInfo, ReactNode } from 'react';
-export interface WebbUIErrorBoudaryState {
+export interface WebbUIErrorBoundaryState {
hasError: boolean;
error?: Error | null;
errorInfo?: ErrorInfo | null;
}
-export interface WebbUIErrorBoudaryProps {
+export interface WebbUIErrorBoundaryProps {
children: ReactNode;
logger: LoggerService;
}
diff --git a/libs/webb-ui-components/src/containers/WithdrawCard/WithdrawCard.tsx b/libs/webb-ui-components/src/containers/WithdrawCard/WithdrawCard.tsx
index 5f0ee33bce..8ebffeb552 100644
--- a/libs/webb-ui-components/src/containers/WithdrawCard/WithdrawCard.tsx
+++ b/libs/webb-ui-components/src/containers/WithdrawCard/WithdrawCard.tsx
@@ -15,9 +15,7 @@ import {
RelayerInput,
Switcher,
TokenInput,
- ConnectWalletMobileButton,
} from '../../components';
-import { useCheckMobile } from '../../hooks';
import { Typography } from '../../typography';
import { WithdrawCardProps } from './types';
@@ -46,13 +44,11 @@ export const WithdrawCard = forwardRef(
},
ref,
) => {
- const { isMobile } = useCheckMobile();
- // Internal switcher state
const [switcherChecked, setSwitcherChecked] = useState(
() => unwrapSwitcherProps?.defaultChecked || unwrapSwitcherProps?.checked,
);
- // Effect to reset the switcher state when props change
+ // Reset the switcher state when props change.
useEffect(() => {
let isSub = true;
@@ -148,20 +144,16 @@ export const WithdrawCard = forwardRef(
- {!isMobile ? (
-
- ) : (
-
- )}
+
{buttonDesc && (
void;
- /**
- * The copied text
- */
+
copiedText: string | undefined;
};
/**
- *
- * @param {number} display The display time to reset time copy state in miliseconds (default 3000)
- * @returns An object contains `isCopied`, `copiedText` and `copy` function
+ * @param display The display time to reset time copy state in milliseconds (default 3000)
*/
export const useCopyable = (display = 3000): UseCopyableReturnType => {
- // Reference to to copied string
const ref = useRef('');
-
- // Internal state to manage and reset the copy state
const [isCopied, setIsCopied] = useState(false);
-
- // Timeout ref
- const _timeoutRef = useRef>();
+ const timeoutRef_ = useRef>();
const copy = (value: string) => {
if (isCopied) {
@@ -48,16 +37,16 @@ export const useCopyable = (display = 3000): UseCopyableReturnType => {
const timeoutObj = setTimeout(() => setIsCopied(false), display);
- if (_timeoutRef.current) {
- clearTimeout(_timeoutRef.current);
+ if (timeoutRef_.current) {
+ clearTimeout(timeoutRef_.current);
}
- _timeoutRef.current = timeoutObj;
+ timeoutRef_.current = timeoutObj;
};
- // Clear the timeout if the component unmount
+ // Clear the timeout upon unmount.
useEffect(() => {
- return () => clearTimeout(_timeoutRef.current);
+ return () => clearTimeout(timeoutRef_.current);
}, []);
return {
diff --git a/libs/webb-ui-components/src/hooks/useDarkMode.ts b/libs/webb-ui-components/src/hooks/useDarkMode.ts
index bdd388882e..436229eec9 100644
--- a/libs/webb-ui-components/src/hooks/useDarkMode.ts
+++ b/libs/webb-ui-components/src/hooks/useDarkMode.ts
@@ -12,9 +12,6 @@ function isBrowser(): boolean {
);
}
-/**
- * Function to toggle or change the theme mode (possible value: `light`, `dark`, `undefined`)
- */
export type ToggleThemeModeFunc = (
nextThemeMode?: SupportTheme | undefined,
) => void;
diff --git a/libs/webb-ui-components/src/hooks/useCheckMobile.ts b/libs/webb-ui-components/src/hooks/useIsMobile.ts
similarity index 68%
rename from libs/webb-ui-components/src/hooks/useCheckMobile.ts
rename to libs/webb-ui-components/src/hooks/useIsMobile.ts
index ce2a605685..976acd011e 100644
--- a/libs/webb-ui-components/src/hooks/useCheckMobile.ts
+++ b/libs/webb-ui-components/src/hooks/useIsMobile.ts
@@ -2,24 +2,20 @@
import { useState, useEffect } from 'react';
-export type UseCheckMobileReturnType = {
- isMobile: boolean;
-};
-
-export const useCheckMobile = (): UseCheckMobileReturnType => {
+export const useIsMobile = (): boolean => {
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
const checkIsMobile = () => {
- const isMobileCheck =
+ const isMobileUserAgent =
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent,
);
- setIsMobile(isMobileCheck);
+
+ setIsMobile(isMobileUserAgent);
};
checkIsMobile();
-
window.addEventListener('resize', checkIsMobile);
return () => {
@@ -27,5 +23,5 @@ export const useCheckMobile = (): UseCheckMobileReturnType => {
};
}, []);
- return { isMobile };
+ return isMobile;
};
diff --git a/libs/webb-ui-components/src/provider/index.tsx b/libs/webb-ui-components/src/provider/index.tsx
index c717c47f26..59fc3bef65 100644
--- a/libs/webb-ui-components/src/provider/index.tsx
+++ b/libs/webb-ui-components/src/provider/index.tsx
@@ -7,7 +7,7 @@ import {
notificationApi,
} from '../components/Notification';
-import { WebbUIErrorBoudary } from '../containers/WebbUIErrorBoudary';
+import { WebbUIErrorBoundary } from '../containers/WebbUIErrorBoundary';
import {
useNextDarkMode,
useDarkMode as useNormalDarkMode,
@@ -20,7 +20,7 @@ const appLogger = LoggerService.new('Stats App');
export const WebbUIProvider: React.FC = ({
children,
defaultThemeMode = 'dark',
- hasErrorBoudary,
+ hasErrorBoundary,
notificationOptions,
isNextApp = false,
}) => {
@@ -54,7 +54,7 @@ export const WebbUIProvider: React.FC = ({
);
const WebbUIEErrorBoundaryElement = useMemo(() => {
- return createElement(WebbUIErrorBoudary, {
+ return createElement(WebbUIErrorBoundary, {
logger: appLogger,
children,
});
@@ -71,7 +71,7 @@ export const WebbUIProvider: React.FC = ({
}}
>
- {hasErrorBoudary ? WebbUIEErrorBoundaryElement : children}
+ {hasErrorBoundary ? WebbUIEErrorBoundaryElement : children}
);
diff --git a/libs/webb-ui-components/src/provider/types.ts b/libs/webb-ui-components/src/provider/types.ts
index fa61924f1b..051ae36593 100644
--- a/libs/webb-ui-components/src/provider/types.ts
+++ b/libs/webb-ui-components/src/provider/types.ts
@@ -21,17 +21,13 @@ export type WebbUIProviderProps = {
/**
* If `true`, the `WebbUIProvider` will provide a error handler for inside components
*/
- hasErrorBoudary?: boolean;
+ hasErrorBoundary?: boolean;
/**
- * Default theme mode
* @default "dark"
*/
defaultThemeMode?: 'dark' | 'light';
- /**
- * Notification options
- */
notificationOptions?: Omit<
ComponentProps,
'children'
@@ -40,7 +36,7 @@ export type WebbUIProviderProps = {
children?: React.ReactNode;
/**
- * Check if the provider is used in a Next.js app or not
+ * Check if the provider is used in a Next.js app or not.
* @default false
*/
isNextApp?: boolean;