lint changes + migrate to elements beta

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "arrowParens": "always",
+  "printWidth": 80,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "useTabs": false
+}

components/ConnectWalletSideCurtain/ConnectWalletCard.tsx

@@ -7,7 +7,7 @@ export function ConnectWalletCard({
   name,
   logo,
   prettyName,
-  isComingSoon = false,
+  isComingSoon = false
 }: {
   onWalletClicked: (name: string) => () => Promise<void>;
   name: string;
@@ -20,7 +20,7 @@ export function ConnectWalletCard({
       className="flex cursor-pointer items-center justify-between py-3 px-6 transition-all duration-300 ease-in-out hover:bg-[#2B2B2BFA]"
       onClick={isComingSoon ? undefined : onWalletClicked(name)}
       style={{
-        opacity: isComingSoon ? 0.5 : 1,
+        opacity: isComingSoon ? 0.5 : 1
       }}
     >
       <div className="flex flex-grow items-center justify-start gap-3">
@@ -31,7 +31,7 @@ export function ConnectWalletCard({
           }}
           className="h-10 w-10 rounded-lg"
           style={{
-            filter: isComingSoon ? "grayscale(100%)" : undefined,
+            filter: isComingSoon ? "grayscale(100%)" : undefined
           }}
         />
         <div className="flex flex-col items-start justify-center">

components/ConnectWalletSideCurtain/ConnectWalletSideCurtainContent.tsx

@@ -2,7 +2,7 @@ import {
   MainWalletBase,
   State,
   WalletModalProps,
-  WalletStatus,
+  WalletStatus
 } from "@cosmos-kit/core";
 import { useManager, useWallet, useWalletClient } from "@cosmos-kit/react";
 
@@ -14,7 +14,7 @@ import {
   KEPLR_WALLET_EXTENSION_URL,
   LEAP_WALLET_EXTENSION_URL,
   METAMASK_WALLET_EXTENSION_URL,
-  SUPPORTED_WALLETS,
+  SUPPORTED_WALLETS
 } from "../../config/constants";
 // import { Images } from "images";
 import React, { useEffect, useMemo, useState } from "react";
@@ -29,15 +29,15 @@ const walletOrder: (keyof typeof COSMOS_KIT_WALLET_NAMES)[] = [
   "cosmostation",
   "leap-mobile",
   "keplr-mobile",
-  "leap-cosmos-capsule",
+  "leap-cosmos-capsule"
 ];
 
 export const isFlask = async () => {
   const provider = (window as any).ethereum;
 
   try {
     const clientVersion = await provider?.request({
-      method: "web3_clientVersion",
+      method: "web3_clientVersion"
     });
 
     const isFlaskDetected = (clientVersion as string[])?.includes("MetaMask");
@@ -51,7 +51,7 @@ export const isFlask = async () => {
 export function ConnectWalletSideCurtainContent({
   setOpen,
   isOpen,
-  walletRepo,
+  walletRepo
 }: WalletModalProps) {
   const { client } = useWalletClient();
   // const { search } = useLocation();
@@ -78,12 +78,12 @@ export function ConnectWalletSideCurtainContent({
       walletOrder
         .map((key) => {
           // @ts-ignore
-          const element: MainWalletBase = _filteredWallets.find(
-            (wallet) => {
-              return wallet.walletInfo.name === COSMOS_KIT_WALLET_NAMES[key] &&
+          const element: MainWalletBase = _filteredWallets.find((wallet) => {
+            return (
+              wallet.walletInfo.name === COSMOS_KIT_WALLET_NAMES[key] &&
               ["leap", "keplr", "metaMask", "leap-cosmos-capsule"].includes(key)
-            }
-          );
+            );
+          });
           return element;
         })
         .sort((a, b) => {
@@ -124,13 +124,6 @@ export function ConnectWalletSideCurtainContent({
       if (walletStatus === WalletStatus.Connected) {
         await mainWallet?.disconnect();
       }
-      // if(name === COSMOS_KIT_WALLET_NAMES['leap-cosmos-capsule']) {
-      //   const chainWallets = wallet?.getChainWalletList()
-      //   if(chainWallets && chainWallets?.length !== 0) {
-      //     const firstChainWallet = chainWallets[0];
-      //     return await firstChainWallet.connect();
-      //   }
-      // }
 
       await wallet.connect();
       setOpen(false);
@@ -178,7 +171,7 @@ export function ConnectWalletSideCurtainContent({
           }
           let {
             // eslint-disable-next-line prefer-const
-            walletInfo: { name, prettyName, logo },
+            walletInfo: { name, prettyName, logo }
           } = wallet;
           if (name === COSMOS_KIT_WALLET_NAMES["metaMask"]) {
             prettyName = "MetaMask";
@@ -188,7 +181,9 @@ export function ConnectWalletSideCurtainContent({
           return (
             <div key={name + prettyName + index}>
               <ConnectWalletCard
-                onWalletClicked={() => onWalletClicked(wallet as MainWalletBase)}
+                onWalletClicked={() =>
+                  onWalletClicked(wallet as MainWalletBase)
+                }
                 name={name}
                 logo={logo as string}
                 prettyName={prettyName}
@@ -215,7 +210,7 @@ export function ConnectWalletSideCurtainContent({
           }
           let {
             // eslint-disable-next-line prefer-const
-            walletInfo: { name, prettyName, logo },
+            walletInfo: { name, prettyName, logo }
           } = wallet;
           if (name === COSMOS_KIT_WALLET_NAMES["metaMask"]) {
             prettyName = "MetaMask";

components/ConnectWalletSideCurtain/connectWalletSideCurtain.tsx

@@ -3,19 +3,11 @@ import React from "react";
 import { WalletModalProps } from "@cosmos-kit/core";
 import { ConnectWalletSideCurtainContent } from "./ConnectWalletSideCurtainContent";
 
-declare global {
-  interface Window {
-    leap: any;
-    keplr: any;
-    cosmostation: any;
-  }
-}
-
 // Define Modal Component
 export default function ConnectWalletSideCurtain({
   isOpen,
   setOpen,
-  walletRepo,
+  walletRepo
 }: WalletModalProps) {
   return (
     <>

components/ElementsContainer.tsx

@@ -1,49 +1,48 @@
-import { SwapsModal, WalletClientContextProvider } from "@leapwallet/elements";
+import { SwapsModal, ElementsProvider } from "@leapwallet/elements";
 
 import { useChain } from "@cosmos-kit/react";
 import { Dispatch, SetStateAction, useEffect } from "react";
-import { useElementsWalletClient } from "../config/walletclient";
-
-export const renderLiquidityButton = ({ onClick }: any) => {
-  return <button onClick={onClick} id="open-liquidity-modal-btn"></button>;
-};
+import { useConnectedWalletType } from "../hooks/use-connected-wallet-type";
+import { walletConnectOptions } from "../config/wallet-connect";
 
 interface Props {
   isOpen: boolean;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 }
 
 export function ElementsContainer({ isOpen, setIsOpen }: Props) {
-  const { address, openView } = useChain("stargaze");
-  const walletClient = useElementsWalletClient();
+  const { openView, wallet, isWalletConnected } = useChain("stargaze");
+  const connectedWalletType = useConnectedWalletType(
+    wallet?.name,
+    isWalletConnected
+  );
+
   useEffect(() => {
     const elementsModal = document.querySelector(".leap-ui");
     if (elementsModal) {
       //@ts-ignore
       elementsModal.style["zIndex"] = 11;
     }
   }, []);
+
   return (
     <div className="fixed z-99 leap-ui dark">
-      <WalletClientContextProvider
-        value={{
-          userAddress: address,
-          walletClient: walletClient,
-          connectWallet: async () => {
-            openView();
-          },
-        }}
+      <ElementsProvider
+        primaryChainId="stargaze-1"
+        connectWallet={openView}
+        connectedWalletType={connectedWalletType}
+        walletConnectOptions={walletConnectOptions}
       >
         <SwapsModal
           isOpen={isOpen}
           title="Get STARS"
           setIsOpen={setIsOpen}
           defaultValues={{
             destinationChainId: "stargaze-1",
-            destinationAsset: "ustars",
+            destinationAsset: "ustars"
           }}
         />
-      </WalletClientContextProvider>
+      </ElementsProvider>
     </div>
   );
 }

components/GenericNFTCard.tsx

@@ -43,15 +43,15 @@ type GenericCardProps = {
 
 const Images = {
   Misc: {
-    Sell: "https://assets.leapwallet.io/dashboard/images/misc/sell.svg",
-  },
+    Sell: "https://assets.leapwallet.io/dashboard/images/misc/sell.svg"
+  }
 };
 
 export function GenericNFTCard({
   nft,
   onNFTClick,
   balance,
-  isConnected,
+  isConnected
 }: GenericCardProps) {
   const { imageComponent, imgUrl } = useNFTImage({
     image: nft.image,
@@ -61,8 +61,8 @@ export function GenericNFTCard({
       img: "rounded-lg",
       video: "rounded-lg",
       skeleton: "rounded-lg",
-      textDiv: "rounded-lg",
-    },
+      textDiv: "rounded-lg"
+    }
   });
 
   const { imageComponent: collectionImageComponent } = useNFTImage({
@@ -76,8 +76,8 @@ export function GenericNFTCard({
       img: "rounded-full",
       video: "rounded-full",
       skeleton: "rounded-full",
-      textDiv: "rounded-full",
-    },
+      textDiv: "rounded-full"
+    }
   });
 
   const elementsTitle = `Buy ${nft.name}`;

components/Header.tsx

@@ -32,7 +32,7 @@ const fetchBalance = async (address: string, chain: any) => {
 
 export function Header({
   openEmbeddedWalletModal,
-  setIsElementsModalOpen,
+  setIsElementsModalOpen
 }: {
   openEmbeddedWalletModal: Function;
   setIsElementsModalOpen: Dispatch<SetStateAction<boolean>>;

components/ListControl.tsx

@@ -10,7 +10,7 @@ export function ListControl({
   searchTerm,
   handleSearchChange,
   sortOrder,
-  handleSortChange,
+  handleSortChange
 }: {
   searchTerm: string;
   handleSearchChange: (e: string) => void;