Mp 3399 metamask integration (#462)

* MP-3399: added Metamask and refactored the wallet flow

:

* fix: updated station image

* fix: updated keplr image

package.json

@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@cosmjs/cosmwasm-stargate": "^0.31.1",
-    "@delphi-labs/shuttle-react": "^3.8.0",
+    "@delphi-labs/shuttle-react": "^3.9.0",
     "@keplr-wallet/cosmos": "^0.12.20",
     "@sentry/nextjs": "^7.64.0",
     "@splinetool/react-spline": "^2.2.1",
@@ -72,4 +72,4 @@
     "tailwindcss": "^3.3.3",
     "typescript": "5.2.2"
   }
-}
+}

src/components/Wallet/WalletConnectProvider.tsx

@@ -4,6 +4,8 @@ import {
   KeplrExtensionProvider,
   KeplrMobileProvider,
   LeapCosmosExtensionProvider,
+  LeapCosmosMobileProvider,
+  LeapMetamaskCosmosSnapExtensionProvider,
   ShuttleProvider,
   StationExtensionProvider,
   WalletExtensionProvider,
@@ -37,6 +39,9 @@ const mobileProviders: WalletMobileProvider[] = [
   new KeplrMobileProvider({
     networks: getSupportedChainsInfos(WalletID.KeplrMobile),
   }),
+  new LeapCosmosMobileProvider({
+    networks: getSupportedChainsInfos(WalletID.LeapMobile),
+  }),
   new CosmostationMobileProvider({
     networks: getSupportedChainsInfos(WalletID.CosmostationMobile),
   }),
@@ -44,10 +49,13 @@ const mobileProviders: WalletMobileProvider[] = [
 
 const extensionProviders: WalletExtensionProvider[] = [
   new KeplrExtensionProvider({ networks: getSupportedChainsInfos(WalletID.Keplr) }),
-  new StationExtensionProvider({ networks: getSupportedChainsInfos(WalletID.Station) }),
   new LeapCosmosExtensionProvider({ networks: getSupportedChainsInfos(WalletID.Leap) }),
+  new LeapMetamaskCosmosSnapExtensionProvider({
+    networks: getSupportedChainsInfos(WalletID.LeapSnap),
+  }),
   new CosmostationExtensionProvider({ networks: getSupportedChainsInfos(WalletID.Cosmostation) }),
   new XDEFICosmosExtensionProvider({ networks: getSupportedChainsInfos(WalletID.Xdefi) }),
+  new StationExtensionProvider({ networks: getSupportedChainsInfos(WalletID.Station) }),
 ]
 
 export const WalletConnectProvider: FC<Props> = ({ children }) => {

src/components/Wallet/WalletConnectedButton.tsx

@@ -23,6 +23,7 @@ import { ChainInfoID } from 'types/enums/wallet'
 import { getBaseAsset, getEnabledMarketAssets } from 'utils/assets'
 import { truncate } from 'utils/formatters'
 import { getPage, getRoute } from 'utils/route'
+import WalletSelect from './WalletSelect'
 
 export default function WalletConnectedButton() {
   // ---------------
@@ -62,6 +63,15 @@ export default function WalletConnectedButton() {
     if (!currentWallet) return
     disconnectWallet(currentWallet)
     useStore.setState({ client: undefined, address: undefined, accounts: null, balances: [] })
+    if (focusComponent)
+      useStore.setState({
+        focusComponent: {
+          component: <WalletSelect />,
+          onClose: () => {
+            useStore.setState({ focusComponent: null })
+          },
+        },
+      })
     navigate(getRoute(getPage(pathname)))
   }
 

src/components/Wallet/WalletConnecting.tsx

@@ -55,7 +55,12 @@ export default function WalletConnecting(props: Props) {
           useStore.setState({
             client: walletClient,
             address: response.account.address,
-            focusComponent: { component: <WalletFetchBalancesAndAccounts /> },
+            focusComponent: {
+              component: <WalletFetchBalancesAndAccounts />,
+              onClose: () => {
+                useStore.setState({ focusComponent: null })
+              },
+            },
           })
         } catch (error) {
           setIsConnecting(false)

src/components/Wallet/WalletSelect.tsx

@@ -28,6 +28,7 @@ interface WalletOptionProps {
   name: string
   imageSrc: string
   handleClick: () => void
+  showLoader?: boolean
 }
 
 const currentChainId = ENV.CHAIN_ID
@@ -37,8 +38,9 @@ function WalletOption(props: WalletOptionProps) {
   return (
     <Button
       color='tertiary'
-      className='flex w-full !justify-start px-4 py-3'
+      className='flex w-full !justify-start px-4 py-3 h-11'
       onClick={props.handleClick}
+      showProgressIndicator={props.showLoader}
     >
       <Image
         className='rounded-full'
@@ -57,15 +59,22 @@ export default function WalletSelect(props: Props) {
   const { extensionProviders, mobileProviders, mobileConnect } = useShuttle()
   const [qrCodeUrl, setQRCodeUrl] = useState('')
   const [error, setError] = useState(props.error)
+  const [isLoading, setIsLoading] = useState<string | boolean>(false)
   const sortedExtensionProviders = extensionProviders.sort((a, b) => +b - +a)
 
   const handleConnectClick = (extensionProviderId: string) => {
     useStore.setState({
-      focusComponent: { component: <WalletConnecting providerId={extensionProviderId} /> },
+      focusComponent: {
+        component: <WalletConnecting providerId={extensionProviderId} />,
+        onClose: () => {
+          useStore.setState({ focusComponent: null })
+        },
+      },
     })
   }
 
   const handleMobileConnectClick = async (mobileProviderId: string, chainId: string) => {
+    setIsLoading(mobileProviderId)
     try {
       const urls = await mobileConnect({
         mobileProviderId,
@@ -88,6 +97,7 @@ export default function WalletSelect(props: Props) {
         setError({ title: 'Failed to connect to wallet', message: error.message })
       }
     }
+    setIsLoading(false)
   }
 
   useEffect(() => {
@@ -179,6 +189,7 @@ export default function WalletSelect(props: Props) {
                       name={WALLETS[walletId].walletConnect ?? 'WalletConnect'}
                       imageSrc={WALLETS[walletId].mobileImageURL ?? '/'}
                       handleClick={() => handleMobileConnectClick(walletId, network.chainId)}
+                      showLoader={isLoading === walletId}
                     />
                   )
                 })}

src/constants/wallets.ts

@@ -6,18 +6,15 @@ export const WALLETS: WalletInfos = {
     install: 'Install Cosmostation Wallet',
     installURL:
       'https://chrome.google.com/webstore/detail/cosmostation-wallet/fpkhgmpbidmiogeglndfbkegfdlnajnf',
-    imageURL:
-      'https://raw.githubusercontent.com/mars-protocol/wallet-connector/main/src/components/ui/images/cosmostation-wallet-extension.png',
+    imageURL: '/images/wallets/cosmostation.png',
 
     supportedChains: [ChainInfoID.Osmosis1, ChainInfoID.OsmosisDevnet, ChainInfoID.OsmosisTestnet],
   },
   [WalletID.CosmostationMobile]: {
     name: 'Cosmostation Wallet',
     walletConnect: 'Cosmostation WalletConnect',
-    imageURL:
-      'https://raw.githubusercontent.com/mars-protocol/wallet-connector/main/src/components/ui/images/cosmostation-wallet-extension.png',
-    mobileImageURL:
-      'https://raw.githubusercontent.com/mars-protocol/wallet-connector/main/src/components/ui/images/cosmostation-wallet-connect.png',
+    imageURL: '/images/wallets/cosmostation.png',
+    mobileImageURL: '/images/wallets/cosmostation-wc.png',
     supportedChains: [ChainInfoID.Osmosis1, ChainInfoID.OsmosisDevnet, ChainInfoID.OsmosisTestnet],
   },
   [WalletID.Keplr]: {
@@ -31,8 +28,7 @@ export const WALLETS: WalletInfos = {
     name: 'Keplr Wallet',
     walletConnect: 'Keplr WalletConnect',
     imageURL: '/images/wallets/keplr.png',
-    mobileImageURL:
-      'https://raw.githubusercontent.com/mars-protocol/wallet-connector/main/src/components/ui/images/keplr-wallet-connect.png',
+    mobileImageURL: '/images/wallets/keplr-wc.png',
     supportedChains: [ChainInfoID.Osmosis1],
   },
   [WalletID.Leap]: {
@@ -40,9 +36,23 @@ export const WALLETS: WalletInfos = {
     install: 'Install Leap Wallet',
     installURL:
       'https://chrome.google.com/webstore/detail/leap-cosmos-wallet/fcfcfllfndlomdhbehjjcoimbgofdncg',
-    imageURL: 'https://assets.leapwallet.io/logos/leap-cosmos-logo.png',
+    imageURL: '/images/wallets/leap.png',
     supportedChains: [ChainInfoID.Osmosis1, ChainInfoID.OsmosisDevnet, ChainInfoID.OsmosisTestnet],
   },
+  [WalletID.LeapMobile]: {
+    name: 'Leap Wallet',
+    walletConnect: 'Leap WalletConnect',
+    imageURL: '/images/wallets/leap.png',
+    mobileImageURL: '/images/wallets/leap-wc.png',
+    supportedChains: [ChainInfoID.Osmosis1, ChainInfoID.OsmosisDevnet, ChainInfoID.OsmosisTestnet],
+  },
+  [WalletID.LeapSnap]: {
+    name: 'MetaMask (via Leap Snap)',
+    install: 'Install MetaMask',
+    installURL: 'https://metamask.io/download/',
+    imageURL: '/images/wallets/leap-snap.png',
+    supportedChains: [ChainInfoID.Osmosis1],
+  },
   [WalletID.Station]: {
     name: 'Station Wallet',
     install: 'Install Station Wallet',
@@ -55,7 +65,7 @@ export const WALLETS: WalletInfos = {
     name: 'XDEFI Wallet',
     install: 'Install XDEFI Wallet',
     installURL: 'https://go.xdefi.io/mars',
-    imageURL: 'https://xdefi-static.s3.eu-west-1.amazonaws.com/xdefi.png',
+    imageURL: '/images/wallets/xdefi.png',
     supportedChains: [ChainInfoID.Osmosis1],
   },
 }

src/types/enums/wallet.ts

@@ -4,6 +4,8 @@ export enum WalletID {
   Keplr = 'keplr',
   KeplrMobile = 'mobile-keplr',
   Leap = 'leap-cosmos',
+  LeapMobile = 'mobile-leap-cosmos',
+  LeapSnap = 'leap-metamask-cosmos-snap',
   Station = 'station',
   Xdefi = 'xfi-cosmos',
 }

yarn.lock

@@ -1461,21 +1461,21 @@
   resolved "https://registry.yarnpkg.com/@cosmjs/utils/-/utils-0.31.1.tgz#e6055cd7d722fa72df9cbd0d39cd1f7a9ac80483"
   integrity sha512-n4Se1wu4GnKwztQHNFfJvUeWcpvx3o8cWhSbNs9JQShEuB3nv3R5lqFBtDCgHZF/emFQAP+ZjF8bTfCs9UBGhA==
 
-"@delphi-labs/shuttle-react@^3.8.0":
-  version "3.8.0"
-  resolved "https://registry.yarnpkg.com/@delphi-labs/shuttle-react/-/shuttle-react-3.8.0.tgz#8919cf101e19849dd5fe94652ed62661d14c01e7"
-  integrity sha512-dYv7HWRFkGfJXiAG9JjvtPZ3LKeeSykS2yZ+WXZJQnCjRKXaRLVdZNVuclKchiSbfrVssymN9aplmFycEAK4Qg==
+"@delphi-labs/shuttle-react@^3.9.0":
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/@delphi-labs/shuttle-react/-/shuttle-react-3.9.0.tgz#fac4a8c8358ba3f52dddc27bb75e086793f7c06a"
+  integrity sha512-L6A2WfBV/qHvsKwF0cDC7NbZ0BNDvOUGdJSuXKEqhjmp92aSTcpfktCj5UIHLDhK64Q9ovaxR0WUosetiFrgUA==
   dependencies:
-    "@delphi-labs/shuttle" "3.8.0"
+    "@delphi-labs/shuttle" "3.9.0"
     tslib "^2.6.0"
     tsup "^7.1.0"
     use-local-storage-state "^18.3.3"
     zustand "^4.3.8"
 
-"@delphi-labs/shuttle@3.8.0":
-  version "3.8.0"
-  resolved "https://registry.yarnpkg.com/@delphi-labs/shuttle/-/shuttle-3.8.0.tgz#5c7ee1a02affea667aaa7302afb84986c23cfc66"
-  integrity sha512-eEgk2zYQkv55SV+UNtVhPDl5Oe3AUST0bYlU7v/g/YlLoSLjxOuAbJrBtS+j7SsVAlmEi+2MD5R10bJ0w8GYLw==
+"@delphi-labs/shuttle@3.9.0":
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/@delphi-labs/shuttle/-/shuttle-3.9.0.tgz#7a39adeeb55d44cb19c3b395c570827b6d052d30"
+  integrity sha512-cO55tSE9ejM0y+txhYIZfkIzOQdpbkid/ZMhhbA/+OEjnefUAVX4o1El2uH0bRIYElJwWum5mqyjxtIRceZEHQ==
   dependencies:
     "@cosmjs/amino" "^0.31.0"
     "@cosmjs/cosmwasm-stargate" "^0.31.0"