From 720ee9c5979e51e4e80be4f8dc5084392a15de61 Mon Sep 17 00:00:00 2001 From: Sergej Date: Mon, 30 Sep 2024 11:08:47 +0200 Subject: [PATCH 01/17] In house components --- package.json | 3 ++- src/pages/_app.tsx | 1 + src/pages/index.tsx | 1 + styles/_mixins.scss | 13 +++++++++++++ styles/_variables.scss | 28 ++++++++++++++++++++++++++++ styles/global.scss | 33 +++++++++++++++++++++------------ 6 files changed, 66 insertions(+), 13 deletions(-) create mode 100644 styles/_mixins.scss create mode 100644 styles/_variables.scss diff --git a/package.json b/package.json index 4a6650f4..c1ddade1 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.0.28", "@types/humanize-duration": "^3.27.3", "@vercel/analytics": "^1.2.2", "apexcharts": "^3.49.1", @@ -79,4 +80,4 @@ "typescript": "^4.7.4", "webpack": "^5.81.0" } -} \ No newline at end of file +} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 70066de8..ec645fe1 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -8,6 +8,7 @@ import { AppProps } from 'next/app'; import Head from 'next/head'; import * as React from 'react'; import '../../styles/global.scss'; +import "@region-x/components/dist/index.css"; import createEmotionCache from '@/utils/createEmotionCache'; import theme from '@/utils/muiTheme'; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 05113fa6..48375dec 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -30,6 +30,7 @@ import { ApiState } from '@/contexts/apis/types'; import { useNetwork } from '@/contexts/network'; import { useSaleInfo } from '@/contexts/sales'; import { PurchaseType } from '@/models'; +import { Slider, Button as XButton } from '@region-x/components'; const Home = () => { const theme = useTheme(); diff --git a/styles/_mixins.scss b/styles/_mixins.scss new file mode 100644 index 00000000..545a8df8 --- /dev/null +++ b/styles/_mixins.scss @@ -0,0 +1,13 @@ +@mixin Montserrat { + font-family: "Montserrat", sans-serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; +} + +@mixin Inter { + font-family: "Inter", sans-serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; +} diff --git a/styles/_variables.scss b/styles/_variables.scss new file mode 100644 index 00000000..fbbca6e5 --- /dev/null +++ b/styles/_variables.scss @@ -0,0 +1,28 @@ +$yellowDark: #F59E0B; +$yellowLight3: #FEF3C7; +$greenDark: #1A8245; +$greenLight6: #DAF8E6; +$orangeDark: #E1580E; +$orangeLight4: #FDE5D8; +$pinkDark: #C814F6; +$pinkLight4: #FCF1FE; +$cyan: #01A9DB; +$cyanLight3: #D0F0FD; +$redDark: #E10E0E; +$redLight4: #FDD8D8; +$purpleDark: #6D28D9; +$purpleLight4: #EDE9FE; +$teal: #02AAA4; +$tealLight3: #C2F5E9; +$blueDark: #1C3FB7; +$blueLight5: #E1E8FF; +$white: #fff; +$black: #000; +$gray3: #E5E7EB; +$gray6: #CED4DA; +$dark: #111928; +$dark5: #6B7280; +$gray5: #CED4DA; +$greenPrimary: #0CC184; +$borderGray: #DFE4EA; +$sliderDisabled: #54596C; diff --git a/styles/global.scss b/styles/global.scss index 90a526da..9b42f9c9 100644 --- a/styles/global.scss +++ b/styles/global.scss @@ -1,14 +1,23 @@ -body, -html { - height: 100vh; +@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); +@import './variables'; + +:root { + --yellowDark: #{$yellowDark}; + --greenDark: #{$greenDark}; + --orangeDark: #{$orangeDark}; + --pinkDark: #{$pinkDark}; + --cyan: #{$cyan}; + --redDark: #{$redDark}; + --purpleDark: #{$purpleDark}; + --teal: #{$teal}; + --blueDark: #{$blueDark}; + --dark: #{$dark}; + --dark5: #{$dark5}; + --gray5: #{$gray5}; + --gray3: #{$gray3}; + --greenPrimary: #{$greenPrimary}; } -* { - margin: 0; - padding: 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - font-family: 'Montserrat'; - font-weight: 600; -} \ No newline at end of file +a { + color: $greenPrimary; +} From c9ee21d86a4c136c3a892cee857b1804da09fc8f Mon Sep 17 00:00:00 2001 From: Sergej Date: Mon, 30 Sep 2024 15:34:58 +0200 Subject: [PATCH 02/17] replace connect wallet --- package.json | 4 +- src/components/Layout/Header/index.tsx | 113 +++++++++---------------- src/pages/_app.tsx | 2 +- 3 files changed, 43 insertions(+), 76 deletions(-) diff --git a/package.json b/package.json index c1ddade1..bdeb7cdd 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "@polkadot/ui-keyring": "3.6.6", "@polkadot/util": "12.6.2", "@polkadot/util-crypto": "^12.6.2", - "@region-x/components": "^0.0.28", + "@region-x/components": "^0.0.30", "@types/humanize-duration": "^3.27.3", "@vercel/analytics": "^1.2.2", "apexcharts": "^3.49.1", @@ -80,4 +80,4 @@ "typescript": "^4.7.4", "webpack": "^5.81.0" } -} +} \ No newline at end of file diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx index 0cbc6b2d..928259d9 100644 --- a/src/components/Layout/Header/index.tsx +++ b/src/components/Layout/Header/index.tsx @@ -1,15 +1,5 @@ -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 React, { useState } from 'react'; import { Address, NetworkSelector, ProgressButton, TxHistoryModal } from '@/components'; @@ -17,6 +7,8 @@ import { Address, NetworkSelector, ProgressButton, TxHistoryModal } from '@/comp import { KeyringState, useAccounts } from '@/contexts/account'; import styles from './index.module.scss'; +import { Select } from '@region-x/components'; +import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types'; export const Header = () => { const theme = useTheme(); @@ -27,14 +19,34 @@ export const Header = () => { 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 - - - + onAccountChange(acc)} - selectedValue={activeAccount as any} - /> + + p.core === core && p.paraId === paraId).toString()} - onChange={onParaChange} - > - {parachains.map(({ paraId, core }, index) => ( - - - - ))} - - + setChain(e.target.value as ChainType)} - > - {menuItems.map(({ icon, label, value, loading }, index) => ( - - - icon - {loading ? ( - - ) : ( - {label} - )} - - - ))} - + options={menuItems} + selectedValue={chain} + onChange={(c) => setChain(c || ChainType.RELAY)} + /> ); }; 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..db2fb914 100644 --- a/src/components/Regions/RegionMetaCard/index.tsx +++ b/src/components/Regions/RegionMetaCard/index.tsx @@ -26,8 +26,8 @@ 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 '../..'; +import { RegionCard } from '@region-x/components'; interface RegionMetaCardProps { regionMetadata: RegionMetadata; @@ -37,43 +37,13 @@ interface RegionMetaCardProps { 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 = ({ +export const RegionMetaCard = ({ regionMetadata, editable = false, updateName, @@ -81,17 +51,11 @@ const RegionCardInner = ({ 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 +77,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 +98,21 @@ 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/Transfer/transferActions.tsx b/src/components/Transfer/transferActions.tsx index 9c6cca38..4c0833cd 100644 --- a/src/components/Transfer/transferActions.tsx +++ b/src/components/Transfer/transferActions.tsx @@ -1,13 +1,7 @@ import ArrowDownward from '@mui/icons-material/ArrowDownwardOutlined'; -import { Box, Button, Paper, Stack } from '@mui/material'; +import { Box, Paper, Stack } from '@mui/material'; import { useRouter } from 'next/router'; -import theme from '@/utils/muiTheme'; - -import { ProgressButton } from '@/components/Elements/Buttons/ProgressButton'; -import { AddressInput } from '@/components/Elements/Inputs/AddressInput'; -import { AmountInput } from '@/components/Elements/Inputs/AmountInput'; - import { useCoretimeApi, useRegionXApi, useRelayApi } from '@/contexts/apis'; import { useBalances } from '@/contexts/balance'; import { useNetwork } from '@/contexts/network'; @@ -18,6 +12,9 @@ import { assetType } from './common'; import { useTransferState } from './contexts/transferState'; import { useTransferHandlers } from './hooks/useTransferHandlers'; +import { AmountInput, Button } from '@region-x/components'; +import { AddressInput } from '../Elements'; + const TransferActions = () => { const { transferAmount, handleTransfer, working, newOwner, setNewOwner, setTransferAmount } = useTransferHandlers(); @@ -82,7 +79,7 @@ const TransferActions = () => { { destinationChain !== ChainType.NONE && ( }]} + label='Transfer amount' /> )} @@ -112,17 +109,14 @@ const TransferActions = () => { }} > + - ); diff --git a/src/components/Transfer/transferForm.tsx b/src/components/Transfer/transferForm.tsx index 2da8d073..ef7add51 100644 --- a/src/components/Transfer/transferForm.tsx +++ b/src/components/Transfer/transferForm.tsx @@ -33,7 +33,7 @@ const TransferForm = () => { Date: Fri, 4 Oct 2024 13:39:40 +0200 Subject: [PATCH 13/17] update main region modals --- package.json | 2 +- .../Selectors/ChainSelector/index.tsx | 34 ++++++++-------- .../Regions/Modals/AddTask/index.tsx | 8 ++-- .../Modals/Interlace/index.module.scss | 4 +- .../Regions/Modals/Interlace/index.tsx | 14 +++---- .../Modals/Partition/index.module.scss | 7 ++-- .../Regions/Modals/Partition/index.tsx | 17 ++++---- .../Regions/Modals/Pooling/index.tsx | 34 ++++------------ .../Modals/TaskAssign/index.module.scss | 5 ++- .../Regions/Modals/TaskAssign/index.tsx | 20 ++++------ .../Regions/Modals/Transfer/index.tsx | 10 +++-- .../Regions/RegionMetaCard/index.tsx | 40 +++---------------- src/components/Transfer/transferActions.tsx | 8 +--- src/pages/regions.tsx | 17 +++----- styles/_variables.scss | 3 +- styles/global.scss | 3 +- 16 files changed, 80 insertions(+), 146 deletions(-) diff --git a/package.json b/package.json index 3f038749..93bb9ceb 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "@polkadot/ui-keyring": "3.6.6", "@polkadot/util": "12.6.2", "@polkadot/util-crypto": "^12.6.2", - "@region-x/components": "^0.1.10", + "@region-x/components": "^0.1.12", "@types/humanize-duration": "^3.27.3", "@vercel/analytics": "^1.2.2", "apexcharts": "^3.49.1", diff --git a/src/components/Elements/Selectors/ChainSelector/index.tsx b/src/components/Elements/Selectors/ChainSelector/index.tsx index 7475c2ab..a3b7baec 100644 --- a/src/components/Elements/Selectors/ChainSelector/index.tsx +++ b/src/components/Elements/Selectors/ChainSelector/index.tsx @@ -79,23 +79,23 @@ export const ChainSelector = ({ chain, setChain }: ChainSelectorProps) => { }, ...(enableRegionX(network) ? [ - { - icon: ( - - ), - label: regionXChain, - value: ChainType.REGIONX, - }, - ] + { + icon: ( + + ), + label: regionXChain, + value: ChainType.REGIONX, + }, + ] : []), ]; return ( diff --git a/src/components/Regions/Modals/AddTask/index.tsx b/src/components/Regions/Modals/AddTask/index.tsx index 40254048..3e1638e0 100644 --- a/src/components/Regions/Modals/AddTask/index.tsx +++ b/src/components/Regions/Modals/AddTask/index.tsx @@ -1,5 +1,4 @@ import { - Button, Dialog, DialogActions, DialogContent, @@ -10,10 +9,9 @@ import { Typography, useTheme, } from '@mui/material'; +import { Button } from '@region-x/components'; import { useState } from 'react'; -import { ActionButton } from '@/components/Elements'; - import { useRelayApi } from '@/contexts/apis'; import { useTasks } from '@/contexts/tasks'; import { useToast } from '@/contexts/toast'; @@ -90,10 +88,10 @@ export const AddTaskModal = ({ onClose, ...props }: AddTaskModalProps) => { - - + ); diff --git a/src/components/Regions/Modals/Interlace/index.module.scss b/src/components/Regions/Modals/Interlace/index.module.scss index b91796f4..ee7993e4 100644 --- a/src/components/Regions/Modals/Interlace/index.module.scss +++ b/src/components/Regions/Modals/Interlace/index.module.scss @@ -19,16 +19,18 @@ margin-left: auto; margin-right: auto; width: 95%; + color: var(--greenPrimary); } .circular { margin-top: 1rem; margin-left: auto; margin-right: auto; + color: var(--greenPrimary); } .mask { width: 100%; overflow-x: clip; font-size: 12px; -} +} \ No newline at end of file diff --git a/src/components/Regions/Modals/Interlace/index.tsx b/src/components/Regions/Modals/Interlace/index.tsx index 1addf829..e41e21aa 100644 --- a/src/components/Regions/Modals/Interlace/index.tsx +++ b/src/components/Regions/Modals/Interlace/index.tsx @@ -1,6 +1,5 @@ import { Box, - Button, CircularProgress, Dialog, DialogActions, @@ -11,12 +10,12 @@ import { Typography, useTheme, } from '@mui/material'; +import { Button } from '@region-x/components'; import { maskFromBin, maskFromChunk, maskToBin } from 'coretime-utils'; import { useEffect, useState } from 'react'; import { useSubmitExtrinsic } from '@/hooks/submitExtrinsic'; -import { ProgressButton } from '@/components/Elements'; import { RegionOverview } from '@/components/Regions'; import { useAccounts } from '@/contexts/account'; @@ -164,15 +163,12 @@ export const InterlaceModal = ({ open, onClose, regionMetadata }: InterlaceModal - - + ); diff --git a/src/components/Regions/Modals/Partition/index.module.scss b/src/components/Regions/Modals/Partition/index.module.scss index 362d37e6..7809e6fb 100644 --- a/src/components/Regions/Modals/Partition/index.module.scss +++ b/src/components/Regions/Modals/Partition/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; } .timeContainer { @@ -35,7 +35,8 @@ .activeUnitItem { border-radius: 1rem; - border: 1px solid #e84d68; + background-color: var(--greenPrimary); + color: white; } .unitItem { @@ -54,4 +55,4 @@ margin-left: auto; margin-right: auto; width: 80%; -} +} \ No newline at end of file diff --git a/src/components/Regions/Modals/Partition/index.tsx b/src/components/Regions/Modals/Partition/index.tsx index b9e027d3..76d57636 100644 --- a/src/components/Regions/Modals/Partition/index.tsx +++ b/src/components/Regions/Modals/Partition/index.tsx @@ -1,6 +1,5 @@ import { Box, - Button, Dialog, DialogActions, DialogContent, @@ -10,18 +9,18 @@ import { Typography, useTheme, } from '@mui/material'; +import { Button } from '@region-x/components'; import { useEffect, useState } from 'react'; import { useSubmitExtrinsic } from '@/hooks/submitExtrinsic'; -import { ProgressButton } from '@/components/Elements'; import { RegionOverview } from '@/components/Regions'; import { useAccounts } from '@/contexts/account'; import { useCoretimeApi } from '@/contexts/apis'; import { useRegions } from '@/contexts/regions'; import { useToast } from '@/contexts/toast'; -import { DAY, HOUR, MINUTE, RegionMetadata, RELAY_CHAIN_BLOCK_TIME } from '@/models'; +import { DAY, HOUR, RegionMetadata, RELAY_CHAIN_BLOCK_TIME } from '@/models'; import styles from './index.module.scss'; @@ -32,11 +31,6 @@ interface PartitionModalProps extends DialogProps { export const PartitionModal = ({ open, onClose, regionMetadata }: PartitionModalProps) => { const timeUnits = [ - { - label: 'Minutes', - unit: MINUTE, - strUnit: 'minute', - }, { label: 'Hours', unit: HOUR, @@ -166,16 +160,19 @@ export const PartitionModal = ({ open, onClose, regionMetadata }: PartitionModal valueLabelDisplay='on' valueLabelFormat={(v) => `${v} ${timeUnits[unitIdx].strUnit}${v > 1 ? 's' : ''}`} size='medium' + style={{ color: 'var(--greenPrimary)' }} className={styles.timeSlider} /> - - + ); diff --git a/src/components/Regions/Modals/Pooling/index.tsx b/src/components/Regions/Modals/Pooling/index.tsx index 845c97c4..bf34981b 100644 --- a/src/components/Regions/Modals/Pooling/index.tsx +++ b/src/components/Regions/Modals/Pooling/index.tsx @@ -1,23 +1,20 @@ import { Alert, Box, - Button, Dialog, DialogActions, DialogContent, DialogProps, - Input, - InputAdornment, Paper, Typography, useTheme, } from '@mui/material'; +import { Button } from '@region-x/components'; import { useEffect, useState } from 'react'; import { useSubmitExtrinsic } from '@/hooks/submitExtrinsic'; -import { isValidAddress } from '@/utils/functions'; -import { FinalitySelector, ProgressButton } from '@/components/Elements'; +import { AddressInput, FinalitySelector } from '@/components/Elements'; import { RegionOverview } from '@/components/Regions'; import { useAccounts } from '@/contexts/account'; @@ -124,35 +121,18 @@ export const PoolingModal = ({ open, onClose, regionMetadata }: PoolingModalProp Payee: - 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.tsx b/src/components/Regions/RegionMetaCard/index.tsx index db2fb914..5f7643c7 100644 --- a/src/components/Regions/RegionMetaCard/index.tsx +++ b/src/components/Regions/RegionMetaCard/index.tsx @@ -1,53 +1,21 @@ -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 { Label } from '../..'; -import { RegionCard } from '@region-x/components'; interface RegionMetaCardProps { regionMetadata: RegionMetadata; - editable?: boolean; active?: boolean; - bordered?: boolean; - updateName?: (_newName: string) => void; -} - -interface RegionCardInnerProps { - regionMetadata: RegionMetadata; - editable?: boolean; - updateName?: (_newName: string) => void; } -export const RegionMetaCard = ({ - regionMetadata, - editable = false, - updateName, -}: RegionCardInnerProps) => { +export const RegionMetaCard = ({ active, regionMetadata }: RegionMetaCardProps) => { const { tasks } = useTasks(); const formatDuration = humanizer({ units: ['w', 'd', 'h'], round: true }); @@ -98,7 +66,7 @@ export const RegionMetaCard = ({ }; return ( -
+
); diff --git a/src/components/Transfer/transferActions.tsx b/src/components/Transfer/transferActions.tsx index 4c0833cd..0765188a 100644 --- a/src/components/Transfer/transferActions.tsx +++ b/src/components/Transfer/transferActions.tsx @@ -1,5 +1,6 @@ import ArrowDownward from '@mui/icons-material/ArrowDownwardOutlined'; import { Box, Paper, Stack } from '@mui/material'; +import { AmountInput, Button } from '@region-x/components'; import { useRouter } from 'next/router'; import { useCoretimeApi, useRegionXApi, useRelayApi } from '@/contexts/apis'; @@ -11,8 +12,6 @@ import { AssetType, ChainType } from '@/models'; import { assetType } from './common'; import { useTransferState } from './contexts/transferState'; import { useTransferHandlers } from './hooks/useTransferHandlers'; - -import { AmountInput, Button } from '@region-x/components'; import { AddressInput } from '../Elements'; const TransferActions = () => { @@ -108,10 +107,7 @@ const TransferActions = () => { pb: '1rem', }} > - - + ); diff --git a/src/components/Orders/Modals/OrderCreation/index.tsx b/src/components/Orders/Modals/OrderCreation/index.tsx index 3e01759c..169905fd 100644 --- a/src/components/Orders/Modals/OrderCreation/index.tsx +++ b/src/components/Orders/Modals/OrderCreation/index.tsx @@ -1,6 +1,5 @@ import { Box, - Button, Dialog, DialogActions, DialogContent, @@ -17,7 +16,7 @@ import { Typography, useTheme, } from '@mui/material'; -import { Button as RxButton } from '@region-x/components'; +import { Button } from '@region-x/components'; import { useEffect, useState } from 'react'; import { useParasInfo } from '@/hooks'; @@ -254,13 +253,13 @@ export const OrderCreationModal = ({ open, onClose }: OrderCreationModalProps) = - - + );