From 9b0d959f21d8bae4f60e3b0f9b16c9ed4aa5b435 Mon Sep 17 00:00:00 2001 From: Sergej Sakac <73715684+Szegoo@users.noreply.github.com> Date: Sun, 13 Oct 2024 13:10:03 +0200 Subject: [PATCH] RegionX Paseo (#240) * RegionX Paseo * purchase * region select * order creation * restrict orders for now * fix build * Replace action buttons * remove progress button * region overview --- .env.example | 3 +- README.md | 2 +- next.config.js | 1 + .../Buttons/ProgressButton/index.module.scss | 7 - .../Elements/Buttons/ProgressButton/index.tsx | 36 ---- src/components/Elements/Buttons/index.tsx | 1 - .../Selectors/RegionSelector/index.tsx | 35 ++-- src/components/Layout/Sidebar/index.tsx | 6 +- .../Modals/OrderCreation/index.module.scss | 12 +- .../Orders/Modals/OrderCreation/index.tsx | 50 +++--- .../Orders/Modals/OrderDetails/index.tsx | 7 +- .../Orders/Modals/OrderProcessor/index.tsx | 19 +-- .../Regions/MarketRegion/index.module.scss | 24 --- src/components/Regions/MarketRegion/index.tsx | 156 ++++-------------- src/components/Regions/Modals/Price/index.tsx | 7 +- .../Regions/Modals/Purchase/index.tsx | 30 +++- .../Regions/Modals/PurchaseHistory/index.tsx | 11 +- src/components/Regions/Modals/Sell/index.tsx | 40 +++-- .../Regions/Modals/Transfer/index.tsx | 3 - .../Regions/RegionOverview/index.module.scss | 15 +- .../Regions/RegionOverview/index.tsx | 48 ++---- src/components/Sales/SaleDetails/index.tsx | 12 +- src/consts/index.ts | 1 + src/contexts/apis/RegionXApi/index.tsx | 4 +- src/pages/marketplace.tsx | 50 ++---- src/pages/orders/index.tsx | 29 +--- src/utils/functions/api.ts | 2 +- src/utils/muiTheme.ts | 2 +- 28 files changed, 202 insertions(+), 411 deletions(-) delete mode 100644 src/components/Elements/Buttons/ProgressButton/index.module.scss delete mode 100644 src/components/Elements/Buttons/ProgressButton/index.tsx delete mode 100644 src/components/Regions/MarketRegion/index.module.scss diff --git a/.env.example b/.env.example index c76f6fc8..3a6cb471 100644 --- a/.env.example +++ b/.env.example @@ -10,7 +10,8 @@ WS_PASEO_RELAY_CHAIN="WSS endpoint of the coretime relay chain - Paseo" WS_ROCOCO_RELAY_CHAIN="WSS endpoint of the coretime relay chain - Rococo" WS_WESTEND_RELAY_CHAIN="WSS endpoint of the coretime relay chain - Westend" -WS_REGIONX_COCOS_CHAIN="WSS endpoint of the regionx chain" +WS_REGIONX_COCOS_CHAIN="WSS endpoint of the regionx rococo chain" +WS_REGIONX_PASEO_CHAIN="WSS endpoint of the regionx paseo chain" POLKADOT_CORETIME_INDEXER="Subquery indexer for Polkadot Coretime" KUSAMA_CORETIME_INDEXER="Subquery indexer for Kusama Coretime" diff --git a/README.md b/README.md index 23008ce6..ca029b16 100644 --- a/README.md +++ b/README.md @@ -70,7 +70,7 @@ The environment variables are automatically set in the Dockerfile; however, if y ```.env WS_KUSAMA_RELAY_CHAIN="ws://127.0.0.1:9900" WS_KUSAMA_CORETIME_CHAIN="ws://127.0.0.1:9910" -WS_REGIONX_COCOS_CHAIN="ws://127.0.0.1:9920" +WS_REGIONX_PASEO_CHAIN="ws://127.0.0.1:9920" EXPERIMENTAL=true ``` diff --git a/next.config.js b/next.config.js index 07ff8814..592b2d1a 100644 --- a/next.config.js +++ b/next.config.js @@ -26,6 +26,7 @@ const nextConfig = { SUBSCAN_CORETIME_WESTEND_DICT: process.env.SUBSCAN_CORETIME_WESTEND_DICT || '', WS_REGIONX_COCOS_CHAIN: process.env.WS_REGIONX_COCOS_CHAIN || '', + WS_REGIONX_PASEO_CHAIN: process.env.WS_REGIONX_PASEO_CHAIN || '', WS_POLKADOT_RELAY_CHAIN: process.env.WS_POLKADOT_RELAY_CHAIN, WS_KUSAMA_RELAY_CHAIN: process.env.WS_KUSAMA_RELAY_CHAIN, diff --git a/src/components/Elements/Buttons/ProgressButton/index.module.scss b/src/components/Elements/Buttons/ProgressButton/index.module.scss deleted file mode 100644 index e109926f..00000000 --- a/src/components/Elements/Buttons/ProgressButton/index.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -.buttonContainer { - border-radius: 100px; - font-weight: 500; - text-transform: none; - padding: 0.5rem 1.25rem; - font-size: 0.8rem; -} \ No newline at end of file diff --git a/src/components/Elements/Buttons/ProgressButton/index.tsx b/src/components/Elements/Buttons/ProgressButton/index.tsx deleted file mode 100644 index 5230a012..00000000 --- a/src/components/Elements/Buttons/ProgressButton/index.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { LoadingButton } from '@mui/lab'; - -import styles from './index.module.scss'; - -interface ProgressButtonProps { - label: string; - onClick: () => void; - loading: boolean; - disabled?: boolean; - width?: string; - [key: string]: any; -} -export const ProgressButton = ({ - label, - onClick, - loading, - disabled = false, - width, - ...props -}: ProgressButtonProps) => { - return ( - - {label} - - ); -}; diff --git a/src/components/Elements/Buttons/index.tsx b/src/components/Elements/Buttons/index.tsx index 1a65d096..180c832c 100644 --- a/src/components/Elements/Buttons/index.tsx +++ b/src/components/Elements/Buttons/index.tsx @@ -1,2 +1 @@ export * from './ActionButton'; -export * from './ProgressButton'; diff --git a/src/components/Elements/Selectors/RegionSelector/index.tsx b/src/components/Elements/Selectors/RegionSelector/index.tsx index 0523071d..11733c4a 100644 --- a/src/components/Elements/Selectors/RegionSelector/index.tsx +++ b/src/components/Elements/Selectors/RegionSelector/index.tsx @@ -1,4 +1,5 @@ -import { FormControl, InputLabel, MenuItem, Select } from '@mui/material'; +import { FormControl } from '@mui/material'; +import { RegionMinimal, Select } from '@region-x/components'; import { RegionMetadata } from '@/models'; @@ -15,21 +16,25 @@ export const RegionSelector = ({ }: RegionSelectorProps) => { return ( - Region Name + options={regions.map((r) => { + return { + label: r.name || '', + value: r.rawId, + }; + })} + onChange={(v) => handleRegionChange(regions.findIndex((r) => r.rawId === v))} + /> + {selectedRegion && ( +
+ +
+ )} ); }; diff --git a/src/components/Layout/Sidebar/index.tsx b/src/components/Layout/Sidebar/index.tsx index ba07db82..4e7ac149 100644 --- a/src/components/Layout/Sidebar/index.tsx +++ b/src/components/Layout/Sidebar/index.tsx @@ -145,13 +145,15 @@ export const Sidebar = () => { { label: 'Orders', route: '/orders', - enabled: enableRegionX(network), + // enabled: enableRegionX(network), + enabled: false, icon: , }, { label: 'Order Processor', route: '/orders/processor', - enabled: enableRegionX(network), + // enabled: enableRegionX(network), + enabled: false, icon: , }, ], diff --git a/src/components/Orders/Modals/OrderCreation/index.module.scss b/src/components/Orders/Modals/OrderCreation/index.module.scss index 249e0758..3f002473 100644 --- a/src/components/Orders/Modals/OrderCreation/index.module.scss +++ b/src/components/Orders/Modals/OrderCreation/index.module.scss @@ -1,3 +1,6 @@ +@import '..//../../../../styles/mixins'; +@import '..//../../../../styles/variables'; + .container { display: flex; flex-direction: column; @@ -19,15 +22,12 @@ } .activeOption { - border: 1px solid #e84d68; - background: linear-gradient(180deg, #e84d68 0%, #ad2b49 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + background-color: $greenPrimary !important; + color: white !important; } .option { border: 1px solid #cccccc !important; background-color: white; color: black; -} +} \ No newline at end of file diff --git a/src/components/Orders/Modals/OrderCreation/index.tsx b/src/components/Orders/Modals/OrderCreation/index.tsx index 169905fd..6e71e965 100644 --- a/src/components/Orders/Modals/OrderCreation/index.tsx +++ b/src/components/Orders/Modals/OrderCreation/index.tsx @@ -5,9 +5,6 @@ import { DialogContent, DialogProps, FormControl, - InputLabel, - MenuItem, - Select, Slider, Stack, TextField, @@ -16,14 +13,14 @@ import { Typography, useTheme, } from '@mui/material'; -import { Button } from '@region-x/components'; +import { Button, Select } from '@region-x/components'; +import Image from 'next/image'; import { useEffect, useState } from 'react'; import { useParasInfo } from '@/hooks'; import { useSubmitExtrinsic } from '@/hooks/submitExtrinsic'; -import { ParaDisplay } from '@/components/Paras'; - +import { chainData } from '@/chaindata'; import { useAccounts } from '@/contexts/account'; import { useRegionXApi } from '@/contexts/apis'; import { ApiState } from '@/contexts/apis/types'; @@ -33,6 +30,7 @@ import { useSaleInfo } from '@/contexts/sales'; import { useToast } from '@/contexts/toast'; import styles from './index.module.scss'; +import Unknown from '../../../../assets/unknown.svg'; interface OrderCreationModalProps extends DialogProps { onClose: () => void; @@ -167,27 +165,31 @@ export const OrderCreationModal = ({ open, onClose }: OrderCreationModalProps) = - Select a para ID - Para ID + label='Select a parachain' + options={parachains.map((p) => { + return { + label: `${p.name} | Parachain #${p.id}`, + value: p.id, + icon: ( + + ), + }; + })} + searchable={true} + onChange={(id) => setParaId(id || parachains[0].id)} + /> Region duration: - + setRegionBegin(parseInt(e.target.value))} - InputProps={{ style: { borderRadius: '1rem' } }} + InputProps={{ style: { borderRadius: '0.5rem', height: '3rem' } }} disabled={working} /> @@ -229,7 +231,7 @@ export const OrderCreationModal = ({ open, onClose }: OrderCreationModalProps) = value={regionEnd?.toString() || ''} type='number' onChange={(e) => setRegionEnd(parseInt(e.target.value))} - InputProps={{ style: { borderRadius: '1rem' } }} + InputProps={{ style: { borderRadius: '0.5rem', height: '3rem' } }} disabled={working} /> diff --git a/src/components/Orders/Modals/OrderDetails/index.tsx b/src/components/Orders/Modals/OrderDetails/index.tsx index fa3004d3..c150ddc9 100644 --- a/src/components/Orders/Modals/OrderDetails/index.tsx +++ b/src/components/Orders/Modals/OrderDetails/index.tsx @@ -7,8 +7,7 @@ import { Typography, useTheme, } from '@mui/material'; - -import { ActionButton } from '@/components/Elements'; +import { Button } from '@region-x/components'; import { useOrders } from '@/contexts/orders'; @@ -44,7 +43,9 @@ export const OrderDetailsModal = ({ open, onClose, orderId }: OrderDetailsModalP - + diff --git a/src/components/Orders/Modals/OrderProcessor/index.tsx b/src/components/Orders/Modals/OrderProcessor/index.tsx index 8b03b3af..ade9d816 100644 --- a/src/components/Orders/Modals/OrderProcessor/index.tsx +++ b/src/components/Orders/Modals/OrderProcessor/index.tsx @@ -1,7 +1,6 @@ import { Alert, Box, - Button, Dialog, DialogActions, DialogContent, @@ -12,14 +11,13 @@ import { Typography, useTheme, } from '@mui/material'; +import { Button } from '@region-x/components'; import { countMaskOnes } from 'coretime-utils'; import { useState } from 'react'; import { useSubmitExtrinsic } from '@/hooks/submitExtrinsic'; import { getBalanceString } from '@/utils/functions'; -import { ProgressButton } from '@/components/Elements'; - import { useAccounts } from '@/contexts/account'; import { useRegionXApi, useRelayApi } from '@/contexts/apis'; import { ApiState } from '@/contexts/apis/types'; @@ -181,25 +179,20 @@ export const OrderProcessorModal = ({ - + > + Fulfill + diff --git a/src/components/Regions/MarketRegion/index.module.scss b/src/components/Regions/MarketRegion/index.module.scss deleted file mode 100644 index 000316bc..00000000 --- a/src/components/Regions/MarketRegion/index.module.scss +++ /dev/null @@ -1,24 +0,0 @@ -.container { - display: flex; - flex-direction: column; - gap: 1rem; - padding: 1.5rem; -} - -.timeInfo { - display: flex; - flex-direction: row; - justify-content: space-between; -} - -.timeItem { - display: flex; - flex-direction: column; -} - -.priceItem { - display: flex; - flex-direction: column; - font-size: 13px; - gap: 0.5rem; -} diff --git a/src/components/Regions/MarketRegion/index.tsx b/src/components/Regions/MarketRegion/index.tsx index 3ab5902c..3cc86856 100644 --- a/src/components/Regions/MarketRegion/index.tsx +++ b/src/components/Regions/MarketRegion/index.tsx @@ -1,146 +1,56 @@ -import AccessTimeIcon from '@mui/icons-material/AccessTime'; -import { Box, LinearProgress, Paper, Stack, Typography, useTheme } from '@mui/material'; +import { RegionCard } from '@region-x/components'; import { humanizer } from 'humanize-duration'; import React from 'react'; import { getBalanceString, getTimeStringShort } from '@/utils/functions'; +import { useAccounts } from '@/contexts/account'; import { useRelayApi } from '@/contexts/apis'; import { Listing } from '@/models'; -import styles from './index.module.scss'; - interface MarketRegionProps { listing: Listing; + onPurchase: (_listing: Listing) => void; + onUnlist: (_listing: Listing) => void; } -export const MarketRegion = ({ listing }: MarketRegionProps) => { +export const MarketRegion = ({ listing, onUnlist, onPurchase }: MarketRegionProps) => { const formatDuration = humanizer({ units: ['w', 'd', 'h'], round: true }); - const theme = useTheme(); - const { state: { symbol, decimals }, } = useRelayApi(); - const { region, regionCoreOccupancy, regionConsumed, beginTimestamp, endTimestamp } = listing; - - const progress = [ - { - label: 'Core Occupancy', - value: regionCoreOccupancy ?? 0, - color: 'primary', - }, - { - label: 'Consumed', - value: regionConsumed ?? 0, - color: 'success', - }, - ]; + const { + state: { activeAccount }, + } = useAccounts(); - const prices = [ - { - label: 'Price/timeslice:', - value: getBalanceString(listing.timeslicePrice.toString(), decimals, symbol), - }, - { - label: 'Total:', - value: getBalanceString(listing.currentPrice.toString(), decimals, symbol), - }, - ]; + const { region, regionCoreOccupancy, regionConsumed, beginTimestamp, endTimestamp } = listing; + const ownedRegion = activeAccount?.address === region.getOwner(); return ( - - - - {`Core Index: #${region.getCore()}`} - - - - {formatDuration(endTimestamp - beginTimestamp)} - - - - - Begin: - - {getTimeStringShort(beginTimestamp)} - - - - End: - - {getTimeStringShort(endTimestamp)} - - - - - {progress.map(({ label, value, color }, index) => ( - - - - {label} - - - {`${(value * 100).toFixed(2)}%`} - - - - - ))} - - - - {prices.map(({ label, value }, index) => ( - - {label} - - {value} - - - ))} - - - + { + ownedRegion ? onUnlist(listing) : onPurchase(listing); + }, + }} + ownedRegion={ownedRegion} + salePrice={getBalanceString(listing.currentPrice.toString(), decimals, symbol)} + pricePerTimeslice={getBalanceString(listing.timeslicePrice.toString(), decimals, symbol)} + task='' + /> ); }; diff --git a/src/components/Regions/Modals/Price/index.tsx b/src/components/Regions/Modals/Price/index.tsx index 50e776c3..f335871a 100644 --- a/src/components/Regions/Modals/Price/index.tsx +++ b/src/components/Regions/Modals/Price/index.tsx @@ -8,8 +8,9 @@ import { Typography, useTheme, } from '@mui/material'; +import { Button } from '@region-x/components'; -import { ActionButton, CountDown, SalePriceChart } from '@/components'; +import { CountDown, SalePriceChart } from '@/components'; import { useSaleInfo } from '@/contexts/sales'; import { SalePhase } from '@/models'; @@ -52,7 +53,9 @@ export const PriceModal = ({ open, onClose }: PriceModalProps) => { - + diff --git a/src/components/Regions/Modals/Purchase/index.tsx b/src/components/Regions/Modals/Purchase/index.tsx index 564a792e..674628b4 100644 --- a/src/components/Regions/Modals/Purchase/index.tsx +++ b/src/components/Regions/Modals/Purchase/index.tsx @@ -1,11 +1,11 @@ -import { LoadingButton } from '@mui/lab'; -import { Button, Dialog, DialogActions, DialogContent, DialogProps } from '@mui/material'; +import { Dialog, DialogActions, DialogContent, DialogProps } from '@mui/material'; import { BN } from '@polkadot/util'; +import { Button, RegionCardHeader } from '@region-x/components'; +import { humanizer } from 'humanize-duration'; import { useState } from 'react'; import { useSubmitExtrinsic } from '@/hooks/submitExtrinsic'; - -import { MarketRegion } from '@/components/Regions'; +import { getTimeStringShort } from '@/utils/functions'; import { useAccounts } from '@/contexts/account'; import { useRegionXApi } from '@/contexts/apis/RegionXApi'; @@ -20,6 +20,8 @@ interface PurchaseModalProps extends DialogProps { } export const PurchaseModal = ({ open, onClose, listing }: PurchaseModalProps) => { + const formatDuration = humanizer({ units: ['w', 'd', 'h'], round: true }); + const { state: { activeAccount, activeSigner }, } = useAccounts(); @@ -34,6 +36,8 @@ export const PurchaseModal = ({ open, onClose, listing }: PurchaseModalProps) => const [working, setWorking] = useState(false); + const { region } = listing; + const purchaseRegion = async () => { if (!activeAccount) { return; @@ -83,9 +87,16 @@ export const PurchaseModal = ({ open, onClose, listing }: PurchaseModalProps) => }; return ( - + - + }, mt: '1rem', pb: '1rem', + width: '400px', }} > - - purchaseRegion()} variant='contained' loading={working}> + ); diff --git a/src/components/Regions/Modals/PurchaseHistory/index.tsx b/src/components/Regions/Modals/PurchaseHistory/index.tsx index 7b19b5fa..a3ab3596 100644 --- a/src/components/Regions/Modals/PurchaseHistory/index.tsx +++ b/src/components/Regions/Modals/PurchaseHistory/index.tsx @@ -10,11 +10,11 @@ import { Typography, useTheme, } from '@mui/material'; +import { Button } from '@region-x/components'; import React from 'react'; import { usePurchaseHistory } from '@/hooks'; -import { ActionButton } from '@/components/Elements'; import { PurchaseHistoryTable } from '@/components/Tables'; import { useNetwork } from '@/contexts/network'; @@ -64,12 +64,9 @@ export const PurchaseHistoryModal = ({ open, onClose }: PurchaseHistoryModalProp - + diff --git a/src/components/Regions/Modals/Sell/index.tsx b/src/components/Regions/Modals/Sell/index.tsx index e3b1c3db..64733672 100644 --- a/src/components/Regions/Modals/Sell/index.tsx +++ b/src/components/Regions/Modals/Sell/index.tsx @@ -1,6 +1,5 @@ import { Box, - Button, Dialog, DialogActions, DialogContent, @@ -9,18 +8,21 @@ import { Stack, Typography, } from '@mui/material'; +import { AmountInput, Button } from '@region-x/components'; import { useState } from 'react'; import { useSubmitExtrinsic } from '@/hooks/submitExtrinsic'; import theme from '@/utils/muiTheme'; -import { AddressInput, AmountInput, ProgressButton } from '@/components/Elements'; +import { AddressInput } from '@/components/Elements'; import { RegionOverview } from '@/components/Regions'; +import { getIcon } from '@/assets/networks'; import { useAccounts } from '@/contexts/account'; import { useCoretimeApi } from '@/contexts/apis'; import { useRegionXApi } from '@/contexts/apis/RegionXApi'; import { useMarket } from '@/contexts/market'; +import { useNetwork } from '@/contexts/network'; import { useRegions } from '@/contexts/regions'; import { useToast } from '@/contexts/toast'; import { RegionMetadata } from '@/models'; @@ -37,12 +39,15 @@ export const SellModal = ({ open, onClose, regionMetadata }: SellModalProps) => state: { activeAccount, activeSigner }, } = useAccounts(); const { - state: { symbol: coretimeSymbol }, - } = useCoretimeApi(); - const { - state: { api: regionXApi, isApiReady: isRegionXReady, symbol, decimals }, + state: { api: regionXApi, isApiReady: isRegionXReady, symbol }, } = useRegionXApi(); + const { + state: { decimals }, + } = useCoretimeApi(); + + const { network } = useNetwork(); + const { fetchRegions } = useRegions(); const { fetchMarket } = useMarket(); const { toastError, toastInfo, toastSuccess, toastWarning } = useToast(); @@ -135,9 +140,20 @@ export const SellModal = ({ open, onClose, regionMetadata }: SellModalProps) => setPrice(Number(a))} + currencyOptions={[ + { + value: symbol, + label: symbol, + icon: ( + + ), + }, + ]} + label='' /> @@ -147,10 +163,12 @@ export const SellModal = ({ open, onClose, regionMetadata }: SellModalProps) => - - + ); diff --git a/src/components/Regions/Modals/Transfer/index.tsx b/src/components/Regions/Modals/Transfer/index.tsx index ae9d86c2..ffe66613 100644 --- a/src/components/Regions/Modals/Transfer/index.tsx +++ b/src/components/Regions/Modals/Transfer/index.tsx @@ -147,9 +147,6 @@ export const TransferModal = ({ open, onClose, regionMetadata }: TransferModalPr - Transfer to - - setNewOwner(e)} /> diff --git a/src/components/Regions/RegionOverview/index.module.scss b/src/components/Regions/RegionOverview/index.module.scss index 56df6953..c5c42600 100644 --- a/src/components/Regions/RegionOverview/index.module.scss +++ b/src/components/Regions/RegionOverview/index.module.scss @@ -2,17 +2,6 @@ display: flex; flex-direction: column; gap: 1.75rem; - padding: 1.25rem; + padding: 1rem; box-shadow: 2px 2px 55px rgba(0, 0, 0, 0.08); -} - -.regionInfo { - display: flex; - justify-content: space-between; - align-items: center; -} - -.timeInfo { - display: flex; - justify-content: space-between; -} +} \ No newline at end of file diff --git a/src/components/Regions/RegionOverview/index.tsx b/src/components/Regions/RegionOverview/index.tsx index d33bf9c5..49e7d435 100644 --- a/src/components/Regions/RegionOverview/index.tsx +++ b/src/components/Regions/RegionOverview/index.tsx @@ -1,4 +1,5 @@ -import { Box, Paper, Stack, Typography, useTheme } from '@mui/material'; +import { Paper } from '@mui/material'; +import { RegionCardHeader } from '@region-x/components'; import { humanizer } from 'humanize-duration'; import { useEffect, useState } from 'react'; @@ -20,8 +21,6 @@ export const RegionOverview = ({ regionMetadata }: RegionOverviewProps) => { state: { api: relayApi, isApiReady: isRelayReady }, } = useRelayApi(); - const theme = useTheme(); - const [beginTimestamp, setBeginTimestamp] = useState(0); const [endTimestamp, setEndTimestamp] = useState(0); @@ -43,41 +42,14 @@ export const RegionOverview = ({ regionMetadata }: RegionOverviewProps) => { }, [relayApi, isRelayReady, region, timeslicePeriod]); return ( - - - - {regionMetadata.name} - - - {`Duration: ${formatDuration(endTimestamp - beginTimestamp)}`} - - - - {`Core Index: #${region.getCore()}`} - - - - - Begin: - - {getRelativeTimeString(beginTimestamp)} - - - - End: - - {getRelativeTimeString(endTimestamp)} - - - + ); }; diff --git a/src/components/Sales/SaleDetails/index.tsx b/src/components/Sales/SaleDetails/index.tsx index d7e35d6c..cf0fd4fd 100644 --- a/src/components/Sales/SaleDetails/index.tsx +++ b/src/components/Sales/SaleDetails/index.tsx @@ -13,12 +13,13 @@ import { Typography, useTheme, } from '@mui/material'; +import { Button } from '@region-x/components'; import React from 'react'; import { useSaleDetails } from '@/hooks'; import { getBalanceString, getTimeStringShort } from '@/utils/functions'; -import { ActionButton, InfoItem } from '@/components/Elements'; +import { InfoItem } from '@/components/Elements'; import { PurchaseHistoryTable } from '@/components/Tables'; import { useCoretimeApi } from '@/contexts/apis'; @@ -117,12 +118,9 @@ export const SaleDetailsModal = ({ open, onClose, info }: SaleDetailsModalProps) - + diff --git a/src/consts/index.ts b/src/consts/index.ts index 053cf382..feb1687c 100644 --- a/src/consts/index.ts +++ b/src/consts/index.ts @@ -53,4 +53,5 @@ export const WS_ROCOCO_CORETIME_CHAIN = process.env.WS_ROCOCO_CORETIME_CHAIN ?? export const WS_WESTEND_CORETIME_CHAIN = process.env.WS_WESTEND_CORETIME_CHAIN ?? ''; export const WS_REGIONX_COCOS_CHAIN = process.env.WS_REGIONX_COCOS_CHAIN ?? ''; +export const WS_REGIONX_PASEO_CHAIN = process.env.WS_REGIONX_PASEO_CHAIN ?? ''; export const EXPERIMENTAL = process.env.EXPERIMENTAL == 'true' ? true : false; diff --git a/src/contexts/apis/RegionXApi/index.tsx b/src/contexts/apis/RegionXApi/index.tsx index cae9b51c..013b24ad 100644 --- a/src/contexts/apis/RegionXApi/index.tsx +++ b/src/contexts/apis/RegionXApi/index.tsx @@ -2,7 +2,7 @@ import React, { useContext, useEffect, useReducer } from 'react'; import { enableRegionX } from '@/utils/functions'; -import { WS_REGIONX_COCOS_CHAIN } from '@/consts'; +import { WS_REGIONX_COCOS_CHAIN, WS_REGIONX_PASEO_CHAIN } from '@/consts'; import { useNetwork } from '@/contexts/network'; import { useToast } from '@/contexts/toast'; import { NetworkType } from '@/models'; @@ -103,6 +103,8 @@ const RegionXApiContextProvider = (props: any) => { const getUrl = (network: any): string | null => { if (network === NetworkType.ROCOCO) { return WS_REGIONX_COCOS_CHAIN; + } else if (network === NetworkType.PASEO) { + return WS_REGIONX_PASEO_CHAIN; } else { // We only support Rococo as of now. return null; diff --git a/src/pages/marketplace.tsx b/src/pages/marketplace.tsx index d9735ae1..460abbe2 100644 --- a/src/pages/marketplace.tsx +++ b/src/pages/marketplace.tsx @@ -1,16 +1,14 @@ import { Backdrop, Box, - Button, CircularProgress, MenuItem, - Paper, Select, Stack, Typography, } from '@mui/material'; import { useTheme } from '@mui/material/styles'; -import { OnChainRegionId, Region } from 'coretime-utils'; +import { OnChainRegionId } from 'coretime-utils'; import { useConfirm } from 'material-ui-confirm'; import moment from 'moment'; import { useEffect, useState } from 'react'; @@ -72,7 +70,6 @@ const Marketplace = () => { const [purchaseModalOpen, openPurhcaseModal] = useState(false); const [selectedListing, setSelectedListing] = useState(null); const [filteredListings, setFilteredListings] = useState([]); - const [working, setWorking] = useState(false); const [filterOptions, setFilterOptions] = useState({}); const [orderBy, setOrderBy] = useState(SortOption.CheapestFirst); @@ -96,11 +93,12 @@ const Marketplace = () => { submitExtrinsicWithFeeInfo(symbol, decimals, txUnlist, activeAccount.address, activeSigner, { ready: () => { - setWorking(true); toastInfo('Transaction was initiated'); }, inBlock: () => toastInfo('In Block'), - finalized: () => setWorking(false), + finalized: () => { + /** */ + }, success: () => { toastSuccess('Transaction successful'); fetchMarket(); @@ -114,15 +112,14 @@ const Marketplace = () => { e.errorMessage === 'Error' ? 'Please check your balance.' : e.errorMessage }` ); - setWorking(false); }, }); }; - const onUnlist = (region: Region) => { + const onUnlist = (listing: Listing) => { confirm({ - description: 'Are you sure that you are going to unlist the selected region from the market?', - }).then(() => unlistRegion(region.getOnChainRegionId())); + description: 'Do you want to unlist the region from the marketplace?', + }).then(() => unlistRegion(listing.region.getOnChainRegionId())); }; useEffect(() => { @@ -223,33 +220,12 @@ const Marketplace = () => { {filteredListings.length > 0 && ( {filteredListings.map((listing, index) => ( - - - - {activeAccount ? ( - - ) : ( - <> - )} - - + ))} )} diff --git a/src/pages/orders/index.tsx b/src/pages/orders/index.tsx index 68de60a0..0fcdb360 100644 --- a/src/pages/orders/index.tsx +++ b/src/pages/orders/index.tsx @@ -1,21 +1,8 @@ -import { - Backdrop, - Box, - Button, - CircularProgress, - Paper, - Typography, - useTheme, -} from '@mui/material'; +import { Backdrop, Box, CircularProgress, Paper, Typography, useTheme } from '@mui/material'; +import { Button } from '@region-x/components'; import { useEffect, useState } from 'react'; -import { - ActionButton, - Balance, - ContributionModal, - OrderCard, - OrderCreationModal, -} from '@/components'; +import { Balance, ContributionModal, OrderCard, OrderCreationModal } from '@/components'; import { OrderProcessorModal } from '@/components/Orders/Modals/OrderProcessor'; import { useAccounts } from '@/contexts/account'; @@ -71,7 +58,7 @@ const OrderDashboard = () => { - openOrderCreationModal(true)} /> + {orderStatus === ContextStatus.ERROR ? ( @@ -93,10 +80,6 @@ const OrderDashboard = () => { openProcessorModal(true); selectOrder(order); }} - variant='outlined' - sx={{ - borderRadius: '1rem', - }} fullWidth disabled={activeAccount === null} > @@ -104,10 +87,6 @@ const OrderDashboard = () => {