diff --git a/components/ConnectWalletSideCurtain/connectWalletSideCurtain.tsx b/components/ConnectWalletSideCurtain/connectWalletSideCurtain.tsx index f0a7c29..6383fe3 100644 --- a/components/ConnectWalletSideCurtain/connectWalletSideCurtain.tsx +++ b/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; } } diff --git a/components/EmbeddedWalletContainer.tsx b/components/EmbeddedWalletContainer.tsx new file mode 100644 index 0000000..ab59dae --- /dev/null +++ b/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>; +} + +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 ? chain.apis.rest[0].address : ""; + const chainId = chain?.chain_id || "stargaze-1"; + + const navigate = (path: string) => { + window.open(`https://app.leapwallet.io${path}`); + }; + + const connectWallet = async () => { + openView(); + }; + + const chainData = useMemo( + () => ({ + [chainId]: { + address: address ?? "", + restURL: restURL, + }, + }), + [chainId, address, restURL] + ); + + return mounted && isModalOpen && address ? ( + + { + 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}`), + }, + }, + }} + /> + + ) : null; +} diff --git a/components/Header.tsx b/components/Header.tsx index bb90dbf..301e2e4 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -10,6 +10,7 @@ import { WalletButton } from "../components/WalletButton"; import Text from "./Text"; import StargazeLogo from "../public/stargaze-logo.svg"; +import classNames from "classnames"; export const ElementsContainerDynamic = dynamic( () => @@ -19,6 +20,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 +74,12 @@ export function Header({ )} -