Merge pull request #3 from hyperweb-io/templates

Templates

Author: pyramation

templates/connect-chain/components/wallet/Wallet.tsx

@@ -4,8 +4,8 @@ import {
   Stack,
   useColorModeValue,
 } from "@interchain-ui/react";
-import { WalletStatus } from "cosmos-kit";
-import { useChain } from "@cosmos-kit/react";
+import { WalletState as WalletStatus } from "@interchain-kit/core";
+import { useChain } from "@interchain-kit/react";
 import { getChainLogo } from "@/utils";
 import { CHAIN_NAME } from "@/config";
 import { User } from "./User";
@@ -37,17 +37,17 @@ export function Wallet() {
     [WalletStatus.Connected]: <ButtonConnected onClick={openView} />,
     [WalletStatus.Connecting]: <ButtonConnecting />,
     [WalletStatus.Disconnected]: <ButtonDisconnected onClick={connect} />,
-    [WalletStatus.Error]: <ButtonError onClick={openView} />,
+    // [WalletStatus.Error]: <ButtonError onClick={openView} />,
     [WalletStatus.Rejected]: <ButtonRejected onClick={connect} />,
-    [WalletStatus.NotExist]: <ButtonNotExist onClick={openView} />,
+    // [WalletStatus.NotExist]: <ButtonNotExist onClick={openView} />,
   }[status] || <ButtonConnect onClick={connect} />;
 
   return (
     <Box py="$16">
       <Stack attributes={{ mb: "$12", justifyContent: "center" }}>
         <Chain
-          name={chain.pretty_name}
-          logo={getChainLogo(chain.chain_name)!}
+          name={chain.prettyName!}
+          logo={getChainLogo(chain.chainName)!}
         />
       </Stack>
       <Stack
@@ -83,8 +83,11 @@ export function Wallet() {
           {ConnectButton}
         </Box>
 
-        {message && [WalletStatus.Error, WalletStatus.Rejected].includes(status)
-          ? <Warning text={`${wallet?.prettyName}: ${message}`} />
+        {message && [
+          // WalletStatus.Error,
+          WalletStatus.Rejected
+        ].includes(status)
+          ? <Warning text={`${wallet?.info?.prettyName}: ${message}`} />
           : null}
       </Stack>
     </Box>

templates/connect-chain/package.json

@@ -19,16 +19,17 @@
   },
   "dependencies": {
     "@chain-registry/types": "^0.50.18",
-    "@cosmjs/cosmwasm-stargate": "0.31.3",
-    "@cosmjs/stargate": "0.32.3",
-    "@cosmos-kit/react": "2.17.0",
     "@emotion/react": "11.10.6",
     "@emotion/styled": "11.10.6",
-    "@interchain-ui/react": "1.23.22",
+    "@interchain-kit/core": "^0.0.1-beta.62",
+    "@interchain-kit/keplr-extension": "^0.0.1-beta.62",
+    "@interchain-kit/leap-extension": "^0.0.1-beta.62",
+    "@interchain-kit/react": "^0.0.1-beta.62",
+    "@interchain-ui/react": "1.26.1",
     "@interchain-ui/react-no-ssr": "^0.1.6",
-    "chain-registry": "^1.69.32",
-    "cosmos-kit": "2.18.0",
+    "bech32": "^2.0.0",
     "framer-motion": "9.0.7",
+    "interchain-kit": "0.0.1-beta.62",
     "next": "^13",
     "react": "18.2.0",
     "react-dom": "18.2.0",

templates/connect-chain/pages/_app.tsx

@@ -2,47 +2,34 @@ import "../styles/globals.css";
 import "@interchain-ui/react/styles";
 
 import type { AppProps } from "next/app";
-import { SignerOptions, wallets } from "cosmos-kit";
-import { ChainProvider } from "@cosmos-kit/react";
-import { assets, chains } from "chain-registry";
+import { ChainProvider } from "@interchain-kit/react";
+import { assetLists, chains } from "@chain-registry/v2";
+import { keplrWallet } from "@interchain-kit/keplr-extension";
+import { leapWallet } from "@interchain-kit/leap-extension";
 import {
   Box,
   ThemeProvider,
   useColorModeValue,
   useTheme,
 } from "@interchain-ui/react";
 
+const chain = chains.find((chain) => chain.chainName === 'cosmoshub')!
+
+console.log('keplrWallet', keplrWallet)
+
 function CreateCosmosApp({ Component, pageProps }: AppProps) {
   const { themeClass } = useTheme();
 
-  const signerOptions: SignerOptions = {
-    // signingStargate: () => {
-    //   return getSigningCosmosClientOptions();
-    // }
-  };
-
   return (
     <ThemeProvider>
       <ChainProvider
+        chains={[{ ...chain }]}
+        assetLists={assetLists}
         // @ts-ignore
-        chains={chains}
-        // @ts-ingore
-        assetLists={assets}
-        wallets={wallets}
-        walletConnectOptions={{
-          signClient: {
-            projectId: "a8510432ebb71e6948cfd6cde54b70f7",
-            relayUrl: "wss://relay.walletconnect.org",
-            metadata: {
-              name: 'Interchain Kit dApp',
-              description: 'Interchain Kit dApp built by Create Interchain App',
-              url: "https://docs.cosmology.zone/interchain-kit/",
-              icons: [],
-            },
-          },
-        }}
+        wallets={[keplrWallet, leapWallet]}
         // @ts-ignore
-        signerOptions={signerOptions}
+        signerOptions={{}}
+        endpointOptions={{ endpoints: {} }}
       >
         <Box
           className={themeClass}

templates/connect-chain/utils/index.ts

@@ -1,11 +1,11 @@
-import { chains } from 'chain-registry';
-import { Asset, Chain } from '@chain-registry/types';
+import { chains } from '@chain-registry/v2';
+import { Asset, Chain } from '@chain-registry/v2-types';
 
 export function getLogo(from: Asset | Chain) {
-  return from.logo_URIs?.svg || from.logo_URIs?.png;
+  return from.logoURIs?.svg || from.logoURIs?.png;
 }
 
 export function getChainLogo(name: string) {
-  const chain = chains.find(chain => chain.chain_name === name)
+  const chain = chains.find(chain => chain.chainName === name)
   return chain ? getLogo(chain) : null;
 }