feat: add change wallet support (#1550)

apps/web/src/components/Shared/Login/WalletSelector.tsx

@@ -2,6 +2,7 @@ import SwitchNetwork from '@components/Shared/SwitchNetwork';
 import { Button } from '@components/UI/Button';
 import { Spinner } from '@components/UI/Spinner';
 import useIsMounted from '@components/utils/hooks/useIsMounted';
+import { KeyIcon } from '@heroicons/react/outline';
 import { XCircleIcon } from '@heroicons/react/solid';
 import { Analytics } from '@lib/analytics';
 import getWalletLogo from '@lib/getWalletLogo';
@@ -19,7 +20,7 @@ import { useAppPersistStore, useAppStore } from 'src/store/app';
 import { useAuthStore } from 'src/store/auth';
 import { USER } from 'src/tracking';
 import type { Connector } from 'wagmi';
-import { useAccount, useConnect, useNetwork, useSignMessage } from 'wagmi';
+import { useAccount, useConnect, useDisconnect, useNetwork, useSignMessage } from 'wagmi';
 
 interface Props {
   setHasConnected: Dispatch<boolean>;
@@ -36,6 +37,7 @@ const WalletSelector: FC<Props> = ({ setHasConnected, setHasProfile }) => {
   const { mounted } = useIsMounted();
   const { chain } = useNetwork();
   const { connectors, error, connectAsync } = useConnect();
+  const { disconnect } = useDisconnect();
   const { address, connector: activeConnector } = useAccount();
   const { signMessageAsync } = useSignMessage({ onError });
   const [loadChallenge, { error: errorChallenge }] = useChallengeLazyQuery({
@@ -112,23 +114,37 @@ const WalletSelector: FC<Props> = ({ setHasConnected, setHasProfile }) => {
 
   return activeConnector?.id ? (
     <div className="space-y-3">
-      {chain?.id === CHAIN_ID ? (
-        <Button
-          disabled={loading}
-          icon={
-            loading ? (
-              <Spinner className="mr-0.5" size="xs" />
-            ) : (
-              <img className="mr-0.5 w-4 h-4" height={16} width={16} src="/lens.png" alt="Lens Logo" />
-            )
-          }
-          onClick={handleSign}
+      <div className="space-y-2.5">
+        {chain?.id === CHAIN_ID ? (
+          <Button
+            disabled={loading}
+            icon={
+              loading ? (
+                <Spinner className="mr-0.5" size="xs" />
+              ) : (
+                <img className="mr-0.5 w-4 h-4" height={16} width={16} src="/lens.png" alt="Lens Logo" />
+              )
+            }
+            onClick={handleSign}
+          >
+            <Trans>Sign-In with Lens</Trans>
+          </Button>
+        ) : (
+          <SwitchNetwork />
+        )}
+        <button
+          onClick={() => {
+            disconnect?.();
+            Analytics.track(USER.CHANGE_WALLET);
+          }}
+          className="text-sm underline flex items-center space-x-1"
         >
-          <Trans>Sign-In with Lens</Trans>
-        </Button>
-      ) : (
-        <SwitchNetwork />
-      )}
+          <KeyIcon className="h-4 w-4" />
+          <div>
+            <Trans>Change wallet</Trans>
+          </div>
+        </button>
+      </div>
       {(errorChallenge || errorAuthenticate || errorProfiles) && (
         <div className="flex items-center space-x-1 font-bold text-red-500">
           <XCircleIcon className="w-5 h-5" />

apps/web/src/locales/en/messages.po

@@ -1497,6 +1497,10 @@ msgstr ""
 msgid "Sign-In with Lens"
 msgstr ""
 
+#: src/components/Shared/Login/WalletSelector.tsx
+msgid "Change wallet"
+msgstr "Change wallet"
+
 #: src/components/Shared/Login/WalletSelector.tsx
 msgid "Browser Wallet"
 msgstr ""

apps/web/src/locales/es/messages.po

@@ -1497,6 +1497,10 @@ msgstr ""
 msgid "Sign-In with Lens"
 msgstr ""
 
+#: src/components/Shared/Login/WalletSelector.tsx
+msgid "Change wallet"
+msgstr ""
+
 #: src/components/Shared/Login/WalletSelector.tsx
 msgid "Browser Wallet"
 msgstr ""
@@ -1918,4 +1922,3 @@ msgstr ""
 #: src/pages/500.tsx
 msgid "We track these errors automatically, but if the problem persists feel free to contact us. In the meantime, try refreshing."
 msgstr ""
-

apps/web/src/locales/ta/messages.po

@@ -1497,6 +1497,10 @@ msgstr ""
 msgid "Sign-In with Lens"
 msgstr "லென்ஸுடன் உள்நுழை"
 
+#: src/components/Shared/Login/WalletSelector.tsx
+msgid "Change wallet"
+msgstr ""
+
 #: src/components/Shared/Login/WalletSelector.tsx
 msgid "Browser Wallet"
 msgstr "உலாவி வாலட்"
@@ -1918,4 +1922,3 @@ msgstr ""
 #: src/pages/500.tsx
 msgid "We track these errors automatically, but if the problem persists feel free to contact us. In the meantime, try refreshing."
 msgstr ""
-

apps/web/src/tracking.ts

@@ -3,7 +3,8 @@
 export const USER = {
   LOGIN: 'user_login',
   LOGOUT: 'user_logout',
-  SIWL: 'sign_in_with_lens'
+  SIWL: 'sign_in_with_lens',
+  CHANGE_WALLET: 'change_wallet'
 };
 
 export const PROFILE = {