Embedded wallet v2 upgrade

components/ConnectWalletSideCurtain/connectWalletSideCurtain.tsx

@@ -5,9 +5,9 @@ import { ConnectWalletSideCurtainContent } from "./ConnectWalletSideCurtainConte
 
 declare global {
   interface Window {
-    leap: any;
+    leap?: any;
     keplr: any;
-    cosmostation: any;
+    cosmostation?: any;
   }
 }
 

components/EmbeddedWalletContainer.tsx

@@ -0,0 +1,89 @@
+import { useChain } from "@cosmos-kit/react";
+import { Dispatch, SetStateAction, useMemo } from "react";
+import { useConnectedWalletType } from "../hooks/use-connected-wallet-types";
+import {
+  AccountModal,
+  Actions,
+  EmbeddedWalletProvider,
+} from "@leapwallet/embedded-wallet-sdk-react";
+
+interface Props {
+  mounted: boolean;
+  isModalOpen: boolean;
+  setIsModalOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+export function EmbeddedWalletContainer({
+  mounted,
+  isModalOpen,
+  setIsModalOpen,
+}: Props) {
+  const { address, openView, disconnect, isWalletConnected, wallet, chain } = useChain("stargaze");
+  const walletType = useConnectedWalletType(wallet?.name, isWalletConnected);
+  const restURL = chain?.apis?.rest ? [0] && chain?.apis?.rest[0].address : "";
+  const chainId = chain?.chain_id || "stargaze-1";
+
+  const navigate = (path: string) => {
+    window.open(`https://cosmos.leapwallet.io${path}`);
+  };
+
+  const connectWallet = async () => {
+    openView();
+  };
+
+  const chainData = useMemo(
+    () => ({
+      [chainId]: {
+        address: address ?? "",
+        restURL: restURL,
+      },
+    }),
+    [chainId, address, restURL]
+  );
+
+  return mounted && isModalOpen && address ? (
+    <EmbeddedWalletProvider
+      primaryChainId="stargaze-1"
+      connectWallet={connectWallet}
+      disconnectWallet={disconnect}
+      connectedWalletType={walletType}
+      chains={["stargaze-1"]}
+    >
+      <AccountModal
+        theme="dark"
+        chainRecords={chainData}
+        isOpen={isModalOpen}
+        onClose={() => {
+          setIsModalOpen(false);
+        }}
+        restrictChains={true}
+        enableWalletConnect={true}
+        config={{
+          showActionButtons: true,
+          actionListConfig: {
+            [Actions.SEND]: {
+              onClick: () =>
+                navigate(`/transact/send?sourceChainId=${chainId}`),
+            },
+            [Actions.IBC]: {
+              onClick: () =>
+                navigate(`/transact/send?sourceChainId=${chainId}`),
+            },
+            [Actions.SWAP]: {
+              onClick: () =>
+                navigate(`/transact/swap?sourceChainId=${chainId}`),
+            },
+            [Actions.BRIDGE]: {
+              onClick: () =>
+                navigate(`/transact/bridge?destinationChainId=${chainId}`),
+            },
+            [Actions.BUY]: {
+              onClick: () =>
+                navigate(`/transact/buy?destinationChainId=${chainId}`),
+            },
+          },
+        }}
+      />
+    </EmbeddedWalletProvider>
+  ) : null;
+}

components/Header.tsx

@@ -19,6 +19,14 @@ export const ElementsContainerDynamic = dynamic(
   { ssr: false }
 );
 
+export const EmbeddedWalletContainerDynamic = dynamic(
+  () =>
+    import("../components/EmbeddedWalletContainer").then(
+      (mod) => mod.EmbeddedWalletContainer
+    ),
+  { ssr: false }
+);
+
 const fetchBalance = async (address: string, chain: any) => {
   const res = await fetch(
     `${chain.apis?.rest?.[0].address}/cosmos/bank/v1beta1/balances/${address}`
@@ -65,7 +73,7 @@ export function Header({
         )}
       </button>
 
-      <div id="nav-menu" className={` md:block ${isMenuOpen ? "" : "hidden"}`}>
+      <div id="nav-menu" className={isMenuOpen ? "nav-menu" : "nav-menu-hidden"}>
         <div className="flex flex-row gap-3 flex-wrap">
           <button
             onClick={() =>

components/WalletButton.tsx

@@ -72,7 +72,7 @@ export function WalletButton({ balance, openEmbeddedWalletModal }: WalletButtonO
         </div>
       </button>
       {status === "Connected" && (
-        <button onClick={disconnect}>
+        <button onClick={() => disconnect()}>
           <span title="Disconnect Wallet">
             <IoMdCloseCircle size={16} title="Disconnect Wallet" />
           </span>

next.config.js

@@ -8,7 +8,9 @@ const nextConfig = {
   },
   transpilePackages: [
     '@leapwallet/cosmos-social-login-capsule-provider-ui',
-    '@leapwallet/cosmos-social-login-capsule-provider'
+    '@leapwallet/cosmos-social-login-capsule-provider',
+    '@leapwallet/embedded-wallet-sdk-react',
+    '@leapwallet/embedded-wallet-sdk-core'
   ],
 }
 

package.json

@@ -30,7 +30,7 @@
     "@emotion/styled": "11.10.6",
     "@leapwallet/cosmos-social-login-capsule-provider": "0.0.33",
     "@leapwallet/cosmos-social-login-capsule-provider-ui": "0.0.50",
-    "@leapwallet/embedded-wallet-sdk-react": "0.3.7",
+    "@leapwallet/embedded-wallet-sdk-react": "2.0.3",
     "@types/bignumber.js": "^5.0.0",
     "@urql/exchange-graphcache": "^6.4.0",
     "bignumber.js": "^9.1.2",

pages/_app.tsx

@@ -1,6 +1,6 @@
+import "@leapwallet/embedded-wallet-sdk-react/styles.css"
 import "../styles/globals.css";
 import "../styles/modal.css";
-import "@leapwallet/embedded-wallet-sdk-react/styles.css"
 import type { AppProps } from "next/app";
 import { ChainProvider, useChain } from "@cosmos-kit/react";
 import { wallets as keplrWallets } from "@cosmos-kit/keplr";
@@ -42,7 +42,7 @@ const updatedChains = chains.map((chain) => {
 });
 
 function CreateCosmosApp({ Component, pageProps }: AppProps) {
-  const signerOptions: SignerOptions = {
+  const signerOptions = {
     // signingStargate: () => {
     //   return getSigningCosmosClientOptions();
     // }

pages/index.tsx

@@ -1,32 +1,21 @@
 import { Toaster } from "react-hot-toast";
 import { NFTs } from "../components/NFTList";
-import { ListControl } from "../components/ListControl";
-import { ElementsContainerDynamic, Header } from "../components/Header";
-import router, { useRouter } from "next/router";
+import { ElementsContainerDynamic, EmbeddedWalletContainerDynamic, Header } from "../components/Header";
+import { useRouter } from "next/router";
 import { useEffect, useRef, useState } from "react";
 import { isValidAddressWithPrefix } from "../config/validateAddress";
 import { isMobile } from "react-device-detect";
-
 import CheckOnDesktop from "../public/check-on-desktop.svg";
 import Image from "next/image";
-import { useChain } from "@cosmos-kit/react";
-import {
-  AccountModal,
-  Actions,
-  defaultBlurs,
-  defaultBorderRadii,
-} from "@leapwallet/embedded-wallet-sdk-react";
+
 
 export default function Home() {
   const [collection, setCollection] = useState<string | undefined>();
   const router = useRouter();
 
-  const { status: walletConnectStatus, address, chain } = useChain("stargaze");
   const [isElementsModalOpen, setIsElementsModalOpen] =
     useState<boolean>(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const restURL = chain?.apis?.rest ? [0] && chain?.apis?.rest[0].address : "";
-  const chainId = chain?.chain_id || "stargaze-1";
 
   const ClientAccountModal = () => {
     const ref = useRef();
@@ -37,67 +26,9 @@ export default function Home() {
       setMounted(true);
     }, []);
 
-    const theme = {
-      colors: {
-        primary: "#fff",
-        border: "#fff",
-        stepBorder: "#E8E8E8",
-        backgroundPrimary: "#141414",
-        backgroundSecondary: "#212121",
-        text: "#fff",
-        textSecondary: "#858585",
-        gray: "#9ca3af",
-        alpha: "#ffffff",
-        error: "#420006",
-        errorBackground: "#FFEBED",
-        success: "#29A874",
-        successBackground: "#DAF6EB",
-      },
-      borderRadii: defaultBorderRadii,
-      blurs: defaultBlurs,
-      fontFamily: "inherit",
-    };
-
-    const navigate = (path: string) => {
-      window.open(`https://cosmos.leapwallet.io${path}`);
-    };
-
-    return mounted && isModalOpen ? (
-      <AccountModal
-        theme={theme}
-        chainId={chainId}
-        restUrl={restURL}
-        address={address || ""}
-        isOpen={isModalOpen}
-        onClose={() => {
-          setIsModalOpen(false);
-        }}
-        config={{
-          actionListConfig: {
-            [Actions.SEND]: {
-              onClick: (chainId) =>
-                navigate(`/transact/send?sourceChainId=${chainId}`),
-            },
-            [Actions.IBC]: {
-              onClick: (chainId) =>
-                navigate(`/transact/send?sourceChainId=${chainId}`),
-            },
-            [Actions.SWAP]: {
-              onClick: (chainId) =>
-                navigate(`/transact/swap?sourceChainId=${chainId}`),
-            },
-            [Actions.BRIDGE]: {
-              onClick: (chainId) =>
-                navigate(`/transact/bridge?destinationChainId=${chainId}`),
-            },
-            [Actions.BUY]: {
-              onClick: (chainId) =>
-                navigate(`/transact/buy?destinationChainId=${chainId}`),
-            },
-          },
-        }}
-      />
-    ) : null;
+    return (
+      <EmbeddedWalletContainerDynamic isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} mounted={mounted} />
+    )
   };
 
   useEffect(() => {

styles/modal.css

@@ -38,3 +38,11 @@
   display: flex;
   justify-content: center;
 }
+
+.nav-menu {
+  @apply md:block;
+}
+
+.nav-menu-hidden {
+  @apply hidden md:block;
+}