Skip to content

Commit debe1c6

Browse files
isaozlerisaozler
authored
Merge pull request #7 from kadena-io/fix/network-chain-selector
Refactored the network and chain selection to only use a single file
2 parents 1690aa3 + b9cda4a commit debe1c6

File tree

20 files changed

+133
-108
lines changed

20 files changed

+133
-108
lines changed

‎configs/app/ui.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,6 @@ const UI = Object.freeze({
6868
baseNetwork: getEnvValue('NEXT_PUBLIC_FEATURED_BASE_NETWORK') || 'mainnet',
6969
baseChain: getEnvValue('CHAINWEB_CHAIN_ID') || 20,
7070
featuredNetworks: getExternalAssetFilePath('NEXT_PUBLIC_FEATURED_NETWORKS') ?? '/assets/configs/networks.json',
71-
featuredChains: getExternalAssetFilePath('NEXT_PUBLIC_FEATURED_CHAINS') ?? '/assets/configs/chains.json',
7271
layout: (getEnvValue('NEXT_PUBLIC_NAVIGATION_LAYOUT') || 'vertical') as NavigationLayout,
7372
},
7473
footer: {

‎deploy/tools/envs-validator/schema.ts‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ import { SUPPORTED_WALLETS } from '../../../types/client/wallets';
3232
import type { CustomLink, CustomLinksGroup } from '../../../types/footerLinks';
3333
import { CHAIN_INDICATOR_IDS, HOME_STATS_WIDGET_IDS } from '../../../types/homepage';
3434
import type { ChainIndicatorId, HeroBannerButtonState, HeroBannerConfig, HomeStatsWidgetId } from '../../../types/homepage';
35-
import { type NetworkVerificationTypeEnvs, type NetworkExplorer, type FeaturedNetwork, NETWORK_GROUPS, FeaturedChain } from '../../../types/networks';
35+
import { type NetworkVerificationTypeEnvs, type NetworkExplorer, type FeaturedNetwork, NETWORK_GROUPS } from '../../../types/networks';
3636
import { COLOR_THEME_IDS } from '../../../types/settings';
3737
import type { FontFamily } from '../../../types/ui';
3838
import type { AddressFormat, AddressViewId } from '../../../types/views/address';
@@ -552,17 +552,6 @@ const featuredNetworkSchema: yup.ObjectSchema<FeaturedNetwork> = yup
552552
invertIconInDarkMode: yup.boolean(),
553553
}) as any;
554554

555-
const featuredChainsSchema: yup.ObjectSchema<FeaturedChain> = yup
556-
.object()
557-
.shape({
558-
title: yup.string().required(),
559-
url: yup.string().test(urlTest).required(),
560-
group: yup.string().oneOf(NETWORK_GROUPS).required(),
561-
icon: yup.string().test(urlTest),
562-
isActive: yup.boolean(),
563-
invertIconInDarkMode: yup.boolean(),
564-
});
565-
566555
const navItemExternalSchema: yup.ObjectSchema<NavItemExternal> = yup
567556
.object({
568557
text: yup.string().required(),
@@ -826,10 +815,6 @@ const schema = yup
826815
.array()
827816
.json()
828817
.of(featuredNetworkSchema),
829-
NEXT_PUBLIC_FEATURED_CHAINS: yup
830-
.array()
831-
.json()
832-
.of(featuredChainsSchema),
833818
NEXT_PUBLIC_OTHER_LINKS: yup
834819
.array()
835820
.transform(replaceQuotes)

‎mocks/config/network.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import type { FeaturedChain } from 'types/networks';
1+
import type { FeaturedNetwork } from 'types/networks';
22

3-
export const FEATURED_CHAINS: Array<FeaturedChain> = [
4-
{ title: 'Gnosis Chain', url: 'https://blockscout.com/xdai/mainnet', group: 'Mainnets', isActive: true },
3+
export const FEATURED_NETWORKS: Array<FeaturedNetwork> = [
4+
{ title: 'Gnosis Chain', url: 'https://blockscout.com/xdai/mainnet', group: 'Mainnets' },
55
{ title: 'Arbitrum on xDai', url: 'https://blockscout.com/xdai/aox', group: 'Mainnets' },
66
{ title: 'Ethereum', url: 'https://blockscout.com/eth/mainnet', group: 'Mainnets' },
77
{ title: 'Ethereum Classic', url: 'https://blockscout.com/etx/mainnet', group: 'Mainnets', icon: 'https://localhost:3000/my-logo.png' },

‎nextjs/global.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,12 @@
77
font-display: swap;
88
}
99

10+
[data-position="first-item"] {
11+
border-top-left-radius: var(--kda-explorer-navigation-dimensions-select-option-radius);
12+
border-top-right-radius: var(--kda-explorer-navigation-dimensions-select-option-radius);
13+
}
14+
15+
[data-position="last-item"] {
16+
border-bottom-left-radius: var(--kda-explorer-navigation-dimensions-select-option-radius);
17+
border-bottom-right-radius: var(--kda-explorer-navigation-dimensions-select-option-radius);
18+
}

‎toolkit/chakra/select.tsx‎

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,21 @@ export interface SelectControlProps extends ChakraSelect.ControlProps {
2727
type?: SelectProps['type'];
2828
}
2929

30+
export enum OptionPositions {
31+
FIRST_ITEM = 'first-item',
32+
LAST_ITEM = 'last-item',
33+
MID_ITEM = 'mid-item',
34+
SINGLE_ITEM = 'single-item',
35+
};
36+
37+
const getNthItem = (index: number, size: number): OptionPositions => {
38+
if (size === 1) return OptionPositions.SINGLE_ITEM;
39+
if (index === 0) return OptionPositions.FIRST_ITEM;
40+
if (index === size - 1) return OptionPositions.LAST_ITEM;
41+
42+
return OptionPositions.MID_ITEM;
43+
};
44+
3045
export const SelectControl = React.forwardRef<
3146
HTMLButtonElement,
3247
SelectControlProps
@@ -307,8 +322,8 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>((props, ref)
307322
/>
308323
</SelectControl>
309324
<SelectContent portalled={ portalled } { ...contentProps }>
310-
{ collection.items.map((item: SelectOption) => (
311-
<SelectItem item={ item } key={ item.value }>
325+
{ collection.items.map((item: SelectOption, index) => (
326+
<SelectItem data-position={ getNthItem(index, collection.items.length) } item={ item } key={ item.value }>
312327
{ item.renderLabel ? item.renderLabel() : item.label }
313328
</SelectItem>
314329
)) }
@@ -339,8 +354,8 @@ export const CompactSelect = React.forwardRef<HTMLDivElement, SelectProps>((prop
339354
/>
340355
</SelectControl>
341356
<SelectContent portalled={ portalled } { ...contentProps }>
342-
{ collection.items.map((item: SelectOption) => (
343-
<SelectItem item={ item } key={ item.value }>
357+
{ collection.items.map((item: SelectOption, index) => (
358+
<SelectItem data-position={ getNthItem(index, collection.items.length) } item={ item } key={ item.value }>
344359
{ item.label }
345360
</SelectItem>
346361
)) }
@@ -375,9 +390,9 @@ export const InlineSelect = React.forwardRef<HTMLDivElement, SelectProps>((props
375390
type="inline"
376391
/>
377392
</SelectControl>
378-
<SelectContent portalled={ portalled } { ...contentProps }>
379-
{ collection.items.map((item: SelectOption) => (
380-
<SelectItem item={ item } key={ item.value }>
393+
<SelectContent padding="var(--kda-explorer-navigation-dimensions-select-option-padding)" portalled={ portalled } { ...contentProps }>
394+
{ collection.items.map((item: SelectOption, index) => (
395+
<SelectItem data-position={ getNthItem(index, collection.items.length) } item={ item } key={ item.value }>
381396
{ item.label }
382397
</SelectItem>
383398
)) }
@@ -442,8 +457,8 @@ export const SelectAsync = React.forwardRef<HTMLDivElement, SelectAsyncProps>((p
442457
/>
443458
{ extraControls }
444459
</Box>
445-
{ collection.items.map((item) => (
446-
<SelectItem item={ item } key={ item.value }>
460+
{ collection.items.map((item, index) => (
461+
<SelectItem data-position={ getNthItem(index, collection.items.length) } item={ item } key={ item.value }>
447462
{ item.renderLabel ? item.renderLabel() : item.label }
448463
</SelectItem>
449464
)) }

‎toolkit/theme/design-system/build/tokens/kda-design-system.tokens.config.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -276,6 +276,14 @@
276276
}
277277
},
278278
"navigation": {
279+
"dimensions": {
280+
"select": {
281+
"option": {
282+
"radius": "8px",
283+
"padding": "6px"
284+
}
285+
}
286+
},
279287
"background": {
280288
"@active": "#E9F8EF"
281289
},

‎toolkit/theme/design-system/dist/css/tokens.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@
3939
--kda-explorer-input-dimensions-radius-base: 0px;
4040
--kda-explorer-input-border-color-semantic-negative: #ea3829;
4141
--kda-explorer-input-border-color-focus: #356f5a;
42+
--kda-explorer-navigation-dimensions-select-option-radius: 8px;
43+
--kda-explorer-navigation-dimensions-select-option-padding: 6px;
4244
--kda-explorer-navigation-background-active: #e9f8ef;
4345
--kda-explorer-navigation-surface-text: #1f4f3c;
4446
--kda-explorer-navigation-surface-text-selected: #061a10;
@@ -1047,6 +1049,8 @@
10471049
--kda-explorer-input-dimensions-radius-base: 0px;
10481050
--kda-explorer-input-border-color-semantic-negative: #ff7c65;
10491051
--kda-explorer-input-border-color-focus: #4a9079;
1052+
--kda-explorer-navigation-dimensions-select-option-radius: 8px;
1053+
--kda-explorer-navigation-dimensions-select-option-padding: 6px;
10501054
--kda-explorer-navigation-background-active: #2a5f4b;
10511055
--kda-explorer-navigation-surface-text: #cef8e0;
10521056
--kda-explorer-navigation-surface-text-selected: #e9f8ef;

‎toolkit/theme/design-system/dist/js/tokens.dark.config.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ export const cssVars: CSSVars = {
4343
'kda-explorer-input-dimensions-radius-base': '0px',
4444
'kda-explorer-input-border-color-semantic-negative': '#ff7c65',
4545
'kda-explorer-input-border-color-@focus': '#4a9079',
46+
'kda-explorer-navigation-dimensions-select-option-radius': '8px',
47+
'kda-explorer-navigation-dimensions-select-option-padding': '6px',
4648
'kda-explorer-navigation-background-@active': '#2a5f4b',
4749
'kda-explorer-navigation-surface-text': '#cef8e0',
4850
'kda-explorer-navigation-surface-text-@selected': '#e9f8ef',
@@ -1113,6 +1115,14 @@ export default {
11131115
},
11141116
},
11151117
navigation: {
1118+
dimensions: {
1119+
select: {
1120+
option: {
1121+
radius: '8px',
1122+
padding: '6px',
1123+
},
1124+
},
1125+
},
11161126
background: {
11171127
'@active': '#2a5f4b',
11181128
},

‎toolkit/theme/design-system/dist/js/tokens.dark.config.type.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,14 @@ export type KDADesignSystemDarkTokens = {
100100
};
101101
};
102102
navigation: {
103+
dimensions: {
104+
select: {
105+
option: {
106+
radius: string;
107+
padding: string;
108+
};
109+
};
110+
};
103111
background: {
104112
'@active': string;
105113
};

‎toolkit/theme/design-system/dist/js/tokens.light.config.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ export const cssVars: CSSVars = {
4343
'kda-explorer-input-dimensions-radius-base': '0px',
4444
'kda-explorer-input-border-color-semantic-negative': '#ea3829',
4545
'kda-explorer-input-border-color-@focus': '#356f5a',
46+
'kda-explorer-navigation-dimensions-select-option-radius': '8px',
47+
'kda-explorer-navigation-dimensions-select-option-padding': '6px',
4648
'kda-explorer-navigation-background-@active': '#e9f8ef',
4749
'kda-explorer-navigation-surface-text': '#1f4f3c',
4850
'kda-explorer-navigation-surface-text-@selected': '#061a10',
@@ -1113,6 +1115,14 @@ export default {
11131115
},
11141116
},
11151117
navigation: {
1118+
dimensions: {
1119+
select: {
1120+
option: {
1121+
radius: '8px',
1122+
padding: '6px',
1123+
},
1124+
},
1125+
},
11161126
background: {
11171127
'@active': '#e9f8ef',
11181128
},

0 commit comments

Comments
 (0)