example: custom modal

packages/example/components/custom-modal.tsx

@@ -0,0 +1,29 @@
+import { WalletModalProps } from "@cosmos-kit/core";
+import { BasicModal, Button } from "@interchain-ui/react";
+
+export const CustomModal = ({
+  isOpen,
+  setOpen,
+  walletRepo,
+}: WalletModalProps) => {
+  const onCloseModal = () => {
+    setOpen(false);
+  };
+
+  const onConnect = (connect: () => Promise<void>) => {
+    connect?.();
+    onCloseModal();
+  };
+
+  return (
+    <BasicModal isOpen={isOpen} onClose={onCloseModal} title={"Choose Wallet"}>
+      {walletRepo?.wallets.map(
+        ({ walletName, connect, walletInfo, walletStatus }) => (
+          <Button key={walletName} onClick={() => onConnect(connect)}>
+            {walletInfo.prettyName} - {walletStatus}
+          </Button>
+        )
+      )}
+    </BasicModal>
+  );
+};

packages/example/package.json

@@ -35,7 +35,7 @@
     "@cosmos-kit/station": "^2.4.7",
     "@cosmos-kit/vectis": "^2.4.7",
     "@cosmos-kit/web3auth": "^2.4.7",
-    "@interchain-ui/react": "^1.13.17",
+    "@interchain-ui/react": "^1.14.2",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.0.2",

packages/example/pages/_app.tsx

@@ -32,6 +32,7 @@ import React, { useMemo } from "react";
 
 // import { CustomConnectedView } from "../components/custom-connected";
 import { RootLayout } from "../components/layout";
+import { CustomModal } from "components/custom-modal";
 
 function MyApp({ Component, pageProps }: AppProps) {
   // const web3AuthWallets = useMemo(
@@ -140,6 +141,7 @@ function MyApp({ Component, pageProps }: AppProps) {
         // //   ...defaultModalViews,
         // //   Connected: CustomConnectedView,
         // // }}
+        // walletModal={CustomModal}
       >
         <Component {...pageProps} />
       </ChainProvider>

yarn.lock

@@ -2825,6 +2825,31 @@
     react-stately "^3.27.1"
     zustand "4.4.6"
 
+"@interchain-ui/react@^1.14.2":
+  version "1.14.2"
+  resolved "https://registry.npmjs.org/@interchain-ui/react/-/react-1.14.2.tgz#2881eff57ce5988abecc4b7205bc2fad121d9c24"
+  integrity sha512-YA3Dkq4FOUOcKHoH8iTqozowo5VisaT4iPffkGnxkkShlMY/NwC5V4q5WbdkNaefKmlIoUJDKle/Pyx9UL4iyw==
+  dependencies:
+    "@fastify/deepmerge" "^1.3.0"
+    "@floating-ui/dom" "^1.5.2"
+    "@floating-ui/react" "^0.26.0"
+    "@formkit/auto-animate" "^0.8.1"
+    "@react-aria/utils" "^3.21.1"
+    "@vanilla-extract/css" "^1.14.0"
+    "@vanilla-extract/dynamic" "^2.1.0"
+    "@vanilla-extract/recipes" "^0.5.1"
+    animejs "^3.2.1"
+    bignumber.js "^9.1.1"
+    client-only "^0.0.1"
+    clsx "^1.2.1"
+    copy-to-clipboard "^3.3.3"
+    immer "^9.0.19"
+    lodash "^4.17.21"
+    rainbow-sprinkles "^0.17.0"
+    react-aria "^3.29.1"
+    react-stately "^3.27.1"
+    zustand "4.4.6"
+
 "@internationalized/date@^3.5.0":
   version "3.5.0"
   resolved "https://registry.npmjs.org/@internationalized/date/-/date-3.5.0.tgz#67f1dd62355f05140cc80e324842e9bfb4553abe"