From 018e4982c5be39762719ad0c022cc9fa8dcda06d Mon Sep 17 00:00:00 2001 From: Sergej Date: Thu, 10 Oct 2024 16:45:20 +0200 Subject: [PATCH 1/9] RegionX Paseo --- .env.example | 3 +- README.md | 2 +- next.config.js | 1 + src/components/Regions/Modals/Sell/index.tsx | 37 +++++++++++++------- src/consts/index.ts | 1 + src/contexts/apis/RegionXApi/index.tsx | 4 ++- src/utils/functions/api.ts | 2 +- src/utils/muiTheme.ts | 4 +-- 8 files changed, 36 insertions(+), 18 deletions(-) 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/Regions/Modals/Sell/index.tsx b/src/components/Regions/Modals/Sell/index.tsx index e3b1c3db..192c8a4f 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, @@ -14,8 +13,9 @@ 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 { Button, AmountInput } from '@region-x/components'; import { useAccounts } from '@/contexts/account'; import { useCoretimeApi } from '@/contexts/apis'; @@ -26,6 +26,8 @@ import { useToast } from '@/contexts/toast'; import { RegionMetadata } from '@/models'; import styles from './index.module.scss'; +import { getIcon } from '@/assets/networks'; +import { useNetwork } from '@/contexts/network'; interface SellModalProps extends DialogProps { onClose: () => void; @@ -36,13 +38,12 @@ export const SellModal = ({ open, onClose, regionMetadata }: SellModalProps) => const { state: { activeAccount, activeSigner }, } = useAccounts(); - const { - state: { symbol: coretimeSymbol }, - } = useCoretimeApi(); const { state: { api: regionXApi, isApiReady: isRegionXReady, symbol, decimals }, } = useRegionXApi(); + const { network } = useNetwork(); + const { fetchRegions } = useRegions(); const { fetchMarket } = useMarket(); const { toastError, toastInfo, toastSuccess, toastWarning } = useToast(); @@ -102,8 +103,7 @@ export const SellModal = ({ open, onClose, regionMetadata }: SellModalProps) => }, error: (e) => { toastError( - `Failed to list the region. Error: ${ - e.errorMessage === 'Error' ? 'Please check your balance' : e.errorMessage + `Failed to list the region. Error: ${e.errorMessage === 'Error' ? 'Please check your balance' : e.errorMessage }` ); setWorking(false); @@ -135,9 +135,20 @@ export const SellModal = ({ open, onClose, regionMetadata }: SellModalProps) => setPrice(Number(a))} + currencyOptions={[ + { + value: symbol, + label: symbol, + icon: ( + + ), + }, + ]} + label='' /> @@ -147,10 +158,12 @@ export const SellModal = ({ open, onClose, regionMetadata }: SellModalProps) => - - + ); 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/utils/functions/api.ts b/src/utils/functions/api.ts index 2a00294f..83fdd79e 100644 --- a/src/utils/functions/api.ts +++ b/src/utils/functions/api.ts @@ -61,5 +61,5 @@ export const sendUnsignedTx = async ( }; export const enableRegionX = (network: NetworkType): boolean => { - return network === NetworkType.ROCOCO || EXPERIMENTAL; + return network === NetworkType.ROCOCO || network === NetworkType.PASEO || EXPERIMENTAL; }; diff --git a/src/utils/muiTheme.ts b/src/utils/muiTheme.ts index 706ddd66..15b412ad 100644 --- a/src/utils/muiTheme.ts +++ b/src/utils/muiTheme.ts @@ -15,8 +15,8 @@ let theme = createTheme({ default: '#f6f7fa', }, primary: { - contrastText: '#f6f7fa', - main: '#3758F9', + contrastText: '#fff', + main: '#13C296', }, success: { main: '#13C296', From 81357481b2b2c7462f16f4282b96abbfc7cdbda9 Mon Sep 17 00:00:00 2001 From: Sergej Date: Fri, 11 Oct 2024 10:50:39 +0200 Subject: [PATCH 2/9] purchase --- package.json | 2 +- .../Regions/MarketRegion/index.module.scss | 24 --- src/components/Regions/MarketRegion/index.tsx | 155 ++++-------------- .../Regions/Modals/Purchase/index.tsx | 29 +++- src/components/Regions/Modals/Sell/index.tsx | 15 +- src/pages/marketplace.tsx | 51 ++---- src/utils/muiTheme.ts | 2 +- 7 files changed, 76 insertions(+), 202 deletions(-) delete mode 100644 src/components/Regions/MarketRegion/index.module.scss diff --git a/package.json b/package.json index 99c945ec..9f57a4f8 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.16", + "@region-x/components": "^0.1.18", "@types/humanize-duration": "^3.27.3", "@vercel/analytics": "^1.2.2", "apexcharts": "^3.49.1", 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..1d9d0ee8 100644 --- a/src/components/Regions/MarketRegion/index.tsx +++ b/src/components/Regions/MarketRegion/index.tsx @@ -1,146 +1,55 @@ -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/Purchase/index.tsx b/src/components/Regions/Modals/Purchase/index.tsx index 564a792e..e39b1193 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,15 @@ 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/Sell/index.tsx b/src/components/Regions/Modals/Sell/index.tsx index 192c8a4f..2baf949a 100644 --- a/src/components/Regions/Modals/Sell/index.tsx +++ b/src/components/Regions/Modals/Sell/index.tsx @@ -8,6 +8,7 @@ import { Stack, Typography, } from '@mui/material'; +import { AmountInput,Button } from '@region-x/components'; import { useState } from 'react'; import { useSubmitExtrinsic } from '@/hooks/submitExtrinsic'; @@ -15,19 +16,18 @@ import theme from '@/utils/muiTheme'; import { AddressInput } from '@/components/Elements'; import { RegionOverview } from '@/components/Regions'; -import { Button, AmountInput } from '@region-x/components'; +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'; import styles from './index.module.scss'; -import { getIcon } from '@/assets/networks'; -import { useNetwork } from '@/contexts/network'; interface SellModalProps extends DialogProps { onClose: () => void; @@ -39,9 +39,13 @@ export const SellModal = ({ open, onClose, regionMetadata }: SellModalProps) => state: { activeAccount, activeSigner }, } = useAccounts(); 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(); @@ -103,7 +107,8 @@ export const SellModal = ({ open, onClose, regionMetadata }: SellModalProps) => }, error: (e) => { toastError( - `Failed to list the region. Error: ${e.errorMessage === 'Error' ? 'Please check your balance' : e.errorMessage + `Failed to list the region. Error: ${ + e.errorMessage === 'Error' ? 'Please check your balance' : e.errorMessage }` ); setWorking(false); diff --git a/src/pages/marketplace.tsx b/src/pages/marketplace.tsx index d9735ae1..4cdd224e 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,10 @@ 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(); @@ -110,19 +106,17 @@ const Marketplace = () => { }, error: (e) => { toastError( - `Failed to unlist the region. Error: ${ - e.errorMessage === 'Error' ? 'Please check your balance.' : e.errorMessage + `Failed to unlist the region. Error: ${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 +217,12 @@ const Marketplace = () => { {filteredListings.length > 0 && ( {filteredListings.map((listing, index) => ( - - - - {activeAccount ? ( - - ) : ( - <> - )} - - + ))} )} diff --git a/src/utils/muiTheme.ts b/src/utils/muiTheme.ts index 15b412ad..708a774d 100644 --- a/src/utils/muiTheme.ts +++ b/src/utils/muiTheme.ts @@ -15,7 +15,7 @@ let theme = createTheme({ default: '#f6f7fa', }, primary: { - contrastText: '#fff', + contrastText: '#f6f7fa', main: '#13C296', }, success: { From 756c26f57e21f77a9f1dee4e8d4a8f2c8b35fc3a Mon Sep 17 00:00:00 2001 From: Sergej Date: Sat, 12 Oct 2024 13:22:39 +0200 Subject: [PATCH 3/9] region select --- package.json | 2 +- .../Selectors/RegionSelector/index.tsx | 36 +++++++++++-------- src/components/Regions/MarketRegion/index.tsx | 5 +-- src/components/Regions/Modals/Sell/index.tsx | 2 +- .../Regions/RegionMetaCard/index.tsx | 1 + src/pages/marketplace.tsx | 7 ++-- 6 files changed, 32 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 9f57a4f8..161ea1a1 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.18", + "@region-x/components": "^0.1.20", "@types/humanize-duration": "^3.27.3", "@vercel/analytics": "^1.2.2", "apexcharts": "^3.49.1", diff --git a/src/components/Elements/Selectors/RegionSelector/index.tsx b/src/components/Elements/Selectors/RegionSelector/index.tsx index 0523071d..095789ce 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,26 @@ 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/Regions/MarketRegion/index.tsx b/src/components/Regions/MarketRegion/index.tsx index 1d9d0ee8..3cc86856 100644 --- a/src/components/Regions/MarketRegion/index.tsx +++ b/src/components/Regions/MarketRegion/index.tsx @@ -10,8 +10,8 @@ import { Listing } from '@/models'; interface MarketRegionProps { listing: Listing; - onPurchase: (listing: Listing) => void; - onUnlist: (listing: Listing) => void; + onPurchase: (_listing: Listing) => void; + onUnlist: (_listing: Listing) => void; } export const MarketRegion = ({ listing, onUnlist, onPurchase }: MarketRegionProps) => { @@ -32,6 +32,7 @@ export const MarketRegion = ({ listing, onUnlist, onPurchase }: MarketRegionProp { toastInfo('Transaction was initiated'); }, inBlock: () => toastInfo('In Block'), - finalized: () => { /** */ }, + finalized: () => { + /** */ + }, success: () => { toastSuccess('Transaction successful'); fetchMarket(); @@ -106,7 +108,8 @@ const Marketplace = () => { }, error: (e) => { toastError( - `Failed to unlist the region. Error: ${e.errorMessage === 'Error' ? 'Please check your balance.' : e.errorMessage + `Failed to unlist the region. Error: ${ + e.errorMessage === 'Error' ? 'Please check your balance.' : e.errorMessage }` ); }, From 230047191c3848ec393bd62e7b6cb18e70749734 Mon Sep 17 00:00:00 2001 From: Sergej Date: Sat, 12 Oct 2024 14:10:59 +0200 Subject: [PATCH 4/9] order creation --- .../Modals/OrderCreation/index.module.scss | 12 ++--- .../Orders/Modals/OrderCreation/index.tsx | 46 ++++++++++--------- src/pages/orders/index.tsx | 29 ++---------- 3 files changed, 34 insertions(+), 53 deletions(-) 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..03e78051 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: - + { - 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 = () => { 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/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/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) - + From 1a0b760c223fd88e523ef53f992bc177842e34e6 Mon Sep 17 00:00:00 2001 From: Sergej Date: Sun, 13 Oct 2024 11:05:07 +0200 Subject: [PATCH 8/9] remove progress button --- .../Buttons/ProgressButton/index.module.scss | 7 ---- .../Elements/Buttons/ProgressButton/index.tsx | 36 ------------------- src/components/Elements/Buttons/index.tsx | 1 - .../Orders/Modals/OrderProcessor/index.tsx | 19 ++++------ 4 files changed, 6 insertions(+), 57 deletions(-) delete mode 100644 src/components/Elements/Buttons/ProgressButton/index.module.scss delete mode 100644 src/components/Elements/Buttons/ProgressButton/index.tsx 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/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 + From 376b125b78993b96d2c44877ea5442ccb889aae0 Mon Sep 17 00:00:00 2001 From: Sergej Date: Sun, 13 Oct 2024 11:17:37 +0200 Subject: [PATCH 9/9] region overview --- .../Regions/Modals/Transfer/index.tsx | 3 -- .../Regions/RegionOverview/index.module.scss | 15 +----- .../Regions/RegionOverview/index.tsx | 48 ++++--------------- 3 files changed, 12 insertions(+), 54 deletions(-) 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)} - - - + ); };