diff --git a/package.json b/package.json index 4a6650f4..09780a14 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "@polkadot/ui-keyring": "3.6.6", "@polkadot/util": "12.6.2", "@polkadot/util-crypto": "^12.6.2", + "@region-x/components": "^0.1.14", "@types/humanize-duration": "^3.27.3", "@vercel/analytics": "^1.2.2", "apexcharts": "^3.49.1", diff --git a/src/assets/chart.svg b/src/assets/chart.svg index a933d93d..da183a3e 100644 --- a/src/assets/chart.svg +++ b/src/assets/chart.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/config.svg b/src/assets/config.svg index dec0576c..b5c2e6af 100644 --- a/src/assets/config.svg +++ b/src/assets/config.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/manage.svg b/src/assets/manage.svg index d71b0d69..1756a2fb 100644 --- a/src/assets/manage.svg +++ b/src/assets/manage.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/networks/relay/index.ts b/src/assets/networks/relay/index.ts index 996cca44..e57e5e40 100644 --- a/src/assets/networks/relay/index.ts +++ b/src/assets/networks/relay/index.ts @@ -1,6 +1,23 @@ +import { NetworkType } from '@/models'; + import Kusama from './kusama.png'; import Polkadot from './polkadot.png'; import Rococo from './rococo.png'; import Westend from './westend.png'; -export { Kusama, Polkadot, Rococo, Westend }; +const getIcon = (network: NetworkType) => { + switch (network) { + case NetworkType.POLKADOT: + return Polkadot; + case NetworkType.KUSAMA: + return Kusama; + case NetworkType.ROCOCO: + return Rococo; + case NetworkType.WESTEND: + return Westend; + default: + Polkadot; + } +}; + +export { getIcon, Kusama, Polkadot, Rococo, Westend }; diff --git a/src/assets/split.png b/src/assets/split.png deleted file mode 100644 index d435f242..00000000 Binary files a/src/assets/split.png and /dev/null differ diff --git a/src/assets/trade.svg b/src/assets/trade.svg index 5a42c444..d621b8a2 100644 --- a/src/assets/trade.svg +++ b/src/assets/trade.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/Elements/CountDown/index.tsx b/src/components/Elements/CountDown/index.tsx index 8824f4c3..9d73f2e1 100644 --- a/src/components/Elements/CountDown/index.tsx +++ b/src/components/Elements/CountDown/index.tsx @@ -15,7 +15,7 @@ export const CountDown = ({ remainingTime }: CountDownProps) => { const timerProps = { isPlaying: true, size: 96, - strokeWidth: 2, + strokeWidth: 6, }; const theme = useTheme(); diff --git a/src/components/Elements/Selectors/ChainSelector/index.tsx b/src/components/Elements/Selectors/ChainSelector/index.tsx index fe2e4750..a3b7baec 100644 --- a/src/components/Elements/Selectors/ChainSelector/index.tsx +++ b/src/components/Elements/Selectors/ChainSelector/index.tsx @@ -1,19 +1,10 @@ -import { - Box, - CircularProgress, - FormControl, - InputLabel, - MenuItem, - Select, - Typography, -} from '@mui/material'; +import { FormControl } from '@mui/material'; +import { Select } from '@region-x/components'; import Image from 'next/image'; import { useCoretimeApi, useRegionXApi, useRelayApi } from '@/contexts/apis'; import { ChainType, NetworkType } from '@/models'; -import styles from './index.module.scss'; - interface ChainSelectorProps { chain: ChainType; setChain: (_: ChainType) => void; @@ -52,65 +43,68 @@ const relayIcons = { export const ChainSelector = ({ chain, setChain }: ChainSelectorProps) => { const { network } = useNetwork(); + const { - state: { name: coretimeChain, isApiReady: isCoretimeReady }, + state: { name: coretimeChain }, } = useCoretimeApi(); const { - state: { name: relayChain, isApiReady: isRelayReady }, + state: { name: relayChain }, } = useRelayApi(); - const { - state: { name: regionXChain, isApiReady: isRegionXReady }, + state: { name: regionXChain }, } = useRegionXApi(); const menuItems = [ { - icon: relayIcons[network], + icon: ( + + ), label: relayChain, value: ChainType.RELAY, - loading: !isRelayReady, }, { - icon: coretimeIcons[network], + icon: ( + + ), label: coretimeChain, value: ChainType.CORETIME, - loading: !isCoretimeReady, }, ...(enableRegionX(network) ? [ { - icon: RegionX, + icon: ( + + ), label: regionXChain, value: ChainType.REGIONX, - loading: isRegionXReady, }, ] : []), ]; return ( - Chain + options={menuItems} + selectedValue={chain} + onChange={(c) => setChain(c || ChainType.RELAY)} + /> ); }; diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx index 0cbc6b2d..f4c1e2e2 100644 --- a/src/components/Layout/Header/index.tsx +++ b/src/components/Layout/Header/index.tsx @@ -1,40 +1,52 @@ -import { ExpandMore } from '@mui/icons-material'; import HistoryIcon from '@mui/icons-material/History'; -import { - Box, - Collapse, - Divider, - IconButton, - List, - ListItemButton, - Stack, - useTheme, -} from '@mui/material'; +import { Box, IconButton, Stack, useTheme } from '@mui/material'; +import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types'; +import { Button, Select } from '@region-x/components'; import React, { useState } from 'react'; -import { Address, NetworkSelector, ProgressButton, TxHistoryModal } from '@/components'; +import { Address, NetworkSelector, TxHistoryModal } from '@/components'; -import { KeyringState, useAccounts } from '@/contexts/account'; +import { useAccounts } from '@/contexts/account'; import styles from './index.module.scss'; export const Header = () => { const theme = useTheme(); const { - state: { accounts, activeAccount, status }, + state: { accounts, activeAccount }, setActiveAccount, disconnectWallet, connectWallet, } = useAccounts(); - const [accountsOpen, openAccounts] = useState(false); const [txHistoryModalOpen, openTxHistoryModal] = useState(false); const onDisconnect = () => { - openAccounts(false); disconnectWallet(); }; + const onAccountChange = (acc: InjectedAccountWithMeta | null) => { + if (!acc) { + onDisconnect(); + return; + } + + setActiveAccount(acc); + }; + + const availableAccounts = () => { + const filteredAccounts: Array = accounts.filter( + (acc) => acc.type === 'sr25519' + ); + // This will represent the disconnect option. + filteredAccounts.push(null); + + return filteredAccounts.map((acc) => { + if (!acc) return { value: null, label: 'Disconnect' }; + else return { value: acc, label: `${acc.meta.name}(${acc.meta.source})` }; + }); + }; + return ( <> { {activeAccount ? ( - +
openTxHistoryModal(true)}> - - {!accountsOpen && ( - openAccounts(true)} - sx={{ - justifyContent: 'space-between', - background: theme.palette.background.default, - borderRadius: 4, - }} - > - {`${activeAccount.meta.name}(${activeAccount.meta.source})`} - - - )} - - - - {accounts?.map( - (account, index) => - account.type == 'sr25519' && ( - { - setActiveAccount(account); - openAccounts(false); - }} - sx={{ - borderRadius: '0.5rem', - background: theme.palette.grey['100'], - }} - > - {`${account.meta.name}(${account.meta.source})`} - - ) - )} - - - - Disconnect - - - + + setPayee(e.target.value)} - fullWidth - type='text' - placeholder='Address of the payee' - endAdornment={ - - - - } - sx={{ height: '3rem' }} - error={payee.length > 0 && !isValidAddress(payee)} - /> + - - + ); diff --git a/src/components/Regions/Modals/TaskAssign/index.module.scss b/src/components/Regions/Modals/TaskAssign/index.module.scss index 3d3d5e80..3a348d2f 100644 --- a/src/components/Regions/Modals/TaskAssign/index.module.scss +++ b/src/components/Regions/Modals/TaskAssign/index.module.scss @@ -9,7 +9,7 @@ display: flex; flex-direction: column; gap: 0.75rem; - margin: 2rem 0 1rem 0; + margin: 1rem 0 1rem 0; } .taskWrapper, @@ -24,4 +24,5 @@ max-width: 32rem; align-items: center; margin: 0 auto; -} + background-color: white; +} \ No newline at end of file diff --git a/src/components/Regions/Modals/TaskAssign/index.tsx b/src/components/Regions/Modals/TaskAssign/index.tsx index a8052d15..f1d1e84f 100644 --- a/src/components/Regions/Modals/TaskAssign/index.tsx +++ b/src/components/Regions/Modals/TaskAssign/index.tsx @@ -3,7 +3,6 @@ import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined'; import { Alert, Box, - Button, Dialog, DialogActions, DialogContent, @@ -17,11 +16,12 @@ import { Typography, useTheme, } from '@mui/material'; +import { Button } from '@region-x/components'; import { useEffect, useState } from 'react'; import { useSubmitExtrinsic } from '@/hooks/submitExtrinsic'; -import { FinalitySelector, ProgressButton } from '@/components/Elements'; +import { FinalitySelector } from '@/components/Elements'; import { RegionOverview } from '@/components/Regions'; import { useAccounts } from '@/contexts/account'; @@ -183,15 +183,7 @@ export const TaskAssignModal = ({ open, onClose, regionMetadata }: TaskAssignMod Tasks - @@ -227,11 +219,13 @@ export const TaskAssignModal = ({ open, onClose, regionMetadata }: TaskAssignMod - - + {taskModalOpen && openTaskModal(false)} />} diff --git a/src/components/Regions/Modals/Transfer/index.tsx b/src/components/Regions/Modals/Transfer/index.tsx index c75ff363..ae9d86c2 100644 --- a/src/components/Regions/Modals/Transfer/index.tsx +++ b/src/components/Regions/Modals/Transfer/index.tsx @@ -1,6 +1,5 @@ import { Box, - Button, Dialog, DialogActions, DialogContent, @@ -9,6 +8,7 @@ import { Typography, useTheme, } from '@mui/material'; +import { Button } from '@region-x/components'; import { Region } from 'coretime-utils'; import { useEffect, useState } from 'react'; @@ -17,7 +17,7 @@ import { transferRegionOnRegionXChain, } from '@/utils/transfers/native'; -import { AddressInput, ProgressButton } from '@/components/Elements'; +import { AddressInput } from '@/components/Elements'; import { RegionOverview } from '@/components/Regions'; import { useAccounts } from '@/contexts/account'; @@ -155,11 +155,13 @@ export const TransferModal = ({ open, onClose, regionMetadata }: TransferModalPr - - + ); diff --git a/src/components/Regions/RegionMetaCard/index.module.scss b/src/components/Regions/RegionMetaCard/index.module.scss deleted file mode 100644 index 3844ef84..00000000 --- a/src/components/Regions/RegionMetaCard/index.module.scss +++ /dev/null @@ -1,41 +0,0 @@ -.container { - display: flex; - gap: 1.5rem; - border-radius: 0.5rem; - max-width: 50rem; - padding: 1.5rem 2rem; -} - -// .container:hover { -// border: 1px dashed; -// transition-duration: 300ms; -// } - -.active { - border: 1px solid; - transition-duration: 300ms; -} - -.active:hover { - border: 1px solid; -} - -.duration { - border-width: 1px; - border-style: solid; - border-radius: 2px; - padding: 0.5rem; - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 0.75rem; - line-height: 1; - width: fit-content; -} - -.regionInfo { - display: flex; - flex-direction: column; - gap: 0.5rem; - min-width: 16rem; -} diff --git a/src/components/Regions/RegionMetaCard/index.tsx b/src/components/Regions/RegionMetaCard/index.tsx index 5d099813..97417d67 100644 --- a/src/components/Regions/RegionMetaCard/index.tsx +++ b/src/components/Regions/RegionMetaCard/index.tsx @@ -1,97 +1,28 @@ -import AccessTimeIcon from '@mui/icons-material/AccessTime'; -import CheckOutlinedIcon from '@mui/icons-material/CheckOutlined'; -import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined'; -import ModeOutlinedIcon from '@mui/icons-material/ModeOutlined'; -import { - Box, - Divider, - IconButton, - Input, - LinearProgress, - Link, - Paper, - Typography, - useTheme, -} from '@mui/material'; -import { clsx } from 'clsx'; +import { RegionCard } from '@region-x/components'; import { humanizer } from 'humanize-duration'; import React, { useEffect, useState } from 'react'; import { getRelativeTimeString, timesliceToTimestamp } from '@/utils/functions'; -import { SUSBCAN_RELAY_URL } from '@/consts'; import { useCoretimeApi, useRelayApi } from '@/contexts/apis'; import { ApiState } from '@/contexts/apis/types'; -import { useNetwork } from '@/contexts/network'; import { useTasks } from '@/contexts/tasks'; import { POOLING_TASK_ID, RegionLocation, RegionMetadata } from '@/models'; -import styles from './index.module.scss'; -import { Label } from '../..'; - interface RegionMetaCardProps { regionMetadata: RegionMetadata; - editable?: boolean; active?: boolean; - bordered?: boolean; - updateName?: (_newName: string) => void; } -export const RegionMetaCard = ({ - regionMetadata, - active = false, - editable = false, - bordered = true, - updateName, -}: RegionMetaCardProps) => { - return ( - <> - {bordered ? ( - - - - ) : ( -
- -
- )} - - ); -}; - -interface RegionCardInnerProps { - regionMetadata: RegionMetadata; - editable?: boolean; - updateName?: (_newName: string) => void; -} - -const RegionCardInner = ({ - regionMetadata, - editable = false, - updateName, -}: RegionCardInnerProps) => { +export const RegionMetaCard = ({ active, regionMetadata }: RegionMetaCardProps) => { const { tasks } = useTasks(); const formatDuration = humanizer({ units: ['w', 'd', 'h'], round: true }); - const { region, taskId, location, currentUsage, consumed, coreOccupancy } = regionMetadata; - const theme = useTheme(); - - const [isEdit, setEdit] = useState(false); - const [name, setName] = useState(''); + const { region, taskId, location } = regionMetadata; const [beginTimestamp, setBeginTimestamp] = useState(0); const [endTimestamp, setEndTimestamp] = useState(0); - const { network } = useNetwork(); - const { state: { api, apiState }, } = useRelayApi(); @@ -113,40 +44,6 @@ const RegionCardInner = ({ fetchTimestamps(); }, [api, apiState, region, timeslicePeriod]); - const progress = [ - { - label: 'Core Occupancy', - value: coreOccupancy ?? 0, - color: 'success', - }, - { - label: 'Consumed', - value: consumed ?? 0, - color: 'warning', - }, - { - label: 'Current Usage', - value: currentUsage, - color: 'primary', - }, - ]; - - const onEdit = () => { - setEdit(true); - setName(regionMetadata.name ?? ''); - }; - - const onSave = () => { - setEdit(false); - setName(''); - updateName && updateName(name); - }; - - const onCancel = () => { - setEdit(false); - setName(''); - }; - const locationToLabel = (location: RegionLocation): string => { if (location === RegionLocation.REGIONX_CHAIN) { return 'RegionX Chain'; @@ -168,121 +65,23 @@ const RegionCardInner = ({ }; return ( - <> -
-
- - {`Duration: ${formatDuration(endTimestamp - beginTimestamp)}`} -
- - {editable && isEdit ? ( - setName(e.target.value)} size='small' /> - ) : ( - {regionMetadata.name} - )} - {isEdit ? ( - - - - - - - - - ) : editable ? ( - - - - - - ) : ( - <> - )} - - - {`Core Index: #${region.getCore()}`} - Begin: {getRelativeTimeString(beginTimestamp)} - End: {getRelativeTimeString(endTimestamp)} - - - -
- - - !taskId && e.preventDefault()} - href={`${SUSBCAN_RELAY_URL[network]}/parachain/${taskId}`} - > - - {`Task: ${getTask(taskId)} ${taskId ? '#' + taskId : ''}`} - - - - {progress.map(({ label, value, color }, index) => ( - - - - {`${(value * 100).toFixed(2)}%`} - - - {label} - - - ))} - - - +
+ +
); }; diff --git a/src/components/Renew/action.tsx b/src/components/Renew/action.tsx index ad472abe..b75f04ce 100644 --- a/src/components/Renew/action.tsx +++ b/src/components/Renew/action.tsx @@ -1,11 +1,10 @@ import { Stack } from '@mui/material'; +import { Button } from '@region-x/components'; import { useState } from 'react'; import { RenewableParachain } from '@/hooks'; import { useSubmitExtrinsic } from '@/hooks/submitExtrinsic'; -import { ProgressButton } from '@/components'; - import { useAccounts } from '@/contexts/account'; import { useCoretimeApi } from '@/contexts/apis'; import { useToast } from '@/contexts/toast'; @@ -56,14 +55,17 @@ export const RenewAction = ({ parachain, enabled }: RenewActionProps) => { return ( <> - - + + ); diff --git a/src/components/Renew/info.tsx b/src/components/Renew/info.tsx index 55545200..50f0d073 100644 --- a/src/components/Renew/info.tsx +++ b/src/components/Renew/info.tsx @@ -146,8 +146,8 @@ const ParachainInfo = ({ parachain, expiryTimestamp, expiryLoading }: ParachainI mt={'1rem'} gap='0.5rem' border='1px solid' - borderColor={theme.palette.grey[400]} - borderRadius='1rem' + borderColor={theme.palette.grey[100]} + borderRadius='0.2rem' > { const core = router.query.core ? Number(router.query.core) : null; const paraId = router.query.paraId ? Number(router.query.paraId) : null; - const onParaChange = (e: SelectChangeEvent) => { - const selectedCoreId = core ? parachains[Number(e.target.value)].core : parachains[0].core; - const selectedParaId = paraId - ? parachains[Number(e.target.value)].paraId - : parachains[0].paraId; + const onParaChange = (_index: number | null) => { + const index = _index ?? 0; + const selectedCoreId = core ? parachains[index].core : parachains[0].core; + const selectedParaId = paraId ? parachains[index].paraId : parachains[0].paraId; // Update the URL with the new `core` query param router.push({ @@ -41,31 +34,58 @@ export const SelectParachain = ({ parachains }: SelectParachainProps) => { }); }; + const selectOptions: SelectOption[] = parachains.map((p, i) => { + const data = chainData[network][p.paraId]; + + if (data === undefined) { + return { + label: `#${p.paraId} | Core ${p.core}`, + value: i, + icon: ( + + ), + }; + } + + return { + label: `${data.name} #${p.paraId} | Core ${p.core}`, + value: i, + icon: + data.logo === undefined ? ( + + ) : ( + + ), + }; + }); + return ( - - Select a parachain to renew - - - Parachain - - +