Skip to content

Commit 612a6de

Browse files
twhytwhy
committed
refactor: Header and Footer
1 parent 8df096b commit 612a6de

File tree

7 files changed

+396
-205
lines changed

7 files changed

+396
-205
lines changed

‎examples/asset-list/components/common/Footer.tsx‎

Lines changed: 18 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,13 @@ import {
99
Icon,
1010
useColorModeValue,
1111
} from '@chakra-ui/react';
12-
import { dependencies, products } from '../../config';
12+
import { dependencies, products, Project } from '../../config';
1313
import { LinkIcon } from '@chakra-ui/icons';
1414

15-
interface IFeature {
16-
title: string;
17-
text: string;
18-
href: string;
19-
}
20-
21-
const Product = ({ title, text, href }: IFeature) => {
15+
function Product({ name, desc, link }: Project) {
2216
return (
23-
<Link href={href} target="_blank" _hover={{ textDecoration: 'none' }}>
24-
<Stack
25-
h="full"
26-
minH={36}
27-
p={5}
28-
spacing={2.5}
29-
justifyContent="center"
30-
borderRadius={5}
17+
<Link href={link} target="_blank" _hover={{ textDecoration: 'none' }}>
18+
<Stack h="full" p={5} minH={36} spacing={2.5} borderRadius={5} justifyContent="center"
3119
boxShadow={useColorModeValue(
3220
'0 2px 5px #ccc',
3321
'0 1px 3px #727272, 0 2px 12px -2px #2f2f2f'
@@ -40,23 +28,17 @@ const Product = ({ title, text, href }: IFeature) => {
4028
),
4129
}}
4230
>
43-
<Heading fontSize="xl">{title}&ensp;&rarr;</Heading>
44-
<Text>{text}</Text>
31+
<Heading fontSize="xl">{name}&ensp;&rarr;</Heading>
32+
<Text>{desc}</Text>
4533
</Stack>
4634
</Link>
4735
);
4836
};
4937

50-
const Dependency = ({ title, text, href }: IFeature) => {
38+
function Dependency({ name, desc, link }: Project) {
5139
return (
52-
<Link href={href} target="_blank" _hover={{ textDecoration: 'none' }}>
53-
<Stack
54-
isInline={true}
55-
key={title}
56-
spacing={3}
57-
h="full"
58-
p={4}
59-
justifyContent="center"
40+
<Link href={link} target="_blank" _hover={{ textDecoration: 'none' }}>
41+
<Stack key={name} h="full" p={4} spacing={3} isInline={true} justifyContent="center"
6042
borderRadius="md"
6143
border="1px solid"
6244
borderColor={useColorModeValue('blackAlpha.200', 'whiteAlpha.100')}
@@ -72,56 +54,36 @@ const Dependency = ({ title, text, href }: IFeature) => {
7254
</Box>
7355
<Stack spacing={1}>
7456
<Text fontSize="lg" fontWeight="semibold">
75-
{title}
57+
{name}
7658
</Text>
77-
<Text
78-
lineHeight="short"
79-
color={useColorModeValue('blackAlpha.700', 'whiteAlpha.700')}
80-
>
81-
{text}
59+
<Text lineHeight="short" color={useColorModeValue('blackAlpha.700', 'whiteAlpha.700')}>
60+
{desc}
8261
</Text>
8362
</Stack>
8463
</Stack>
8564
</Link>
8665
);
8766
};
8867

89-
export const Footer = () => {
68+
export function Footer() {
9069
return (
9170
<>
92-
<Grid
93-
templateColumns={{
94-
md: 'repeat(2, 1fr)',
95-
lg: 'repeat(3, 1fr)',
96-
}}
97-
gap={8}
98-
mb={14}
99-
>
71+
<Grid templateColumns={{ md: 'repeat(2, 1fr)', lg: 'repeat(3, 1fr)' }} mb={14} gap={8}>
10072
{products.map((product) => (
101-
<Product key={product.title} {...product}></Product>
73+
<Product key={product.name} {...product}></Product>
10274
))}
10375
</Grid>
10476
<Grid templateColumns={{ md: 'repeat(3, 1fr)' }} gap={8} mb={20}>
10577
{dependencies.map((dependency) => (
106-
<Dependency key={dependency.title} {...dependency}></Dependency>
78+
<Dependency key={dependency.name} {...dependency}></Dependency>
10779
))}
10880
</Grid>
10981
<Box mb={3}>
11082
<Divider />
11183
</Box>
112-
<Stack
113-
isInline={true}
114-
spacing={1}
115-
justifyContent="center"
116-
opacity={0.5}
117-
fontSize="sm"
118-
>
84+
<Stack isInline={true} spacing={1} justifyContent="center" opacity={0.5} fontSize="sm">
11985
<Text>Built with</Text>
120-
<Link
121-
href="https://cosmology.tech/"
122-
target="_blank"
123-
rel="noopener noreferrer"
124-
>
86+
<Link href="https://cosmology.tech/" target="_blank" rel="noopener noreferrer">
12587
Cosmology
12688
</Link>
12789
</Stack>

‎examples/asset-list/components/common/Header.tsx‎

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -16,41 +16,27 @@ const stacks = ['CosmosKit', 'Next.js'];
1616

1717
const osmojs = dependencies[0];
1818

19-
export const Header = () => {
19+
export function Header() {
2020
const { colorMode, toggleColorMode } = useColorMode();
2121

2222
return (
2323
<>
2424
<Flex justifyContent="end" mb={4}>
2525
<Button variant="outline" px={0} onClick={toggleColorMode}>
26-
<Icon
27-
as={colorMode === 'light' ? BsFillMoonStarsFill : BsFillSunFill}
28-
/>
26+
<Icon as={colorMode === 'light' ? BsFillMoonStarsFill : BsFillSunFill} />
2927
</Button>
3028
</Flex>
3129
<Box textAlign="center">
32-
<Heading
33-
as="h1"
34-
fontSize={{ base: '3xl', sm: '4xl', md: '5xl' }}
35-
fontWeight="extrabold"
36-
mb={3}
37-
>
30+
<Heading as="h1" mb={3} fontWeight="extrabold" fontSize={{ base: '3xl', sm: '4xl', md: '5xl' }}>
3831
Create Cosmos App
3932
</Heading>
40-
<Heading
41-
as="h1"
42-
fontWeight="bold"
43-
fontSize={{ base: '2xl', sm: '3xl', md: '4xl' }}
44-
>
33+
<Heading as="h1" fontWeight="bold" fontSize={{ base: '2xl', sm: '3xl', md: '4xl' }}>
4534
<Text as="span">Welcome to&nbsp;</Text>
46-
<Text
47-
as="span"
48-
color={useColorModeValue('primary.500', 'primary.200')}
49-
>
35+
<Text as="span" color={useColorModeValue('primary.500', 'primary.200')}>
5036
{stacks.join(' + ')}
5137
{' + '}
52-
<Link href={osmojs.href} target="_blank" rel="noreferrer">
53-
{osmojs.title}
38+
<Link href={osmojs.name} target="_blank" rel="noreferrer">
39+
{osmojs.name}
5440
</Link>
5541
</Text>
5642
</Heading>

‎examples/asset-list/config/features.ts‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,56 @@
1-
interface FeatureProps {
2-
title: string;
3-
text: string;
4-
href: string;
1+
export type Project = {
2+
name: string;
3+
desc: string;
4+
link: string;
55
}
66

7-
export const products: FeatureProps[] = [
7+
export const products: Project[] = [
88
{
9-
title: 'CosmosKit',
10-
text: 'A wallet adapter for react with mobile WalletConnect support for the Cosmos ecosystem.',
11-
href: 'https://github.com/cosmology-tech/cosmos-kit',
9+
name: 'CosmosKit',
10+
desc: 'A wallet adapter for react with mobile WalletConnect support for the Cosmos ecosystem.',
11+
link: 'https://github.com/cosmology-tech/cosmos-kit',
1212
},
1313
{
14-
title: 'Telescope',
15-
text: 'A TypeScript Transpiler for Cosmos Protobufs to generate libraries for Cosmos blockchains.',
16-
href: 'https://github.com/cosmology-tech/telescope',
14+
name: 'Telescope',
15+
desc: 'A TypeScript Transpiler for Cosmos Protobufs to generate libraries for Cosmos blockchains.',
16+
link: 'https://github.com/cosmology-tech/telescope',
1717
},
1818
{
19-
title: 'TS Codegen',
20-
text: 'The quickest and easiest way to convert CosmWasm Contracts into dev-friendly TypeScript classes.',
21-
href: 'https://github.com/CosmWasm/ts-codegen',
19+
name: 'TS Codegen',
20+
desc: 'The quickest and easiest way to convert CosmWasm Contracts into dev-friendly TypeScript classes.',
21+
link: 'https://github.com/CosmWasm/ts-codegen',
2222
},
2323
{
24-
title: 'CosmWasm Academy',
25-
text: 'Master CosmWasm and build your secure, multi-chain dApp on any CosmWasm chain!',
26-
href: 'https://academy.cosmwasm.com/',
24+
name: 'CosmWasm Academy',
25+
desc: 'Master CosmWasm and build your secure, multi-chain dApp on any CosmWasm chain!',
26+
link: 'https://academy.cosmwasm.com/',
2727
},
2828
{
29-
title: 'Chain Registry',
30-
text: 'Get chain and asset list information from the npm package for the Official Cosmos chain registry.',
31-
href: 'https://github.com/cosmology-tech/chain-registry',
29+
name: 'Chain Registry',
30+
desc: 'Get chain and asset list information from the npm package for the Official Cosmos chain registry.',
31+
link: 'https://github.com/cosmology-tech/chain-registry',
3232
},
3333
{
34-
title: 'Videos',
35-
text: 'How-to videos from the official Cosmology website, with learning resources for building in Cosmos.',
36-
href: 'https://cosmology.tech/learn',
34+
name: 'Videos',
35+
desc: 'How-to videos from the official Cosmology website, with learning resources for building in Cosmos.',
36+
link: 'https://cosmology.tech/learn',
3737
},
3838
];
3939

40-
export const dependencies: FeatureProps[] = [
40+
export const dependencies: Project[] = [
4141
{
42-
title: 'OsmoJS',
43-
text: 'Use osmo-query to simplify data fetching.',
44-
href: 'https://github.com/osmosis-labs/osmojs',
42+
name: 'OsmoJS',
43+
desc: 'Use osmo-query to simplify data fetching.',
44+
link: 'https://github.com/osmosis-labs/osmojs',
4545
},
4646
{
47-
title: 'Chakra UI',
48-
text: 'A simple, modular and accessible React Component Library.',
49-
href: 'https://chakra-ui.com/docs/components/',
47+
name: 'Chakra UI',
48+
desc: 'A simple, modular and accessible React Component Library.',
49+
link: 'https://chakra-ui.com/docs/components/',
5050
},
5151
{
52-
title: 'Next.js',
53-
text: 'A React Framework supports hybrid static & server rendering.',
54-
href: 'https://nextjs.org/',
52+
name: 'Next.js',
53+
desc: 'A React Framework supports hybrid static & server rendering.',
54+
link: 'https://nextjs.org/',
5555
},
5656
];

‎examples/asset-list/package.json‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,13 @@
2121
"@cosmjs/cosmwasm-stargate": "0.29.5",
2222
"@cosmjs/stargate": "0.29.5",
2323
"@cosmology-ui/react": "0.1.8-beta.30",
24-
"@cosmos-kit/core": "2.2.2",
25-
"@cosmos-kit/cosmostation": "2.1.7",
26-
"@cosmos-kit/keplr": "2.1.7",
27-
"@cosmos-kit/leap": "2.1.7",
28-
"@cosmos-kit/react": "2.2.2",
24+
"@cosmos-kit/core": "^2.5.0",
25+
"@cosmos-kit/cosmostation": "^2.3.0",
26+
"@cosmos-kit/keplr": "^2.3.0",
27+
"@cosmos-kit/leap": "^2.3.0",
28+
"@cosmos-kit/react": "^2.6.0",
2929
"@emotion/styled": "11.10.6",
30+
"@interchain-ui/react": "1.4.1",
3031
"@tanstack/react-query": "4.32.0",
3132
"bignumber.js": "9.1.1",
3233
"chain-registry": "1.19.0",

‎examples/asset-list/pages/_app.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import type { AppProps } from 'next/app';
33
import { ChainProvider } from '@cosmos-kit/react';
44
import { ChakraProvider } from '@chakra-ui/react';
55
import { aminoTypes, registry } from '../config/defaults';
6-
import { wallets as keplrWallets } from '@cosmos-kit/keplr';
7-
import { wallets as cosmostationWallets } from '@cosmos-kit/cosmostation';
8-
import { wallets as leapWallets } from '@cosmos-kit/leap';
6+
import { wallets as keplr } from '@cosmos-kit/keplr';
7+
import { wallets as cosmostation } from '@cosmos-kit/cosmostation';
8+
import { wallets as leap } from '@cosmos-kit/leap';
99
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
1010
// import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
1111

@@ -49,7 +49,7 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) {
4949
<ChainProvider
5050
chains={chains}
5151
assetLists={assets}
52-
wallets={[...keplrWallets, ...cosmostationWallets, ...leapWallets]}
52+
wallets={[...keplr, ...cosmostation, ...leap]}
5353
walletConnectOptions={{
5454
signClient: {
5555
projectId: 'a8510432ebb71e6948cfd6cde54b70f7',

‎examples/stargaze/pages/_app.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import type { AppProps } from 'next/app';
33
import { ChainProvider } from '@cosmos-kit/react';
44
import { ChakraProvider } from '@chakra-ui/react';
55
import { defaultTheme } from '../config';
6-
import { wallets as keplrWallets } from '@cosmos-kit/keplr';
7-
import { wallets as cosmostationWallets } from '@cosmos-kit/cosmostation';
8-
import { wallets as leapWallets } from '@cosmos-kit/leap';
6+
import { wallets as keplr } from '@cosmos-kit/keplr';
7+
import { wallets as cosmostation } from '@cosmos-kit/cosmostation';
8+
import { wallets as leap } from '@cosmos-kit/leap';
99

1010
import { chains, assets } from 'chain-registry';
1111
import { getSigningCosmosClientOptions } from 'stargazejs';
@@ -34,7 +34,7 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) {
3434
<ChainProvider
3535
chains={chains}
3636
assetLists={assets}
37-
wallets={[...keplrWallets, ...cosmostationWallets, ...leapWallets]}
37+
wallets={[...keplr, ...cosmostation, ...leap]}
3838
walletConnectOptions={{
3939
signClient: {
4040
projectId: 'a8510432ebb71e6948cfd6cde54b70f7',

0 commit comments

Comments
 (0)