diff --git a/apps/web-coreum/public/locales/en/message_contents.json b/apps/web-coreum/public/locales/en/message_contents.json index ba8fe7513f..52cae35359 100644 --- a/apps/web-coreum/public/locales/en/message_contents.json +++ b/apps/web-coreum/public/locales/en/message_contents.json @@ -56,5 +56,17 @@ "MsgRevokeAllowance": "<0>{{granter}} revoked allowance for <1>{{grantee}}", "MsgCreateVestingAccount": "Vesting account created for <0>{{toAddress}}", "MsgCreatePeriodicVestingAccount": "Periodic vesting account created for <0>{{toAddress}}", - "msgIssueContent": "<0>{{issuer}} issued <1>{{amount}} units of <1>{{subunit}} " + "msgIssueContent": "<0>{{issuer}} issued <1>{{amount}} units of <1>{{subunit}} ", + "msgMintContent": "<0>{{sender}} has minted <1>{{amount}} ", + "msgBurnContent": "<0>{{sender}} has burned <1>{{amount}} ", + "msgFreezeContent": "<0>{{sender}} has frozen <1>{{amount}} on <2>{{account}}", + "msgUnfreezeContent": "<0>{{sender}} has unfrozen <1>{{amount}} on <2>{{account}}", + "msgGloballyFreezeContent": "<0>{{sender}} has globally frozen the token<1>{{denom}}", + "msgGloballyUnfreezeContent": "<0>{{sender}} has globally unfrozen the token<1>{{denom}}", + "msgSetWhitelistedLimitContent": "<0>{{sender}} has set the whitelisted limit for <1>{{account}} to <2>{{amount}}", + "msgNftMintContent": "Account <0>{{sender}} has minted NFT <1>{{id}} with class <2>{{class_id}}", + "msgNftBurnContent": "Account <0>{{sender}} has burned NFT <1>{{id}} with class <2>{{class_id}}", + "msgNftFreezeContent": "Account <0>{{sender}} has frozen NFT <1>{{id}} with class <2>{{class_id}}", + "msgNftUnfreezeContent": "Account <0>{{sender}} has unfrozen NFT <1>{{id}} with class <2>{{class_id}}", + "msgNftIssueClassContent": "A new NFT Class <0>{{name}} has been issued by <1>{{issuer}}" } diff --git a/apps/web-coreum/public/locales/en/message_labels.json b/apps/web-coreum/public/locales/en/message_labels.json index 14925f2d52..646172e7b2 100644 --- a/apps/web-coreum/public/locales/en/message_labels.json +++ b/apps/web-coreum/public/locales/en/message_labels.json @@ -55,5 +55,17 @@ "MsgRevokeAllowance": "Revoke Allowance", "MsgCreateVestingAccount": "Create Vesting Account", "MsgCreatePeriodicVestingAccount": "Create Periodic Vesting Account", - "msgIssueLabel": "Issue" + "msgIssueLabel": "Issue", + "msgMintLabel": "Mint", + "msgBurnLabel": "Burn", + "msgFreezeLabel": "Freeze", + "msgUnfreezeLabel": "Unfreeze", + "msgGloballyFreezeLabel": "Globally Freeze", + "msgGloballyUnfreezeLabel": "Globally Unfreeze", + "msgSetWhitelistedLimitLabel": "Set Whitelisted Limit", + "msgNftMintLabel": "NFT Mint", + "msgNftBurnLabel": "NFT Burn", + "msgNftFreezeLabel": "NFT Freeze", + "msgNftUnfreezeLabel": "NFT Unfreeze", + "msgNftIssueClassLabel": "NFT Issue Class" } diff --git a/packages/ui/src/assets/logo-full-light.svg b/packages/ui/src/assets/logo-full-light.svg new file mode 100644 index 0000000000..110ffcce38 --- /dev/null +++ b/packages/ui/src/assets/logo-full-light.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/ui/src/components/loadingSpinner/index.tsx b/packages/ui/src/components/loadingSpinner/index.tsx new file mode 100644 index 0000000000..b1942a0251 --- /dev/null +++ b/packages/ui/src/components/loadingSpinner/index.tsx @@ -0,0 +1,18 @@ +import useStyles from '@/components/loadingSpinner/styles'; +import SpinnerSvg from './spinner.svg'; + +const Spinner = ({ custom_style = {} }) => { + const { classes } = useStyles(); + return ( +
+ +
+ ); +}; + +export default Spinner; diff --git a/packages/ui/src/components/loadingSpinner/spinner.svg b/packages/ui/src/components/loadingSpinner/spinner.svg new file mode 100644 index 0000000000..5866b955a3 --- /dev/null +++ b/packages/ui/src/components/loadingSpinner/spinner.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/ui/src/components/loadingSpinner/styles.ts b/packages/ui/src/components/loadingSpinner/styles.ts new file mode 100644 index 0000000000..97e2d3dcb8 --- /dev/null +++ b/packages/ui/src/components/loadingSpinner/styles.ts @@ -0,0 +1,24 @@ +import { makeStyles } from 'tss-react/mui'; + +const useStyles = makeStyles()((theme) => ({ + root: { + '@keyframes spin': { + from: { + transform: 'rotate(0deg)', + }, + to: { + transform: 'rotate(360deg)', + }, + }, + width: '100%', + height: '100%', + display: 'flex', + alignItems: 'center', + justifyContent: 'flex-end', + '& .spinner': { + scale: '0.8', + }, + }, +})); + +export default useStyles; diff --git a/packages/ui/src/components/msg/asset/burn/index.tsx b/packages/ui/src/components/msg/asset/burn/index.tsx new file mode 100644 index 0000000000..8ebda67c1b --- /dev/null +++ b/packages/ui/src/components/msg/asset/burn/index.tsx @@ -0,0 +1,35 @@ +import { FC } from 'react'; +import { Typography } from '@mui/material'; +import { Trans } from 'react-i18next'; +import { MsgBurn } from '@/models'; +import Name from '@/components/name'; +import { useProfileRecoil } from '@/recoil/profiles'; +import { formatNumber, formatToken } from '@/utils'; + +const Burn: FC<{ message: MsgBurn }> = (props) => { + const { message } = props; + + const amount = formatToken(message.coin.amount, message.coin.denom); + + const parsedAmount = `${formatNumber( + amount.value, + amount.exponent + )} ${amount.displayDenom.toUpperCase()}`; + + const sender = useProfileRecoil(message.sender); + + return ( + + , ]} + values={{ + sender: message.sender, + amount: parsedAmount, + }} + /> + + ); +}; + +export default Burn; diff --git a/packages/ui/src/components/msg/asset/freeze/index.tsx b/packages/ui/src/components/msg/asset/freeze/index.tsx new file mode 100644 index 0000000000..9c52513ca6 --- /dev/null +++ b/packages/ui/src/components/msg/asset/freeze/index.tsx @@ -0,0 +1,41 @@ +import { FC } from 'react'; +import { useProfileRecoil } from '@/recoil/profiles'; +import { Typography } from '@mui/material'; +import { Trans } from 'react-i18next'; +import Name from '@/components/name'; +import { MsgFreeze } from '@/models'; +import { formatToken, formatNumber } from '@/utils'; + +const Freeze: FC<{ message: MsgFreeze }> = (props) => { + const { message } = props; + + const sender = useProfileRecoil(message.sender); + const account = useProfileRecoil(message.account); + + const amount = formatToken(message.coin.amount, message.coin.denom); + + const parsedAmount = `${formatNumber( + amount.value, + amount.exponent + )} ${amount.displayDenom.toUpperCase()}`; + + return ( + + , + , + , + ]} + values={{ + sender: message.sender, + account: message.account, + amount: parsedAmount, + }} + /> + + ); +}; + +export default Freeze; diff --git a/packages/ui/src/components/msg/asset/globally_freeze/index.tsx b/packages/ui/src/components/msg/asset/globally_freeze/index.tsx new file mode 100644 index 0000000000..47a4dd4366 --- /dev/null +++ b/packages/ui/src/components/msg/asset/globally_freeze/index.tsx @@ -0,0 +1,27 @@ +import { FC } from 'react'; +import { useProfileRecoil } from '@/recoil/profiles'; +import { Typography } from '@mui/material'; +import { Trans } from 'react-i18next'; +import Name from '@/components/name'; +import { MsgGloballyFreeze } from '@/models'; + +const GloballyFreeze: FC<{ message: MsgGloballyFreeze }> = (props) => { + const { message } = props; + + const sender = useProfileRecoil(message.sender); + + return ( + + , ]} + values={{ + sender: message.sender, + denom: message.denom, + }} + /> + + ); +}; + +export default GloballyFreeze; diff --git a/packages/ui/src/components/msg/asset/globally_unfreeze/index.tsx b/packages/ui/src/components/msg/asset/globally_unfreeze/index.tsx new file mode 100644 index 0000000000..3e5991b429 --- /dev/null +++ b/packages/ui/src/components/msg/asset/globally_unfreeze/index.tsx @@ -0,0 +1,27 @@ +import { FC } from 'react'; +import { useProfileRecoil } from '@/recoil/profiles'; +import { Typography } from '@mui/material'; +import { Trans } from 'react-i18next'; +import Name from '@/components/name'; +import { MsgGloballyUnfreeze } from '@/models'; + +const GloballyUnfreeze: FC<{ message: MsgGloballyUnfreeze }> = (props) => { + const { message } = props; + + const sender = useProfileRecoil(message.sender); + + return ( + + , ]} + values={{ + sender: message.sender, + denom: message.denom, + }} + /> + + ); +}; + +export default GloballyUnfreeze; diff --git a/packages/ui/src/components/msg/asset/mint/index.tsx b/packages/ui/src/components/msg/asset/mint/index.tsx new file mode 100644 index 0000000000..9a997ea235 --- /dev/null +++ b/packages/ui/src/components/msg/asset/mint/index.tsx @@ -0,0 +1,35 @@ +import { FC } from 'react'; +import { useProfileRecoil } from '@/recoil/profiles'; +import { Typography } from '@mui/material'; +import { Trans } from 'react-i18next'; +import Name from '@/components/name'; +import { MsgMint } from '@/models'; +import { formatNumber, formatToken } from '@/utils'; + +const Mint: FC<{ message: MsgMint }> = (props) => { + const { message } = props; + + const sender = useProfileRecoil(message.sender); + + const amount = formatToken(message.coin.amount, message.coin.denom); + + const parsedAmount = `${formatNumber( + amount.value, + amount.exponent + )} ${amount.displayDenom.toUpperCase()}`; + + return ( + + , ]} + values={{ + sender: message.sender, + amount: parsedAmount, + }} + /> + + ); +}; + +export default Mint; diff --git a/packages/ui/src/components/msg/asset/nft_burn/index.tsx b/packages/ui/src/components/msg/asset/nft_burn/index.tsx new file mode 100644 index 0000000000..928b157c3e --- /dev/null +++ b/packages/ui/src/components/msg/asset/nft_burn/index.tsx @@ -0,0 +1,32 @@ +import { FC } from 'react'; +import { useProfileRecoil } from '@/recoil/profiles'; +import { Typography } from '@mui/material'; +import { Trans } from 'react-i18next'; +import Name from '@/components/name'; +import { MsgNftBurn } from '@/models'; + +const NftBurn: FC<{ message: MsgNftBurn }> = (props) => { + const { message } = props; + + const sender = useProfileRecoil(message.sender); + + return ( + + , + , + , + ]} + values={{ + sender: message.sender, + id: message.id, + class_id: message.class_id, + }} + /> + + ); +}; + +export default NftBurn; diff --git a/packages/ui/src/components/msg/asset/nft_freeze/index.tsx b/packages/ui/src/components/msg/asset/nft_freeze/index.tsx new file mode 100644 index 0000000000..abc12d8bbd --- /dev/null +++ b/packages/ui/src/components/msg/asset/nft_freeze/index.tsx @@ -0,0 +1,32 @@ +import { FC } from 'react'; +import { useProfileRecoil } from '@/recoil/profiles'; +import { Typography } from '@mui/material'; +import { Trans } from 'react-i18next'; +import Name from '@/components/name'; +import { MsgNftFreeze } from '@/models'; + +const NftFreeze: FC<{ message: MsgNftFreeze }> = (props) => { + const { message } = props; + + const sender = useProfileRecoil(message.sender); + + return ( + + , + , + , + ]} + values={{ + sender: message.sender, + id: message.id, + class_id: message.class_id, + }} + /> + + ); +}; + +export default NftFreeze; diff --git a/packages/ui/src/components/msg/asset/nft_issue_class/index.tsx b/packages/ui/src/components/msg/asset/nft_issue_class/index.tsx new file mode 100644 index 0000000000..5a39a96f2d --- /dev/null +++ b/packages/ui/src/components/msg/asset/nft_issue_class/index.tsx @@ -0,0 +1,27 @@ +import { FC } from 'react'; +import { useProfileRecoil } from '@/recoil/profiles'; +import { Typography } from '@mui/material'; +import { Trans } from 'react-i18next'; +import Name from '@/components/name'; +import { MsgNftIssueClass } from '@/models'; + +const NftIssueClass: FC<{ message: MsgNftIssueClass }> = (props) => { + const { message } = props; + + const issuer = useProfileRecoil(message.issuer); + + return ( + + , ]} + values={{ + name: message.name, + issuer: message.issuer, + }} + /> + + ); +}; + +export default NftIssueClass; diff --git a/packages/ui/src/components/msg/asset/nft_mint/index.tsx b/packages/ui/src/components/msg/asset/nft_mint/index.tsx new file mode 100644 index 0000000000..5f0ab455b5 --- /dev/null +++ b/packages/ui/src/components/msg/asset/nft_mint/index.tsx @@ -0,0 +1,32 @@ +import { FC } from 'react'; +import { useProfileRecoil } from '@/recoil/profiles'; +import { Typography } from '@mui/material'; +import { Trans } from 'react-i18next'; +import Name from '@/components/name'; +import { MsgNftMint } from '@/models'; + +const NftMint: FC<{ message: MsgNftMint }> = (props) => { + const { message } = props; + + const sender = useProfileRecoil(message.sender); + + return ( + + , + , + , + ]} + values={{ + sender: message.sender, + id: message.id, + class_id: message.class_id, + }} + /> + + ); +}; + +export default NftMint; diff --git a/packages/ui/src/components/msg/asset/nft_unfreeze/index.tsx b/packages/ui/src/components/msg/asset/nft_unfreeze/index.tsx new file mode 100644 index 0000000000..d3a4e766c4 --- /dev/null +++ b/packages/ui/src/components/msg/asset/nft_unfreeze/index.tsx @@ -0,0 +1,32 @@ +import { FC } from 'react'; +import { useProfileRecoil } from '@/recoil/profiles'; +import { Typography } from '@mui/material'; +import { Trans } from 'react-i18next'; +import Name from '@/components/name'; +import { MsgNftUnfreeze } from '@/models'; + +const NftUnfreeze: FC<{ message: MsgNftUnfreeze }> = (props) => { + const { message } = props; + + const sender = useProfileRecoil(message.sender); + + return ( + + , + , + , + ]} + values={{ + sender: message.sender, + id: message.id, + class_id: message.class_id, + }} + /> + + ); +}; + +export default NftUnfreeze; diff --git a/packages/ui/src/components/msg/asset/set_whitelisted_limit/index.tsx b/packages/ui/src/components/msg/asset/set_whitelisted_limit/index.tsx new file mode 100644 index 0000000000..815d0c16d4 --- /dev/null +++ b/packages/ui/src/components/msg/asset/set_whitelisted_limit/index.tsx @@ -0,0 +1,41 @@ +import { FC } from 'react'; +import { useProfileRecoil } from '@/recoil/profiles'; +import { Typography } from '@mui/material'; +import { Trans } from 'react-i18next'; +import Name from '@/components/name'; +import { MsgSetWhitelistedLimit } from '@/models'; +import { formatNumber, formatToken } from '@/utils'; + +const SetWhitelistedLimit: FC<{ message: MsgSetWhitelistedLimit }> = (props) => { + const { message } = props; + + const sender = useProfileRecoil(message.sender); + const account = useProfileRecoil(message.account); + + const amount = formatToken(message.coin.amount, message.coin.denom); + + const parsedAmount = `${formatNumber( + amount.value, + amount.exponent + )} ${amount.displayDenom.toUpperCase()}`; + + return ( + + , + , + , + ]} + values={{ + sender: message.sender, + account: message.account, + amount: parsedAmount, + }} + /> + + ); +}; + +export default SetWhitelistedLimit; diff --git a/packages/ui/src/components/msg/asset/unfreeze/index.tsx b/packages/ui/src/components/msg/asset/unfreeze/index.tsx new file mode 100644 index 0000000000..a8120c87bb --- /dev/null +++ b/packages/ui/src/components/msg/asset/unfreeze/index.tsx @@ -0,0 +1,40 @@ +import { FC } from 'react'; +import { useProfileRecoil } from '@/recoil/profiles'; +import { Typography } from '@mui/material'; +import { Trans } from 'react-i18next'; +import Name from '@/components/name'; +import { MsgUnfreeze } from '@/models'; +import { formatNumber, formatToken } from '@/utils'; + +const Unfreeze: FC<{ message: MsgUnfreeze }> = (props) => { + const { message } = props; + + const sender = useProfileRecoil(message.sender); + const account = useProfileRecoil(message.account); + + const amount = formatToken(message.coin.amount, message.coin.denom); + + const parsedAmount = `${formatNumber( + amount.value, + amount.exponent + )} ${amount.displayDenom.toUpperCase()}`; + return ( + + , + , + , + ]} + values={{ + sender: message.sender, + account: message.account, + amount: parsedAmount, + }} + /> + + ); +}; + +export default Unfreeze; diff --git a/packages/ui/src/components/msg/index.ts b/packages/ui/src/components/msg/index.ts index 8f46775247..e9e52e3b73 100644 --- a/packages/ui/src/components/msg/index.ts +++ b/packages/ui/src/components/msg/index.ts @@ -60,3 +60,15 @@ export { default as Unknown } from '@/components/msg/unknown'; export { default as CreatePeriodicVestingAccount } from '@/components/msg/vesting/create_periodic_vesting_account'; export { default as CreateVestingAccount } from '@/components/msg/vesting/create_vesting_account'; export { default as Issue } from '@/components/msg/asset/issue'; +export { default as Mint } from '@/components/msg/asset/mint'; +export { default as Burn } from '@/components/msg/asset/burn'; +export { default as Freeze } from '@/components/msg/asset/freeze'; +export { default as Unfreeze } from '@/components/msg/asset/unfreeze'; +export { default as GloballyFreeze } from '@/components/msg/asset/globally_freeze'; +export { default as GloballyUnfreeze } from '@/components/msg/asset/globally_unfreeze'; +export { default as SetWhitelistedLimit } from '@/components/msg/asset/set_whitelisted_limit'; +export { default as NftBurn } from '@/components/msg/asset/nft_burn'; +export { default as NftMint } from '@/components/msg/asset/nft_mint'; +export { default as NftFreeze } from '@/components/msg/asset/nft_freeze'; +export { default as NftUnfreeze } from '@/components/msg/asset/nft_unfreeze'; +export { default as NftIssueClass } from '@/components/msg/asset/nft_issue_class'; diff --git a/packages/ui/src/components/msg/utils.tsx b/packages/ui/src/components/msg/utils.tsx index 4217bf56af..849afb6d47 100644 --- a/packages/ui/src/components/msg/utils.tsx +++ b/packages/ui/src/components/msg/utils.tsx @@ -345,6 +345,7 @@ type DefaultTypeToModel = typeof defaultTypeToModel; // ===================================== // Update your chain's message types here +// The tagTheme is the color of the tag. // ===================================== const customTypeToModel = { // ======================== @@ -410,6 +411,78 @@ const customTypeToModel = { tagTheme: 'one', tagDisplay: 'msgIssueLabel', }, + '/coreum.asset.ft.v1.MsgMint': { + model: MODELS.MsgMint, + content: COMPONENTS.Mint, + tagTheme: 'one', + tagDisplay: 'msgMintLabel', + }, + '/coreum.asset.ft.v1.MsgBurn': { + model: MODELS.MsgBurn, + content: COMPONENTS.Burn, + tagTheme: 'one', + tagDisplay: 'msgBurnLabel', + }, + '/coreum.asset.ft.v1.MsgFreeze': { + model: MODELS.MsgFreeze, + content: COMPONENTS.Freeze, + tagTheme: 'one', + tagDisplay: 'msgFreezeLabel', + }, + '/coreum.asset.ft.v1.MsgUnfreeze': { + model: MODELS.MsgUnfreeze, + content: COMPONENTS.Unfreeze, + tagTheme: 'one', + tagDisplay: 'msgUnfreezeLabel', + }, + '/coreum.asset.ft.v1.MsgGloballyFreeze': { + model: MODELS.MsgGloballyFreeze, + content: COMPONENTS.GloballyFreeze, + tagTheme: 'one', + tagDisplay: 'msgGloballyFreezeLabel', + }, + '/coreum.asset.ft.v1.MsgGloballyUnfreeze': { + model: MODELS.MsgGloballyUnfreeze, + content: COMPONENTS.GloballyUnfreeze, + tagTheme: 'one', + tagDisplay: 'msgGloballyUnfreezeLabel', + }, + '/coreum.asset.ft.v1.MsgSetWhitelistedLimit': { + model: MODELS.MsgSetWhitelistedLimit, + content: COMPONENTS.SetWhitelistedLimit, + tagTheme: 'one', + tagDisplay: 'msgSetWhitelistedLimitLabel', + }, + '/coreum.asset.nft.v1.MsgBurn': { + model: MODELS.MsgNftBurn, + content: COMPONENTS.NftBurn, + tagTheme: 'one', + tagDisplay: 'msgNftBurnLabel', + }, + '/coreum.asset.nft.v1.MsgMint': { + model: MODELS.MsgNftMint, + content: COMPONENTS.NftMint, + tagTheme: 'one', + tagDisplay: 'msgNftMintLabel', + }, + '/coreum.asset.nft.v1.MsgIssueClass': { + model: MODELS.MsgNftIssueClass, + content: COMPONENTS.NftIssueClass, + tagTheme: 'one', + tagDisplay: 'msgNftIssueClassLabel', + }, + '/coreum.asset.nft.v1.MsgFreeze': { + model: MODELS.MsgNftFreeze, + content: COMPONENTS.NftFreeze, + tagTheme: 'one', + tagDisplay: 'msgNftFreezeLabel', + }, + '/coreum.asset.nft.v1.MsgUnfreeze': { + model: MODELS.MsgNftUnfreeze, + content: COMPONENTS.NftUnfreeze, + tagTheme: 'one', + tagDisplay: 'msgNftUnfreezeLabel', + }, }; type CustomTypeToModel = typeof customTypeToModel; diff --git a/packages/ui/src/components/nav/components/mobile/components/navbar/index.tsx b/packages/ui/src/components/nav/components/mobile/components/navbar/index.tsx index 674db8c596..8c21d37596 100644 --- a/packages/ui/src/components/nav/components/mobile/components/navbar/index.tsx +++ b/packages/ui/src/components/nav/components/mobile/components/navbar/index.tsx @@ -3,6 +3,7 @@ import type { NavbarProps } from '@/components/nav/components/mobile/components/ import { readTheme } from '@/recoil/settings'; import { HOME } from '@/utils/go_to_page'; import Logo from '@/assets/logo-full.svg'; +import LogoWhite from '@/assets/logo-full-light.svg'; import Link from 'next/link'; import { useRecoilValue } from 'recoil'; @@ -14,7 +15,7 @@ const Navbar = (props: NavbarProps) => { return (
- + {theme === 'dark' ? : }
= ({ className }) => { const { t } = useTranslation('common'); const { handleOnSubmit } = useSearchBar(t); - let placeholderText; - if (extra.profile) { - placeholderText = t('searchBarPlaceholderDtag'); - } else { - placeholderText = t('searchBarPlaceholder'); - } + //Modified search placeholder to hide DTag search + let placeholderText = t('searchBarPlaceholder'); + + // if (extra.profile) { + // placeholderText = t('searchBarPlaceholderDtag'); + // } else { + // placeholderText = t('searchBarPlaceholder'); + // } return ; }; diff --git a/packages/ui/src/components/search/hooks.ts b/packages/ui/src/components/search/hooks.ts index 6a4ea0625f..1c697b7f9d 100644 --- a/packages/ui/src/components/search/hooks.ts +++ b/packages/ui/src/components/search/hooks.ts @@ -7,8 +7,14 @@ export const useSearch = (callback: (value: string, clear?: () => void) => void) setValue(newValue); }; + const handleSubmitOnChange: ChangeEventHandler = (e) => { + const newValue = e?.target?.value ?? ''; + setValue(newValue); + callback(newValue); + }; + const handleOnSubmit = () => { - callback(value, clear); + callback(value); }; const handleKeyDown: KeyboardEventHandler = (e) => { @@ -16,7 +22,7 @@ export const useSearch = (callback: (value: string, clear?: () => void) => void) const isEnter = e?.keyCode === 13 || e?.key === 'Enter'; if (isEnter && !shift) { e.preventDefault(); - callback(value, clear); + callback(value); } }; @@ -29,5 +35,6 @@ export const useSearch = (callback: (value: string, clear?: () => void) => void) handleOnSubmit, value, handleKeyDown, + handleSubmitOnChange, }; }; diff --git a/packages/ui/src/components/search/index.tsx b/packages/ui/src/components/search/index.tsx index d251b010ed..daf090a23e 100644 --- a/packages/ui/src/components/search/index.tsx +++ b/packages/ui/src/components/search/index.tsx @@ -8,18 +8,21 @@ import { useSearch } from '@/components/search/hooks'; type SearchProps = { className?: string; placeholder: string; + submitOnChange?: boolean; callback: (value: string) => void; }; -const Search: FC = ({ className, placeholder, callback }) => { +const Search: FC = ({ className, placeholder, callback, submitOnChange = false }) => { const { classes, cx } = useStyles(); - const { handleOnSubmit, handleOnChange, handleKeyDown, value } = useSearch(callback); + const { handleOnSubmit, handleOnChange, handleSubmitOnChange, handleKeyDown, value } = + useSearch(callback); + return (
[ key: 'profiles', display: 'profiles', }, + { + key: 'asset', + display: 'asset', + }, { key: 'others', display: 'others', diff --git a/packages/ui/src/models/index.ts b/packages/ui/src/models/index.ts index f54e3a5921..b9d84662f0 100644 --- a/packages/ui/src/models/index.ts +++ b/packages/ui/src/models/index.ts @@ -70,3 +70,15 @@ export { default as SlashingParams } from '@/models/slashing_params'; export { default as StakingParams } from '@/models/staking_params'; export { default as FeeModelParams } from '@/models/feemodel_params'; export { default as MsgIssue } from '@/models/msg/asset/msg_issue'; +export { default as MsgMint } from '@/models/msg/asset/msg_mint'; +export { default as MsgBurn } from '@/models/msg/asset/msg_burn'; +export { default as MsgFreeze } from '@/models/msg/asset/msg_freeze'; +export { default as MsgUnfreeze } from '@/models/msg/asset/msg_unfreeze'; +export { default as MsgGloballyFreeze } from '@/models/msg/asset/msg_globally_freeze'; +export { default as MsgGloballyUnfreeze } from '@/models/msg/asset/msg_globally_unfreeze'; +export { default as MsgSetWhitelistedLimit } from '@/models/msg/asset/msg_set_whitelisted_limit'; +export { default as MsgNftBurn } from '@/models/msg/asset/msg_nft_burn'; +export { default as MsgNftMint } from '@/models/msg/asset/msg_nft_mint'; +export { default as MsgNftFreeze } from '@/models/msg/asset/msg_nft_freeze'; +export { default as MsgNftUnfreeze } from '@/models/msg/asset/msg_nft_unfreeze'; +export { default as MsgNftIssueClass } from '@/models/msg/asset/msg_nft_issue_class'; diff --git a/packages/ui/src/models/msg/asset/msg_burn.ts b/packages/ui/src/models/msg/asset/msg_burn.ts new file mode 100644 index 0000000000..037073714e --- /dev/null +++ b/packages/ui/src/models/msg/asset/msg_burn.ts @@ -0,0 +1,31 @@ +/* eslint-disable camelcase */ +import * as R from 'ramda'; +import { Categories } from '../types'; + +class MsgBurn { + public category: Categories; + public type: string; + public json: any; + public sender: string; + public coin: MsgCoin; + + constructor(payload: any) { + this.category = 'asset'; + this.type = R.pathOr('', ['type'], payload); + this.json = R.pathOr({}, ['json'], payload); + this.sender = R.pathOr('', ['sender'], payload.json); + this.coin = R.pathOr({ denom: '', amount: '0' }, ['coin'], payload.json); + } + + static fromJson(json: any) { + return new MsgBurn({ + category: 'asset', + json, + type: R.pathOr('', ['@type'], json), + sender: R.pathOr('', ['sender'], json), + coin: R.pathOr({ denom: '', amount: '0' }, ['coin'], json), + }); + } +} + +export default MsgBurn; diff --git a/packages/ui/src/models/msg/asset/msg_freeze.ts b/packages/ui/src/models/msg/asset/msg_freeze.ts new file mode 100644 index 0000000000..87967063b1 --- /dev/null +++ b/packages/ui/src/models/msg/asset/msg_freeze.ts @@ -0,0 +1,34 @@ +/* eslint-disable camelcase */ +import * as R from 'ramda'; +import { Categories } from '../types'; + +class MsgFreeze { + public category: Categories; + public type: string; + public json: any; + public account: string; + public sender: string; + public coin: MsgCoin; + + constructor(payload: any) { + this.category = 'asset'; + this.type = R.pathOr('', ['type'], payload); + this.json = R.pathOr({}, ['json'], payload); + this.account = R.pathOr('', ['account'], payload.json); + this.sender = R.pathOr('', ['sender'], payload.json); + this.coin = R.pathOr({ denom: '', amount: '0' }, ['coin'], payload.json); + } + + static fromJson(json: any) { + return new MsgFreeze({ + category: 'asset', + json, + type: R.pathOr('', ['@type'], json), + account: R.pathOr('', ['account'], json), + sender: R.pathOr('', ['sender'], json), + coin: R.pathOr({ denom: '', amount: '0' }, ['coin'], json), + }); + } +} + +export default MsgFreeze; diff --git a/packages/ui/src/models/msg/asset/msg_globally_freeze.ts b/packages/ui/src/models/msg/asset/msg_globally_freeze.ts new file mode 100644 index 0000000000..a9ea0d6b8e --- /dev/null +++ b/packages/ui/src/models/msg/asset/msg_globally_freeze.ts @@ -0,0 +1,31 @@ +/* eslint-disable camelcase */ +import * as R from 'ramda'; +import { Categories } from '../types'; + +class MsgGloballyFreeze { + public category: Categories; + public type: string; + public json: any; + public sender: string; + public denom: string; + + constructor(payload: any) { + this.category = 'asset'; + this.type = R.pathOr('', ['type'], payload); + this.json = R.pathOr({}, ['json'], payload); + this.sender = R.pathOr('', ['sender'], payload.json); + this.denom = R.pathOr('', ['denom'], payload.json); + } + + static fromJson(json: any) { + return new MsgGloballyFreeze({ + category: 'asset', + json, + type: R.pathOr('', ['@type'], json), + sender: R.pathOr('', ['sender'], json), + denom: R.pathOr('', ['denom'], json), + }); + } +} + +export default MsgGloballyFreeze; diff --git a/packages/ui/src/models/msg/asset/msg_globally_unfreeze.ts b/packages/ui/src/models/msg/asset/msg_globally_unfreeze.ts new file mode 100644 index 0000000000..e66d502ce0 --- /dev/null +++ b/packages/ui/src/models/msg/asset/msg_globally_unfreeze.ts @@ -0,0 +1,31 @@ +/* eslint-disable camelcase */ +import * as R from 'ramda'; +import { Categories } from '../types'; + +class MsgGloballyUnfreeze { + public category: Categories; + public type: string; + public json: any; + public sender: string; + public denom: string; + + constructor(payload: any) { + this.category = 'asset'; + this.type = R.pathOr('', ['type'], payload); + this.json = R.pathOr({}, ['json'], payload); + this.sender = R.pathOr('', ['sender'], payload.json); + this.denom = R.pathOr('', ['denom'], payload.json); + } + + static fromJson(json: any) { + return new MsgGloballyUnfreeze({ + category: 'asset', + json, + type: R.pathOr('', ['@type'], json), + sender: R.pathOr('', ['sender'], json), + denom: R.pathOr('', ['denom'], json), + }); + } +} + +export default MsgGloballyUnfreeze; diff --git a/packages/ui/src/models/msg/asset/msg_mint.ts b/packages/ui/src/models/msg/asset/msg_mint.ts new file mode 100644 index 0000000000..66f4c0872f --- /dev/null +++ b/packages/ui/src/models/msg/asset/msg_mint.ts @@ -0,0 +1,31 @@ +/* eslint-disable camelcase */ +import * as R from 'ramda'; +import { Categories } from '../types'; + +class MsgMint { + public category: Categories; + public type: string; + public json: any; + public sender: string; + public coin: MsgCoin; + + constructor(payload: any) { + this.category = 'asset'; + this.type = R.pathOr('', ['type'], payload); + this.json = R.pathOr({}, ['json'], payload); + this.sender = R.pathOr('', ['sender'], payload.json); + this.coin = R.pathOr({ denom: '', amount: '0' }, ['coin'], payload.json); + } + + static fromJson(json: any) { + return new MsgMint({ + category: 'asset', + json, + type: R.pathOr('', ['@type'], json), + sender: R.pathOr('', ['sender'], json), + coin: R.pathOr({ denom: '', amount: '0' }, ['coin'], json), + }); + } +} + +export default MsgMint; diff --git a/packages/ui/src/models/msg/asset/msg_nft_burn.ts b/packages/ui/src/models/msg/asset/msg_nft_burn.ts new file mode 100644 index 0000000000..5e95935b98 --- /dev/null +++ b/packages/ui/src/models/msg/asset/msg_nft_burn.ts @@ -0,0 +1,34 @@ +/* eslint-disable camelcase */ +import * as R from 'ramda'; +import { Categories } from '../types'; + +class MsgNftBurn { + public category: Categories; + public type: string; + public json: any; + public sender: string; + public class_id: string; + public id: string; + + constructor(payload: any) { + this.category = 'asset'; + this.type = R.pathOr('', ['type'], payload); + this.json = R.pathOr({}, ['json'], payload); + this.sender = R.pathOr('', ['sender'], payload); + this.class_id = R.pathOr('', ['class_id'], payload); + this.id = R.pathOr('', ['id'], payload); + } + + static fromJson(json: any) { + return new MsgNftBurn({ + category: 'asset', + json, + type: R.pathOr('', ['@type'], json), + sender: R.pathOr('', ['sender'], json), + class_id: R.pathOr('', ['class_id'], json), + id: R.pathOr('', ['id'], json), + }); + } +} + +export default MsgNftBurn; diff --git a/packages/ui/src/models/msg/asset/msg_nft_freeze.ts b/packages/ui/src/models/msg/asset/msg_nft_freeze.ts new file mode 100644 index 0000000000..958c98900c --- /dev/null +++ b/packages/ui/src/models/msg/asset/msg_nft_freeze.ts @@ -0,0 +1,34 @@ +/* eslint-disable camelcase */ +import * as R from 'ramda'; +import { Categories } from '../types'; + +class MsgNftFreeze { + public category: Categories; + public type: string; + public json: any; + public sender: string; + public class_id: string; + public id: string; + + constructor(payload: any) { + this.category = 'asset'; + this.type = R.pathOr('', ['type'], payload); + this.json = R.pathOr({}, ['json'], payload); + this.sender = R.pathOr('', ['sender'], payload); + this.class_id = R.pathOr('', ['class_id'], payload); + this.id = R.pathOr('', ['id'], payload); + } + + static fromJson(json: any) { + return new MsgNftFreeze({ + category: 'asset', + json, + type: R.pathOr('', ['@type'], json), + sender: R.pathOr('', ['sender'], json), + class_id: R.pathOr('', ['class_id'], json), + id: R.pathOr('', ['id'], json), + }); + } +} + +export default MsgNftFreeze; diff --git a/packages/ui/src/models/msg/asset/msg_nft_issue_class.ts b/packages/ui/src/models/msg/asset/msg_nft_issue_class.ts new file mode 100644 index 0000000000..852877e236 --- /dev/null +++ b/packages/ui/src/models/msg/asset/msg_nft_issue_class.ts @@ -0,0 +1,52 @@ +/* eslint-disable camelcase */ +import * as R from 'ramda'; +import { Categories } from '../types'; + +class MsgNftIssueClass { + public category: Categories; + public type: string; + public json: any; + public issuer: string; + public symbol: string; + public name: string; + public description: string; + public uri: string; + public uri_hash: string; + public data: any; + public features: any[]; + public royalty_rate: string; + + constructor(payload: any) { + this.category = 'asset'; + this.type = R.pathOr('', ['type'], payload); + this.json = R.pathOr({}, ['json'], payload); + this.issuer = R.pathOr('', ['issuer'], payload); + this.symbol = R.pathOr('', ['symbol'], payload); + this.name = R.pathOr('', ['name'], payload); + this.description = R.pathOr('', ['description'], payload); + this.uri = R.pathOr('', ['uri'], payload); + this.uri_hash = R.pathOr('', ['uri_hash'], payload); + this.data = R.pathOr({}, ['data'], payload); + this.features = R.pathOr([], ['features'], payload); + this.royalty_rate = R.pathOr('', ['royalty_rate'], payload); + } + + static fromJson(json: any) { + return new MsgNftIssueClass({ + category: 'asset', + json, + type: R.pathOr('', ['@type'], json), + issuer: R.pathOr('', ['issuer'], json), + symbol: R.pathOr('', ['symbol'], json), + name: R.pathOr('', ['name'], json), + description: R.pathOr('', ['description'], json), + uri: R.pathOr('', ['uri'], json), + uri_hash: R.pathOr('', ['uri_hash'], json), + data: R.pathOr({}, ['data'], json), + features: R.pathOr([], ['features'], json), + royalty_rate: R.pathOr('', ['royalty_rate'], json), + }); + } +} + +export default MsgNftIssueClass; diff --git a/packages/ui/src/models/msg/asset/msg_nft_mint.ts b/packages/ui/src/models/msg/asset/msg_nft_mint.ts new file mode 100644 index 0000000000..20e1305cc2 --- /dev/null +++ b/packages/ui/src/models/msg/asset/msg_nft_mint.ts @@ -0,0 +1,43 @@ +/* eslint-disable camelcase */ +import * as R from 'ramda'; +import { Categories } from '../types'; + +class MsgNftMint { + public category: Categories; + public type: string; + public json: any; + public sender: string; + public class_id: string; + public id: string; + public uri: string; + public uri_hash: string; + public data: any; + + constructor(payload: any) { + this.category = 'asset'; + this.type = R.pathOr('', ['type'], payload); + this.json = R.pathOr({}, ['json'], payload); + this.sender = R.pathOr('', ['sender'], payload); + this.class_id = R.pathOr('', ['class_id'], payload); + this.id = R.pathOr('', ['id'], payload); + this.uri = R.pathOr('', ['uri'], payload); + this.uri_hash = R.pathOr('', ['uri_hash'], payload); + this.data = R.pathOr({}, ['data'], payload); + } + + static fromJson(json: any) { + return new MsgNftMint({ + category: 'asset', + json, + type: R.pathOr('', ['@type'], json), + sender: R.pathOr('', ['sender'], json), + class_id: R.pathOr('', ['class_id'], json), + id: R.pathOr('', ['id'], json), + uri: R.pathOr('', ['uri'], json), + uri_hash: R.pathOr('', ['uri_hash'], json), + data: R.pathOr({}, ['data'], json), + }); + } +} + +export default MsgNftMint; diff --git a/packages/ui/src/models/msg/asset/msg_nft_unfreeze.ts b/packages/ui/src/models/msg/asset/msg_nft_unfreeze.ts new file mode 100644 index 0000000000..1dcef1ed48 --- /dev/null +++ b/packages/ui/src/models/msg/asset/msg_nft_unfreeze.ts @@ -0,0 +1,34 @@ +/* eslint-disable camelcase */ +import * as R from 'ramda'; +import { Categories } from '../types'; + +class MsgNftUnfreeze { + public category: Categories; + public type: string; + public json: any; + public sender: string; + public class_id: string; + public id: string; + + constructor(payload: any) { + this.category = 'asset'; + this.type = R.pathOr('', ['type'], payload); + this.json = R.pathOr({}, ['json'], payload); + this.sender = R.pathOr('', ['sender'], payload); + this.class_id = R.pathOr('', ['class_id'], payload); + this.id = R.pathOr('', ['id'], payload); + } + + static fromJson(json: any) { + return new MsgNftUnfreeze({ + category: 'asset', + json, + type: R.pathOr('', ['@type'], json), + sender: R.pathOr('', ['sender'], json), + class_id: R.pathOr('', ['class_id'], json), + id: R.pathOr('', ['id'], json), + }); + } +} + +export default MsgNftUnfreeze; diff --git a/packages/ui/src/models/msg/asset/msg_set_whitelisted_limit.ts b/packages/ui/src/models/msg/asset/msg_set_whitelisted_limit.ts new file mode 100644 index 0000000000..dce0fb30b3 --- /dev/null +++ b/packages/ui/src/models/msg/asset/msg_set_whitelisted_limit.ts @@ -0,0 +1,34 @@ +/* eslint-disable camelcase */ +import * as R from 'ramda'; +import { Categories } from '../types'; + +class MsgSetWhitelistedLimit { + public category: Categories; + public type: string; + public json: any; + public sender: string; + public account: string; + public coin: MsgCoin; + + constructor(payload: any) { + this.category = 'asset'; + this.type = R.pathOr('', ['type'], payload); + this.json = R.pathOr({}, ['json'], payload); + this.sender = R.pathOr('', ['sender'], payload.json); + this.account = R.pathOr('', ['account'], payload.json); + this.coin = R.pathOr({ denom: '', amount: '0' }, ['coin'], payload.json); + } + + static fromJson(json: any) { + return new MsgSetWhitelistedLimit({ + category: 'asset', + json, + type: R.pathOr('', ['@type'], json), + sender: R.pathOr('', ['sender'], json), + account: R.pathOr('', ['account'], json), + coin: R.pathOr({ denom: '', amount: '0' }, ['coin'], json), + }); + } +} + +export default MsgSetWhitelistedLimit; diff --git a/packages/ui/src/models/msg/asset/msg_unfreeze.ts b/packages/ui/src/models/msg/asset/msg_unfreeze.ts new file mode 100644 index 0000000000..f6d70e8688 --- /dev/null +++ b/packages/ui/src/models/msg/asset/msg_unfreeze.ts @@ -0,0 +1,34 @@ +/* eslint-disable camelcase */ +import * as R from 'ramda'; +import { Categories } from '../types'; + +class MsgUnfreeze { + public category: Categories; + public type: string; + public json: any; + public account: string; + public sender: string; + public coin: MsgCoin; + + constructor(payload: any) { + this.category = 'asset'; + this.type = R.pathOr('', ['type'], payload); + this.json = R.pathOr({}, ['json'], payload); + this.account = R.pathOr('', ['account'], payload.json); + this.sender = R.pathOr('', ['sender'], payload.json); + this.coin = R.pathOr({ denom: '', amount: '0' }, ['coin'], payload.json); + } + + static fromJson(json: any) { + return new MsgUnfreeze({ + category: 'asset', + json, + type: R.pathOr('', ['@type'], json), + account: R.pathOr('', ['account'], json), + sender: R.pathOr('', ['sender'], json), + coin: R.pathOr({ denom: '', amount: '0' }, ['coin'], json), + }); + } +} + +export default MsgUnfreeze; diff --git a/packages/ui/src/screens/account_details/components/overview/index.tsx b/packages/ui/src/screens/account_details/components/overview/index.tsx index 47447ed058..6c7932122c 100644 --- a/packages/ui/src/screens/account_details/components/overview/index.tsx +++ b/packages/ui/src/screens/account_details/components/overview/index.tsx @@ -37,8 +37,8 @@ const Overview: FC = ({ className, address, withdrawalAddress }) const { t } = useTranslation('accounts'); const { open, handleClose, handleOpen, handleCopyToClipboard } = useOverview(t); - const url = `${location}/accounts/${address}`; - const hashTags = ['bigdipperexplorer', 'bigdipper']; + const url = `${location}/coreum/accounts/${address}`; + const hashTags = ['coreumexplorer', 'coreum']; return ( <> diff --git a/packages/ui/src/screens/account_details/components/transactions/hooks.ts b/packages/ui/src/screens/account_details/components/transactions/hooks.ts index 1247d0e003..b595cc583d 100644 --- a/packages/ui/src/screens/account_details/components/transactions/hooks.ts +++ b/packages/ui/src/screens/account_details/components/transactions/hooks.ts @@ -67,7 +67,8 @@ export function useTransactions() { }, onCompleted: (data) => { const itemsLength = data.messagesByAddress.length; - const newItems = R.uniq([...state.data, ...formatTransactions(data)]); + //Previously joining together ...state.data and ...formatTransactions(data) was causing duplicate transactions to be displayed + const newItems = R.uniq([...formatTransactions(data)]); const stateChange: TransactionState = { data: newItems, diff --git a/packages/ui/src/screens/home/components/blocks/components/desktop/styles.ts b/packages/ui/src/screens/home/components/blocks/components/desktop/styles.ts index 6a0f752818..4971bdd79d 100644 --- a/packages/ui/src/screens/home/components/blocks/components/desktop/styles.ts +++ b/packages/ui/src/screens/home/components/blocks/components/desktop/styles.ts @@ -15,6 +15,14 @@ const useStyles = makeStyles()((theme) => ({ }, table: { '& .MuiTableBody-root': { + overflow: 'hidden', + '& .MuiTableRow-root': { + '& .MuiTableCell-root': { + '&:last-child': { + minWidth: 100, + }, + }, + }, '& .MuiTableCell-root': { whiteSpace: 'nowrap', height: 'auto', diff --git a/packages/ui/src/screens/home/components/data_blocks/components/single_block/index.tsx b/packages/ui/src/screens/home/components/data_blocks/components/single_block/index.tsx index b774cb0ff5..c0c80cabd8 100644 --- a/packages/ui/src/screens/home/components/data_blocks/components/single_block/index.tsx +++ b/packages/ui/src/screens/home/components/data_blocks/components/single_block/index.tsx @@ -1,11 +1,12 @@ import Typography from '@mui/material/Typography'; import { FC } from 'react'; import useStyles from '@/screens/home/components/data_blocks/components/single_block/styles'; +import Spinner from '@/components/loadingSpinner'; type SingleBlockProps = { className?: string; label: string; - value: string; + value: string | null; description?: string; }; @@ -20,7 +21,7 @@ const SingleBlock: FC = ({ className, label, value, descriptio {label}
- {value} + {value ? {value} : } {!!description && ( {` / ${validatorNum}`} diff --git a/packages/ui/src/screens/home/components/data_blocks/hooks.ts b/packages/ui/src/screens/home/components/data_blocks/hooks.ts index 2bc8c88ae0..bc7a21c1e1 100644 --- a/packages/ui/src/screens/home/components/data_blocks/hooks.ts +++ b/packages/ui/src/screens/home/components/data_blocks/hooks.ts @@ -14,7 +14,7 @@ import { const { primaryTokenUnit, tokenUnits } = chainConfig(); type DataBlocksState = { - blockHeight: number; + blockHeight: number | null; blockTime: number; price: number | null; validators: { @@ -40,7 +40,7 @@ const formatActiveValidatorsCount = (data: ActiveValidatorCountQuery) => ({ export const useDataBlocks = () => { const [state, setState] = useState({ - blockHeight: 0, + blockHeight: null, blockTime: 0, price: null, validators: { diff --git a/packages/ui/src/screens/home/components/data_blocks/index.tsx b/packages/ui/src/screens/home/components/data_blocks/index.tsx index ff1805d73c..8527d3d0fd 100644 --- a/packages/ui/src/screens/home/components/data_blocks/index.tsx +++ b/packages/ui/src/screens/home/components/data_blocks/index.tsx @@ -12,7 +12,7 @@ const DataBlocks: FC = ({ className }) => { const data = [ { key: t('latestBlock'), - value: numeral(state.blockHeight).format('0,0'), + value: state.blockHeight ? numeral(state.blockHeight).format('0,0') : null, className: classes.blockHeight, }, { diff --git a/packages/ui/src/screens/validator_details/components/profile/styles.ts b/packages/ui/src/screens/validator_details/components/profile/styles.ts index f9f6a9eb15..c048874414 100644 --- a/packages/ui/src/screens/validator_details/components/profile/styles.ts +++ b/packages/ui/src/screens/validator_details/components/profile/styles.ts @@ -9,6 +9,9 @@ const useStyles = makeStyles()((theme) => ({ }, bio: { display: 'flex', + gap: '1rem', + alignItems: 'center', + justifyContent: 'flex-start', '& .bio__header': { display: 'flex', alignItems: 'flex-start', @@ -33,7 +36,7 @@ const useStyles = makeStyles()((theme) => ({ display: 'flex', alignItems: 'center', '& .header__content': { - marginLeft: theme.spacing(1), + marginLeft: theme.spacing(2), }, '& .MuiTypography-h2': { marginBottom: theme.spacing(1), diff --git a/packages/ui/src/screens/validators/components/list/components/tabs/index.tsx b/packages/ui/src/screens/validators/components/list/components/tabs/index.tsx index da14b7813b..e728c8ea22 100644 --- a/packages/ui/src/screens/validators/components/list/components/tabs/index.tsx +++ b/packages/ui/src/screens/validators/components/list/components/tabs/index.tsx @@ -28,6 +28,7 @@ const TabsHeader: FC = ({ className, tab, handleTabChange, hand
diff --git a/packages/ui/src/screens/validators/components/list/components/tabs/styles.ts b/packages/ui/src/screens/validators/components/list/components/tabs/styles.ts index 1297a0aa23..aac09e4eed 100644 --- a/packages/ui/src/screens/validators/components/list/components/tabs/styles.ts +++ b/packages/ui/src/screens/validators/components/list/components/tabs/styles.ts @@ -3,12 +3,20 @@ import { makeStyles } from 'tss-react/mui'; const useStyles = makeStyles()((theme) => ({ root: { display: 'flex', + flexDirection: 'column', + justifyContent: 'flex-end', + [theme.breakpoints.up('md')]: { + flexDirection: 'row', + justifyContent: 'space-between', + }, alignItems: 'center', - justifyContent: 'space-between', + gap: '1rem', }, searchBar: { - display: 'none', - [theme.breakpoints.up('lg')]: { + display: 'block', + padding: 0, + width: '100%', + [theme.breakpoints.up('md')]: { display: 'block', width: '300px', '& .MuiInputBase-root': {