feat(wallet): add switch wallet functionality (backport #1114)

frontend/src/app/(routes)/(overview)/overview-components/Profile.tsx

@@ -1,33 +1,78 @@
 import { useAppDispatch, useAppSelector } from '@/custom-hooks/StateHooks';
 import Image from 'next/image';
-import React from 'react';
+import React, { useState } from 'react';
 import { Tooltip } from '@mui/material';
-import { LOGOUT_ICON } from '@/utils/constants';
-import { resetWallet } from '@/store/features/wallet/walletSlice';
-import { logout } from '@/utils/localStorage';
+import { LOGOUT_ICON, SUPPORTED_WALLETS } from '@/utils/constants';
+import {
+ establishWalletConnection,
+ resetWallet,
+} from '@/store/features/wallet/walletSlice';
+import { getLocalNetworks, getWalletName, logout } from '@/utils/localStorage';
 import {
  resetError,
  resetTxAndHash,
 } from '@/store/features/common/commonSlice';
+<<<<<<< HEAD
+=======
+import { resetState as bankReset } from '@/store/features/bank/bankSlice';
+import { resetState as rewardsReset } from '@/store/features/distribution/distributionSlice';
+import { resetCompleteState as stakingReset } from '@/store/features/staking/stakeSlice';
+import { resetState as authzReset } from '@/store/features/authz/authzSlice';
+import useAuthzGrants from '@/custom-hooks/useAuthzGrants';
+import WalletPopup from '@/components/WalletPopup';
+import { networks } from '@/utils/chainsInfo';
+
+>>>>>>> f78e2f6 (feat(wallet): add switch wallet functionality (#1114))
 const Profile = () => {
  const profileName = useAppSelector((state) => state.wallet.name);
  const dispatch = useAppDispatch();
 
+ const [connectWalletDialogOpen, setConnectWalletDialogOpen] =
+ useState<boolean>(false);
+ const handleClose = () => {
+ setConnectWalletDialogOpen(
+ (connectWalletDialogOpen) => !connectWalletDialogOpen
+ );
+ };
+
+ const selectWallet = (walletName: string) => {
+ tryConnectWallet(walletName);
+ handleClose();
+ };
+
+ const tryConnectWallet = (walletName: string) => {
+ dispatch(
+ establishWalletConnection({
+ walletName,
+ networks: [...networks, ...getLocalNetworks()],
+ })
+ );
+ };
+
+ const selectedWallet = getWalletName();
+ const walletLogo = SUPPORTED_WALLETS.filter((wallet) => {
+ return wallet.name.toLowerCase() === selectedWallet;
+ });
+
  return (
  <div className="flex items-center gap-1">
- <Tooltip title={profileName} arrow placement="bottom">
- <div className="flex items-center space-x-2 cursor-default">
+ <div className="flex items-center space-x-2 cursor-default">
+ <Tooltip title="Switch Wallet" placement="bottom">
  <Image
- src="/profile.svg"
+ className="rounded-full cursor-pointer"
+ src={walletLogo?.length ? walletLogo[0].logo : '/profile.svg'}
  width={36}
  height={36}
  alt="profile"
+ onClick={() => setConnectWalletDialogOpen(true)}
  ></Image>
+ </Tooltip>
+ <Tooltip title={profileName} arrow placement="bottom">
  <p className="text-white text-base not-italic font-normal max-w-[112px] leading-[normal truncate">
  {profileName}
  </p>
- </div>
- </Tooltip>
+ </Tooltip>
+ </div>
  <Tooltip title="Logout">
  <Image
  onClick={() => {
@@ -43,6 +88,12 @@ const Profile = () => {
  alt="Logout"
  />
  </Tooltip>
+ <WalletPopup
+ isOpen={connectWalletDialogOpen}
+ onClose={handleClose}
+ selectWallet={selectWallet}
+ isSwitchWallet={true}
+ />
  </div>
  );
 };

frontend/src/components/LandingPage.tsx

@@ -133,6 +133,7 @@ export const Landingpage = ({ children }: { children: React.ReactNode }) => {
  isOpen={connectWalletDialogOpen}
  onClose={handleClose}
  selectWallet={selectWallet}
+ isSwitchWallet={false}
  />
  </div>
 

frontend/src/components/WalletPopup.tsx

@@ -1,23 +1,33 @@
 import { DialogContent, Dialog } from '@mui/material';
 import Image from 'next/image';
 import React, { useState } from 'react';
-import { supportedWallets } from '@/utils/contants';
 import { dialogBoxPaperPropStyles } from '@/utils/commonStyles';
+import { getWalletName, setWalletName } from '@/utils/localStorage';
+import { SUPPORTED_WALLETS } from '@/utils/constants';
 
 const WalletPopup = ({
  isOpen,
  onClose,
  selectWallet,
+ isSwitchWallet,
 }: {
  isOpen: boolean;
  onClose: () => void;
  selectWallet: (walletName: string) => void;
+ isSwitchWallet: boolean;
 }) => {
- const [selectedWallet, setSelectedWallet] = useState<string | null>(null);
+ const [selectedWallet, setSelectedWallet] = useState<string | null>(
+ getWalletName()
+ );
 
- const handleWalletClick = (walletName: string) => {
+ const handleWalletClick = async (walletName: string) => {
  setSelectedWallet(walletName);
- selectWallet(walletName); // Pass the walletName directly
+ if (isSwitchWallet) {
+ await Promise.all([setWalletName(walletName)]);
+ window.location.reload();
+ } else {
+ selectWallet(walletName);
+ }
  };
 
  return (
@@ -44,10 +54,10 @@ const WalletPopup = ({
  <div className="flex justify-end items-center gap-10 px-10 py-0 w-full">
  <div className="connect-wallet-box space-y-6 w-full">
  <div className="text-white text-xl font-bold ">
- Connect Wallet
+ {isSwitchWallet ? 'Switch Wallet' : 'Connect Wallet'}
  </div>
  <div className="flex space-x-6 justify-center">
- {supportedWallets.map((wallet) => (
+ {SUPPORTED_WALLETS.map((wallet) => (
  <div
  className={`wallet-grid ${
  selectedWallet === wallet.name.toLocaleLowerCase()

frontend/src/components/popups/WalletPage.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import Image from 'next/image';
 import { Dialog, DialogContent } from '@mui/material';
-import { supportedWallets } from '@/utils/contants';
 import { dialogBoxPaperPropStyles } from '@/utils/commonStyles';
+import { SUPPORTED_WALLETS } from '@/utils/constants';
 
 const Walletpage = ({
  open,
@@ -32,7 +32,7 @@ const Walletpage = ({
  </div>
  </div>
  <div className="add-wallet-dialog-content">
- {supportedWallets.map((wallet, index) => (
+ {SUPPORTED_WALLETS.map((wallet, index) => (
  <div
  className="wallet"
  onClick={() => {

frontend/src/utils/constants.ts

@@ -1,3 +1,19 @@
+export const SUPPORTED_WALLETS = [
+ {
+ name: 'Keplr',
+ logo: '/keplr-wallet-logo.png',
+ },
+ {
+ name: 'Leap',
+ logo: '/leap-wallet-logo.png',
+ },
+ {
+ name: 'Cosmostation',
+ logo: '/cosmostation-wallet-logo.png',
+ },
+];
+
+export const USD_CURRENCY = 'usd';
 export const GAS_FEE = 860000;
 export const ADD_NETWORK_TEMPLATE_URL =
  'https://raw.githubusercontent.com/vitwit/resolute/b5d184c8da894b2fea0ed40e56a599a1d813c422/frontend/public/add-network-template.json';