Skip to content

Commit

Permalink
RegionX components (#238)
Browse files Browse the repository at this point in the history
* In house components

* replace connect wallet

* update some progress buttons

* home page table

* Complete home page

* renew page

* dashboard almost complete

* state cards

* para dashboard complete

* purchase page

* sale history

* transfer page & regions page progress

* update main region modals

* small improvements

* transfer page

* format and lint

* ..
  • Loading branch information
Szegoo authored Oct 4, 2024
1 parent 50b4943 commit 8c6e89e
Show file tree
Hide file tree
Showing 51 changed files with 613 additions and 1,305 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"@polkadot/ui-keyring": "3.6.6",
"@polkadot/util": "12.6.2",
"@polkadot/util-crypto": "^12.6.2",
"@region-x/components": "^0.1.14",
"@types/humanize-duration": "^3.27.3",
"@vercel/analytics": "^1.2.2",
"apexcharts": "^3.49.1",
Expand Down
2 changes: 1 addition & 1 deletion src/assets/chart.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/assets/config.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/assets/manage.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 18 additions & 1 deletion src/assets/networks/relay/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,23 @@
import { NetworkType } from '@/models';

import Kusama from './kusama.png';
import Polkadot from './polkadot.png';
import Rococo from './rococo.png';
import Westend from './westend.png';

export { Kusama, Polkadot, Rococo, Westend };
const getIcon = (network: NetworkType) => {
switch (network) {
case NetworkType.POLKADOT:
return Polkadot;
case NetworkType.KUSAMA:
return Kusama;
case NetworkType.ROCOCO:
return Rococo;
case NetworkType.WESTEND:
return Westend;
default:
Polkadot;
}
};

export { getIcon, Kusama, Polkadot, Rococo, Westend };
Binary file removed src/assets/split.png
Binary file not shown.
2 changes: 1 addition & 1 deletion src/assets/trade.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/Elements/CountDown/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const CountDown = ({ remainingTime }: CountDownProps) => {
const timerProps = {
isPlaying: true,
size: 96,
strokeWidth: 2,
strokeWidth: 6,
};

const theme = useTheme();
Expand Down
78 changes: 36 additions & 42 deletions src/components/Elements/Selectors/ChainSelector/index.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,10 @@
import {
Box,
CircularProgress,
FormControl,
InputLabel,
MenuItem,
Select,
Typography,
} from '@mui/material';
import { FormControl } from '@mui/material';
import { Select } from '@region-x/components';
import Image from 'next/image';

import { useCoretimeApi, useRegionXApi, useRelayApi } from '@/contexts/apis';
import { ChainType, NetworkType } from '@/models';

import styles from './index.module.scss';

interface ChainSelectorProps {
chain: ChainType;
setChain: (_: ChainType) => void;
Expand Down Expand Up @@ -52,65 +43,68 @@ const relayIcons = {

export const ChainSelector = ({ chain, setChain }: ChainSelectorProps) => {
const { network } = useNetwork();

const {
state: { name: coretimeChain, isApiReady: isCoretimeReady },
state: { name: coretimeChain },
} = useCoretimeApi();
const {
state: { name: relayChain, isApiReady: isRelayReady },
state: { name: relayChain },
} = useRelayApi();

const {
state: { name: regionXChain, isApiReady: isRegionXReady },
state: { name: regionXChain },
} = useRegionXApi();

const menuItems = [
{
icon: relayIcons[network],
icon: (
<Image
src={relayIcons[network]}
alt=''
style={{ width: '28px', height: '28px', marginRight: '0.5rem', borderRadius: '100%' }}
/>
),
label: relayChain,
value: ChainType.RELAY,
loading: !isRelayReady,
},
{
icon: coretimeIcons[network],
icon: (
<Image
src={coretimeIcons[network]}
alt=''
style={{ width: '28px', height: '28px', marginRight: '0.5rem', borderRadius: '100%' }}
/>
),
label: coretimeChain,
value: ChainType.CORETIME,
loading: !isCoretimeReady,
},
...(enableRegionX(network)
? [
{
icon: RegionX,
icon: (
<Image
src={RegionX}
alt=''
style={{
width: '28px',
height: '28px',
marginRight: '0.5rem',
borderRadius: '100%',
}}
/>
),
label: regionXChain,
value: ChainType.REGIONX,
loading: isRegionXReady,
},
]
: []),
];
return (
<FormControl fullWidth>
<InputLabel id='origin-selector-label'>Chain</InputLabel>
<Select
labelId='origin-selector-label'
id='origin-selector'
value={chain}
label='Origin'
sx={{ borderRadius: '1rem' }}
onChange={(e) => setChain(e.target.value as ChainType)}
>
{menuItems.map(({ icon, label, value, loading }, index) => (
<MenuItem value={value} key={index}>
<Box className={styles.chainItem}>
<Image src={icon} alt='icon' className={styles.icon} />
{loading ? (
<CircularProgress size='1.5rem' />
) : (
<Typography className={styles.label}>{label}</Typography>
)}
</Box>
</MenuItem>
))}
</Select>
options={menuItems}
selectedValue={chain}
onChange={(c) => setChain(c || ChainType.RELAY)}
/>
</FormControl>
);
};
Loading

0 comments on commit 8c6e89e

Please sign in to comment.