;
+ top: number;
+ isLoading?: boolean;
+}
+
+const MudWorldsTable = ({ items, top, isLoading }: Props) => {
+ return (
+
+
+
+ | Address |
+ { `Balance ${ currencyUnits.ether }` } |
+ Txn count |
+
+
+
+ { items.map((item, index) => (
+
+ )) }
+
+
+ );
+};
+
+export default MudWorldsTable;
diff --git a/ui/mudWorlds/MudWorldsTableItem.tsx b/ui/mudWorlds/MudWorldsTableItem.tsx
new file mode 100644
index 0000000000..dac871ffb2
--- /dev/null
+++ b/ui/mudWorlds/MudWorldsTableItem.tsx
@@ -0,0 +1,37 @@
+import { Text, Td, Tr, Skeleton } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import type { MudWorldItem } from 'types/api/mudWorlds';
+
+import config from 'configs/app';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+
+type Props = { item: MudWorldItem; isLoading?: boolean };
+
+const MudWorldsTableItem = ({ item, isLoading }: Props) => {
+ const addressBalance = BigNumber(item.coin_balance).div(BigNumber(10 ** config.chain.currency.decimals));
+ const addressBalanceChunks = addressBalance.dp(8).toFormat().split('.');
+
+ return (
+
+ |
+
+ |
+
+
+ { addressBalanceChunks[0] }
+ { addressBalanceChunks[1] && . }
+ { addressBalanceChunks[1] }
+
+ |
+
+
+ { Number(item.tx_count).toLocaleString() }
+
+ |
+
+ );
+};
+
+export default MudWorldsTableItem;
diff --git a/ui/nameDomains/NameDomainsListItem.tsx b/ui/nameDomains/NameDomainsListItem.tsx
index 09d284fb6a..137e1caea9 100644
--- a/ui/nameDomains/NameDomainsListItem.tsx
+++ b/ui/nameDomains/NameDomainsListItem.tsx
@@ -42,7 +42,7 @@ const NameDomainsListItem = ({
Registered on
- { dayjs(registrationDate).format('MMM DD YYYY HH:mm:ss A') }
+ { dayjs(registrationDate).format('lll') }
{ dayjs(registrationDate).fromNow() }
@@ -54,7 +54,7 @@ const NameDomainsListItem = ({
Expiration date
- { dayjs(expiryDate).format('MMM DD YYYY HH:mm:ss A') }
+ { dayjs(expiryDate).format('lll') }
diff --git a/ui/nameDomains/NameDomainsTableItem.tsx b/ui/nameDomains/NameDomainsTableItem.tsx
index ce5705fac3..35fa7b0a46 100644
--- a/ui/nameDomains/NameDomainsTableItem.tsx
+++ b/ui/nameDomains/NameDomainsTableItem.tsx
@@ -32,7 +32,7 @@ const NameDomainsTableItem = ({
{ registrationDate && (
- { dayjs(registrationDate).format('MMM DD YYYY HH:mm:ss A') }
+ { dayjs(registrationDate).format('lll') }
{ dayjs(registrationDate).fromNow() }
) }
@@ -40,7 +40,7 @@ const NameDomainsTableItem = ({
|
{ expiryDate && (
- { dayjs(expiryDate).format('MMM DD YYYY HH:mm:ss A') }
+ { dayjs(expiryDate).format('lll') }
) }
diff --git a/ui/pages/Address.tsx b/ui/pages/Address.tsx
index 075ba7144e..a3464f475b 100644
--- a/ui/pages/Address.tsx
+++ b/ui/pages/Address.tsx
@@ -23,6 +23,7 @@ import AddressContract from 'ui/address/AddressContract';
import AddressDetails from 'ui/address/AddressDetails';
import AddressInternalTxs from 'ui/address/AddressInternalTxs';
import AddressLogs from 'ui/address/AddressLogs';
+import AddressMud from 'ui/address/AddressMud';
import AddressTokens from 'ui/address/AddressTokens';
import AddressTokenTransfers from 'ui/address/AddressTokenTransfers';
import AddressTxs from 'ui/address/AddressTxs';
@@ -77,6 +78,14 @@ const AddressPageContent = () => {
},
});
+ const mudTablesCountQuery = useApiQuery('address_mud_tables_count', {
+ pathParams: { hash },
+ queryOptions: {
+ enabled: config.features.mudFramework.isEnabled && areQueriesEnabled && Boolean(hash),
+ placeholderData: 10,
+ },
+ });
+
const addressesForMetadataQuery = React.useMemo(() => ([ hash ].filter(Boolean)), [ hash ]);
const addressMetadataQuery = useAddressMetadataInfoQuery(addressesForMetadataQuery, areQueriesEnabled);
@@ -98,7 +107,10 @@ const AddressPageContent = () => {
undefined;
const isLoading = addressQuery.isPlaceholderData || (config.features.userOps.isEnabled && userOpsAccountQuery.isPlaceholderData);
- const isTabsLoading = isLoading || addressTabsCountersQuery.isPlaceholderData;
+ const isTabsLoading =
+ isLoading ||
+ addressTabsCountersQuery.isPlaceholderData ||
+ (config.features.mudFramework.isEnabled && mudTablesCountQuery.isPlaceholderData);
const handleFetchedBytecodeMessage = React.useCallback(() => {
addressQuery.refetch();
@@ -121,6 +133,12 @@ const AddressPageContent = () => {
const tabs: Array = React.useMemo(() => {
return [
+ config.features.mudFramework.isEnabled && mudTablesCountQuery.data && mudTablesCountQuery.data > 0 && {
+ id: 'mud',
+ title: 'MUD',
+ count: mudTablesCountQuery.data,
+ component: ,
+ },
{
id: 'txs',
title: 'Transactions',
@@ -215,7 +233,15 @@ const AddressPageContent = () => {
subTabs: contractTabs.tabs.map(tab => tab.id),
} : undefined,
].filter(Boolean);
- }, [ addressQuery.data, contractTabs, addressTabsCountersQuery.data, userOpsAccountQuery.data, isTabsLoading, areQueriesEnabled ]);
+ }, [
+ addressQuery.data,
+ contractTabs,
+ addressTabsCountersQuery.data,
+ userOpsAccountQuery.data,
+ isTabsLoading,
+ areQueriesEnabled,
+ mudTablesCountQuery.data,
+ ]);
const tags: Array = React.useMemo(() => {
return [
@@ -229,10 +255,13 @@ const AddressPageContent = () => {
config.features.userOps.isEnabled && userOpsAccountQuery.data ?
{ slug: 'user_ops_acc', name: 'Smart contract wallet', tagType: 'custom' as const, ordinal: -10 } :
undefined,
+ config.features.mudFramework.isEnabled && mudTablesCountQuery.data ?
+ { slug: 'mud', name: 'MUD World', tagType: 'custom' as const, ordinal: -10 } :
+ undefined,
...formatUserTags(addressQuery.data),
...(addressMetadataQuery.data?.addresses?.[hash.toLowerCase()]?.tags || []),
].filter(Boolean).sort(sortEntityTags);
- }, [ addressMetadataQuery.data, addressQuery.data, hash, isSafeAddress, userOpsAccountQuery.data ]);
+ }, [ addressMetadataQuery.data, addressQuery.data, hash, isSafeAddress, userOpsAccountQuery.data, mudTablesCountQuery.data ]);
const titleContentAfter = (
{
;
const backLink = React.useMemo(() => {
- const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/accounts');
+ if (appProps.referrer && appProps.referrer.includes('/accounts')) {
+ return {
+ label: 'Back to top accounts list',
+ url: appProps.referrer,
+ };
+ }
- if (!hasGoBackLink) {
- return;
+ if (appProps.referrer && appProps.referrer.includes('/mud-worlds')) {
+ return {
+ label: 'Back to MUD worlds list',
+ url: appProps.referrer,
+ };
}
- return {
- label: 'Back to top accounts list',
- url: appProps.referrer,
- };
+ return;
}, [ appProps.referrer ]);
const titleSecondRow = (
diff --git a/ui/pages/MudWorlds.pw.tsx b/ui/pages/MudWorlds.pw.tsx
new file mode 100644
index 0000000000..f89ac27ef6
--- /dev/null
+++ b/ui/pages/MudWorlds.pw.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { mudWorlds } from 'mocks/mud/mudWorlds';
+import { test, expect } from 'playwright/lib';
+
+import MudWorlds from './MudWorlds';
+
+test('default view +@mobile', async({ mockTextAd, mockApiResponse, render }) => {
+ await mockTextAd();
+ await mockApiResponse('mud_worlds', mudWorlds);
+ const component = await render();
+ await expect(component).toHaveScreenshot();
+});
diff --git a/ui/pages/MudWorlds.tsx b/ui/pages/MudWorlds.tsx
new file mode 100644
index 0000000000..4c77534325
--- /dev/null
+++ b/ui/pages/MudWorlds.tsx
@@ -0,0 +1,68 @@
+import { Hide, Show } from '@chakra-ui/react';
+import React from 'react';
+
+import { MUD_WORLD } from 'stubs/mud';
+import { generateListStub } from 'stubs/utils';
+import MudWorldsListItem from 'ui/mudWorlds/MudWorldsListItem';
+import MudWorldsTable from 'ui/mudWorlds/MudWorldsTable';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+
+const MudWorlds = () => {
+ const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
+ resourceName: 'mud_worlds',
+ options: {
+ placeholderData: generateListStub<'mud_worlds'>(
+ MUD_WORLD,
+ 50,
+ {
+ next_page_params: {
+ items_count: 50,
+ world: '1',
+ },
+ },
+ ),
+ },
+ });
+
+ const content = data?.items ? (
+ <>
+
+ { data.items.map(((item, index) => (
+
+ ))) }
+
+
+
+
+
+ ) : null;
+
+ const actionBar = pagination.isVisible ? (
+
+
+
+ ) : null;
+
+ return (
+ <>
+
+
+
+ );
+};
+
+export default MudWorlds;
diff --git a/ui/pages/__screenshots__/MudWorlds.pw.tsx_default_default-view-mobile-1.png b/ui/pages/__screenshots__/MudWorlds.pw.tsx_default_default-view-mobile-1.png
new file mode 100644
index 0000000000..fbc8a9c140
Binary files /dev/null and b/ui/pages/__screenshots__/MudWorlds.pw.tsx_default_default-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/MudWorlds.pw.tsx_mobile_default-view-mobile-1.png b/ui/pages/__screenshots__/MudWorlds.pw.tsx_mobile_default-view-mobile-1.png
new file mode 100644
index 0000000000..e698756aab
Binary files /dev/null and b/ui/pages/__screenshots__/MudWorlds.pw.tsx_mobile_default-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/NameDomains.pw.tsx_default_default-view-mobile-1.png b/ui/pages/__screenshots__/NameDomains.pw.tsx_default_default-view-mobile-1.png
index 4aa9eaba13..dc04ae98fb 100644
Binary files a/ui/pages/__screenshots__/NameDomains.pw.tsx_default_default-view-mobile-1.png and b/ui/pages/__screenshots__/NameDomains.pw.tsx_default_default-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/NameDomains.pw.tsx_mobile_default-view-mobile-1.png b/ui/pages/__screenshots__/NameDomains.pw.tsx_mobile_default-view-mobile-1.png
index 90abdecd57..300b6b73d3 100644
Binary files a/ui/pages/__screenshots__/NameDomains.pw.tsx_mobile_default-view-mobile-1.png and b/ui/pages/__screenshots__/NameDomains.pw.tsx_mobile_default-view-mobile-1.png differ
diff --git a/ui/shared/CopyToClipboard.tsx b/ui/shared/CopyToClipboard.tsx
index 3ee4431948..f241913760 100644
--- a/ui/shared/CopyToClipboard.tsx
+++ b/ui/shared/CopyToClipboard.tsx
@@ -9,9 +9,10 @@ export interface Props {
isLoading?: boolean;
onClick?: (event: React.MouseEvent) => void;
size?: number;
+ type?: 'link';
}
-const CopyToClipboard = ({ text, className, isLoading, onClick, size = 5 }: Props) => {
+const CopyToClipboard = ({ text, className, isLoading, onClick, size = 5, type }: Props) => {
const { hasCopied, onCopy } = useClipboard(text, 1000);
const [ copied, setCopied ] = useState(false);
// have to implement controlled tooltip because of the issue - https://github.com/chakra-ui/chakra-ui/issues/7107
@@ -36,10 +37,10 @@ const CopyToClipboard = ({ text, className, isLoading, onClick, size = 5 }: Prop
}
return (
-
+
}
+ icon={ }
boxSize={ size }
color={ iconColor }
variant="simple"
diff --git a/ui/shared/DataListDisplay.tsx b/ui/shared/DataListDisplay.tsx
index 550ab47912..8e230559d2 100644
--- a/ui/shared/DataListDisplay.tsx
+++ b/ui/shared/DataListDisplay.tsx
@@ -13,8 +13,9 @@ type FilterProps = {
type Props = {
isError: boolean;
items?: Array;
- emptyText: string;
+ emptyText: string | React.ReactNode;
actionBar?: React.ReactNode;
+ showActionBarIfEmpty?: boolean;
content: React.ReactNode;
className?: string;
filterProps?: FilterProps;
@@ -35,7 +36,12 @@ const DataListDisplay = (props: Props) => {
}
if (!props.items?.length) {
- return props.emptyText ? { props.emptyText } : null;
+ return (
+ <>
+ { props.showActionBarIfEmpty && props.actionBar }
+ { props.emptyText && { props.emptyText } }
+
+ );
}
return (
diff --git a/ui/shared/filters/TableColumnFilter.tsx b/ui/shared/filters/TableColumnFilter.tsx
new file mode 100644
index 0000000000..f552c401f2
--- /dev/null
+++ b/ui/shared/filters/TableColumnFilter.tsx
@@ -0,0 +1,82 @@
+import {
+ chakra,
+ Flex,
+ Text,
+ Link,
+ Button,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import TableColumnFilterWrapper from './TableColumnFilterWrapper';
+
+type Props = {
+ columnName: string;
+ title: string;
+ isActive?: boolean;
+ isFilled?: boolean;
+ onFilter: () => void;
+ onReset?: () => void;
+ onClose?: () => void;
+ isLoading?: boolean;
+ className?: string;
+ children: React.ReactNode;
+}
+
+type ContentProps = {
+ title: string;
+ isFilled?: boolean;
+ hasReset?: boolean;
+ onFilter: () => void;
+ onReset?: () => void;
+ onClose?: () => void;
+ children: React.ReactNode;
+}
+
+const TableColumnFilterContent = ({ title, isFilled, hasReset, onFilter, onReset, onClose, children }: ContentProps) => {
+ const onFilterClick = React.useCallback(() => {
+ onClose && onClose();
+ onFilter();
+ }, [ onClose, onFilter ]);
+ return (
+ <>
+
+ { title }
+ { hasReset && (
+
+ Reset
+
+ ) }
+
+ { children }
+
+
+ );
+};
+
+const TableColumnFilter = ({ columnName, isActive, className, isLoading, ...props }: Props) => {
+ return (
+
+
+
+ );
+};
+
+export default chakra(TableColumnFilter);
diff --git a/ui/shared/filters/TableColumnFilterWrapper.tsx b/ui/shared/filters/TableColumnFilterWrapper.tsx
new file mode 100644
index 0000000000..bc65b7682b
--- /dev/null
+++ b/ui/shared/filters/TableColumnFilterWrapper.tsx
@@ -0,0 +1,59 @@
+import {
+ PopoverTrigger,
+ PopoverContent,
+ PopoverBody,
+ useDisclosure,
+ IconButton,
+ chakra,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import Popover from 'ui/shared/chakra/Popover';
+import IconSvg from 'ui/shared/IconSvg';
+
+interface Props {
+ columnName: string;
+ isActive?: boolean;
+ isLoading?: boolean;
+ className?: string;
+ children: React.ReactNode;
+}
+
+const TableColumnFilterWrapper = ({ columnName, isActive, className, children, isLoading }: Props) => {
+ const { isOpen, onToggle, onClose } = useDisclosure();
+
+ const child = React.Children.only(children) as React.ReactElement & {
+ ref?: React.Ref;
+ };
+
+ const modifiedChildren = React.cloneElement(
+ child,
+ { onClose },
+ );
+
+ return (
+
+
+ }
+ isActive={ isActive }
+ isDisabled={ isLoading }
+ borderRadius="4px"
+ color="text_secondary"
+ />
+
+
+
+ { modifiedChildren }
+
+
+
+ );
+};
+
+export default chakra(TableColumnFilterWrapper);
diff --git a/ui/shared/layout/components/Container.tsx b/ui/shared/layout/components/Container.tsx
index bbd18975cd..653a712ba5 100644
--- a/ui/shared/layout/components/Container.tsx
+++ b/ui/shared/layout/components/Container.tsx
@@ -8,7 +8,7 @@ interface Props {
const Container = ({ children, className }: Props) => {
return (
-
+
{ children }
);
diff --git a/ui/shared/sort/getNextSortOrder.tsx b/ui/shared/sort/getNextSortOrder.tsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/ui/shared/sort/getNextSortValue.ts b/ui/shared/sort/getNextSortValue.ts
index 9e29662971..6d1fdeabc9 100644
--- a/ui/shared/sort/getNextSortValue.ts
+++ b/ui/shared/sort/getNextSortValue.ts
@@ -3,8 +3,20 @@ export default function getNextSortValue {
const sequence = sortSequence[field];
+ getNextValueFromSequence(sequence, prevValue);
const curIndex = sequence.findIndex((sort) => sort === prevValue);
const nextIndex = curIndex + 1 > sequence.length - 1 ? 0 : curIndex + 1;
return sequence[nextIndex];
};
}
+
+export function getNextValueFromSequence(sequence: Array, prevValue: T) {
+ const curIndex = sequence.findIndex((val) => val === prevValue);
+ const nextIndex = curIndex + 1 > sequence.length - 1 ? 0 : curIndex + 1;
+ return sequence[nextIndex];
+}
+
+// asc desc undefined
+type Order = 'asc' | 'desc' | undefined;
+const sequence: Array = [ 'desc', 'asc', undefined ];
+export const getNextOrderValue = (getNextValueFromSequence).bind(undefined, sequence);
diff --git a/ui/shared/sort/getSortParamsFromQuery.ts b/ui/shared/sort/getSortParamsFromQuery.ts
new file mode 100644
index 0000000000..fd094917a9
--- /dev/null
+++ b/ui/shared/sort/getSortParamsFromQuery.ts
@@ -0,0 +1,23 @@
+import type { Query } from 'nextjs-routes';
+
+import getQueryParamString from 'lib/router/getQueryParamString';
+
+export default function getSortParamsFromQuery(query: Query, sortOptions: Record>) {
+ if (!query.sort || !query.order) {
+ return undefined;
+ }
+
+ const sortStr = getQueryParamString(query.sort);
+
+ if (!Object.keys(sortOptions).includes(sortStr)) {
+ return undefined;
+ }
+
+ const orderStr = getQueryParamString(query.order);
+
+ if (!sortOptions[sortStr].includes(orderStr)) {
+ return undefined;
+ }
+
+ return ({ sort: sortStr, order: orderStr } as T);
+}
diff --git a/ui/shared/statusTag/StatusTag.tsx b/ui/shared/statusTag/StatusTag.tsx
index 957aa5a806..7a01aa5a5c 100644
--- a/ui/shared/statusTag/StatusTag.tsx
+++ b/ui/shared/statusTag/StatusTag.tsx
@@ -1,6 +1,7 @@
import { TagLabel, Tooltip, chakra } from '@chakra-ui/react';
import React from 'react';
+import capitalizeFirstLetter from 'lib/capitalizeFirstLetter';
import Tag from 'ui/shared/chakra/Tag';
import type { IconName } from 'ui/shared/IconSvg';
import IconSvg from 'ui/shared/IconSvg';
@@ -19,7 +20,7 @@ const StatusTag = ({ type, text, errorText, isLoading, className }: Props) => {
let icon: IconName;
let colorScheme;
- const capitalizedText = text.charAt(0).toUpperCase() + text.slice(1);
+ const capitalizedText = capitalizeFirstLetter(text);
switch (type) {
case 'ok':
diff --git a/ui/txs/noves/utils.ts b/ui/txs/noves/utils.ts
index c5a986b66a..0197b38e7c 100644
--- a/ui/txs/noves/utils.ts
+++ b/ui/txs/noves/utils.ts
@@ -1,3 +1,5 @@
+import capitalizeFirstLetter from 'lib/capitalizeFirstLetter';
+
export function camelCaseToSentence(camelCaseString: string | undefined) {
if (!camelCaseString) {
return '';
@@ -5,7 +7,7 @@ export function camelCaseToSentence(camelCaseString: string | undefined) {
let sentence = camelCaseString.replace(/([a-z])([A-Z])/g, '$1 $2');
sentence = sentence.replace(/([A-Z])([A-Z][a-z])/g, '$1 $2');
- sentence = sentence.charAt(0).toUpperCase() + sentence.slice(1);
+ sentence = capitalizeFirstLetter(sentence);
return sentence;
}
|