RegionX Paseo

.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"

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
 ```
 

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,

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.20",
     "@types/humanize-duration": "^3.27.3",
     "@vercel/analytics": "^1.2.2",
     "apexcharts": "^3.49.1",

src/components/Elements/Buttons/index.tsx

@@ -1,2 +1 @@
 export * from './ActionButton';
-export * from './ProgressButton';

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 (
     <FormControl fullWidth>
-      <InputLabel id='destination-selector-label'>Region Name</InputLabel>
       <Select
-        labelId='destination-selector-label'
-        id='destination-selector'
-        value={selectedRegion?.name}
-        label='Destination'
-        sx={{ borderRadius: '1rem' }}
-        onChange={(e) => handleRegionChange(Number(e.target.value))}
-      >
-        {regions.map((region, indx) => (
-          <MenuItem key={indx} value={indx}>
-            {region.name}
-          </MenuItem>
-        ))}
-      </Select>
+        options={regions.map((r) => {
+          return {
+            label: r.name || '',
+            value: r.rawId,
+          };
+        })}
+        onChange={(v) => handleRegionChange(regions.findIndex((r) => r.rawId === v))}
+      />
+      {selectedRegion && (
+        <div style={{ marginTop: '1rem' }}>
+          <RegionMinimal
+            rawId={selectedRegion.rawId.toString()}
+            name={selectedRegion.name || ''}
+            regionStart={'Timeslice: ' + selectedRegion.region.getBegin().toString()}
+            regionEnd={'Timeslice: ' + selectedRegion.region.getEnd().toString()}
+          />
+        </div>
+      )}
     </FormControl>
   );
 };

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: <ListOutlinedIcon />,
       },
       {
         label: 'Order Processor',
         route: '/orders/processor',
-        enabled: enableRegionX(network),
+        // enabled: enableRegionX(network),
+        enabled: false,
         icon: <RepeatOutlinedIcon />,
       },
     ],

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;
-}
+}

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) =
           </Typography>
         </Box>
         <Stack>
-          <Typography>Select a para ID</Typography>
           <FormControl fullWidth sx={{ mt: '1rem' }}>
-            <InputLabel id='label-parachain-select'>Para ID</InputLabel>
             <Select
-              sx={{ borderRadius: '1rem' }}
-              labelId='label-parachain-select'
-              label='Parachain'
-              value={paraId || ''}
-              onChange={(e) => setParaId(Number(e.target.value))}
-              disabled={working}
-            >
-              {parachains.map((para) => (
-                <MenuItem key={para.id} value={para.id}>
-                  <ParaDisplay network={network} paraId={Number(para.id)} />
-                </MenuItem>
-              ))}
-            </Select>
+              label='Select a parachain'
+              options={parachains.map((p) => {
+                return {
+                  label: `${p.name} | Parachain #${p.id}`,
+                  value: p.id,
+                  icon: (
+                    <Image
+                      src={chainData[network][p.id]?.logo || Unknown}
+                      width={28}
+                      height={28}
+                      style={{ borderRadius: '100%', marginRight: '1rem' }}
+                      alt=''
+                    />
+                  ),
+                };
+              })}
+              searchable={true}
+              onChange={(id) => setParaId(id || parachains[0].id)}
+            />
           </FormControl>
         </Stack>
         <Typography>Region duration:</Typography>
-        <Stack padding='1rem' bgcolor='#EFF0F3' gap='1rem'>
+        <Stack padding='1rem' gap='1rem'>
           <FormControl>
             <ToggleButtonGroup
               value={durationType}
@@ -219,7 +221,7 @@ export const OrderCreationModal = ({ open, onClose }: OrderCreationModalProps) =
                   value={regionBegin?.toString() || ''}
                   type='number'
                   onChange={(e) => setRegionBegin(parseInt(e.target.value))}
-                  InputProps={{ style: { borderRadius: '1rem' } }}
+                  InputProps={{ style: { borderRadius: '0.5rem', height: '3rem' } }}
                   disabled={working}
                 />
               </Stack>
@@ -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}
                 />
               </Stack>

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
       </DialogContent>
       <DialogActions>
         <Box>
-          <ActionButton label='Close' onClick={onClose} data-cy='btn-close-order-details-modal' />
+          <Button onClick={onClose} data-cy='btn-close-order-details-modal'>
+            Close
+          </Button>
         </Box>
       </DialogActions>
     </Dialog>

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 = ({
         <Box width='100%' gap='0.5rem' mt='1.5rem' display='flex'>
           <Button
             onClick={onClose}
-            variant='outlined'
+            color='dark'
             fullWidth
-            sx={{
-              borderRadius: '1rem',
-            }}
             data-cy='btn-close-order-processor-modal'
           >
             Close
           </Button>
-          <ProgressButton
+          <Button
             fullWidth
-            label='Fulfill'
-            sx={{
-              borderRadius: '1rem',
-            }}
             onClick={onProcess}
             disabled={!checkRequirements(order, regionSelected) || working}
             loading={working}
-          />
+          >
+            Fulfill
+          </Button>
         </Box>
       </DialogActions>
     </Dialog>