Skip to content

Commit 38686c7

Browse files
marslavishmarslavish
committed
feat: display hyperweb chain only
1 parent b484b6f commit 38686c7

File tree

14 files changed

+242
-141
lines changed

14 files changed

+242
-141
lines changed

‎templates/chain-admin/components/common/Header/ChainDropdown.tsx‎

Lines changed: 5 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,25 @@
11
import Image from 'next/image';
2-
import { useEffect, useState } from 'react';
2+
import { useState } from 'react';
33
import { useChain, useManager } from '@cosmos-kit/react';
44
import { Box, Combobox, Skeleton, Stack, Text } from '@interchain-ui/react';
55

66
import { useStarshipChains, useDetectBreakpoints } from '@/hooks';
77
import { chainStore, useChainStore } from '@/contexts';
8-
import { chainOptions } from '@/config';
9-
import { getSignerOptions } from '@/utils';
108

119
export const ChainDropdown = () => {
1210
const { selectedChain } = useChainStore();
1311
const { chain } = useChain(selectedChain);
1412
const [input, setInput] = useState<string>(chain.pretty_name);
15-
const { isMobile } = useDetectBreakpoints();
16-
const { data: starshipChains, refetch } = useStarshipChains();
17-
18-
const [isChainsAdded, setIsChainsAdded] = useState(false);
19-
const { addChains, getChainLogo } = useManager();
20-
21-
useEffect(() => {
22-
if (
23-
starshipChains?.chains.length &&
24-
starshipChains?.assets.length &&
25-
!isChainsAdded
26-
) {
27-
addChains(
28-
starshipChains.chains,
29-
starshipChains.assets,
30-
getSignerOptions()
31-
);
32-
setIsChainsAdded(true);
33-
}
34-
}, [starshipChains, isChainsAdded]);
13+
const { data: starshipChains } = useStarshipChains();
14+
const { getChainLogo } = useManager();
3515

36-
const onOpenChange = (isOpen: boolean) => {
37-
if (isOpen && !isChainsAdded) {
38-
refetch();
39-
}
40-
};
41-
42-
const chains = isChainsAdded
43-
? chainOptions.concat(starshipChains?.chains ?? [])
44-
: chainOptions;
16+
const { isMobile } = useDetectBreakpoints();
4517

4618
return (
4719
<Combobox
4820
onInputChange={(input) => {
4921
setInput(input);
5022
}}
51-
onOpenChange={onOpenChange}
5223
selectedKey={selectedChain}
5324
onSelectionChange={(key) => {
5425
const chainName = key as string | null;
@@ -77,7 +48,7 @@ export const ChainDropdown = () => {
7748
width: isMobile ? '130px' : '260px',
7849
}}
7950
>
80-
{chains.map((c) => (
51+
{(starshipChains?.chains ?? []).map((c) => (
8152
<Combobox.Item key={c.chain_name} textValue={c.pretty_name}>
8253
<Stack
8354
direction="horizontal"

‎templates/chain-admin/components/common/Header/Header.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { RxHamburgerMenu } from 'react-icons/rx';
55

66
import { ChainDropdown } from './ChainDropdown';
77
import { Button } from '../Button';
8-
import { useDetectBreakpoints } from '@/hooks';
8+
import { useDetectBreakpoints, useAddHyperwebChain } from '@/hooks';
99
import { AddressButton } from './AddressButton';
1010

1111
interface HeaderProps {
@@ -15,6 +15,7 @@ interface HeaderProps {
1515
export const Header = ({ onOpenSidebar }: HeaderProps) => {
1616
const { theme, setTheme } = useTheme();
1717
const { isDesktop, isMobile } = useDetectBreakpoints();
18+
const { isHyperwebAdded } = useAddHyperwebChain();
1819

1920
const brandLogo = useColorModeValue(
2021
'/logos/hyperweb-logo.svg',
@@ -42,8 +43,8 @@ export const Header = ({ onOpenSidebar }: HeaderProps) => {
4243
</Link>
4344
)}
4445
<Box display="flex" alignItems="center" gap="10px">
45-
<AddressButton />
46-
<ChainDropdown />
46+
{isHyperwebAdded && <AddressButton />}
47+
{isHyperwebAdded && <ChainDropdown />}
4748
<Button
4849
leftIcon={theme === 'dark' ? 'moonLine' : 'sunLine'}
4950
px="10px"

‎templates/chain-admin/components/common/Layout.tsx‎

Lines changed: 64 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,73 @@
11
import Head from 'next/head';
2-
import { Box, useColorModeValue } from '@interchain-ui/react';
2+
import { useRouter } from 'next/router';
3+
import {
4+
Box,
5+
Callout,
6+
Icon,
7+
Text,
8+
useColorModeValue,
9+
} from '@interchain-ui/react';
10+
import { useMemo } from 'react';
311

412
import { Header } from './Header';
513
import { Footer } from './Footer';
614
import { Sidebar } from './Sidebar';
7-
import { useDisclosure } from '@/hooks';
15+
import { useDisclosure, useAddHyperwebChain, useStarshipChains } from '@/hooks';
816
import styles from '@/styles/layout.module.css';
17+
import { Button } from './Button';
18+
import { ROUTES } from './Sidebar';
919

1020
export function Layout({ children }: { children: React.ReactNode }) {
1121
const { isOpen, onOpen, onClose } = useDisclosure();
22+
const { isLoading } = useStarshipChains();
23+
const { isHyperwebAdded, refetchAndAddChain } = useAddHyperwebChain();
24+
const router = useRouter();
25+
26+
const showNotAddedWarning = !isLoading && !isHyperwebAdded;
27+
28+
const notRunningWarning = (
29+
<Callout
30+
title="Hyperweb is not running"
31+
attributes={{
32+
maxWidth: '400px',
33+
position: 'absolute',
34+
top: '20px',
35+
left: '50%',
36+
transform: 'translateX(-50%)',
37+
display: showNotAddedWarning ? 'block' : 'none',
38+
}}
39+
iconRender={<Icon name="errorWarningLine" size="$xl" />}
40+
intent="error"
41+
>
42+
<Box display="flex" alignItems="center" gap="$4">
43+
<Text>Please run `yarn starship start` and try again.</Text>
44+
<Button
45+
variant="text"
46+
size="sm"
47+
color="$text"
48+
textDecoration="underline"
49+
height="$min"
50+
px="0"
51+
py="0"
52+
onClick={refetchAndAddChain}
53+
>
54+
Refresh
55+
</Button>
56+
</Box>
57+
</Callout>
58+
);
59+
60+
const renderContent = useMemo(() => {
61+
if (router.pathname === ROUTES.HOME)
62+
return (
63+
<>
64+
{notRunningWarning}
65+
{children}
66+
</>
67+
);
68+
if (router.pathname === ROUTES.DOCS || isHyperwebAdded) return children;
69+
return notRunningWarning;
70+
}, [router.pathname, isHyperwebAdded, notRunningWarning, children]);
1271

1372
return (
1473
<Box
@@ -30,7 +89,9 @@ export function Layout({ children }: { children: React.ReactNode }) {
3089
flexDirection="column"
3190
>
3291
<Header onOpenSidebar={onOpen} />
33-
<Box flex="1">{children}</Box>
92+
<Box flex="1" position="relative">
93+
{renderContent}
94+
</Box>
3495
<Footer />
3596
</Box>
3697
</Box>

‎templates/chain-admin/components/common/Sidebar/NavItems.tsx‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,41 +13,51 @@ type NavItem = {
1313
href: string;
1414
};
1515

16+
export const ROUTES = {
17+
HOME: '/',
18+
STAKING: '/staking',
19+
GOVERNANCE: '/governance',
20+
ASSET_LIST: '/asset-list',
21+
FAUCET: '/faucet',
22+
CONTRACT: '/contract',
23+
DOCS: '/docs',
24+
} as const;
25+
1626
const navItems: NavItem[] = [
1727
{
1828
icon: <RiHome7Line size="20px" />,
1929
label: 'Home',
20-
href: '/',
30+
href: ROUTES.HOME,
2131
},
2232
{
2333
icon: <RiStackLine size="20px" />,
2434
label: 'Staking',
25-
href: '/staking',
35+
href: ROUTES.STAKING,
2636
},
2737
{
2838
icon: <MdOutlineHowToVote size="20px" />,
2939
label: 'Governance',
30-
href: '/governance',
40+
href: ROUTES.GOVERNANCE,
3141
},
3242
{
3343
icon: 'coinsLine',
3444
label: 'Asset List',
35-
href: '/asset-list',
45+
href: ROUTES.ASSET_LIST,
3646
},
3747
{
3848
icon: <MdOutlineWaterDrop size="20px" />,
3949
label: 'Faucet',
40-
href: '/faucet',
50+
href: ROUTES.FAUCET,
4151
},
4252
{
4353
icon: <LuFileJson size="20px" />,
4454
label: 'Contract',
45-
href: '/contract',
55+
href: ROUTES.CONTRACT,
4656
},
4757
{
4858
icon: 'document',
4959
label: 'Docs',
50-
href: '/docs',
60+
href: ROUTES.DOCS,
5161
},
5262
];
5363

‎templates/chain-admin/components/common/Sidebar/SidebarContent.tsx‎

Lines changed: 69 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@ import { NavItems } from './NavItems';
77
import { Button } from '@/components';
88
import { useChainStore } from '@/contexts';
99
import { shortenAddress } from '@/utils';
10-
import { useCopyToClipboard, useConnectChain } from '@/hooks';
10+
import {
11+
useCopyToClipboard,
12+
useConnectChain,
13+
useAddHyperwebChain,
14+
} from '@/hooks';
1115

1216
export const SidebarContent = ({ onClose }: { onClose: () => void }) => {
13-
const { selectedChain } = useChainStore();
14-
const { isCopied, copyToClipboard } = useCopyToClipboard();
15-
const { connect, disconnect, address, isWalletConnected, wallet } =
16-
useConnectChain(selectedChain);
17-
17+
const { isHyperwebAdded } = useAddHyperwebChain();
1818
const poweredByLogoSrc = useColorModeValue(
1919
'/logos/cosmology.svg',
2020
'/logos/cosmology-dark.svg'
@@ -30,56 +30,7 @@ export const SidebarContent = ({ onClose }: { onClose: () => void }) => {
3030
>
3131
<NavItems onItemClick={onClose} />
3232
<Box mt="$auto">
33-
{isWalletConnected && address ? (
34-
<Box display="flex" alignItems="center" justifyContent="center">
35-
<Button
36-
variant="outline"
37-
px="10px"
38-
borderTopRightRadius={0}
39-
borderBottomRightRadius={0}
40-
leftIcon={
41-
wallet?.logo ? (
42-
<Image
43-
src={
44-
typeof wallet.logo === 'string'
45-
? wallet.logo
46-
: wallet.logo.major || wallet.logo.minor
47-
}
48-
alt={wallet.prettyName}
49-
width="0"
50-
height="0"
51-
style={{ width: '20px', height: 'auto' }}
52-
/>
53-
) : (
54-
'checkboxCircle'
55-
)
56-
}
57-
rightIcon={isCopied ? 'checkLine' : 'copy'}
58-
iconColor={isCopied ? '$textSuccess' : 'inherit'}
59-
iconSize="$lg"
60-
onClick={() => copyToClipboard(address)}
61-
>
62-
{shortenAddress(address, 4)}&nbsp;
63-
</Button>
64-
<Button
65-
leftIcon={<FiLogOut />}
66-
variant="outline"
67-
px="10px"
68-
borderLeftWidth={0}
69-
borderTopLeftRadius={0}
70-
borderBottomLeftRadius={0}
71-
onClick={disconnect}
72-
/>
73-
</Box>
74-
) : (
75-
<Button
76-
variant="outline"
77-
leftIcon={<MdOutlineAccountBalanceWallet size="20px" />}
78-
onClick={connect}
79-
>
80-
Connect Wallet
81-
</Button>
82-
)}
33+
{isHyperwebAdded && <ConnectButton />}
8334
<Box
8435
mt="10px"
8536
display="flex"
@@ -103,3 +54,65 @@ export const SidebarContent = ({ onClose }: { onClose: () => void }) => {
10354
</Box>
10455
);
10556
};
57+
58+
const ConnectButton = () => {
59+
const { selectedChain } = useChainStore();
60+
const { isCopied, copyToClipboard } = useCopyToClipboard();
61+
const { connect, disconnect, address, isWalletConnected, wallet } =
62+
useConnectChain(selectedChain);
63+
64+
return (
65+
<>
66+
{isWalletConnected && address ? (
67+
<Box display="flex" alignItems="center" justifyContent="center">
68+
<Button
69+
variant="outline"
70+
px="10px"
71+
borderTopRightRadius={0}
72+
borderBottomRightRadius={0}
73+
leftIcon={
74+
wallet?.logo ? (
75+
<Image
76+
src={
77+
typeof wallet.logo === 'string'
78+
? wallet.logo
79+
: wallet.logo.major || wallet.logo.minor
80+
}
81+
alt={wallet.prettyName}
82+
width="0"
83+
height="0"
84+
style={{ width: '20px', height: 'auto' }}
85+
/>
86+
) : (
87+
'checkboxCircle'
88+
)
89+
}
90+
rightIcon={isCopied ? 'checkLine' : 'copy'}
91+
iconColor={isCopied ? '$textSuccess' : 'inherit'}
92+
iconSize="$lg"
93+
onClick={() => copyToClipboard(address)}
94+
>
95+
{shortenAddress(address, 4)}&nbsp;
96+
</Button>
97+
<Button
98+
leftIcon={<FiLogOut />}
99+
variant="outline"
100+
px="10px"
101+
borderLeftWidth={0}
102+
borderTopLeftRadius={0}
103+
borderBottomLeftRadius={0}
104+
onClick={disconnect}
105+
/>
106+
</Box>
107+
) : (
108+
<Button
109+
variant="outline"
110+
leftIcon={<MdOutlineAccountBalanceWallet size="20px" />}
111+
onClick={connect}
112+
>
113+
Connect Wallet
114+
</Button>
115+
)}
116+
</>
117+
);
118+
};

‎templates/chain-admin/components/common/Sidebar/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export * from './Sidebar';
2+
export * from './NavItems';

0 commit comments

Comments
 (0)