Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/recoil (WIP) #48

Draft
wants to merge 300 commits into
base: main
Choose a base branch
from
Draft
Changes from 5 commits
Commits
Show all changes
300 commits
Select commit Hold shift + click to select a range
0ec6a7a
fix error
yujulchen Aug 30, 2022
57c9dba
change default chain
liujun93 Aug 30, 2022
adfa1c8
remove text
yujulchen Aug 30, 2022
501cb37
Merge pull request #4 from cosmology-tech/template
pyramation Aug 30, 2022
6aa9610
chore(release): publish
pyramation Aug 30, 2022
5a3f75c
cosmoskit
pyramation Aug 30, 2022
b2f724a
cosmoskit
pyramation Aug 30, 2022
585fe3a
fixes
pyramation Aug 30, 2022
4af60c1
updates
pyramation Aug 30, 2022
b43fcba
fix isDisabled hover bg
yujulchen Sep 1, 2022
453a187
update style
yujulchen Sep 2, 2022
f72678f
landing
pyramation Sep 2, 2022
e3a28b1
shallow clone
pyramation Sep 2, 2022
19f9bcb
chore(release): publish
pyramation Sep 2, 2022
611c92e
fix
pyramation Sep 2, 2022
825fdaa
chore(release): publish
pyramation Sep 2, 2022
ba57520
fix
pyramation Sep 2, 2022
dc8ba85
chore(release): publish
pyramation Sep 2, 2022
ec15aa4
fix
pyramation Sep 2, 2022
34a7b3f
chore(release): publish
pyramation Sep 2, 2022
6dc2c3a
readme
pyramation Sep 8, 2022
5b973c1
chore(release): publish
pyramation Sep 8, 2022
7f37f50
readme
pyramation Sep 8, 2022
70a2daa
chore(release): publish
pyramation Sep 8, 2022
f4dd097
telescope
pyramation Sep 11, 2022
479bca6
chore(release): publish
pyramation Sep 11, 2022
6c7fbfb
Merge remote-tracking branch 'origin/main' into template
liujun93 Sep 16, 2022
6de1da6
using new cosmos-kit
liujun93 Sep 17, 2022
c6a05ad
Merge pull request #9 from cosmology-tech/template
liujun93 Sep 20, 2022
fbb02f8
update
liujun93 Sep 22, 2022
c63ac42
Merge pull request #10 from cosmology-tech/template
liujun93 Sep 22, 2022
7970d0e
update
liujun93 Sep 22, 2022
1f16f9d
Merge pull request #11 from cosmology-tech/template
liujun93 Sep 22, 2022
cb97d87
pkg bump
pyramation Sep 22, 2022
8b98728
chore(release): publish
pyramation Sep 22, 2022
047f337
updates
pyramation Sep 22, 2022
ce49e55
chore(release): publish
pyramation Sep 22, 2022
573e0ac
yarn
pyramation Sep 22, 2022
e66ffec
pkg
pyramation Sep 22, 2022
1edb66c
chore(release): publish
pyramation Sep 22, 2022
fdbb854
landing
pyramation Sep 22, 2022
db328c5
chore(release): publish
pyramation Sep 22, 2022
4b28181
upgrades
pyramation Sep 23, 2022
2b58b90
chore(release): publish
pyramation Sep 23, 2022
a1b854c
index
pyramation Sep 23, 2022
8651081
readme
pyramation Sep 23, 2022
8df917d
chore(release): publish
pyramation Sep 23, 2022
e9186db
readme
pyramation Sep 23, 2022
c4a79b2
chore(release): publish
pyramation Sep 23, 2022
37601fd
readme
pyramation Sep 23, 2022
d93e017
readme
pyramation Sep 23, 2022
284ce43
Update README.md
pyramation Sep 23, 2022
fa146ae
main
pyramation Sep 23, 2022
c13b919
readme
pyramation Sep 23, 2022
6d711ac
readme
pyramation Sep 23, 2022
a52c41f
readme
pyramation Sep 24, 2022
8b4215c
readme
pyramation Sep 24, 2022
dd2cbe9
chore(release): publish
pyramation Sep 24, 2022
07bc384
readme
pyramation Sep 24, 2022
fd20d12
send tokens example
pyramation Sep 24, 2022
b12c90d
updates
pyramation Sep 24, 2022
3a57af7
updates
pyramation Sep 25, 2022
e781191
format
pyramation Sep 25, 2022
45a8494
templates
pyramation Sep 25, 2022
201b80a
chore(release): publish
pyramation Sep 25, 2022
01384b0
examples
pyramation Sep 25, 2022
f3512c7
chore(release): publish
pyramation Sep 25, 2022
c257d36
readme
pyramation Sep 25, 2022
8a797d4
chore(release): publish
pyramation Sep 25, 2022
f9d4cbd
readme
pyramation Sep 25, 2022
8bc0834
chore(release): publish
pyramation Sep 25, 2022
a96de60
readme
pyramation Sep 25, 2022
45e9285
chore(release): publish
pyramation Sep 25, 2022
9d37c12
types
pyramation Sep 25, 2022
b3c637c
chore(release): publish
pyramation Sep 25, 2022
0832a55
Create tailwindcss example
josefleventon Sep 27, 2022
8a54696
Merge pull request #12 from josefleventon/main
pyramation Sep 27, 2022
a7e6113
cleanup
pyramation Sep 27, 2022
a89a586
tailwind
pyramation Sep 27, 2022
f0735c7
Merge branch 'add-tailwind'
pyramation Sep 27, 2022
5865d7e
wasm app
pyramation Sep 29, 2022
20aee6c
Merge branch 'wasm-app'
pyramation Sep 30, 2022
3e1777a
chore(release): publish
pyramation Sep 30, 2022
33f7903
apps
pyramation Sep 30, 2022
9e4b506
chore(release): publish
pyramation Sep 30, 2022
d44f590
readme
pyramation Sep 30, 2022
6847a77
pkg
pyramation Sep 30, 2022
b051962
pkg
pyramation Sep 30, 2022
584b5d6
chore(release): publish
pyramation Sep 30, 2022
24d1a18
upgrade
liujun93 Sep 30, 2022
89bdbd5
Merge pull request #14 from cosmology-tech/develop
liujun93 Sep 30, 2022
e2855ea
update templates: eslint + code modification
liujun93 Sep 30, 2022
f37b08e
update examples eslint + code modifications
liujun93 Sep 30, 2022
d252c4e
Merge pull request #15 from cosmology-tech/develop
liujun93 Sep 30, 2022
0a32ff2
lock
pyramation Sep 30, 2022
1361ef1
cosmos-kit suggestChain update
pyramation Sep 30, 2022
91154c2
chore(release): publish
pyramation Sep 30, 2022
d31ae01
osmosis cosmwasm example
pyramation Oct 1, 2022
e7fbc1c
Finished tailwindcss integration
josefleventon Oct 1, 2022
0acfa6e
Completely remove chakra-ui and react-icons in favor of tailwindcss a…
josefleventon Oct 1, 2022
a6ce2a9
Yarnlock upgrade
josefleventon Oct 1, 2022
981b67a
Fix yarn conflict & update _app
josefleventon Oct 1, 2022
d40346c
Revert to using chain-infos
josefleventon Oct 1, 2022
2ed58f0
Fix wallets data
josefleventon Oct 1, 2022
76a98ee
lint
pyramation Oct 1, 2022
d1302ed
gitignore
pyramation Oct 1, 2022
6c0b396
use RPC
pyramation Oct 1, 2022
4228cc7
readme
pyramation Oct 1, 2022
7e0aacd
cli
pyramation Oct 1, 2022
70f49be
chore(release): publish
pyramation Oct 1, 2022
c2321f9
readme
pyramation Oct 1, 2022
d258826
chore(release): publish
pyramation Oct 1, 2022
830784a
assets
pyramation Oct 1, 2022
c6bc1a4
Cleaup and separate
jonator Oct 3, 2022
6907024
Merge pull request #16 from jonator/feat/cleanup-osmowasm
pyramation Oct 3, 2022
a7600df
codegen
pyramation Oct 3, 2022
84a493d
upgrades
pyramation Oct 3, 2022
4e5ab1c
chore(release): publish
pyramation Oct 3, 2022
8a660d2
modify event handler
liujun93 Oct 10, 2022
46011c0
update
liujun93 Oct 11, 2022
75441b6
Merge branch 'main' of github.com:cosmology-tech/create-cosmos-app in…
liujun93 Oct 11, 2022
828a93f
readme
pyramation Oct 12, 2022
dc58552
update target
liujun93 Oct 12, 2022
a5bc6d8
Merge branch 'main' of github.com:cosmology-tech/create-cosmos-app in…
liujun93 Oct 12, 2022
a0ef640
update
liujun93 Oct 13, 2022
9c9913c
Merge pull request #19 from cosmology-tech/develop
liujun93 Oct 13, 2022
93d044c
upgrades
pyramation Oct 13, 2022
0d9f7c2
upgrades
pyramation Oct 15, 2022
cca6065
readme
pyramation Oct 15, 2022
b7add79
chore(release): publish
pyramation Oct 15, 2022
d79ee69
cli
pyramation Oct 15, 2022
8b546d5
chore(release): publish
pyramation Oct 15, 2022
b63498c
cli
pyramation Oct 15, 2022
af0af7f
chore(release): publish
pyramation Oct 15, 2022
dfa18d3
cli
pyramation Oct 15, 2022
f838378
chore(release): publish
pyramation Oct 15, 2022
d67dd89
cli
pyramation Oct 15, 2022
9dd1fd7
chore(release): publish
pyramation Oct 15, 2022
bf5ec00
cli
pyramation Oct 15, 2022
75f09d3
chore(release): publish
pyramation Oct 15, 2022
8d251e9
update
Oct 17, 2022
793a77e
Merge branch 'main' into develop
liujun93 Oct 17, 2022
0ce1b48
Merge pull request #23 from cosmology-tech/develop
liujun93 Oct 17, 2022
6b8d7e9
tailwind and yarn.lock
pyramation Oct 17, 2022
1ea846b
no need to truncate actual address
Oct 18, 2022
8988193
Merge pull request #25 from 0xArbi/fix/tailwind-copy-address
pyramation Oct 18, 2022
ff87ee9
format send tokens style
yujulchen Oct 19, 2022
53cca18
add fetch loading
yujulchen Oct 19, 2022
e0481d0
remove tests
pyramation Oct 20, 2022
76c5fa0
Merge pull request #26 from cosmology-tech/feat/foramt-simple-style
pyramation Oct 20, 2022
2d955b3
upgrades
pyramation Oct 20, 2022
1212330
Merge branch 'feat/upgrades'
pyramation Oct 20, 2022
8582a6d
sendcards
pyramation Oct 21, 2022
eef92e3
defaults
pyramation Oct 24, 2022
c2c6410
readme
pyramation Oct 24, 2022
567bdfd
chore(release): publish
pyramation Oct 24, 2022
21cb628
Update defaults.ts
pyramation Oct 24, 2022
6b6f4e2
add HackCw20 style
yujulchen Oct 24, 2022
2d07579
Merge branch 'main' into feat/foramt-simple-style
yujulchen Oct 24, 2022
e3561d7
Merge pull request #29 from cosmology-tech/feat/foramt-simple-style
pyramation Oct 24, 2022
82eb463
wasm
pyramation Oct 24, 2022
4fc5631
add balance
yujulchen Oct 24, 2022
0fe9f4e
cosmwasm
pyramation Oct 24, 2022
6043335
chore(release): publish
pyramation Oct 24, 2022
6f487b7
cosmwasm
pyramation Oct 24, 2022
815519c
chore(release): publish
pyramation Oct 24, 2022
94cb11c
upgrades
pyramation Oct 26, 2022
143f3cf
chore(release): publish
pyramation Oct 26, 2022
c61f207
readme
pyramation Oct 26, 2022
3af016b
upgrades
pyramation Oct 27, 2022
e52d6e1
chore(release): publish
pyramation Oct 27, 2022
6441a9e
upgrade osmojs
pyramation Oct 27, 2022
84a4d94
upgrade
pyramation Nov 1, 2022
b170476
locks
pyramation Nov 1, 2022
44e6a4a
locks
pyramation Nov 1, 2022
f1ccea3
upgrades
pyramation Nov 1, 2022
da0badc
Merge pull request #31 from cosmology-tech/feat/use-locks
pyramation Nov 1, 2022
399cad6
chore(release): publish
pyramation Nov 1, 2022
c39062e
pkg
pyramation Nov 1, 2022
3457646
chore(release): publish
pyramation Nov 1, 2022
f930640
add locks:remove to workspace
pyramation Nov 2, 2022
eb44ac0
readme
pyramation Nov 2, 2022
a42ecf3
upgrade
liujun93 Nov 4, 2022
d6ff80e
Merge pull request #32 from cosmology-tech/develop
liujun93 Nov 4, 2022
0fd1507
upgrades
pyramation Nov 5, 2022
18439c7
chore(release): publish
pyramation Nov 5, 2022
bc5ce1f
locks
pyramation Nov 5, 2022
a98208f
chore(release): publish
pyramation Nov 5, 2022
1c30c07
upgrades
pyramation Nov 5, 2022
6fabf10
chore(release): publish
pyramation Nov 5, 2022
e571ca4
upgrades
pyramation Nov 8, 2022
43a3ff1
chore(release): publish
pyramation Nov 8, 2022
61a0596
upgrades
pyramation Nov 9, 2022
9816760
chore(release): publish
pyramation Nov 9, 2022
092ef74
modify astronaut and getRpcEndpoint
liujun93 Nov 9, 2022
28a61de
Merge pull request #34 from cosmology-tech/develop
liujun93 Nov 9, 2022
8d62d6b
debug
liujun93 Nov 9, 2022
7ddf487
Merge pull request #35 from cosmology-tech/develop
liujun93 Nov 9, 2022
94b7e25
modify ui
liujun93 Nov 9, 2022
d3b6de2
Merge pull request #36 from cosmology-tech/develop
liujun93 Nov 10, 2022
ccdc51b
upgrades
pyramation Nov 10, 2022
ee4620f
chore(release): publish
pyramation Nov 10, 2022
a088139
fix wrong space issue
yujulchen Nov 10, 2022
8db0b88
Merge pull request #37 from cosmology-tech/feat/new-template
yujulchen Nov 10, 2022
1f9caa2
pkg
pyramation Nov 14, 2022
7d7faa7
chore(release): publish
pyramation Nov 14, 2022
d1c79e7
add cosmostation and leap
pyramation Nov 15, 2022
d72b869
chore(release): publish
pyramation Nov 15, 2022
c82fb08
merge origin
liujun93 Nov 15, 2022
a614d10
Merge branch 'main' of github.com:cosmology-tech/create-cosmos-app in…
liujun93 Nov 15, 2022
5153b55
update version
liujun93 Nov 15, 2022
9c19b77
Merge pull request #39 from cosmology-tech/develop
liujun93 Nov 15, 2022
1692b5f
update client options
pyramation Nov 17, 2022
4ea6e09
Merge pull request #40 from cosmology-tech/fix/client-opts
liujun93 Nov 17, 2022
41a3481
update version
liujun93 Nov 17, 2022
e3ba136
Merge pull request #41 from cosmology-tech/develop
liujun93 Nov 17, 2022
67c6ae2
update address card
liujun93 Nov 17, 2022
2cf4045
Merge branch 'main' of github.com:cosmology-tech/create-cosmos-app in…
liujun93 Nov 17, 2022
33675bf
update address card
liujun93 Nov 17, 2022
ba48412
Merge pull request #42 from cosmology-tech/develop
liujun93 Nov 17, 2022
27dfb0f
updates
pyramation Nov 17, 2022
fadbe39
locks
pyramation Nov 17, 2022
e263225
chore(release): publish
pyramation Nov 17, 2022
6534077
yarn
pyramation Nov 17, 2022
a0f0d52
chore(release): publish
pyramation Nov 17, 2022
49dd100
upgrade telescope example
pyramation Nov 17, 2022
b39f279
remove old codegen
pyramation Nov 17, 2022
3af54f0
codegen
pyramation Nov 17, 2022
ea15be1
pkg
pyramation Nov 18, 2022
078062d
react-query hook
pyramation Nov 18, 2022
a475f57
bundle
pyramation Nov 18, 2022
42f9bcc
add test
pyramation Nov 18, 2022
47242ce
typed
pyramation Nov 18, 2022
4a09086
req
pyramation Nov 18, 2022
bcdfcbe
test
pyramation Nov 18, 2022
f5b9d64
Update react-query example with hook factory
adairrr Nov 18, 2022
95a8161
Merge pull request #44 from adairrr/react-query-example
pyramation Nov 18, 2022
0ab7afc
rpc
pyramation Nov 19, 2022
55ddecd
hooks for hooks
pyramation Nov 19, 2022
aadf8d4
ts
pyramation Nov 19, 2022
a692577
exp
pyramation Nov 19, 2022
b969890
upgrades
pyramation Nov 21, 2022
5cc5405
chore(release): publish
pyramation Nov 21, 2022
58b6901
updates
pyramation Nov 23, 2022
7eb7cbd
react-query
pyramation Nov 24, 2022
993ae43
upgrades
pyramation Nov 25, 2022
1965363
chore(release): publish
pyramation Nov 25, 2022
a592f14
begin recoil (WIP)
pyramation Nov 25, 2022
8999c30
async
pyramation Nov 25, 2022
b5fc420
wip
pyramation Nov 26, 2022
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -35,5 +35,11 @@
"repository": {
"type": "git",
"url": "https://github.com/cosmology-tech/create-cosmos-app"
},
"dependencies": {
"@cosmos-kit/core": "0.12.3",
"@cosmos-kit/keplr": "0.12.3",
"@cosmos-kit/react": "0.12.7",
"@cosmos-kit/registry": "0.12.6"
}
}
}
7 changes: 2 additions & 5 deletions templates/connect-chain/components/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
export * from "./types";
export * from "./wallet-connect";
export * from "./user-card";
export * from "./astronaut";
export * from "./address-card";
export * from "./react";
export * from "./features";
export * from "./warn-block";
export * from "./wallet";
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@ import {
useClipboard,
} from "@chakra-ui/react";
import { FaRegCopy } from "react-icons/fa";
import { WalletStatus } from "./types";
import { WalletStatus } from "@cosmos-kit/core";

export const ConnectedShowAddress = ({
address,
@@ -70,7 +70,7 @@ export const CopyAddressBtn = ({
connected: ReactNode;
}) => {
switch (walletStatus) {
case WalletStatus.Loaded:
case WalletStatus.Connected:
return <>{connected}</>;
default:
return <></>;
38 changes: 38 additions & 0 deletions templates/connect-chain/components/react/chain-card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { Box, Stack, useColorModeValue, Image, Text } from "@chakra-ui/react"
import { ChainCardProps } from "../types"

export const ChainCard = (props: ChainCardProps) => {
return (
<Stack
isInline={true}
alignItems="center"
justifyContent={"center"}
spacing={3}
overflow="hidden"
wordBreak="break-word"
color={useColorModeValue("blackAlpha.800", "whiteAlpha.800")}
w="full"
>
<Box
minW={10}
minH={10}
maxW={10}
maxH={10}
w="full"
h="full"
border="1px solid"
borderColor={useColorModeValue("blackAlpha.200", "whiteAlpha.200")}
borderRadius="full"
overflow="hidden"
>
<Image
src={props.icon}
fallbackSrc={"https://dummyimage.com/150/9e9e9e/ffffff&text=☒"}
/>
</Box>
<Text fontSize="xl" fontWeight="semibold" paddingEnd={"18px"}>
{props.prettyName}
</Text>
</Stack>
)
}
6 changes: 6 additions & 0 deletions templates/connect-chain/components/react/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export * from "./astronaut";
export * from "./wallet-connect";
export * from "./warn-block";
export * from "./user-card";
export * from "./address-card";
export * from "./chain-card";
33 changes: 33 additions & 0 deletions templates/connect-chain/components/react/user-card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from "react";
import { Text, Stack, Box } from "@chakra-ui/react";
import { ConnectedUserCardType } from "../types";

export const ConnectedUserInfo = ({
username,
icon,
}: ConnectedUserCardType) => {
return (
<Stack spacing={1} alignItems="center">
{username && (
<>
<Box
display={icon ? "block" : "none"}
minW={20}
maxW={20}
w={20}
minH={20}
maxH={20}
h={20}
borderRadius="full"
overflow="hidden"
>
{icon}
</Box>
<Text fontSize={{ md: "xl" }} fontWeight="semibold">
{username}
</Text>
</>
)}
</Stack>
);
};
183 changes: 183 additions & 0 deletions templates/connect-chain/components/react/wallet-connect.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
import React, { MouseEventHandler, ReactNode } from "react";
import { Button, Icon, Stack, Text, useColorModeValue } from "@chakra-ui/react";
import { IoWallet } from "react-icons/io5";
import { ConnectWalletType } from "../types";
import { FiAlertTriangle } from "react-icons/fi";
import { WalletStatus } from "@cosmos-kit/core";

export const ConnectWalletButton = ({
buttonText,
isLoading,
isDisabled,
icon,
onClickConnectBtn,
}: ConnectWalletType) => {
return (
<Button
w="full"
minW="fit-content"
size="lg"
isLoading={isLoading}
isDisabled={isDisabled}
bgImage="linear-gradient(109.6deg, rgba(157,75,199,1) 11.2%, rgba(119,81,204,1) 83.1%)"
color="white"
opacity={1}
transition="all .5s ease-in-out"
_hover={{
bgImage:
"linear-gradient(109.6deg, rgba(157,75,199,1) 11.2%, rgba(119,81,204,1) 83.1%)",
opacity: 0.75,
}}
_active={{
bgImage:
"linear-gradient(109.6deg, rgba(157,75,199,1) 11.2%, rgba(119,81,204,1) 83.1%)",
opacity: 0.9,
}}
onClick={onClickConnectBtn}
>
<Icon as={icon ? icon : IoWallet} mr={2} />
{buttonText ? buttonText : "Connect Wallet"}
</Button>
);
};

export const Disconnected = ({
buttonText,
onClick,
}: {
buttonText: string;
onClick: MouseEventHandler<HTMLButtonElement>;
}) => {
return (
<ConnectWalletButton buttonText={buttonText} onClickConnectBtn={onClick} />
);
};

export const Connected = ({
buttonText,
onClick,
}: {
buttonText: string;
onClick: MouseEventHandler<HTMLButtonElement>;
}) => {
return (
<ConnectWalletButton buttonText={buttonText} onClickConnectBtn={onClick} />
);
};

export const Connecting = () => {
return <ConnectWalletButton isLoading={true} />;
};

export const Rejected = ({
buttonText,
wordOfWarning,
onClick
}: {
buttonText: string;
wordOfWarning?: string;
onClick: MouseEventHandler<HTMLButtonElement>;
}) => {
return (
<Stack>
<ConnectWalletButton buttonText={buttonText} isDisabled={false} onClickConnectBtn={onClick} />
{wordOfWarning && (
<Stack
isInline={true}
borderRadius="md"
bg={useColorModeValue("orange.200", "orange.300")}
color="blackAlpha.900"
p={4}
spacing={1}
>
<Icon as={FiAlertTriangle} mt={1} />
<Text>
<Text fontWeight="semibold" as="span">
Warning:&ensp;
</Text>
{wordOfWarning}
</Text>
</Stack>
)}
</Stack>
);
};

export const Error = ({
buttonText,
wordOfWarning,
onClick
}: {
buttonText: string;
wordOfWarning?: string;
onClick: MouseEventHandler<HTMLButtonElement>;
}) => {
return (
<Stack>
<ConnectWalletButton buttonText={buttonText} isDisabled={false} onClickConnectBtn={onClick} />
{wordOfWarning && (
<Stack
isInline={true}
borderRadius="md"
bg={useColorModeValue("orange.200", "orange.300")}
color="blackAlpha.900"
p={4}
spacing={1}
>
<Icon as={FiAlertTriangle} mt={1} />
<Text>
<Text fontWeight="semibold" as="span">
Warning:&ensp;
</Text>
{wordOfWarning}
</Text>
</Stack>
)}
</Stack>
);
};

export const NotExist = ({
buttonText,
onClick
}: {
buttonText: string;
onClick: MouseEventHandler<HTMLButtonElement>;
}) => {
return <ConnectWalletButton buttonText={buttonText} isDisabled={false} onClickConnectBtn={onClick} />;
};

export const WalletConnectComponent = ({
walletStatus,
disconnect,
connecting,
connected,
rejected,
error,
notExist,
}: {
walletStatus: WalletStatus;
disconnect: ReactNode;
connecting: ReactNode;
connected: ReactNode;
rejected: ReactNode;
error: ReactNode;
notExist: ReactNode;
}) => {
switch (walletStatus) {
case WalletStatus.Disconnected:
return <>{disconnect}</>;
case WalletStatus.Connecting:
return <>{connecting}</>;
case WalletStatus.Connected:
return <>{connected}</>;
case WalletStatus.Rejected:
return <>{rejected}</>;
case WalletStatus.Error:
return <>{error}</>;
case WalletStatus.NotExist:
return <>{notExist}</>;
default:
return <>{disconnect}</>;
}
};
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { ReactNode } from "react";
import { Box, Stack, Text, useColorModeValue } from "@chakra-ui/react";
import { WalletStatus } from "./types";
import { WalletStatus } from "@cosmos-kit/core";

export const WarnBlock = ({
wordOfWarning,
@@ -73,13 +73,17 @@ export const RejectedWarn = ({
export const ConnectStatusWarn = ({
walletStatus,
rejected,
error,
}: {
walletStatus: WalletStatus;
rejected: ReactNode;
error: ReactNode;
}) => {
switch (walletStatus) {
case WalletStatus.Rejected:
return <>{rejected}</>;
case WalletStatus.Error:
return <>{error}</>;
default:
return <></>;
}
8 changes: 7 additions & 1 deletion templates/connect-chain/components/types.tsx
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@ import { MouseEventHandler, ReactNode } from "react";
import { IconType } from "react-icons";

export interface ChooseChainInfo {
chainId: string;
chainName: string;
chainRoute?: string;
label: string;
value: string;
@@ -27,6 +27,7 @@ export interface ConnectWalletType {
}

export interface ConnectedUserCardType {
walletIcon?: string;
username?: string;
icon?: ReactNode;
}
@@ -36,3 +37,8 @@ export interface FeatureProps {
text: string;
href: string;
}

export interface ChainCardProps {
prettyName: string;
icon?: string;
}
31 changes: 0 additions & 31 deletions templates/connect-chain/components/user-card.tsx

This file was deleted.

109 changes: 0 additions & 109 deletions templates/connect-chain/components/wallet-connect.tsx

This file was deleted.

147 changes: 147 additions & 0 deletions templates/connect-chain/components/wallet.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
import { useWallet } from "@cosmos-kit/react";
import { Box, Center, Grid, GridItem, Icon, Stack, useColorModeValue, Text } from "@chakra-ui/react";
import { MouseEventHandler, useEffect } from "react";
import { FiAlertTriangle } from "react-icons/fi";
import { Astronaut, Error, Connected, ConnectedShowAddress, ConnectedUserInfo, Connecting, ConnectStatusWarn, CopyAddressBtn, Disconnected, NotExist, Rejected, RejectedWarn, WalletConnectComponent, ChainCard } from "../components";
import { getWalletPrettyName } from "@cosmos-kit/registry";
import { ChainName } from "@cosmos-kit/core";
import { chainInfos } from "../config/chain-infos";

export const WalletSection = ({ chainName }: { chainName?: ChainName }) => {
const walletManager = useWallet();
const { connect, disconnect, openModal, setCurrentChain,
walletStatus, username, address, message,
currentChainName, currentWalletName } = walletManager;

const chain = chainInfos.find(c => c.chainName === chainName);

useEffect(() => {
setCurrentChain(chainName);
}, [chainName])

// Events
const onClickConnect: MouseEventHandler = async (e) => {
e.preventDefault();
openModal();
await connect();
};

const onClickDisconnect: MouseEventHandler = async (e) => {
e.preventDefault();
openModal();
// await disconnect();
};

const onClickOpenModal: MouseEventHandler = (e) => {
e.preventDefault();
openModal();
};

// Components
const connectWalletButton = (
<WalletConnectComponent
walletStatus={walletStatus}
disconnect={
<Disconnected buttonText="Connect Wallet" onClick={
currentWalletName
? onClickConnect
: onClickOpenModal
} />
}
connecting={<Connecting />}
connected={
<Connected buttonText={
address
? `${address.slice(0, 7)}...${address.slice(-4)}`
: "Disconnect"
} onClick={
address
? onClickOpenModal
: onClickDisconnect
} />
}
rejected={
<Rejected
buttonText="Reconnect"
onClick={onClickConnect}
/>
}
error={
<Error
buttonText="Change Wallet"
onClick={onClickOpenModal}
/>
}
notExist={<NotExist buttonText="Install Wallet" onClick={onClickOpenModal} />}
/>
);

const connectWalletWarn = (
<ConnectStatusWarn
walletStatus={walletStatus}
rejected={
<RejectedWarn
icon={<Icon as={FiAlertTriangle} mt={1} />}
wordOfWarning={`${getWalletPrettyName(currentWalletName)}: ${message}`}
/>
}
error={
<RejectedWarn
icon={<Icon as={FiAlertTriangle} mt={1} />}
wordOfWarning={`${getWalletPrettyName(currentWalletName)}: ${message}`}
/>
}
/>
);

const userInfo = <ConnectedUserInfo username={username} icon={<Astronaut />} />;
const addressBtn = chainName && (
<CopyAddressBtn
walletStatus={walletStatus}
connected={<ConnectedShowAddress address={address} isLoading={false} />}
/>
);

return (
<Center py={16}>
<Grid
w="full"
maxW="sm"
templateColumns="1fr"
rowGap={4}
alignItems="center"
justifyContent="center"
>
{chainName && (
<GridItem marginBottom={"20px"}>
<ChainCard
prettyName={chain?.label || chainName}
icon={chain?.icon} />
</GridItem>
)}
<GridItem px={6}>
<Stack
justifyContent="center"
alignItems="center"
borderRadius="lg"
bg={useColorModeValue("white", "blackAlpha.400")}
boxShadow={useColorModeValue(
"0 0 2px #dfdfdf, 0 0 6px -2px #d3d3d3",
"0 0 2px #363636, 0 0 8px -2px #4f4f4f"
)}
spacing={4}
px={4}
py={{ base: 6, md: 12 }}
>
{userInfo}
{addressBtn}
<Box w="full" maxW={{ base: 52, md: 64 }}>
{connectWalletButton}
</Box>
<GridItem>{connectWalletWarn}</GridItem>
</Stack>
</GridItem>
</Grid>
</Center>
);
}
17 changes: 17 additions & 0 deletions templates/connect-chain/config/chain-infos.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { ChooseChainInfo } from "../components";
import { chains as chainsBase, assets as chainAssets } from 'chain-registry';

export const chainInfos: ChooseChainInfo[] = chainsBase
.filter(chain => chain.network_type !== 'testnet')
.map(chain => {
const assets = chainAssets.find(
_chain => _chain.chain_name === chain.chain_name
)?.assets;
return {
chainName: chain.chain_name,
label: chain.pretty_name,
value: chain.chain_name,
icon: assets ? assets[0]?.logo_URIs?.svg || assets[0]?.logo_URIs?.png : undefined,
disabled: false
}
});
8 changes: 4 additions & 4 deletions templates/connect-chain/package.json
Original file line number Diff line number Diff line change
@@ -13,13 +13,13 @@
"@chakra-ui/react": "^2.2.8",
"@cosmjs/cosmwasm-stargate": "0.28.13",
"@cosmjs/stargate": "0.28.13",
"@cosmos-kit/react": "^0.11.0",
"@cosmos-kit/types": "^0.11.0",
"@cosmos-kit/core": "^0.12.3",
"@cosmos-kit/keplr": "^0.12.7",
"@cosmos-kit/react": "^0.12.7",
"@cosmos-kit/registry": "^0.12.6",
"@emotion/react": "11.10.0",
"@emotion/styled": "11.10.0",
"chain-registry": "^0.10.3",
"chakra-react-select": "^4.1.4",
"fast-fuzzy": "^1.11.2",
"framer-motion": "7.2.1",
"next": "12.2.5",
"react": "18.2.0",
109 changes: 109 additions & 0 deletions templates/connect-chain/pages/[chainName].tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
import Head from "next/head";
import {
Box,
Divider,
Grid,
Heading,
Text,
Stack,
Container,
Link,
Button,
Flex,
Icon,
useColorMode,
useColorModeValue,
} from "@chakra-ui/react";
import { BsFillMoonStarsFill, BsFillSunFill } from "react-icons/bs";
import {
Product,
Dependency,
WalletSection,
} from "../components";
import { dependencies, products } from "../config";
import { useRouter } from "next/router";


export default function Home() {
const { colorMode, toggleColorMode } = useColorMode();
const router = useRouter();
let { chainName } = router.query;
chainName = chainName ? chainName as string : undefined;

return (
<Container maxW="5xl" py={10}>
<Head>
<title>Create Cosmos App</title>
<meta name="description" content="Generated by create cosmos app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Flex justifyContent="end" mb={4}>
<Button variant="outline" px={0} onClick={toggleColorMode}>
<Icon
as={colorMode === "light" ? BsFillMoonStarsFill : BsFillSunFill}
/>
</Button>
</Flex>
<Box textAlign="center">
<Heading
as="h1"
fontSize={{ base: "3xl", sm: "4xl", md: "5xl" }}
fontWeight="extrabold"
mb={3}
>
Cosmos Apps Made Easy
</Heading>
<Heading
as="h1"
fontWeight="bold"
fontSize={{ base: "2xl", sm: "3xl", md: "4xl" }}
>
<Text as="span">Welcome to&nbsp;</Text>
<Text
as="span"
color={useColorModeValue("primary.500", "primary.200")}
>
CosmosKit + Telescope + Next.js
</Text>
</Heading>
</Box>
<WalletSection chainName={chainName} />
<Grid
templateColumns={{
md: "repeat(2, 1fr)",
lg: "repeat(3, 1fr)",
}}
gap={8}
mb={14}
>
{products.map((product) => (
<Product key={product.title} {...product}></Product>
))}
</Grid>
<Grid templateColumns={{ md: "1fr 1fr" }} gap={8} mb={20}>
{dependencies.map((dependency) => (
<Dependency key={dependency.title} {...dependency}></Dependency>
))}
</Grid>
<Box mb={3}>
<Divider />
</Box>
<Stack
isInline={true}
spacing={1}
justifyContent="center"
opacity={0.5}
fontSize="sm"
>
<Text>Built with</Text>
<Link
href="https://cosmology.tech/"
target="_blank"
rel="noopener noreferrer"
>
Cosmology
</Link>
</Stack>
</Container>
);
}
67 changes: 34 additions & 33 deletions templates/connect-chain/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -1,42 +1,43 @@
import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { GasPrice } from '@cosmjs/stargate';
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { WalletProvider } from '@cosmos-kit/react'
import { ChakraProvider } from '@chakra-ui/react';
import { defaultTheme } from '../config';
import { ChainInfoID } from '@cosmos-kit/types';
import { WalletManagerProvider } from '@cosmos-kit/react';
import { WalletManager, ChainRegistry } from '@cosmos-kit/core';
import { allWallets } from '@cosmos-kit/registry';
import { chains as rawChains } from 'chain-registry';
import { convert } from '../utils';


const chains: ChainRegistry[] = rawChains
.filter((chain) => chain.network_type !== 'testnet')
.map((chain) => convert(chain));

const LOCAL_STORAGE_KEY = 'connectedWalletId';

function MyApp({ Component, pageProps }: AppProps) {
const walletManager = new WalletManager(
chains,
allWallets
)
// walletManager.useWallets('keplr-extension');
// walletManager.useChains();

walletManager.setAutos({
closeModalWhenWalletIsConnected: false,
closeModalWhenWalletIsDisconnected: true,
closeModalWhenWalletIsRejected: false,
})

return (
<WalletManagerProvider
walletConnectClientMeta={{
name: 'CosmosWalletDApp',
description: 'A dApp using the @cosmos-kit/react library.',
url: 'https://github.com/cosmology-tech/cosmos-wallet/tree/main/packages/react',
// @cosmology-tech's GitHub avatar
icons: ['https://avatars.githubusercontent.com/u/101243801?s=200&v=4']
}}
renderLoader={() => <p>Loading...</p>}
localStorageKey={LOCAL_STORAGE_KEY}
defaultChainId={ChainInfoID.Juno1}
getSigningCosmWasmClientOptions={(chainInfo) => ({
gasPrice: GasPrice.fromString(
'0.0025' + chainInfo.feeCurrencies[0].coinMinimalDenom
)
})}
getSigningStargateClientOptions={(chainInfo) => ({
gasPrice: GasPrice.fromString(
'0.0025' + chainInfo.feeCurrencies[0].coinMinimalDenom
)
})}
>
<ChakraProvider theme={defaultTheme}>
<ChakraProvider theme={defaultTheme}>
<WalletProvider
// walletModal={MyWalletModal} // import { WalletModalProps } from '@cosmos-kit/core';
walletManager={walletManager}
>
<Component {...pageProps} />
</ChakraProvider>
</WalletManagerProvider>
);
</WalletProvider>
</ChakraProvider>
)
}

export default MyApp;
export default MyApp
201 changes: 0 additions & 201 deletions templates/connect-chain/pages/index.tsx

This file was deleted.

37 changes: 11 additions & 26 deletions templates/connect-chain/utils.ts
Original file line number Diff line number Diff line change
@@ -1,27 +1,12 @@
import { WalletStatus } from './components';
import { CosmosWalletStatus } from '@cosmos-kit/types';
import { Chain } from '@chain-registry/types';
import { ChainRegistry } from '@cosmos-kit/core';

export const mapStatusFromCosmosWallet = (
status: CosmosWalletStatus,
error?: Error
): WalletStatus => {
switch (status) {
case CosmosWalletStatus.Uninitialized || CosmosWalletStatus.Disconnected:
return WalletStatus.NotInit;
case CosmosWalletStatus.Connecting ||
CosmosWalletStatus.ChoosingWallet ||
CosmosWalletStatus.PendingWalletConnect ||
CosmosWalletStatus.EnablingWallet:
return WalletStatus.Loading;
case CosmosWalletStatus.Connected:
return WalletStatus.Loaded;
case CosmosWalletStatus.Errored:
if (error && error.message === 'Request rejected') {
return WalletStatus.NotInit;
} else {
return WalletStatus.Rejected;
}
default:
return WalletStatus.NotInit;
}
};
// TODO discuss Chain
// maybe simplify so we can use `Chain` throughout the app
export function convert(chain: Chain): ChainRegistry {
return {
name: chain.chain_name,
active: false,
raw: chain,
};
}
9 changes: 2 additions & 7 deletions templates/connect-multi-chain/components/index.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
export * from "./types";
export * from "./wallet-connect";
export * from "./user-card";
export * from "./astronaut";
export * from "./choose-chain";
export * from "./chain-dropdown";
export * from "./address-card";
export * from "./react";
export * from "./features";
export * from "./warn-block";
export * from "./wallet";
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@ import {
useClipboard,
} from "@chakra-ui/react";
import { FaRegCopy } from "react-icons/fa";
import { WalletStatus } from "./types";
import { WalletStatus } from "@cosmos-kit/core";

export const ConnectedShowAddress = ({
address,
@@ -70,7 +70,7 @@ export const CopyAddressBtn = ({
connected: ReactNode;
}) => {
switch (walletStatus) {
case WalletStatus.Loaded:
case WalletStatus.Connected:
return <>{connected}</>;
default:
return <></>;
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React from "react";
import {
Box,
Text,
@@ -9,23 +9,23 @@ import {
useBreakpointValue,
SystemStyleObject,
SkeletonCircle,
Skeleton
} from '@chakra-ui/react';
import { Searcher } from 'fast-fuzzy';
import { FiChevronDown } from 'react-icons/fi';
Skeleton,
} from "@chakra-ui/react";
import { Searcher } from "fast-fuzzy";
import { FiChevronDown } from "react-icons/fi";
import {
AsyncSelect,
OptionProps,
chakraComponents,
GroupBase,
DropdownIndicatorProps,
PlaceholderProps
} from 'chakra-react-select';
PlaceholderProps,
} from "chakra-react-select";
import {
ChainOption,
DataType,
ChangeChainDropdownType,
ChangeChainMenuType
} from './types';
ChangeChainMenuType,
} from "../types";

const SkeletonOptions = () => {
return (
@@ -41,106 +41,112 @@ const SelectOptions = ({ data, value, onChange }: ChangeChainMenuType) => {
const customStyles = {
control: (provided: SystemStyleObject) => ({
...provided,
height: 12
height: 12,
}),
menu: (provided: SystemStyleObject) => ({
...provided,
h: menuHeight,
mt: 4,
mb: 0,
bg: useColorModeValue('white', 'gray.900'),
boxShadow: useColorModeValue('0 1px 5px #e3e3e3', '0 0px 4px #4b4b4b'),
borderRadius: '0.3rem'
bg: useColorModeValue("white", "gray.900"),
boxShadow: useColorModeValue("0 1px 5px #e3e3e3", "0 0px 4px #4b4b4b"),
borderRadius: "0.3rem",
}),
menuList: (provided: SystemStyleObject) => ({
...provided,
h: menuHeight,
bg: 'transparent',
border: 'none',
borderRadius: 'none',
bg: "transparent",
border: "none",
borderRadius: "none",
p: 2,
// For Firefox
scrollbarWidth: 'auto',
scrollbarWidth: "auto",
scrollbarColor: useColorModeValue(
'rgba(0,0,0,0.3) rgba(0,0,0,0.2)',
'rgba(255,255,255,0.2) rgba(255,255,255,0.1)'
"rgba(0,0,0,0.3) rgba(0,0,0,0.2)",
"rgba(255,255,255,0.2) rgba(255,255,255,0.1)"
),
// For Chrome and other browsers except Firefox
'&::-webkit-scrollbar': {
width: '14px',
"&::-webkit-scrollbar": {
width: "14px",
background: useColorModeValue(
'rgba(220,220,220,0.1)',
'rgba(60,60,60,0.1)'
"rgba(220,220,220,0.1)",
"rgba(60,60,60,0.1)"
),
borderRadius: '3px'
borderRadius: "3px",
},
'&::-webkit-scrollbar-thumb': {
"&::-webkit-scrollbar-thumb": {
background: useColorModeValue(
'rgba(0,0,0,0.1)',
'rgba(255,255,255,0.1)'
"rgba(0,0,0,0.1)",
"rgba(255,255,255,0.1)"
),
borderRadius: '10px',
border: '3px solid transparent',
backgroundClip: 'content-box'
}
borderRadius: "10px",
border: "3px solid transparent",
backgroundClip: "content-box",
},
}),
clearIndicator: (provided: SystemStyleObject) => ({
...provided,
borderRadius: "full",
color: useColorModeValue("blackAlpha.600", "whiteAlpha.600"),
}),
dropdownIndicator: (provided: SystemStyleObject) => ({
...provided,
bg: 'transparent'
bg: "transparent",
pl: 1.5,
}),
option: (
provided: SystemStyleObject,
state: { isSelected: boolean; isFocused: boolean }
) => {
return {
...provided,
borderRadius: 'lg',
borderRadius: "lg",
h: 14,
color: 'inherit',
color: "inherit",
bg: useColorModeValue(
state.isSelected
? state.isFocused
? 'primary.200'
: 'primary.100'
? "primary.200"
: "primary.100"
: state.isFocused
? 'blackAlpha.200'
: 'transparent',
? "blackAlpha.200"
: "transparent",
state.isSelected
? state.isFocused
? 'primary.600'
: 'primary.500'
? "primary.600"
: "primary.500"
: state.isFocused
? 'whiteAlpha.200'
: 'transparent'
? "whiteAlpha.200"
: "transparent"
),
_notFirst: {
mt: 2
mt: 2,
},
_active: {
bg: 'primary.50'
bg: "primary.50",
},
_disabled: { bg: 'transparent', _hover: { bg: 'transparent' } }
_disabled: { bg: "transparent", _hover: { bg: "transparent" } },
};
}
},
};
const IndicatorSeparator = () => {
return null;
};
const DropdownIndicator = ({
...props
}: DropdownIndicatorProps<ChainOption, false, GroupBase<ChainOption>>) => {
}: DropdownIndicatorProps<DataType, false, GroupBase<DataType>>) => {
return (
<chakraComponents.DropdownIndicator {...props}>
<Icon
as={FiChevronDown}
w={6}
h={6}
color={useColorModeValue('blackAlpha.600', 'whiteAlpha.600')}
color={useColorModeValue("blackAlpha.600", "whiteAlpha.600")}
/>
</chakraComponents.DropdownIndicator>
);
};
const Placeholder = (props: PlaceholderProps<ChainOption>) => {
const Placeholder = (props: PlaceholderProps<DataType>) => {
if (props.hasValue) {
return (
<chakraComponents.Placeholder {...props}>
@@ -151,7 +157,7 @@ const SelectOptions = ({ data, value, onChange }: ChangeChainMenuType) => {
spacing={3}
overflow="hidden"
wordBreak="break-word"
color={useColorModeValue('blackAlpha.800', 'whiteAlpha.800')}
color={useColorModeValue("blackAlpha.800", "whiteAlpha.800")}
w="full"
>
<Box
@@ -163,15 +169,15 @@ const SelectOptions = ({ data, value, onChange }: ChangeChainMenuType) => {
h="full"
border="1px solid"
borderColor={useColorModeValue(
'blackAlpha.200',
'whiteAlpha.200'
"blackAlpha.200",
"whiteAlpha.200"
)}
borderRadius="full"
overflow="hidden"
>
<Image
src={props.getValue()[0].icon}
fallbackSrc={'https://dummyimage.com/150/9e9e9e/ffffff&text=☒'}
fallbackSrc={"https://dummyimage.com/150/9e9e9e/ffffff&text=☒"}
/>
</Box>
<Text fontSize="xl" fontWeight="semibold">
@@ -186,7 +192,7 @@ const SelectOptions = ({ data, value, onChange }: ChangeChainMenuType) => {
const CustomOption = ({
children,
...props
}: OptionProps<ChainOption, false, GroupBase<ChainOption>>) => {
}: OptionProps<DataType, false, GroupBase<DataType>>) => {
return (
<chakraComponents.Option {...props}>
<Stack
@@ -196,7 +202,7 @@ const SelectOptions = ({ data, value, onChange }: ChangeChainMenuType) => {
spacing={3}
overflow="hidden"
wordBreak="break-word"
color={useColorModeValue('blackAlpha.800', 'whiteAlpha.800')}
color={useColorModeValue("blackAlpha.800", "whiteAlpha.800")}
w="full"
>
<Box
@@ -207,13 +213,13 @@ const SelectOptions = ({ data, value, onChange }: ChangeChainMenuType) => {
w="full"
h="full"
border="1px solid"
borderColor={useColorModeValue('blackAlpha.200', 'whiteAlpha.200')}
borderColor={useColorModeValue("blackAlpha.200", "whiteAlpha.200")}
borderRadius="full"
overflow="hidden"
>
<Image
src={props.data?.icon}
fallbackSrc={'https://dummyimage.com/150/9e9e9e/ffffff&text=☒'}
fallbackSrc={"https://dummyimage.com/150/9e9e9e/ffffff&text=☒"}
/>
</Box>
<Text fontSize="xl" fontWeight="semibold">
@@ -230,17 +236,17 @@ const SelectOptions = ({ data, value, onChange }: ChangeChainMenuType) => {
instanceId="select-chain"
placeholder="Choose a chain"
chakraStyles={customStyles}
isClearable={false}
isClearable={true}
isMulti={false}
isOptionDisabled={(option) => option.isDisabled || false}
isOptionDisabled={(option) => option.isDisabled}
blurInputOnSelect={true}
controlShouldRenderValue={false}
loadingMessage={() => <SkeletonOptions />}
value={value ? value : null}
value={value}
defaultOptions={data}
loadOptions={(inputValue, callback) => {
const searcher = new Searcher(data, {
keySelector: (obj) => obj.label
keySelector: (obj) => obj.label,
});
callback(searcher.search(inputValue));
}}
@@ -249,7 +255,7 @@ const SelectOptions = ({ data, value, onChange }: ChangeChainMenuType) => {
DropdownIndicator,
IndicatorSeparator,
Placeholder,
Option: CustomOption
Option: CustomOption,
}}
/>
);
@@ -258,10 +264,10 @@ const SelectOptions = ({ data, value, onChange }: ChangeChainMenuType) => {
export const ChangeChainDropdown = ({
data,
selectedItem,
onChange
onChange,
}: ChangeChainDropdownType) => {
return (
<Box w="full" position="relative" zIndex={50}>
<Box w="full" position="relative" zIndex={150}>
<SelectOptions data={data} value={selectedItem} onChange={onChange} />
</Box>
);
Original file line number Diff line number Diff line change
@@ -4,25 +4,25 @@ import {
ChooseChainInfo,
ChainOption,
handleSelectChainDropdown,
} from "./types";
} from "../types";

export function ChooseChain({
chainId,
chainName,
chainInfos,
onChange,
}: {
chainId?: string;
chainName?: string;
chainInfos: ChooseChainInfo[];
onChange: handleSelectChainDropdown;
}) {
const [selectedItem, setSelectedItem] = useState<ChainOption | undefined>();
useEffect(() => {
if (chainId && chainInfos.length > 0)
if (chainName && chainInfos.length > 0)
setSelectedItem(
chainInfos.filter((options) => options.chainId === chainId)[0]
chainInfos.filter((options) => options.chainName === chainName)[0]
);
if (!chainId) setSelectedItem(undefined);
}, [chainId]);
if (!chainName) setSelectedItem(undefined);
}, [chainName]);
return (
<ChangeChainDropdown
data={chainInfos}
7 changes: 7 additions & 0 deletions templates/connect-multi-chain/components/react/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export * from "./astronaut";
export * from "./choose-chain";
export * from "./chain-dropdown";
export * from "./wallet-connect";
export * from "./warn-block";
export * from "./user-card";
export * from "./address-card";
33 changes: 33 additions & 0 deletions templates/connect-multi-chain/components/react/user-card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from "react";
import { Text, Stack, Box } from "@chakra-ui/react";
import { ConnectedUserCardType } from "../types";

export const ConnectedUserInfo = ({
username,
icon,
}: ConnectedUserCardType) => {
return (
<Stack spacing={1} alignItems="center">
{username && (
<>
<Box
display={icon ? "block" : "none"}
minW={20}
maxW={20}
w={20}
minH={20}
maxH={20}
h={20}
borderRadius="full"
overflow="hidden"
>
{icon}
</Box>
<Text fontSize={{ md: "xl" }} fontWeight="semibold">
{username}
</Text>
</>
)}
</Stack>
);
};
183 changes: 183 additions & 0 deletions templates/connect-multi-chain/components/react/wallet-connect.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
import React, { MouseEventHandler, ReactNode } from "react";
import { Button, Icon, Stack, Text, useColorModeValue } from "@chakra-ui/react";
import { IoWallet } from "react-icons/io5";
import { ConnectWalletType } from "../types";
import { FiAlertTriangle } from "react-icons/fi";
import { WalletStatus } from "@cosmos-kit/core";

export const ConnectWalletButton = ({
buttonText,
isLoading,
isDisabled,
icon,
onClickConnectBtn,
}: ConnectWalletType) => {
return (
<Button
w="full"
minW="fit-content"
size="lg"
isLoading={isLoading}
isDisabled={isDisabled}
bgImage="linear-gradient(109.6deg, rgba(157,75,199,1) 11.2%, rgba(119,81,204,1) 83.1%)"
color="white"
opacity={1}
transition="all .5s ease-in-out"
_hover={{
bgImage:
"linear-gradient(109.6deg, rgba(157,75,199,1) 11.2%, rgba(119,81,204,1) 83.1%)",
opacity: 0.75,
}}
_active={{
bgImage:
"linear-gradient(109.6deg, rgba(157,75,199,1) 11.2%, rgba(119,81,204,1) 83.1%)",
opacity: 0.9,
}}
onClick={onClickConnectBtn}
>
<Icon as={icon ? icon : IoWallet} mr={2} />
{buttonText ? buttonText : "Connect Wallet"}
</Button>
);
};

export const Disconnected = ({
buttonText,
onClick,
}: {
buttonText: string;
onClick: MouseEventHandler<HTMLButtonElement>;
}) => {
return (
<ConnectWalletButton buttonText={buttonText} onClickConnectBtn={onClick} />
);
};

export const Connected = ({
buttonText,
onClick,
}: {
buttonText: string;
onClick: MouseEventHandler<HTMLButtonElement>;
}) => {
return (
<ConnectWalletButton buttonText={buttonText} onClickConnectBtn={onClick} />
);
};

export const Connecting = () => {
return <ConnectWalletButton isLoading={true} />;
};

export const Rejected = ({
buttonText,
wordOfWarning,
onClick
}: {
buttonText: string;
wordOfWarning?: string;
onClick: MouseEventHandler<HTMLButtonElement>;
}) => {
return (
<Stack>
<ConnectWalletButton buttonText={buttonText} isDisabled={false} onClickConnectBtn={onClick} />
{wordOfWarning && (
<Stack
isInline={true}
borderRadius="md"
bg={useColorModeValue("orange.200", "orange.300")}
color="blackAlpha.900"
p={4}
spacing={1}
>
<Icon as={FiAlertTriangle} mt={1} />
<Text>
<Text fontWeight="semibold" as="span">
Warning:&ensp;
</Text>
{wordOfWarning}
</Text>
</Stack>
)}
</Stack>
);
};

export const Error = ({
buttonText,
wordOfWarning,
onClick
}: {
buttonText: string;
wordOfWarning?: string;
onClick: MouseEventHandler<HTMLButtonElement>;
}) => {
return (
<Stack>
<ConnectWalletButton buttonText={buttonText} isDisabled={false} onClickConnectBtn={onClick} />
{wordOfWarning && (
<Stack
isInline={true}
borderRadius="md"
bg={useColorModeValue("orange.200", "orange.300")}
color="blackAlpha.900"
p={4}
spacing={1}
>
<Icon as={FiAlertTriangle} mt={1} />
<Text>
<Text fontWeight="semibold" as="span">
Warning:&ensp;
</Text>
{wordOfWarning}
</Text>
</Stack>
)}
</Stack>
);
};

export const NotExist = ({
buttonText,
onClick
}: {
buttonText: string;
onClick: MouseEventHandler<HTMLButtonElement>;
}) => {
return <ConnectWalletButton buttonText={buttonText} isDisabled={false} onClickConnectBtn={onClick} />;
};

export const WalletConnectComponent = ({
walletStatus,
disconnect,
connecting,
connected,
rejected,
error,
notExist,
}: {
walletStatus: WalletStatus;
disconnect: ReactNode;
connecting: ReactNode;
connected: ReactNode;
rejected: ReactNode;
error: ReactNode;
notExist: ReactNode;
}) => {
switch (walletStatus) {
case WalletStatus.Disconnected:
return <>{disconnect}</>;
case WalletStatus.Connecting:
return <>{connecting}</>;
case WalletStatus.Connected:
return <>{connected}</>;
case WalletStatus.Rejected:
return <>{rejected}</>;
case WalletStatus.Error:
return <>{error}</>;
case WalletStatus.NotExist:
return <>{notExist}</>;
default:
return <>{disconnect}</>;
}
};
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { ReactNode } from "react";
import { Box, Stack, Text, useColorModeValue } from "@chakra-ui/react";
import { WalletStatus } from "./types";
import { WalletStatus } from "@cosmos-kit/core";

export const WarnBlock = ({
wordOfWarning,
@@ -73,13 +73,17 @@ export const RejectedWarn = ({
export const ConnectStatusWarn = ({
walletStatus,
rejected,
error,
}: {
walletStatus: WalletStatus;
rejected: ReactNode;
error: ReactNode;
}) => {
switch (walletStatus) {
case WalletStatus.Rejected:
return <>{rejected}</>;
case WalletStatus.Error:
return <>{error}</>;
default:
return <></>;
}
14 changes: 12 additions & 2 deletions templates/connect-multi-chain/components/types.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,18 @@
import { MouseEventHandler, ReactNode, RefObject } from "react";
import { IconType } from "react-icons";

export interface ChooseChainInfo {
export interface DataType extends OptionBase {
isDisabled?: boolean;
label: string;
value: string;
icon?: string;
chainId: string;
chainRoute?: string;
}

export interface ChooseChainInfo {
chainName: string;
chainRoute?: string;
label: string;
value: string;
icon?: string;
@@ -29,6 +38,7 @@ export interface ConnectWalletType {
export interface ConnectedUserCardType {
username?: string;
icon?: ReactNode;
walletIcon?: string;
}

export interface OptionBase {
@@ -43,7 +53,7 @@ export interface ChainOption extends OptionBase {
label: string;
value: string;
icon?: string;
chainId: string;
chainName: string;
chainRoute?: string;
}

31 changes: 0 additions & 31 deletions templates/connect-multi-chain/components/user-card.tsx

This file was deleted.

109 changes: 0 additions & 109 deletions templates/connect-multi-chain/components/wallet-connect.tsx

This file was deleted.

151 changes: 151 additions & 0 deletions templates/connect-multi-chain/components/wallet.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
import { useWallet } from "@cosmos-kit/react";
import { chainInfos } from "../config";
import { Box, Center, Grid, GridItem, Icon, Stack, useColorModeValue } from "@chakra-ui/react";
import { MouseEventHandler } from "react";
import { FiAlertTriangle } from "react-icons/fi";
import { Astronaut, Error, ChainOption, ChooseChain, Connected, ConnectedShowAddress, ConnectedUserInfo, Connecting, ConnectStatusWarn, CopyAddressBtn, Disconnected, handleSelectChainDropdown, NotExist, Rejected, RejectedWarn, WalletConnectComponent } from "../components";
import { getWalletPrettyName } from "@cosmos-kit/registry";

export const WalletSection = () => {
const walletManager = useWallet();
const { connect, disconnect, openModal, setCurrentChain,
walletStatus, username, address, message,
currentChainName: chainName, currentWalletName } = walletManager;

// Events
const onClickConnect: MouseEventHandler = async (e) => {
e.preventDefault();
openModal();
await connect();
};

const onClickDisconnect: MouseEventHandler = async (e) => {
e.preventDefault();
openModal();
// await disconnect();
};

const onClickOpenModal: MouseEventHandler = (e) => {
e.preventDefault();
openModal();
};

const onChainChange: handleSelectChainDropdown = async (
selectedValue: ChainOption | null
) => {
setCurrentChain(selectedValue?.chainName);
openModal();
if (currentWalletName) {
await connect();
}
};

// Components
const connectWalletButton = (
<WalletConnectComponent
walletStatus={walletStatus}
disconnect={
<Disconnected buttonText="Connect Wallet" onClick={
currentWalletName
? onClickConnect
: onClickOpenModal
} />
}
connecting={<Connecting />}
connected={
<Connected buttonText={
address
? `${address.slice(0, 7)}...${address.slice(-4)}`
: "Disconnect"
} onClick={
address
? onClickOpenModal
: onClickDisconnect
} />
}
rejected={
<Rejected
buttonText="Reconnect"
onClick={onClickConnect}
/>
}
error={
<Error
buttonText="Change Wallet"
onClick={onClickOpenModal}
/>
}
notExist={<NotExist buttonText="Install Wallet" onClick={onClickOpenModal} />}
/>
);

const connectWalletWarn = (
<ConnectStatusWarn
walletStatus={walletStatus}
rejected={
<RejectedWarn
icon={<Icon as={FiAlertTriangle} mt={1} />}
wordOfWarning={`${getWalletPrettyName(currentWalletName)}: ${message}`}
/>
}
error={
<RejectedWarn
icon={<Icon as={FiAlertTriangle} mt={1} />}
wordOfWarning={`${getWalletPrettyName(currentWalletName)}: ${message}`}
/>
}
/>
);
const chooseChain = (
<ChooseChain
chainName={chainName}
chainInfos={chainInfos}
onChange={onChainChange}
/>
);

const userInfo = <ConnectedUserInfo username={username} icon={<Astronaut />} />;
const addressBtn = chainName && (
<CopyAddressBtn
walletStatus={walletStatus}
connected={<ConnectedShowAddress address={address} isLoading={false} />}
/>
);

return (
<Center py={16}>
<Grid
w="full"
maxW="sm"
templateColumns="1fr"
rowGap={4}
alignItems="center"
justifyContent="center"
>
<GridItem>{chooseChain}</GridItem>
<GridItem>{connectWalletWarn}</GridItem>
<GridItem px={6}>
<Stack
justifyContent="center"
alignItems="center"
borderRadius="lg"
bg={useColorModeValue("white", "blackAlpha.400")}
boxShadow={useColorModeValue(
"0 0 2px #dfdfdf, 0 0 6px -2px #d3d3d3",
"0 0 2px #363636, 0 0 8px -2px #4f4f4f"
)}
spacing={4}
px={4}
py={{ base: 6, md: 12 }}
>
{userInfo}
{addressBtn}
<Box w="full" maxW={{ base: 52, md: 64 }}>
{connectWalletButton}
</Box>
</Stack>
</GridItem>
</Grid>
</Center>
);
}
30 changes: 15 additions & 15 deletions templates/connect-multi-chain/config/chain-infos.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import { ChooseChainInfo } from '../components';
import { ChooseChainInfo } from "../components";
import { chains as chainsBase, assets as chainAssets } from 'chain-registry';

export const chainInfos: ChooseChainInfo[] = chainsBase.map((chain) => {
const assets = chainAssets.find(
(_chain) => _chain.chain_name === chain.chain_name
)?.assets;
return {
chainId: chain.chain_id,
label: chain.pretty_name,
value: chain.chain_id,
icon: assets
? assets[0]?.logo_URIs?.svg || assets[0]?.logo_URIs?.png
: undefined,
disabled: false
};
});
export const chainInfos: ChooseChainInfo[] = chainsBase
.filter(chain => chain.network_type !== 'testnet')
.map(chain => {
const assets = chainAssets.find(
_chain => _chain.chain_name === chain.chain_name
)?.assets;
return {
chainName: chain.chain_name,
label: chain.pretty_name,
value: chain.chain_name,
icon: assets ? assets[0]?.logo_URIs?.svg || assets[0]?.logo_URIs?.png : undefined,
disabled: false
}
});
7 changes: 3 additions & 4 deletions templates/connect-multi-chain/next.config.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
/** @type {import('next').NextConfig} */
const nextConfig = {

module.exports = {
reactStrictMode: true,
swcMinify: true,
swcMinify: true
}

module.exports = nextConfig
6 changes: 4 additions & 2 deletions templates/connect-multi-chain/package.json
Original file line number Diff line number Diff line change
@@ -13,8 +13,10 @@
"@chakra-ui/react": "^2.2.8",
"@cosmjs/cosmwasm-stargate": "0.28.13",
"@cosmjs/stargate": "0.28.13",
"@cosmos-kit/react": "^0.11.0",
"@cosmos-kit/types": "^0.11.0",
"@cosmos-kit/core": "^0.12.3",
"@cosmos-kit/keplr": "^0.12.7",
"@cosmos-kit/react": "^0.12.7",
"@cosmos-kit/registry": "^0.12.6",
"@emotion/react": "11.10.0",
"@emotion/styled": "11.10.0",
"chain-registry": "^0.10.3",
67 changes: 34 additions & 33 deletions templates/connect-multi-chain/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -1,42 +1,43 @@
import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { GasPrice } from '@cosmjs/stargate';
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { WalletProvider } from '@cosmos-kit/react'
import { ChakraProvider } from '@chakra-ui/react';
import { defaultTheme } from '../config';
import { ChainInfoID } from '@cosmos-kit/types';
import { WalletManagerProvider } from '@cosmos-kit/react';
import { WalletManager, ChainRegistry } from '@cosmos-kit/core';
import { allWallets } from '@cosmos-kit/registry';
import { chains as rawChains } from 'chain-registry';
import { convert } from '../utils';


const chains: ChainRegistry[] = rawChains
.filter((chain) => chain.network_type !== 'testnet')
.map((chain) => convert(chain));

const LOCAL_STORAGE_KEY = 'connectedWalletId';

function MyApp({ Component, pageProps }: AppProps) {
const walletManager = new WalletManager(
chains,
allWallets
)
// walletManager.useWallets('keplr-extension');
// walletManager.useChains();

walletManager.setAutos({
closeModalWhenWalletIsConnected: false,
closeModalWhenWalletIsDisconnected: true,
closeModalWhenWalletIsRejected: false,
})

return (
<WalletManagerProvider
walletConnectClientMeta={{
name: 'CosmosWalletDApp',
description: 'A dApp using the @cosmos-kit/react library.',
url: 'https://github.com/cosmology-tech/cosmos-wallet/tree/main/packages/react',
// @cosmology-tech's GitHub avatar
icons: ['https://avatars.githubusercontent.com/u/101243801?s=200&v=4']
}}
renderLoader={() => <p>Loading...</p>}
localStorageKey={LOCAL_STORAGE_KEY}
defaultChainId={ChainInfoID.Juno1}
getSigningCosmWasmClientOptions={(chainInfo) => ({
gasPrice: GasPrice.fromString(
'0.0025' + chainInfo.feeCurrencies[0].coinMinimalDenom
)
})}
getSigningStargateClientOptions={(chainInfo) => ({
gasPrice: GasPrice.fromString(
'0.0025' + chainInfo.feeCurrencies[0].coinMinimalDenom
)
})}
>
<ChakraProvider theme={defaultTheme}>
<ChakraProvider theme={defaultTheme}>
<WalletProvider
// walletModal={MyWalletModal} // import { WalletModalProps } from '@cosmos-kit/core';
walletManager={walletManager}
>
<Component {...pageProps} />
</ChakraProvider>
</WalletManagerProvider>
);
</WalletProvider>
</ChakraProvider>
)
}

export default MyApp;
export default MyApp
144 changes: 14 additions & 130 deletions templates/connect-multi-chain/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { MouseEventHandler, useState } from 'react';
import Head from 'next/head';
import Head from "next/head";
import {
Box,
Divider,
@@ -14,99 +13,17 @@ import {
Icon,
useColorMode,
useColorModeValue,
GridItem,
Center
} from '@chakra-ui/react';
import { BsFillMoonStarsFill, BsFillSunFill } from 'react-icons/bs';
import { FiAlertTriangle } from 'react-icons/fi';
import { useWalletManager, useWallet } from '@cosmos-kit/react';
} from "@chakra-ui/react";
import { BsFillMoonStarsFill, BsFillSunFill } from "react-icons/bs";
import {
Connected,
ConnectedUserInfo,
Connecting,
Disconnect,
NotExist,
Rejected,
ConnectWalletButtonStatus,
Astronaut,
ChooseChain,
handleSelectChainDropdown,
ChainOption,
ConnectedShowAddress,
Product,
Dependency,
ConnectStatusWarn,
RejectedWarn,
CopyAddressBtn
} from '../components';
import { mapStatusFromCosmosWallet } from '../utils';
import { chainInfos, dependencies, products } from '../config';
import { WalletStatus } from '../components';
WalletSection,
} from "../components";
import { dependencies, products } from "../config";

export default function Home() {
const { colorMode, toggleColorMode } = useColorMode();
const [chainId, setChainId] = useState<string | undefined>();
const { connect, disconnect } = useWalletManager();
const { status, error, name, address } = useWallet(chainId);
const walletStatus = mapStatusFromCosmosWallet(status, error as Error);

const onClickConnect: MouseEventHandler = (e) => {
e.preventDefault();
connect();
};
const onClickDisconnect: MouseEventHandler = (e) => {
e.preventDefault();
disconnect();
};
const onChainChange: handleSelectChainDropdown = (
selectedValue: ChainOption | null
) => {
if (selectedValue) {
setChainId(selectedValue.chainId);
}
};

const userInfo = walletStatus === WalletStatus.Loaded && (
<ConnectedUserInfo username={name} icon={<Astronaut />} />
);
const addressBtn = chainId && (
<CopyAddressBtn
walletStatus={walletStatus}
connected={<ConnectedShowAddress address={address} isLoading={false} />}
/>
);
const connectWalletButton = (
<ConnectWalletButtonStatus
walletStatus={walletStatus}
disconnect={
<Disconnect buttonText="Connect Wallet" onClick={onClickConnect} />
}
connecting={<Connecting />}
connected={
<Connected buttonText="Disconnect" onClick={onClickDisconnect} />
}
rejected={<Rejected buttonText="Chain Rejected" />}
notExist={<NotExist buttonText="Not Exist" />}
/>
);
const connectWalletWarn = (
<ConnectStatusWarn
walletStatus={walletStatus}
rejected={
<RejectedWarn
icon={<Icon as={FiAlertTriangle} mt={1} />}
wordOfWarning="Warning: There is not enough chain information to connect to this chain."
/>
}
/>
);
const chooseChain = (
<ChooseChain
chainId={chainId}
chainInfos={chainInfos}
onChange={onChainChange}
/>
);

return (
<Container maxW="5xl" py={10}>
@@ -118,14 +35,14 @@ export default function Home() {
<Flex justifyContent="end" mb={4}>
<Button variant="outline" px={0} onClick={toggleColorMode}>
<Icon
as={colorMode === 'light' ? BsFillMoonStarsFill : BsFillSunFill}
as={colorMode === "light" ? BsFillMoonStarsFill : BsFillSunFill}
/>
</Button>
</Flex>
<Box textAlign="center">
<Heading
as="h1"
fontSize={{ base: '3xl', sm: '4xl', md: '5xl' }}
fontSize={{ base: "3xl", sm: "4xl", md: "5xl" }}
fontWeight="extrabold"
mb={3}
>
@@ -134,55 +51,22 @@ export default function Home() {
<Heading
as="h1"
fontWeight="bold"
fontSize={{ base: '2xl', sm: '3xl', md: '4xl' }}
fontSize={{ base: "2xl", sm: "3xl", md: "4xl" }}
>
<Text as="span">Welcome to&nbsp;</Text>
<Text
as="span"
color={useColorModeValue('primary.500', 'primary.200')}
color={useColorModeValue("primary.500", "primary.200")}
>
CosmosKit + Telescope + Next.js
</Text>
</Heading>
</Box>
<Center py={16}>
<Grid
w="full"
maxW="sm"
templateColumns="1fr"
rowGap={4}
alignItems="center"
justifyContent="center"
>
<GridItem>{chooseChain}</GridItem>
<GridItem>{connectWalletWarn}</GridItem>
<GridItem px={6}>
<Stack
justifyContent="center"
alignItems="center"
borderRadius="lg"
bg={useColorModeValue('white', 'blackAlpha.400')}
boxShadow={useColorModeValue(
'0 0 2px #dfdfdf, 0 0 6px -2px #d3d3d3',
'0 0 2px #363636, 0 0 8px -2px #4f4f4f'
)}
spacing={4}
px={4}
py={{ base: 6, md: 12 }}
>
{userInfo}
{addressBtn}
<Box w="full" maxW={{ base: 52, md: 64 }}>
{connectWalletButton}
</Box>
</Stack>
</GridItem>
</Grid>
</Center>
<WalletSection />
<Grid
templateColumns={{
md: 'repeat(2, 1fr)',
lg: 'repeat(3, 1fr)'
md: "repeat(2, 1fr)",
lg: "repeat(3, 1fr)",
}}
gap={8}
mb={14}
@@ -191,7 +75,7 @@ export default function Home() {
<Product key={product.title} {...product}></Product>
))}
</Grid>
<Grid templateColumns={{ md: '1fr 1fr' }} gap={8} mb={20}>
<Grid templateColumns={{ md: "1fr 1fr" }} gap={8} mb={20}>
{dependencies.map((dependency) => (
<Dependency key={dependency.title} {...dependency}></Dependency>
))}
32 changes: 10 additions & 22 deletions templates/connect-multi-chain/utils.ts
Original file line number Diff line number Diff line change
@@ -1,24 +1,12 @@
import { WalletStatus } from "./components";
import { CosmosWalletStatus } from "@cosmos-kit/types";
import { Chain } from '@chain-registry/types';
import { ChainRegistry } from '@cosmos-kit/core';

export const mapStatusFromCosmosWallet = (status: CosmosWalletStatus, error?: Error): WalletStatus => {
switch (status) {
case CosmosWalletStatus.Uninitialized || CosmosWalletStatus.Disconnected:
return WalletStatus.NotInit;
case CosmosWalletStatus.Connecting
|| CosmosWalletStatus.ChoosingWallet
|| CosmosWalletStatus.PendingWalletConnect
|| CosmosWalletStatus.EnablingWallet:
return WalletStatus.Loading;
case CosmosWalletStatus.Connected:
return WalletStatus.Loaded;
case CosmosWalletStatus.Errored:
if (error && error.message === 'Request rejected') {
return WalletStatus.NotInit;
} else {
return WalletStatus.Rejected;
}
default:
return WalletStatus.NotInit;
}
// TODO discuss Chain
// maybe simplify so we can use `Chain` throughout the app
export function convert(chain: Chain): ChainRegistry {
return {
name: chain.chain_name,
active: false,
raw: chain,
};
}
4,584 changes: 1,790 additions & 2,794 deletions yarn.lock

Large diffs are not rendered by default.