From 39ca6cee3a8a160fdf0ca95a713707afee55f1fc Mon Sep 17 00:00:00 2001
From: Haris Chaniotakis <chanioxaris@gmail.com>
Date: Tue, 31 May 2022 11:51:23 +0300
Subject: [PATCH 1/8] fix(types,clerk-js): Same component navigate after OAuth
 flow with missing requirements

This commit fixes a navigation bug, after a successful OAuth flow but the sign up still missing some requirements to complete. We navigate to SignUpContinue form and as this is a same component navigation, it didn't properly work before
---
 packages/clerk-js/src/core/clerk.ts        | 3 ++-
 packages/clerk-js/src/ui/signUp/SignUp.tsx | 1 +
 packages/types/src/clerk.ts                | 5 +++++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
index 0802d95b033..c3ae027d4dd 100644
--- a/packages/clerk-js/src/core/clerk.ts
+++ b/packages/clerk-js/src/core/clerk.ts
@@ -497,7 +497,8 @@ export default class Clerk implements ClerkInterface {
     );
 
     const navigateToContinueSignUp = makeNavigate(
-      buildURL({ base: displayConfig.signUpUrl, hashPath: '/continue' }, { stringify: true }),
+      params.continueSignUpUrl ||
+        buildURL({ base: displayConfig.signUpUrl, hashPath: '/continue' }, { stringify: true }),
     );
 
     const userExistsButNeedsToSignIn =
diff --git a/packages/clerk-js/src/ui/signUp/SignUp.tsx b/packages/clerk-js/src/ui/signUp/SignUp.tsx
index 0bba0997c99..881d5811dfb 100644
--- a/packages/clerk-js/src/ui/signUp/SignUp.tsx
+++ b/packages/clerk-js/src/ui/signUp/SignUp.tsx
@@ -35,6 +35,7 @@ function SignUpRoutes(): JSX.Element {
           afterSignInUrl={signUpContext.afterSignInUrl}
           redirectUrl={signUpContext.redirectUrl}
           secondFactorUrl={signUpContext.secondFactorUrl}
+          continueSignUpUrl='../continue'
         />
       </Route>
       <Route path='verify'>
diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts
index 48f57f22c36..d490950d5c0 100644
--- a/packages/types/src/clerk.ts
+++ b/packages/types/src/clerk.ts
@@ -275,6 +275,11 @@ export type HandleOAuthCallbackParams = {
    * if 2FA is enabled.
    */
   secondFactorUrl?: string;
+
+  /**
+   * Full URL or path to navigate after an incomplete sign up.
+   */
+  continueSignUpUrl?: string | null;
 };
 
 // TODO: Make sure Isomorphic Clerk navigate can work with the correct type:

From 0fa4f462931ca91560d8dc0d16259b910555c741 Mon Sep 17 00:00:00 2001
From: Mark Pitsilos <mark.pitsilos@gmail.com>
Date: Tue, 31 May 2022 15:02:33 +0300
Subject: [PATCH 2/8] fix(clerk-js): Do not show verification status badges for
 ext accnts on the user profile page

---
 .../__snapshots__/UserProfile.test.tsx.snap   |   5 -
 .../account/profileCard/ProfileCard.test.tsx  | 169 ++++++++++----
 .../account/profileCard/ProfileCard.tsx       |   6 +-
 .../__snapshots__/ProfileCard.test.tsx.snap   | 209 +++++++++++++++++-
 .../UnverifiedAccountListItem.tsx             |   1 +
 5 files changed, 333 insertions(+), 57 deletions(-)

diff --git a/packages/clerk-js/src/ui/userProfile/__snapshots__/UserProfile.test.tsx.snap b/packages/clerk-js/src/ui/userProfile/__snapshots__/UserProfile.test.tsx.snap
index 7eeb38f63b5..bfd4bbc837e 100644
--- a/packages/clerk-js/src/ui/userProfile/__snapshots__/UserProfile.test.tsx.snap
+++ b/packages/clerk-js/src/ui/userProfile/__snapshots__/UserProfile.test.tsx.snap
@@ -124,11 +124,6 @@ Array [
                     src="https://images.clerk.dev/static/facebook.svg"
                   />
                   peter@gmail.com
-                  <span
-                    className="tag success sm cl-tag"
-                  >
-                    Verified
-                  </span>
                 </div>
               </div>
             </div>
diff --git a/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileCard.test.tsx b/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileCard.test.tsx
index 7dd7edc8ddc..a52bad0758a 100644
--- a/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileCard.test.tsx
+++ b/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileCard.test.tsx
@@ -1,8 +1,8 @@
 import { renderJSON } from '@clerk/shared/testUtils';
-import { EmailAddressResource, UserResource } from '@clerk/types';
+import { EmailAddressResource, ExternalAccountResource, UserResource } from '@clerk/types';
 import * as React from 'react';
 import { PartialDeep } from 'type-fest';
-import { useEnvironment } from 'ui/contexts';
+import { useCoreUser, useEnvironment } from 'ui/contexts';
 
 import { ProfileCard } from './ProfileCard';
 
@@ -15,33 +15,96 @@ jest.mock('ui/hooks', () => {
 jest.mock('ui/contexts', () => {
   return {
     useEnvironment: jest.fn(),
-    useCoreUser: (): PartialDeep<UserResource> => {
-      return {
-        isPrimaryIdentification: jest.fn(() => true),
-        emailAddresses: [
-          {
-            id: 1,
-            emailAddress: 'clerk@clerk.dev',
-            verification: { status: 'verified' },
-          } as any as EmailAddressResource,
-          {
-            id: 2,
-            emailAddress: 'clerk-unverified@clerk.dev',
-            verification: { status: 'unverified' },
-          } as any as EmailAddressResource,
-        ],
-        phoneNumbers: [],
-        externalAccounts: [],
-        verifiedExternalAccounts: [],
-        unverifiedExternalAccounts: [],
-        web3Wallets: [{ web3Wallet: '0x123456789' }],
-      };
-    },
+    useCoreUser: jest.fn(),
     useCoreClerk: jest.fn(),
   };
 });
 
-(useEnvironment as jest.Mock).mockImplementation(() => ({
+const userWithoutExtAccounts = (): PartialDeep<UserResource> => {
+  return {
+    isPrimaryIdentification: jest.fn(() => true),
+    emailAddresses: [
+      {
+        id: 1,
+        emailAddress: 'clerk@clerk.dev',
+        verification: { status: 'verified' },
+      } as any as EmailAddressResource,
+      {
+        id: 2,
+        emailAddress: 'clerk-unverified@clerk.dev',
+        verification: { status: 'unverified' },
+      } as any as EmailAddressResource,
+    ],
+    phoneNumbers: [],
+    externalAccounts: [],
+    verifiedExternalAccounts: [],
+    unverifiedExternalAccounts: [],
+    web3Wallets: [{ web3Wallet: '0x123456789' }],
+  };
+};
+
+const userWithExtAccounts = (): PartialDeep<UserResource> => {
+  return {
+    isPrimaryIdentification: jest.fn(() => true),
+    emailAddresses: [
+      {
+        id: 1,
+        emailAddress: 'clerk@clerk.dev',
+        verification: { status: 'verified' },
+      } as any as EmailAddressResource,
+      {
+        id: 2,
+        emailAddress: 'clerk-unverified@clerk.dev',
+        verification: { status: 'unverified' },
+      } as any as EmailAddressResource,
+    ],
+    phoneNumbers: [],
+    externalAccounts: [
+      {
+        id: 'eac_google',
+        provider: 'google',
+        emailAddress: 'sanjay@gmail.com',
+        providerTitle: () => 'Google',
+      } as ExternalAccountResource,
+      {
+        id: 'eac_twitch',
+        provider: 'twitch',
+        emailAddress: 'sanjay@gmail.com',
+        username: 'dhalsim',
+        providerTitle: () => 'Twitch',
+      } as ExternalAccountResource,
+      {
+        id: 'eac_facebook',
+        provider: 'facebook',
+      } as ExternalAccountResource,
+    ],
+    verifiedExternalAccounts: [
+      {
+        id: 'eac_google',
+        provider: 'google',
+        emailAddress: 'sanjay@gmail.com',
+        providerTitle: () => 'Google',
+      } as ExternalAccountResource,
+      {
+        id: 'eac_twitch',
+        provider: 'twitch',
+        emailAddress: 'sanjay@gmail.com',
+        username: 'dhalsim',
+        providerTitle: () => 'Twitch',
+      } as ExternalAccountResource,
+    ],
+    unverifiedExternalAccounts: [
+      {
+        id: 'eac_facebook',
+        provider: 'facebook',
+        providerTitle: () => 'Facebook',
+      } as ExternalAccountResource,
+    ],
+    web3Wallets: [{ web3Wallet: '0x123456789' }],
+  };
+};
+
+const envWithoutWeb3wallet = () => ({
   displayConfig: {},
   userSettings: {
     attributes: {
@@ -59,7 +122,27 @@ jest.mock('ui/contexts', () => {
       },
     },
   },
-}));
+});
+
+const envWithWeb3Wallet = () => ({
+  displayConfig: {},
+  userSettings: {
+    attributes: {
+      email_address: {
+        enabled: true,
+      },
+      phone_number: {
+        enabled: true,
+      },
+      username: {
+        enabled: false,
+      },
+      web3_wallet: {
+        enabled: true,
+      },
+    },
+  },
+});
 
 describe('<ProfileCard/>', () => {
   afterEach(() => {
@@ -67,30 +150,24 @@ describe('<ProfileCard/>', () => {
   });
 
   it('renders the ProfileCard', () => {
+    (useEnvironment as jest.Mock).mockImplementation(envWithoutWeb3wallet);
+    (useCoreUser as jest.Mock).mockImplementation(userWithoutExtAccounts);
+
     const tree = renderJSON(<ProfileCard />);
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders the ProfileCard with enabled settings', () => {
-    (useEnvironment as jest.Mock).mockImplementation(() => ({
-      displayConfig: {},
-      userSettings: {
-        attributes: {
-          email_address: {
-            enabled: true,
-          },
-          phone_number: {
-            enabled: true,
-          },
-          username: {
-            enabled: false,
-          },
-          web3_wallet: {
-            enabled: true,
-          },
-        },
-      },
-    }));
+  it('renders the ProfileCard with web3 wallet', () => {
+    (useEnvironment as jest.Mock).mockImplementation(envWithWeb3Wallet);
+    (useCoreUser as jest.Mock).mockImplementation(userWithoutExtAccounts);
+
+    const tree = renderJSON(<ProfileCard />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders the profile card with verified external accounts', () => {
+    (useEnvironment as jest.Mock).mockImplementation(envWithoutWeb3wallet);
+    (useCoreUser as jest.Mock).mockImplementation(userWithExtAccounts);
 
     const tree = renderJSON(<ProfileCard />);
     expect(tree).toMatchSnapshot();
diff --git a/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileCard.tsx b/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileCard.tsx
index 9236091b846..071989bcd39 100644
--- a/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileCard.tsx
+++ b/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileCard.tsx
@@ -72,12 +72,8 @@ export function ProfileCard(): JSX.Element {
                   src={svgUrl(externalAccount.provider)}
                   className='cl-left-icon-wrapper'
                 />
-                {externalAccount.emailAddress}
 
-                <VerificationStatusTag
-                  className='cl-tag'
-                  status={externalAccount.verification?.status || 'verified'}
-                />
+                {externalAccount.username || externalAccount.emailAddress}
               </div>
             ))}
           </div>
diff --git a/packages/clerk-js/src/ui/userProfile/account/profileCard/__snapshots__/ProfileCard.test.tsx.snap b/packages/clerk-js/src/ui/userProfile/account/profileCard/__snapshots__/ProfileCard.test.tsx.snap
index 239d973a1d1..9d03ebbde61 100644
--- a/packages/clerk-js/src/ui/userProfile/account/profileCard/__snapshots__/ProfileCard.test.tsx.snap
+++ b/packages/clerk-js/src/ui/userProfile/account/profileCard/__snapshots__/ProfileCard.test.tsx.snap
@@ -192,7 +192,7 @@ exports[`<ProfileCard/> renders the ProfileCard 1`] = `
 </div>
 `;
 
-exports[`<ProfileCard/> renders the ProfileCard with enabled settings 1`] = `
+exports[`<ProfileCard/> renders the ProfileCard with web3 wallet 1`] = `
 <div
   className="card card cl-themed-card"
 >
@@ -405,3 +405,210 @@ exports[`<ProfileCard/> renders the ProfileCard with enabled settings 1`] = `
   </div>
 </div>
 `;
+
+exports[`<ProfileCard/> renders the profile card with verified external accounts 1`] = `
+<div
+  className="card card cl-themed-card"
+>
+  <div
+    className="titleContainer"
+  >
+    <h1
+      className="title"
+    >
+      Profile
+    </h1>
+    <p
+      className="subtitle"
+    >
+      Manage profile settings
+    </p>
+  </div>
+  <div
+    className="cl-titled-card-list"
+  >
+    <div
+      className="cl-list-item elementContainer"
+      disabled={false}
+    >
+      <div
+        className="title"
+      >
+        Photo
+      </div>
+      <div
+        className="listItem line"
+      >
+        <div
+          className="start"
+        >
+          <div
+            className="uploaderWrapper wrapper"
+            onClick={[Function]}
+          >
+            <img
+              alt=""
+              className="avatar cl-image"
+              height={64}
+              onError={[Function]}
+              src="https://www.gravatar.com/avatar?d=mp"
+              title=""
+              width={64}
+            />
+            <div
+              className="touchContainer"
+            >
+              <svg
+                data-filename="../shared/assets/icons/camera.svg"
+              />
+            </div>
+            <div
+              className="hoverContainer"
+            >
+              <svg
+                data-filename="../shared/assets/icons/camera.svg"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          className="iconContainer"
+        />
+      </div>
+    </div>
+    <button
+      className="cl-list-item elementContainer button hoverable"
+      disabled={false}
+      onClick={[Function]}
+    >
+      <div
+        className="title"
+      >
+        Email
+      </div>
+      <div
+        className="listItem line"
+      >
+        <div
+          className="start"
+        >
+          <div
+            className="cl-list-item-entry"
+          >
+            <div>
+              clerk@clerk.dev
+              <span
+                className="tag primary sm"
+              >
+                Primary
+              </span>
+              <span
+                className="tag success sm cl-tag"
+              >
+                Verified
+              </span>
+            </div>
+            <div>
+              clerk-unverified@clerk.dev
+              <span
+                className="tag primary sm"
+              >
+                Primary
+              </span>
+              <span
+                className="tag error sm cl-tag"
+              >
+                Unverified
+              </span>
+            </div>
+          </div>
+        </div>
+        <div
+          className="iconContainer"
+        >
+          <svg
+            data-filename="../shared/assets/icons/arrow-right.svg"
+          />
+        </div>
+      </div>
+    </button>
+    <button
+      className="cl-list-item elementContainer button hoverable"
+      disabled={false}
+      onClick={[Function]}
+    >
+      <div
+        className="title"
+      >
+        Phone number
+      </div>
+      <div
+        className="listItem line"
+      >
+        <div
+          className="start"
+        >
+          <div
+            className="cl-empty-list-item"
+          >
+            None
+          </div>
+        </div>
+        <div
+          className="iconContainer"
+        >
+          <svg
+            data-filename="../shared/assets/icons/arrow-right.svg"
+          />
+        </div>
+      </div>
+    </button>
+    <button
+      className="cl-list-item elementContainer button hoverable"
+      disabled={false}
+      onClick={[Function]}
+    >
+      <div
+        className="title"
+      >
+        Connected accounts
+      </div>
+      <div
+        className="listItem line"
+      >
+        <div
+          className="start"
+        >
+          <div
+            className="cl-list-item-entry"
+          >
+            <div>
+              <img
+                alt="Google"
+                className="cl-left-icon-wrapper"
+                src="https://images.clerk.dev/static/google.svg"
+              />
+              sanjay@gmail.com
+            </div>
+            <div>
+              <img
+                alt="Twitch"
+                className="cl-left-icon-wrapper"
+                src="https://images.clerk.dev/static/twitch.svg"
+              />
+              dhalsim
+            </div>
+          </div>
+        </div>
+        <div
+          className="iconContainer"
+        >
+          <svg
+            data-filename="../shared/assets/icons/arrow-right.svg"
+          />
+        </div>
+      </div>
+    </button>
+  </div>
+</div>
+`;
diff --git a/packages/clerk-js/src/ui/userProfile/connectedAccounts/UnverifiedAccountListItem.tsx b/packages/clerk-js/src/ui/userProfile/connectedAccounts/UnverifiedAccountListItem.tsx
index 27388f70ebc..c0b8d45fc99 100644
--- a/packages/clerk-js/src/ui/userProfile/connectedAccounts/UnverifiedAccountListItem.tsx
+++ b/packages/clerk-js/src/ui/userProfile/connectedAccounts/UnverifiedAccountListItem.tsx
@@ -53,6 +53,7 @@ export function UnverifiedAccountListItem({
           src={svgUrl(externalAccount.provider)}
           className='cl-left-icon-wrapper'
         />
+
         {externalAccount.username || externalAccount.emailAddress}
 
         {externalAccount.label && ` (${externalAccount.label})`}

From 6570a87439d92a59057b2df50ec482511428495e Mon Sep 17 00:00:00 2001
From: Haris Chaniotakis <chanioxaris@gmail.com>
Date: Wed, 1 Jun 2022 10:02:30 +0300
Subject: [PATCH 3/8] feat(types,clerk-js): Introduce web3 wallet operations in
 UserProfile

Allow users to list, preview, create/connect and delete a web3 wallet from their UserProfile, the same way they do for email addresses & phone numbers
---
 .../src/ui/common/errorHandler.test.ts        |  31 +-
 .../clerk-js/src/ui/common/errorHandler.ts    |  12 +
 .../EditableListFieldRemoveCard.tsx           |  11 +-
 .../src/ui/userProfile/UserProfile.test.tsx   |   7 +
 .../__snapshots__/UserProfile.test.tsx.snap   | 275 ++++++++++++++++++
 .../src/ui/userProfile/account/index.tsx      |   2 +
 .../account/profileCard/ProfileCard.test.tsx  |   9 +-
 .../account/profileCard/ProfileCard.tsx       |  27 +-
 .../profileCard/ProfileWeb3Wallets.tsx        |  38 +++
 .../__snapshots__/ProfileCard.test.tsx.snap   |  27 +-
 .../ConnectedAccountDetail.tsx                |   2 +-
 .../web3Wallets/AddNewWeb3Wallet.test.tsx     |  55 ++++
 .../web3Wallets/AddNewWeb3Wallet.tsx          |  83 ++++++
 .../web3Wallets/Web3WalletDetail.test.tsx     |  62 ++++
 .../web3Wallets/Web3WalletDetail.tsx          | 141 +++++++++
 .../web3Wallets/Web3WalletList.test.tsx       |  36 +++
 .../web3Wallets/Web3WalletList.tsx            |  83 ++++++
 .../AddNewWeb3Wallet.test.tsx.snap            |  86 ++++++
 .../Web3WalletDetail.test.tsx.snap            | 145 +++++++++
 .../Web3WalletList.test.tsx.snap              | 116 ++++++++
 .../src/ui/userProfile/web3Wallets/index.tsx  |  24 ++
 packages/types/src/user.ts                    |   2 +-
 22 files changed, 1237 insertions(+), 37 deletions(-)
 create mode 100644 packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileWeb3Wallets.tsx
 create mode 100644 packages/clerk-js/src/ui/userProfile/web3Wallets/AddNewWeb3Wallet.test.tsx
 create mode 100644 packages/clerk-js/src/ui/userProfile/web3Wallets/AddNewWeb3Wallet.tsx
 create mode 100644 packages/clerk-js/src/ui/userProfile/web3Wallets/Web3WalletDetail.test.tsx
 create mode 100644 packages/clerk-js/src/ui/userProfile/web3Wallets/Web3WalletDetail.tsx
 create mode 100644 packages/clerk-js/src/ui/userProfile/web3Wallets/Web3WalletList.test.tsx
 create mode 100644 packages/clerk-js/src/ui/userProfile/web3Wallets/Web3WalletList.tsx
 create mode 100644 packages/clerk-js/src/ui/userProfile/web3Wallets/__snapshots__/AddNewWeb3Wallet.test.tsx.snap
 create mode 100644 packages/clerk-js/src/ui/userProfile/web3Wallets/__snapshots__/Web3WalletDetail.test.tsx.snap
 create mode 100644 packages/clerk-js/src/ui/userProfile/web3Wallets/__snapshots__/Web3WalletList.test.tsx.snap
 create mode 100644 packages/clerk-js/src/ui/userProfile/web3Wallets/index.tsx

diff --git a/packages/clerk-js/src/ui/common/errorHandler.test.ts b/packages/clerk-js/src/ui/common/errorHandler.test.ts
index 92ee95b4d38..f051e6ccc78 100644
--- a/packages/clerk-js/src/ui/common/errorHandler.test.ts
+++ b/packages/clerk-js/src/ui/common/errorHandler.test.ts
@@ -1,6 +1,6 @@
 import { ClerkAPIResponseError } from 'core/resources/Error';
 
-import { getGlobalError, handleError } from './errorHandler';
+import { getFieldError, getGlobalError, handleError } from './errorHandler';
 import type { FieldState } from './forms';
 
 describe('handleError(err, fields, setGlobalError)', () => {
@@ -96,3 +96,32 @@ describe('getGlobalError', () => {
     expect(getGlobalError(new Error('the error'))).toBeUndefined();
   });
 });
+
+describe('getFieldError', () => {
+  it('returns the first field error or undefined', () => {
+    const message = 'the message';
+    let err = getFieldError(
+      new ClerkAPIResponseError(message, {
+        data: [
+          { code: 'first', message, meta: { param_name: 'field' } },
+          { code: 'second', message, meta: { param_name: 'field' } },
+        ],
+        status: 400,
+      }),
+    );
+    if (!err) {
+      fail();
+    }
+    expect(err.code).toEqual('first');
+
+    err = getFieldError(
+      new ClerkAPIResponseError(message, {
+        data: [],
+        status: 400,
+      }),
+    );
+    expect(err).toBeUndefined();
+
+    expect(getFieldError(new Error('the error'))).toBeUndefined();
+  });
+});
diff --git a/packages/clerk-js/src/ui/common/errorHandler.ts b/packages/clerk-js/src/ui/common/errorHandler.ts
index c7bcf0d7416..894839b3418 100644
--- a/packages/clerk-js/src/ui/common/errorHandler.ts
+++ b/packages/clerk-js/src/ui/common/errorHandler.ts
@@ -84,6 +84,18 @@ export function getGlobalError(err: Error): ClerkAPIError | undefined {
   return globalErrors[0];
 }
 
+// Returns the first field API error or undefined if none exists.
+export function getFieldError(err: Error): ClerkAPIError | undefined {
+  if (!isClerkAPIResponseError(err)) {
+    return;
+  }
+  const { fieldErrors } = parseErrors(err.errors);
+  if (!fieldErrors.length) {
+    return;
+  }
+  return fieldErrors[0];
+}
+
 export function getClerkAPIErrorMessage(err: ClerkAPIError): string {
   return err.longMessage || err.message;
 }
diff --git a/packages/clerk-js/src/ui/userProfile/EditableListFieldRemoveCard.tsx b/packages/clerk-js/src/ui/userProfile/EditableListFieldRemoveCard.tsx
index 8759a877d5a..4df9b444e4d 100644
--- a/packages/clerk-js/src/ui/userProfile/EditableListFieldRemoveCard.tsx
+++ b/packages/clerk-js/src/ui/userProfile/EditableListFieldRemoveCard.tsx
@@ -6,7 +6,7 @@ import { handleError } from 'ui/common';
 import { Alert } from 'ui/common/alert';
 
 interface EditableListFieldRemoveCardProps {
-  type: 'phone' | 'email' | 'external account';
+  type: 'phone' | 'email' | 'external_account' | 'web3_wallet';
   label: string;
   onCancel: () => void;
   onRemove: () => Promise<any>;
@@ -34,9 +34,11 @@ export const EditableListFieldRemoveCard: React.FC<EditableListFieldRemoveCardPr
     }
   };
 
+  const formattedType = type.split('_').join(' ');
+
   return (
     <TitledCard
-      title={`Remove ${type}`}
+      title={`Remove ${formattedType}`}
       subtitle='Confirm removal'
       className='cl-themed-card cl-verifiable-field-card'
     >
@@ -66,10 +68,11 @@ export const EditableListFieldRemoveCard: React.FC<EditableListFieldRemoveCardPr
             yourself.
           </p>
         )}
-        {type === 'external account' && <p>You will no longer be able to sign in using this connected account.</p>}
+        {type === 'external_account' && <p>You will no longer be able to sign in using this connected account.</p>}
+        {type === 'web3_wallet' && <p>Remove the connection between this app and your Web3 wallet</p>}
       </div>
       <div className='cl-form-button-group'>
-        <Button onClick={updateFieldSubmit}>Remove {type}</Button>
+        <Button onClick={updateFieldSubmit}>Remove {formattedType}</Button>
         <Button
           flavor='text'
           type='reset'
diff --git a/packages/clerk-js/src/ui/userProfile/UserProfile.test.tsx b/packages/clerk-js/src/ui/userProfile/UserProfile.test.tsx
index 64e147d8949..35365d43a99 100644
--- a/packages/clerk-js/src/ui/userProfile/UserProfile.test.tsx
+++ b/packages/clerk-js/src/ui/userProfile/UserProfile.test.tsx
@@ -10,6 +10,7 @@ import {
   SignInResource,
   SignUpResource,
   VerificationJSON,
+  Web3WalletResource,
 } from '@clerk/types';
 import { AuthConfig, ExternalAccount, UserSettings } from 'core/resources/internal';
 import React from 'react';
@@ -164,6 +165,12 @@ jest.mock('ui/contexts', () => ({
           linkedTo: [],
         } as any as EmailAddressResource,
       ],
+      web3Wallets: [
+        {
+          web3Wallet: '0x0000000000000000000000000000000000000000',
+          verification: { status: 'verified' },
+        } as Web3WalletResource,
+      ],
       getSessions: () => {
         return Promise.resolve([sessionWithActivities]);
       },
diff --git a/packages/clerk-js/src/ui/userProfile/__snapshots__/UserProfile.test.tsx.snap b/packages/clerk-js/src/ui/userProfile/__snapshots__/UserProfile.test.tsx.snap
index bfd4bbc837e..67b9a81bf87 100644
--- a/packages/clerk-js/src/ui/userProfile/__snapshots__/UserProfile.test.tsx.snap
+++ b/packages/clerk-js/src/ui/userProfile/__snapshots__/UserProfile.test.tsx.snap
@@ -3311,6 +3311,281 @@ Array [
         </fieldset>
       </form>
     </div>
+    <div
+      className="cl-page-heading"
+    >
+      <svg
+        data-filename="../shared/assets/icons/arrow-left.svg"
+      />
+      <div
+        className="cl-text-container"
+      >
+        <h2
+          className="heading h2 cl-title"
+        >
+          Web3 wallets
+        </h2>
+        <p
+          className="cl-subtitle"
+        >
+          Manage web3 wallets associated with your account
+        </p>
+      </div>
+    </div>
+    <div
+      className="card card cl-themed-card cl-list-card"
+    >
+      <div>
+        <button
+          className="cl-list-item elementContainer button hoverable"
+          disabled={false}
+          onClick={[Function]}
+        >
+          <div
+            className="listItem line"
+          >
+            <div
+              className="start"
+            >
+              <div
+                className="cl-web3-wallet-item"
+              >
+                0x0000000000000000000000000000000000000000
+                 
+                <div
+                  className="cl-tags"
+                >
+                  <span
+                    className="tag primary sm cl-tag"
+                  >
+                    Primary
+                  </span>
+                  <span
+                    className="tag success sm cl-tag"
+                  >
+                    Verified
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div
+              className="iconContainer"
+            >
+              <svg
+                data-filename="../shared/assets/icons/arrow-right.svg"
+              />
+            </div>
+          </div>
+        </button>
+      </div>
+    </div>
+    <div
+      className="cl-page-heading"
+    >
+      <svg
+        data-filename="../shared/assets/icons/arrow-left.svg"
+      />
+      <div
+        className="cl-text-container"
+      >
+        <h2
+          className="heading h2 cl-title"
+        >
+          Web3 wallet
+        </h2>
+        <p
+          className="cl-subtitle"
+        >
+          Manage this Web3 wallet
+        </p>
+      </div>
+    </div>
+    <div
+      className="card card cl-themed-card cl-list-card cl-verifiable-field-card"
+    >
+      <div>
+        <div
+          className="cl-list-item elementContainer"
+          disabled={false}
+        >
+          <div
+            className="listItem line"
+          >
+            <div
+              className="start"
+            >
+              <div>
+                <div
+                  className="cl-ident-detail"
+                >
+                  0x0000000000000000000000000000000000000000
+                  <div
+                    className="cl-tags"
+                  >
+                    <span
+                      className="tag primary sm cl-tag"
+                    >
+                      Primary
+                    </span>
+                    <span
+                      className="tag success sm cl-tag"
+                    >
+                      Verified
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              className="iconContainer"
+            />
+          </div>
+        </div>
+        <div
+          className="cl-list-item elementContainer"
+          disabled={false}
+        >
+          <div
+            className="listItem line"
+          >
+            <div
+              className="start"
+            >
+              <div
+                className="cl-primary-status-container"
+              >
+                <div
+                  className="cl-description"
+                >
+                  <svg
+                    data-filename="../shared/assets/icons/mail.svg"
+                  />
+                  <div
+                    className="cl-text"
+                  >
+                    <div
+                      className="cl-title"
+                    >
+                      Primary web3 wallet
+                    </div>
+                  </div>
+                </div>
+                <label
+                  className="container disabled"
+                  onKeyPress={[Function]}
+                >
+                  <span
+                    aria-checked={true}
+                    className="toggle"
+                    role="switch"
+                    tabIndex={0}
+                  >
+                    <input
+                      checked={true}
+                      disabled={true}
+                      name="primary_toggle"
+                      onChange={[Function]}
+                      tabIndex={-1}
+                      type="checkbox"
+                    />
+                    <span
+                      className="slider"
+                    />
+                  </span>
+                </label>
+              </div>
+            </div>
+            <div
+              className="iconContainer"
+            />
+          </div>
+        </div>
+      </div>
+      <button
+        className="button text error hoverable cl-add-resource-button cl-remove-button"
+        onClick={[Function]}
+        type="button"
+      >
+        <svg
+          data-filename="../shared/assets/icons/bin.svg"
+        />
+        Remove
+      </button>
+    </div>
+    <div
+      className="cl-page-heading"
+    >
+      <svg
+        data-filename="../shared/assets/icons/arrow-left.svg"
+      />
+      <div
+        className="cl-text-container"
+      >
+        <h2
+          className="heading h2 cl-title"
+        >
+          Back
+        </h2>
+        <p
+          className="cl-subtitle"
+        />
+      </div>
+    </div>
+    <div
+      className="card card cl-themed-card cl-verifiable-field-card"
+    >
+      <div
+        className="titleContainer"
+      >
+        <h1
+          className="title"
+        >
+          Add web3 wallet
+        </h1>
+        <p
+          className="subtitle"
+        >
+          Connect your web3 wallet
+        </p>
+      </div>
+      <div>
+        <button
+          className="cl-list-item elementContainer button hoverable"
+          disabled={false}
+          onClick={[Function]}
+        >
+          <div
+            className="listItem line"
+          >
+            <div
+              className="start"
+            >
+              <div>
+                <img
+                  alt="metamask"
+                  className="cl-left-icon-wrapper"
+                  src="https://images.clerk.dev/static/metamask.svg"
+                />
+                Connect 
+                Metamask
+                 wallet
+              </div>
+            </div>
+            <div
+              className="iconContainer"
+            >
+              <div
+                className="icon"
+              >
+                <svg
+                  data-filename="../shared/assets/icons/arrow-right.svg"
+                />
+              </div>
+            </div>
+          </div>
+        </button>
+      </div>
+    </div>
     <div
       className="cl-page-heading"
     >
diff --git a/packages/clerk-js/src/ui/userProfile/account/index.tsx b/packages/clerk-js/src/ui/userProfile/account/index.tsx
index 8426769aa3f..45ccdc1cb0c 100644
--- a/packages/clerk-js/src/ui/userProfile/account/index.tsx
+++ b/packages/clerk-js/src/ui/userProfile/account/index.tsx
@@ -5,6 +5,7 @@ import { EmailAddressesRoutes } from 'ui/userProfile/emailAdressess';
 import { NameRoutes } from 'ui/userProfile/name';
 import { PhoneNumbersRoutes } from 'ui/userProfile/phoneNumbers';
 import { UsernameRoutes } from 'ui/userProfile/username';
+import { Web3WalletsRoutes } from 'ui/userProfile/web3Wallets';
 
 import { Account } from './Account';
 
@@ -28,6 +29,7 @@ export function AccountRoutes({ standAlone = false, index = false }: AccountRout
       <UsernameRoutes />
       <EmailAddressesRoutes />
       <PhoneNumbersRoutes />
+      <Web3WalletsRoutes />
       <ConnectedAccountsRoutes />
     </Route>
   );
diff --git a/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileCard.test.tsx b/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileCard.test.tsx
index a52bad0758a..4ddb69bc2fa 100644
--- a/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileCard.test.tsx
+++ b/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileCard.test.tsx
@@ -1,5 +1,5 @@
 import { renderJSON } from '@clerk/shared/testUtils';
-import { EmailAddressResource, ExternalAccountResource, UserResource } from '@clerk/types';
+import { EmailAddressResource, ExternalAccountResource, UserResource, Web3WalletResource } from '@clerk/types';
 import * as React from 'react';
 import { PartialDeep } from 'type-fest';
 import { useCoreUser, useEnvironment } from 'ui/contexts';
@@ -39,7 +39,12 @@ const userWithoutExtAccounts = (): PartialDeep<UserResource> => {
     externalAccounts: [],
     verifiedExternalAccounts: [],
     unverifiedExternalAccounts: [],
-    web3Wallets: [{ web3Wallet: '0x123456789' }],
+    web3Wallets: [
+      {
+        web3Wallet: '0x0000000000000000000000000000000000000000',
+        verification: { status: 'verified' },
+      } as Web3WalletResource,
+    ],
   };
 };
 
diff --git a/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileCard.tsx b/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileCard.tsx
index 071989bcd39..ec6709f7719 100644
--- a/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileCard.tsx
+++ b/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileCard.tsx
@@ -1,7 +1,5 @@
 import { List } from '@clerk/shared/components/list';
-import { VerificationStatusTag } from '@clerk/shared/components/tag';
 import { TitledCard } from '@clerk/shared/components/titledCard';
-import type { UserResource } from '@clerk/types';
 import { ExternalAccountResource } from '@clerk/types';
 import React from 'react';
 import { svgUrl } from 'ui/common/constants';
@@ -11,34 +9,13 @@ import { useNavigate } from 'ui/hooks';
 import { AvatarWithUploader } from '../avatarWithUploader';
 import { ProfileEmailAddresses } from './ProfileEmailAddresses';
 import { ProfilePhoneNumbers } from './ProfilePhoneNumbers';
-
-// Since only Metamask wallet is supported for now, we assume that the user has only
-// one Web3 wallet address. When we add support for more wallets, this logic should be
-// refactored.
-function getWeb3WalletAddress(user: UserResource): string {
-  if (user.web3Wallets?.length > 0) {
-    return user.web3Wallets[0] ? user.web3Wallets[0].web3Wallet : '';
-  }
-  return '';
-}
+import { ProfileWeb3Wallets } from './ProfileWeb3Wallets';
 
 export function ProfileCard(): JSX.Element {
   const { userSettings } = useEnvironment();
   const { attributes } = userSettings;
   const user = useCoreUser();
   const { navigate } = useNavigate();
-  const web3Wallet = getWeb3WalletAddress(user);
-
-  const buildWebWalletRow = () => (
-    <List.Item
-      className='cl-list-item'
-      key='web-wallet-name'
-      itemTitle='Wallet address'
-      detail={false}
-    >
-      {web3Wallet}
-    </List.Item>
-  );
 
   const buildUsernameRow = () => (
     <List.Item
@@ -118,7 +95,7 @@ export function ProfileCard(): JSX.Element {
         {showEmail && <ProfileEmailAddresses />}
         {showPhone && <ProfilePhoneNumbers />}
         {buildConnectedAccountsRow()}
-        {showWebWallet && buildWebWalletRow()}
+        {showWebWallet && <ProfileWeb3Wallets />}
       </List>
     </TitledCard>
   );
diff --git a/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileWeb3Wallets.tsx b/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileWeb3Wallets.tsx
new file mode 100644
index 00000000000..5ae5a09dd31
--- /dev/null
+++ b/packages/clerk-js/src/ui/userProfile/account/profileCard/ProfileWeb3Wallets.tsx
@@ -0,0 +1,38 @@
+import { List } from '@clerk/shared/components/list';
+import { Tag, VerificationStatusTag } from '@clerk/shared/components/tag';
+import React from 'react';
+import { useCoreUser } from 'ui/contexts';
+import { useNavigate } from 'ui/hooks';
+
+export function ProfileWeb3Wallets(): JSX.Element {
+  const { navigate } = useNavigate();
+  const user = useCoreUser();
+
+  return (
+    <List.Item
+      className='cl-list-item'
+      key='web3-wallet'
+      itemTitle='Web3 wallet'
+      onClick={() => navigate('web3-wallets')}
+    >
+      {user.web3Wallets.length > 0 ? (
+        <div className='cl-list-item-entry'>
+          {user.web3Wallets.map(web3Wallet => (
+            <div key={web3Wallet.id}>
+              {web3Wallet.web3Wallet}
+              {user.isPrimaryIdentification(web3Wallet) && <Tag color='primary'>Primary</Tag>}
+              {web3Wallet.verification.status && (
+                <VerificationStatusTag
+                  className='cl-tag'
+                  status={web3Wallet.verification.status}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className='cl-empty-list-item'>None</div>
+      )}
+    </List.Item>
+  );
+}
diff --git a/packages/clerk-js/src/ui/userProfile/account/profileCard/__snapshots__/ProfileCard.test.tsx.snap b/packages/clerk-js/src/ui/userProfile/account/profileCard/__snapshots__/ProfileCard.test.tsx.snap
index 9d03ebbde61..f93957e4d31 100644
--- a/packages/clerk-js/src/ui/userProfile/account/profileCard/__snapshots__/ProfileCard.test.tsx.snap
+++ b/packages/clerk-js/src/ui/userProfile/account/profileCard/__snapshots__/ProfileCard.test.tsx.snap
@@ -383,11 +383,12 @@ exports[`<ProfileCard/> renders the ProfileCard with web3 wallet 1`] = `
     <button
       className="cl-list-item elementContainer button hoverable"
       disabled={false}
+      onClick={[Function]}
     >
       <div
         className="title"
       >
-        Wallet address
+        Web3 wallet
       </div>
       <div
         className="listItem line"
@@ -395,11 +396,31 @@ exports[`<ProfileCard/> renders the ProfileCard with web3 wallet 1`] = `
         <div
           className="start"
         >
-          0x123456789
+          <div
+            className="cl-list-item-entry"
+          >
+            <div>
+              0x0000000000000000000000000000000000000000
+              <span
+                className="tag primary sm"
+              >
+                Primary
+              </span>
+              <span
+                className="tag success sm cl-tag"
+              >
+                Verified
+              </span>
+            </div>
+          </div>
         </div>
         <div
           className="iconContainer"
-        />
+        >
+          <svg
+            data-filename="../shared/assets/icons/arrow-right.svg"
+          />
+        </div>
       </div>
     </button>
   </div>
diff --git a/packages/clerk-js/src/ui/userProfile/connectedAccounts/ConnectedAccountDetail.tsx b/packages/clerk-js/src/ui/userProfile/connectedAccounts/ConnectedAccountDetail.tsx
index b4101b36648..4ad7c43a8f8 100644
--- a/packages/clerk-js/src/ui/userProfile/connectedAccounts/ConnectedAccountDetail.tsx
+++ b/packages/clerk-js/src/ui/userProfile/connectedAccounts/ConnectedAccountDetail.tsx
@@ -76,7 +76,7 @@ export function ConnectedAccountDetail(): JSX.Element | null {
 
   const disconnectExternalAccountScreen = (
     <EditableListFieldRemoveCard
-      type='external account'
+      type='external_account'
       label={externalAccount.providerTitle()}
       onCancel={() => {
         setShowRemovalPage(false);
diff --git a/packages/clerk-js/src/ui/userProfile/web3Wallets/AddNewWeb3Wallet.test.tsx b/packages/clerk-js/src/ui/userProfile/web3Wallets/AddNewWeb3Wallet.test.tsx
new file mode 100644
index 00000000000..e0e9414953a
--- /dev/null
+++ b/packages/clerk-js/src/ui/userProfile/web3Wallets/AddNewWeb3Wallet.test.tsx
@@ -0,0 +1,55 @@
+import { renderJSON } from '@clerk/shared/testUtils';
+import { UserResource, Web3WalletResource } from '@clerk/types';
+import React from 'react';
+
+import { AddNewWeb3Wallet } from './AddNewWeb3Wallet';
+
+const mockNavigate = jest.fn();
+jest.mock('ui/hooks', () => ({
+  useNavigate: () => {
+    return {
+      navigate: mockNavigate,
+    };
+  },
+}));
+
+jest.mock('ui/router/RouteContext', () => {
+  return {
+    useRouter: () => {
+      return {
+        params: { web3_wallet_id: 'test-id' },
+        resolve: () => {
+          return {
+            toURL: {
+              href: 'https://www.ssddd.com',
+            },
+          };
+        },
+      };
+    },
+  };
+});
+
+jest.mock('ui/contexts/CoreUserContext', () => {
+  return {
+    useCoreUser: (): Partial<UserResource> => {
+      return {
+        primaryWeb3WalletId: 'test-id',
+        web3Wallets: [
+          {
+            id: 'test-id',
+            web3Wallet: '0x0000000000000000000000000000000000000000',
+            verification: { status: 'verified' },
+          } as Web3WalletResource,
+        ],
+      };
+    },
+  };
+});
+
+describe('<AddNewWeb3Wallet/>', () => {
+  it('renders the AddNewWeb3Wallet', () => {
+    const tree = renderJSON(<AddNewWeb3Wallet />);
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/packages/clerk-js/src/ui/userProfile/web3Wallets/AddNewWeb3Wallet.tsx b/packages/clerk-js/src/ui/userProfile/web3Wallets/AddNewWeb3Wallet.tsx
new file mode 100644
index 00000000000..d473cdfc2a5
--- /dev/null
+++ b/packages/clerk-js/src/ui/userProfile/web3Wallets/AddNewWeb3Wallet.tsx
@@ -0,0 +1,83 @@
+import { ArrowRightIcon } from '@clerk/shared/assets/icons';
+import { List } from '@clerk/shared/components/list';
+import { Spinner } from '@clerk/shared/components/spinner';
+import { TitledCard } from '@clerk/shared/components/titledCard';
+import { WEB3_PROVIDERS, Web3Provider } from '@clerk/types';
+import React, { useState } from 'react';
+import { getFieldError, handleError, svgUrl } from 'ui/common';
+import { Alert } from 'ui/common/alert';
+import { useCoreUser } from 'ui/contexts';
+import { useNavigate } from 'ui/hooks';
+import { PageHeading } from 'ui/userProfile/pageHeading';
+import { generateSignatureWithMetamask, getMetamaskIdentifier } from 'utils/web3';
+
+export function AddNewWeb3Wallet(): JSX.Element {
+  const user = useCoreUser();
+  const { navigate } = useNavigate();
+  const [error, setError] = useState<string | undefined>();
+  const [busyProvider, setBusyProvider] = useState<Web3Provider | null>(null);
+
+  const handleClick = async (provider: Web3Provider) => {
+    setError(undefined);
+    setBusyProvider(provider);
+
+    const identifier = await getMetamaskIdentifier();
+
+    try {
+      let web3Wallet = await user.createWeb3Wallet({ web3Wallet: identifier });
+      web3Wallet = await web3Wallet.prepareVerification({ strategy: 'web3_metamask_signature' });
+      const signature = await generateSignatureWithMetamask({
+        identifier,
+        nonce: web3Wallet.verification.nonce as string,
+      });
+      await web3Wallet.attemptVerification({ signature });
+
+      navigate(`../${web3Wallet.id}`);
+    } catch (err) {
+      const fieldError = getFieldError(err);
+      if (fieldError) {
+        setError(fieldError.longMessage);
+      } else {
+        handleError(err, [], setError);
+      }
+
+      setBusyProvider(null);
+    }
+  };
+
+  return (
+    <>
+      <PageHeading
+        title='Back'
+        backTo='../'
+      />
+      <TitledCard
+        title={'Add web3 wallet'}
+        subtitle={'Connect your web3 wallet'}
+        className='cl-themed-card cl-verifiable-field-card'
+      >
+        <Alert type='error'>{error}</Alert>
+
+        <List>
+          {WEB3_PROVIDERS.map(p => (
+            <List.Item
+              className='cl-list-item'
+              key={p.provider}
+              onClick={() => handleClick(p.provider)}
+              detailIcon={busyProvider === p.provider ? <Spinner /> : <ArrowRightIcon />}
+            >
+              <div>
+                <img
+                  alt={p.provider}
+                  src={svgUrl(p.provider)}
+                  className='cl-left-icon-wrapper'
+                />
+                Connect {p.name} wallet
+              </div>
+            </List.Item>
+          ))}
+        </List>
+      </TitledCard>
+    </>
+  );
+}
diff --git a/packages/clerk-js/src/ui/userProfile/web3Wallets/Web3WalletDetail.test.tsx b/packages/clerk-js/src/ui/userProfile/web3Wallets/Web3WalletDetail.test.tsx
new file mode 100644
index 00000000000..2d6280adb8d
--- /dev/null
+++ b/packages/clerk-js/src/ui/userProfile/web3Wallets/Web3WalletDetail.test.tsx
@@ -0,0 +1,62 @@
+import { renderJSON } from '@clerk/shared/testUtils';
+import { EnvironmentResource, UserResource, UserSettingsResource, Web3WalletResource } from '@clerk/types';
+import React from 'react';
+import { PartialDeep } from 'type-fest';
+
+import { Web3WalletDetail } from './Web3WalletDetail';
+
+const mockNavigate = jest.fn();
+jest.mock('ui/hooks', () => ({
+  useNavigate: () => {
+    return {
+      navigate: mockNavigate,
+    };
+  },
+}));
+
+jest.mock('ui/router/RouteContext', () => {
+  return {
+    useRouter: () => {
+      return {
+        params: { web3_wallet_id: 'test-id' },
+        resolve: () => {
+          return {
+            toURL: {
+              href: 'https://www.ssddd.com',
+            },
+          };
+        },
+      };
+    },
+  };
+});
+
+jest.mock('ui/contexts', () => {
+  return {
+    useCoreUser: (): Partial<UserResource> => {
+      return {
+        primaryWeb3WalletId: 'test-id',
+        web3Wallets: [
+          {
+            id: 'test-id',
+            web3Wallet: '0x0000000000000000000000000000000000000000',
+            verification: { status: 'verified' },
+          } as Web3WalletResource,
+        ],
+      };
+    },
+    useEnvironment: jest.fn(
+      () =>
+        ({
+          userSettings: {} as PartialDeep<UserSettingsResource>,
+        } as PartialDeep<EnvironmentResource>),
+    ),
+  };
+});
+
+describe('<Web3WalletDetail/>', () => {
+  it('renders Web3WalletDetail', () => {
+    const tree = renderJSON(<Web3WalletDetail />);
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/packages/clerk-js/src/ui/userProfile/web3Wallets/Web3WalletDetail.tsx b/packages/clerk-js/src/ui/userProfile/web3Wallets/Web3WalletDetail.tsx
new file mode 100644
index 00000000000..afcc8d9a285
--- /dev/null
+++ b/packages/clerk-js/src/ui/userProfile/web3Wallets/Web3WalletDetail.tsx
@@ -0,0 +1,141 @@
+// @ts-ignore
+import { default as BinIcon } from '@clerk/shared/assets/icons/bin.svg';
+// @ts-ignore
+import { default as MailIcon } from '@clerk/shared/assets/icons/mail.svg';
+import { Button } from '@clerk/shared/components/button';
+import { List } from '@clerk/shared/components/list';
+import { VerificationStatusTag } from '@clerk/shared/components/tag';
+import { TitledCard } from '@clerk/shared/components/titledCard';
+import { Toggle } from '@clerk/shared/components/toggle';
+import React from 'react';
+import { handleError } from 'ui/common';
+import { Alert } from 'ui/common/alert';
+import { useCoreUser } from 'ui/contexts';
+import { useNavigate } from 'ui/hooks';
+import { useRouter } from 'ui/router';
+import { PageHeading } from 'ui/userProfile/pageHeading';
+
+import { EditableListFieldRemoveCard } from '../EditableListFieldRemoveCard';
+import { PrimaryTag } from '../util';
+
+export function Web3WalletDetail(): JSX.Element | null {
+  const { navigate } = useNavigate();
+  const user = useCoreUser();
+  const { params } = useRouter();
+  const [showRemovalPage, setShowRemovalPage] = React.useState<boolean>(false);
+  const [error, setError] = React.useState<string | undefined>();
+
+  const web3Wallet = user.web3Wallets.find(ea => ea.id === params.web3_wallet_id);
+  const isPrimary = web3Wallet?.id === user.primaryWeb3WalletId;
+
+  if (!web3Wallet) {
+    return null;
+  }
+
+  const verificationStatus = web3Wallet.verification?.status || '';
+  const isVerified = web3Wallet.verification?.status === 'verified';
+
+  const handleRemove = () => {
+    setShowRemovalPage(true);
+  };
+
+  const onWeb3WalletRemove = () => {
+    return web3Wallet.destroy();
+  };
+
+  const makeIdentPrimary = async () => {
+    await user.update({ primaryWeb3WalletId: web3Wallet.id }).catch(e => handleError(e, [], setError));
+  };
+
+  const removeWeb3WalletScreen = (
+    <EditableListFieldRemoveCard
+      type='web3_wallet'
+      label={web3Wallet.web3Wallet}
+      onCancel={() => {
+        setShowRemovalPage(false);
+      }}
+      onRemove={onWeb3WalletRemove}
+      onRemoved={() => {
+        navigate('../');
+      }}
+    />
+  );
+
+  return (
+    <>
+      <PageHeading
+        title='Web3 wallet'
+        subtitle={isVerified ? 'Manage this Web3 wallet' : 'Verify this Web3 wallet'}
+        backTo='./../'
+      />
+      {showRemovalPage && removeWeb3WalletScreen}
+      {!showRemovalPage && (
+        <TitledCard className='cl-themed-card cl-list-card cl-verifiable-field-card'>
+          <Alert
+            type='error'
+            style={{ margin: '0 2em' }}
+          >
+            {error}
+          </Alert>
+
+          <List>
+            <List.Item
+              className='cl-list-item'
+              hoverable={false}
+              detail={false}
+              lines
+            >
+              <div>
+                <div className='cl-ident-detail'>
+                  {web3Wallet.web3Wallet}
+                  <div className='cl-tags'>
+                    {isPrimary && <PrimaryTag />}
+                    <VerificationStatusTag
+                      className='cl-tag'
+                      status={verificationStatus}
+                    />
+                  </div>
+                </div>
+              </div>
+            </List.Item>
+
+            {isVerified && (
+              <List.Item
+                className='cl-list-item'
+                hoverable={false}
+                detail={false}
+                lines
+              >
+                <div className='cl-primary-status-container'>
+                  <div className='cl-description'>
+                    <MailIcon />
+                    <div className='cl-text'>
+                      <div className='cl-title'>Primary web3 wallet</div>
+                    </div>
+                  </div>
+                  <Toggle
+                    name='primary_toggle'
+                    disabled={isPrimary}
+                    checked={isPrimary}
+                    handleChange={makeIdentPrimary}
+                  />
+                </div>
+              </List.Item>
+            )}
+          </List>
+          <Button
+            onClick={handleRemove}
+            className='cl-add-resource-button cl-remove-button'
+            type='button'
+            flavor='text'
+            buttonColor='error'
+            hoverable
+          >
+            <BinIcon />
+            Remove
+          </Button>
+        </TitledCard>
+      )}
+    </>
+  );
+}
diff --git a/packages/clerk-js/src/ui/userProfile/web3Wallets/Web3WalletList.test.tsx b/packages/clerk-js/src/ui/userProfile/web3Wallets/Web3WalletList.test.tsx
new file mode 100644
index 00000000000..1edbf4e812a
--- /dev/null
+++ b/packages/clerk-js/src/ui/userProfile/web3Wallets/Web3WalletList.test.tsx
@@ -0,0 +1,36 @@
+import { renderJSON } from '@clerk/shared/testUtils';
+import { UserResource, Web3WalletResource } from '@clerk/types';
+import React from 'react';
+
+import { Web3WalletList } from './Web3WalletList';
+
+jest.mock('ui/router/RouteContext');
+
+jest.mock('ui/contexts/CoreUserContext', () => {
+  return {
+    useCoreUser: (): Partial<UserResource> => {
+      return {
+        primaryWeb3WalletId: 'test-id-1',
+        web3Wallets: [
+          {
+            id: 'test-id-1',
+            web3Wallet: '0x0000000000000000000000000000000000000000',
+            verification: { status: 'verified' },
+          } as Web3WalletResource,
+          {
+            id: 'test-id-2',
+            web3Wallet: '0xFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF',
+            verification: { status: 'verified' },
+          } as Web3WalletResource,
+        ],
+      };
+    },
+  };
+});
+
+describe('<Web3WalletList/>', () => {
+  it('renders the list', () => {
+    const tree = renderJSON(<Web3WalletList />);
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/packages/clerk-js/src/ui/userProfile/web3Wallets/Web3WalletList.tsx b/packages/clerk-js/src/ui/userProfile/web3Wallets/Web3WalletList.tsx
new file mode 100644
index 00000000000..43558b12c58
--- /dev/null
+++ b/packages/clerk-js/src/ui/userProfile/web3Wallets/Web3WalletList.tsx
@@ -0,0 +1,83 @@
+import { Button } from '@clerk/shared/components/button';
+import { List } from '@clerk/shared/components/list';
+import { VerificationStatusTag } from '@clerk/shared/components/tag';
+import { TitledCard } from '@clerk/shared/components/titledCard';
+import { Web3WalletResource } from '@clerk/types';
+import React from 'react';
+import { useCoreUser } from 'ui/contexts';
+import { useRouter } from 'ui/router';
+import { PageHeading } from 'ui/userProfile/pageHeading';
+
+import { PrimaryTag } from '../util';
+
+type Web3WalletListItemProps = {
+  web3Wallet: Web3WalletResource;
+  handleClick: () => any | undefined;
+  isPrimary: boolean;
+};
+
+function Web3WalletListItem({ web3Wallet, handleClick, isPrimary }: Web3WalletListItemProps): JSX.Element {
+  const status = web3Wallet.verification.status || '';
+
+  return (
+    <List.Item
+      className='cl-list-item'
+      onClick={handleClick}
+    >
+      <div className='cl-web3-wallet-item'>
+        {web3Wallet.web3Wallet}{' '}
+        <div className='cl-tags'>
+          {isPrimary && <PrimaryTag />}
+          <VerificationStatusTag
+            className='cl-tag'
+            status={status}
+          />
+        </div>
+      </div>
+    </List.Item>
+  );
+}
+
+export function Web3WalletList(): JSX.Element {
+  const user = useCoreUser();
+  const router = useRouter();
+
+  const web3WalletItems = user.web3Wallets.map(web3Wallet => (
+    <Web3WalletListItem
+      key={web3Wallet.id}
+      web3Wallet={web3Wallet}
+      handleClick={() => router.navigate(web3Wallet.id)}
+      isPrimary={user.primaryWeb3WalletId === web3Wallet.id}
+    />
+  ));
+
+  return (
+    <>
+      <PageHeading
+        title='Web3 wallets'
+        subtitle='Manage web3 wallets associated with your account'
+        backTo='../'
+      />
+      <TitledCard className='cl-themed-card cl-list-card'>
+        {user.web3Wallets.length > 0 && <List>{web3WalletItems}</List>}
+        {user.web3Wallets.length === 0 && (
+          <>
+            <div className='cl-empty-list-item'>No web3 wallets to display</div>
+            {/*Since only Metamask wallet is supported for now, we don't allow the user to add another*/}
+            {/*Web3 wallet address. When we add support for more wallets, this logic should be refactored*/}
+            <Button
+              onClick={() => router.navigate('add')}
+              className='cl-add-resource-button'
+              type='button'
+              flavor='text'
+              buttonColor='primary'
+              hoverable
+            >
+              Add web3 wallet
+            </Button>
+          </>
+        )}
+      </TitledCard>
+    </>
+  );
+}
diff --git a/packages/clerk-js/src/ui/userProfile/web3Wallets/__snapshots__/AddNewWeb3Wallet.test.tsx.snap b/packages/clerk-js/src/ui/userProfile/web3Wallets/__snapshots__/AddNewWeb3Wallet.test.tsx.snap
new file mode 100644
index 00000000000..34fe0fdae0c
--- /dev/null
+++ b/packages/clerk-js/src/ui/userProfile/web3Wallets/__snapshots__/AddNewWeb3Wallet.test.tsx.snap
@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<AddNewWeb3Wallet/> renders the AddNewWeb3Wallet 1`] = `
+Array [
+  <div
+    className="cl-page-heading"
+  >
+    <a
+      aria-label="Back Button"
+      className="cl-back-button cl-back-button"
+      onClick={[Function]}
+    >
+      <svg
+        data-filename="../shared/assets/icons/arrow-left.svg"
+      />
+    </a>
+    <div
+      className="cl-text-container"
+    >
+      <h2
+        className="heading h2 cl-title"
+      >
+        Back
+      </h2>
+      <p
+        className="cl-subtitle"
+      />
+    </div>
+  </div>,
+  <div
+    className="card card cl-themed-card cl-verifiable-field-card"
+  >
+    <div
+      className="titleContainer"
+    >
+      <h1
+        className="title"
+      >
+        Add web3 wallet
+      </h1>
+      <p
+        className="subtitle"
+      >
+        Connect your web3 wallet
+      </p>
+    </div>
+    <div>
+      <button
+        className="cl-list-item elementContainer button hoverable"
+        disabled={false}
+        onClick={[Function]}
+      >
+        <div
+          className="listItem line"
+        >
+          <div
+            className="start"
+          >
+            <div>
+              <img
+                alt="metamask"
+                className="cl-left-icon-wrapper"
+                src="https://images.clerk.dev/static/metamask.svg"
+              />
+              Connect 
+              Metamask
+               wallet
+            </div>
+          </div>
+          <div
+            className="iconContainer"
+          >
+            <div
+              className="icon"
+            >
+              <svg
+                data-filename="../shared/assets/icons/arrow-right.svg"
+              />
+            </div>
+          </div>
+        </div>
+      </button>
+    </div>
+  </div>,
+]
+`;
diff --git a/packages/clerk-js/src/ui/userProfile/web3Wallets/__snapshots__/Web3WalletDetail.test.tsx.snap b/packages/clerk-js/src/ui/userProfile/web3Wallets/__snapshots__/Web3WalletDetail.test.tsx.snap
new file mode 100644
index 00000000000..cad6e80ee37
--- /dev/null
+++ b/packages/clerk-js/src/ui/userProfile/web3Wallets/__snapshots__/Web3WalletDetail.test.tsx.snap
@@ -0,0 +1,145 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Web3WalletDetail/> renders Web3WalletDetail 1`] = `
+Array [
+  <div
+    className="cl-page-heading"
+  >
+    <a
+      aria-label="Back Button"
+      className="cl-back-button cl-back-button"
+      onClick={[Function]}
+    >
+      <svg
+        data-filename="../shared/assets/icons/arrow-left.svg"
+      />
+    </a>
+    <div
+      className="cl-text-container"
+    >
+      <h2
+        className="heading h2 cl-title"
+      >
+        Web3 wallet
+      </h2>
+      <p
+        className="cl-subtitle"
+      >
+        Manage this Web3 wallet
+      </p>
+    </div>
+  </div>,
+  <div
+    className="card card cl-themed-card cl-list-card cl-verifiable-field-card"
+  >
+    <div>
+      <div
+        className="cl-list-item elementContainer"
+        disabled={false}
+      >
+        <div
+          className="listItem line"
+        >
+          <div
+            className="start"
+          >
+            <div>
+              <div
+                className="cl-ident-detail"
+              >
+                0x0000000000000000000000000000000000000000
+                <div
+                  className="cl-tags"
+                >
+                  <span
+                    className="tag primary sm cl-tag"
+                  >
+                    Primary
+                  </span>
+                  <span
+                    className="tag success sm cl-tag"
+                  >
+                    Verified
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            className="iconContainer"
+          />
+        </div>
+      </div>
+      <div
+        className="cl-list-item elementContainer"
+        disabled={false}
+      >
+        <div
+          className="listItem line"
+        >
+          <div
+            className="start"
+          >
+            <div
+              className="cl-primary-status-container"
+            >
+              <div
+                className="cl-description"
+              >
+                <svg
+                  data-filename="../shared/assets/icons/mail.svg"
+                />
+                <div
+                  className="cl-text"
+                >
+                  <div
+                    className="cl-title"
+                  >
+                    Primary web3 wallet
+                  </div>
+                </div>
+              </div>
+              <label
+                className="container disabled"
+                onKeyPress={[Function]}
+              >
+                <span
+                  aria-checked={true}
+                  className="toggle"
+                  role="switch"
+                  tabIndex={0}
+                >
+                  <input
+                    checked={true}
+                    disabled={true}
+                    name="primary_toggle"
+                    onChange={[Function]}
+                    tabIndex={-1}
+                    type="checkbox"
+                  />
+                  <span
+                    className="slider"
+                  />
+                </span>
+              </label>
+            </div>
+          </div>
+          <div
+            className="iconContainer"
+          />
+        </div>
+      </div>
+    </div>
+    <button
+      className="button text error hoverable cl-add-resource-button cl-remove-button"
+      onClick={[Function]}
+      type="button"
+    >
+      <svg
+        data-filename="../shared/assets/icons/bin.svg"
+      />
+      Remove
+    </button>
+  </div>,
+]
+`;
diff --git a/packages/clerk-js/src/ui/userProfile/web3Wallets/__snapshots__/Web3WalletList.test.tsx.snap b/packages/clerk-js/src/ui/userProfile/web3Wallets/__snapshots__/Web3WalletList.test.tsx.snap
new file mode 100644
index 00000000000..39944412e13
--- /dev/null
+++ b/packages/clerk-js/src/ui/userProfile/web3Wallets/__snapshots__/Web3WalletList.test.tsx.snap
@@ -0,0 +1,116 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Web3WalletList/> renders the list 1`] = `
+Array [
+  <div
+    className="cl-page-heading"
+  >
+    <a
+      aria-label="Back Button"
+      className="cl-back-button cl-back-button"
+      onClick={[Function]}
+    >
+      <svg
+        data-filename="../shared/assets/icons/arrow-left.svg"
+      />
+    </a>
+    <div
+      className="cl-text-container"
+    >
+      <h2
+        className="heading h2 cl-title"
+      >
+        Web3 wallets
+      </h2>
+      <p
+        className="cl-subtitle"
+      >
+        Manage web3 wallets associated with your account
+      </p>
+    </div>
+  </div>,
+  <div
+    className="card card cl-themed-card cl-list-card"
+  >
+    <div>
+      <button
+        className="cl-list-item elementContainer button hoverable"
+        disabled={false}
+        onClick={[Function]}
+      >
+        <div
+          className="listItem line"
+        >
+          <div
+            className="start"
+          >
+            <div
+              className="cl-web3-wallet-item"
+            >
+              0x0000000000000000000000000000000000000000
+               
+              <div
+                className="cl-tags"
+              >
+                <span
+                  className="tag primary sm cl-tag"
+                >
+                  Primary
+                </span>
+                <span
+                  className="tag success sm cl-tag"
+                >
+                  Verified
+                </span>
+              </div>
+            </div>
+          </div>
+          <div
+            className="iconContainer"
+          >
+            <svg
+              data-filename="../shared/assets/icons/arrow-right.svg"
+            />
+          </div>
+        </div>
+      </button>
+      <button
+        className="cl-list-item elementContainer button hoverable"
+        disabled={false}
+        onClick={[Function]}
+      >
+        <div
+          className="listItem line"
+        >
+          <div
+            className="start"
+          >
+            <div
+              className="cl-web3-wallet-item"
+            >
+              0xFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
+               
+              <div
+                className="cl-tags"
+              >
+                <span
+                  className="tag success sm cl-tag"
+                >
+                  Verified
+                </span>
+              </div>
+            </div>
+          </div>
+          <div
+            className="iconContainer"
+          >
+            <svg
+              data-filename="../shared/assets/icons/arrow-right.svg"
+            />
+          </div>
+        </div>
+      </button>
+    </div>
+  </div>,
+]
+`;
diff --git a/packages/clerk-js/src/ui/userProfile/web3Wallets/index.tsx b/packages/clerk-js/src/ui/userProfile/web3Wallets/index.tsx
new file mode 100644
index 00000000000..b86a655a5ad
--- /dev/null
+++ b/packages/clerk-js/src/ui/userProfile/web3Wallets/index.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Route } from 'ui/router';
+
+import { AddNewWeb3Wallet } from './AddNewWeb3Wallet';
+import { Web3WalletDetail } from './Web3WalletDetail';
+import { Web3WalletList } from './Web3WalletList';
+
+export { AddNewWeb3Wallet, Web3WalletDetail, Web3WalletList };
+
+export function Web3WalletsRoutes(): JSX.Element {
+  return (
+    <Route path='web3-wallets'>
+      <Route index>
+        <Web3WalletList />
+      </Route>
+      <Route path=':web3_wallet_id'>
+        <Web3WalletDetail />
+      </Route>
+      <Route path='add'>
+        <AddNewWeb3Wallet />
+      </Route>
+    </Route>
+  );
+}
diff --git a/packages/types/src/user.ts b/packages/types/src/user.ts
index 7a01bef6631..32b39347019 100644
--- a/packages/types/src/user.ts
+++ b/packages/types/src/user.ts
@@ -61,7 +61,7 @@ export interface UserResource extends ClerkResource {
   createPhoneNumber: (params: CreatePhoneNumberParams) => Promise<PhoneNumberResource>;
   createWeb3Wallet: (params: CreateWeb3WalletParams) => Promise<Web3WalletResource>;
   twoFactorEnabled: () => boolean;
-  isPrimaryIdentification: (ident: EmailAddressResource | PhoneNumberResource) => boolean;
+  isPrimaryIdentification: (ident: EmailAddressResource | PhoneNumberResource | Web3WalletResource) => boolean;
   getSessions: () => Promise<SessionWithActivitiesResource[]>;
   setProfileImage: (params: SetProfileImageParams) => Promise<ImageResource>;
   createExternalAccount: ({

From 04cd4f071f829bf834d3f6d187a5b030d722ef8b Mon Sep 17 00:00:00 2001
From: Alexandros Ntousias <antousias@gmail.com>
Date: Wed, 1 Jun 2022 07:41:48 +0300
Subject: [PATCH 4/8] chore(clerk-js): Removed deprecation on setSession

In a previous commit, we introduced `setActive`
which would replace the existing `setSession`. As
such, the `setSession` was marked as deprecated.

This commit removes the deprecation warning on
`setSession`. Given how critical this function is,
we decided to avoid switching to `setActive` yet,
until it's fully and thoroughly tested.
Also, its implementation was reverted so that it
avoids calling `setActive` internally.

https://www.notion.so/clerkdev/Add-ClerkJS-method-to-set-the-active-organization-2f551fafdbd14834a7b5519e87c6f254
---
 packages/clerk-js/src/core/clerk.ts | 57 ++++++++++++++++++++++++++++-
 1 file changed, 55 insertions(+), 2 deletions(-)

diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
index c3ae027d4dd..05f03cf4200 100644
--- a/packages/clerk-js/src/core/clerk.ts
+++ b/packages/clerk-js/src/core/clerk.ts
@@ -256,6 +256,12 @@ export default class Clerk implements ClerkInterface {
     });
   };
 
+  /**
+   * `setActive` can be used to set the active session and/or organization.
+   * It will eventually replace `setSession`.
+   *
+   * @experimental
+   */
   public setActive = async ({ session, organization, beforeEmit }: SetActiveParams): Promise<void> => {
     if (!this.client) {
       throw new Error('setActive is being called before the client is loaded. Wait for init.');
@@ -330,12 +336,59 @@ export default class Clerk implements ClerkInterface {
     this.#resetComponentsState();
   };
 
-  /** @deprecated Use `setActive` instead */
   public setSession = async (
     session: ActiveSessionResource | string | null,
     beforeEmit?: BeforeEmitCallback,
   ): Promise<void> => {
-    await this.setActive({ session, beforeEmit });
+    if (!this.client) {
+      throw new Error('setSession is being called before the client is loaded. Wait for init.');
+    }
+
+    if (typeof session === 'string') {
+      session = (this.client.sessions.find(x => x.id === session) as ActiveSessionResource) || null;
+    }
+
+    this.#authService?.setAuthCookiesFromSession(session);
+
+    // If this.session exists, then signout was triggered by the current tab
+    // and should emit. Other tabs should not emit the same event again
+    if (this.session && session === null) {
+      this.#broadcastSignOutEvent();
+    }
+
+    //1. setLastActiveSession to passed usersession (add a param)
+    if (typeof document != 'undefined' && document.hasFocus()) {
+      await this.#touchLastActiveSession(session);
+    }
+
+    //2. If there's a beforeEmit, typically we're navigating.  Emit the session as
+    //   undefined, then wait for beforeEmit to complete before emitting the new session.
+    //   When undefined, neither SignedIn nor SignedOut renders, which avoids flickers or
+    //   automatic reloading when reloading shouldn't be happening.
+    const beforeUnloadTracker = createBeforeUnloadTracker();
+    if (beforeEmit) {
+      beforeUnloadTracker.startTracking();
+      this.session = undefined;
+      this.organization = undefined;
+      this.user = undefined;
+      this.#emit();
+      await beforeEmit(session);
+      beforeUnloadTracker.stopTracking();
+    }
+
+    //3. Check if hard reloading (onbeforeunload).  If not, set the user/session and emit
+    if (beforeUnloadTracker.isUnloading()) {
+      return;
+    }
+
+    this.session = session;
+    this.organization = (this.session?.user.organizationMemberships || [])
+      .map(om => om.organization)
+      .find(org => org.id === this.session?.lastActiveOrganizationId);
+    this.user = this.session ? this.session.user : null;
+
+    this.#emit();
+    this.#resetComponentsState();
   };
 
   public addListener = (listener: ListenerCallback): UnsubscribeCallback => {

From 798ee622e7961d3aa7f8842184f5fadbcfed517f Mon Sep 17 00:00:00 2001
From: Alexandros Ntousias <antousias@gmail.com>
Date: Wed, 1 Jun 2022 08:04:54 +0300
Subject: [PATCH 5/8] fix(clerk-js): Emit changes in organization to listeners

Added organization in the resources that are being
emitted to the listeners.

https://www.notion.so/clerkdev/Add-ClerkJS-method-to-set-the-active-organization-2f551fafdbd14834a7b5519e87c6f254
---
 packages/clerk-js/src/core/clerk.ts           |  2 ++
 .../ui/contexts/CoreClerkContextWrapper.tsx   |  1 +
 .../src/utils/memoizeStateListenerCallback.ts | 19 +++++++++++++------
 .../src/contexts/ClerkContextProvider.tsx     |  1 +
 packages/react/src/isomorphicClerk.ts         |  8 ++++++++
 packages/types/src/clerk.ts                   |  1 +
 6 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
index 05f03cf4200..994bd473619 100644
--- a/packages/clerk-js/src/core/clerk.ts
+++ b/packages/clerk-js/src/core/clerk.ts
@@ -400,6 +400,7 @@ export default class Clerk implements ClerkInterface {
         client: this.client,
         session: this.session,
         user: this.user,
+        organization: this.organization,
       });
     }
 
@@ -846,6 +847,7 @@ export default class Clerk implements ClerkInterface {
           client: this.client,
           session: this.session,
           user: this.user,
+          organization: this.organization,
         });
       }
     }
diff --git a/packages/clerk-js/src/ui/contexts/CoreClerkContextWrapper.tsx b/packages/clerk-js/src/ui/contexts/CoreClerkContextWrapper.tsx
index b66f0ffd972..95016c3b912 100644
--- a/packages/clerk-js/src/ui/contexts/CoreClerkContextWrapper.tsx
+++ b/packages/clerk-js/src/ui/contexts/CoreClerkContextWrapper.tsx
@@ -23,6 +23,7 @@ export function CoreClerkContextWrapper(props: CoreClerkContextWrapperProps): JS
     client: clerk.client,
     session: clerk.session,
     user: clerk.user,
+    organization: clerk.organization,
   });
 
   React.useEffect(() => {
diff --git a/packages/clerk-js/src/utils/memoizeStateListenerCallback.ts b/packages/clerk-js/src/utils/memoizeStateListenerCallback.ts
index 481ec69fbf2..418f254dd74 100644
--- a/packages/clerk-js/src/utils/memoizeStateListenerCallback.ts
+++ b/packages/clerk-js/src/utils/memoizeStateListenerCallback.ts
@@ -1,8 +1,15 @@
-import { ClientResource, ListenerCallback, Resources, SessionResource, UserResource } from '@clerk/types';
+import {
+  ClientResource,
+  ListenerCallback,
+  OrganizationResource,
+  Resources,
+  SessionResource,
+  UserResource,
+} from '@clerk/types';
 
 import { Client, Session, User } from '../core/resources/internal';
 
-type AcceptedResource = UserResource | ClientResource | SessionResource;
+type AcceptedResource = UserResource | ClientResource | SessionResource | OrganizationResource;
 
 function clientChanged(prev: ClientResource, next: ClientResource): boolean {
   return (
@@ -56,10 +63,9 @@ function resourceChanged<T extends AcceptedResource | undefined | null>(prev: T,
   return true;
 }
 
-function getSameOrUpdatedResource<T extends UserResource | ClientResource | SessionResource | undefined | null>(
-  prev: T,
-  next: T,
-): T {
+function getSameOrUpdatedResource<
+  T extends UserResource | ClientResource | SessionResource | OrganizationResource | undefined | null,
+>(prev: T, next: T): T {
   return resourceChanged(prev, next) ? next : prev;
 }
 
@@ -68,6 +74,7 @@ function stateWithMemoizedResources(cur: Resources, next: Resources): Resources
     client: getSameOrUpdatedResource(cur.client, next.client),
     session: getSameOrUpdatedResource(cur.session, next.session),
     user: getSameOrUpdatedResource(cur.user, next.user),
+    organization: getSameOrUpdatedResource(cur.organization, next.organization),
   };
 }
 
diff --git a/packages/react/src/contexts/ClerkContextProvider.tsx b/packages/react/src/contexts/ClerkContextProvider.tsx
index 02d766e5f5b..eb5c202980d 100644
--- a/packages/react/src/contexts/ClerkContextProvider.tsx
+++ b/packages/react/src/contexts/ClerkContextProvider.tsx
@@ -24,6 +24,7 @@ export function ClerkContextProvider(props: ClerkContextProvider): JSX.Element |
     client: clerk.client as ClientResource,
     session: clerk.session,
     user: clerk.user,
+    organization: clerk.organization,
   });
   const derivedState = deriveState(clerkLoaded, state, initialState);
 
diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts
index 3a8650e6662..249e087bbce 100644
--- a/packages/react/src/isomorphicClerk.ts
+++ b/packages/react/src/isomorphicClerk.ts
@@ -229,6 +229,14 @@ export default class IsomorphicClerk {
     }
   }
 
+  get organization(): OrganizationResource | undefined | null {
+    if (this.clerkjs) {
+      return this.clerkjs.organization;
+    } else {
+      return undefined;
+    }
+  }
+
   // TODO: Remove temp use of __unstable__environment
   get __unstable__environment(): any {
     if (this.clerkjs) {
diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts
index d490950d5c0..e58041e1496 100644
--- a/packages/types/src/clerk.ts
+++ b/packages/types/src/clerk.ts
@@ -299,6 +299,7 @@ export interface Resources {
   client: ClientResource;
   session?: ActiveSessionResource | null;
   user?: UserResource | null;
+  organization?: OrganizationResource | null;
 }
 
 export type RoutingStrategy = 'path' | 'hash' | 'virtual';

From 872c57d533b49028d8120276b81bfb11576e4023 Mon Sep 17 00:00:00 2001
From: Alexandros Ntousias <antousias@gmail.com>
Date: Wed, 1 Jun 2022 08:12:02 +0300
Subject: [PATCH 6/8] refactor(clerk-js): Allow setActive to receive an
 organization resource

Modified signature of `setActive` so that the organization
can also be an `OrganizationResource`.

https://www.notion.so/clerkdev/Add-ClerkJS-method-to-set-the-active-organization-2f551fafdbd14834a7b5519e87c6f254
---
 packages/clerk-js/src/core/clerk.ts | 8 +++++++-
 packages/types/src/clerk.ts         | 4 ++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
index 994bd473619..ec86cf598f8 100644
--- a/packages/clerk-js/src/core/clerk.ts
+++ b/packages/clerk-js/src/core/clerk.ts
@@ -286,7 +286,13 @@ export default class Clerk implements ClerkInterface {
     // However, if the `organization` parameter is not given (i.e. `undefined`), we want
     // to keep the organization id that the session had.
     if (session && organization !== undefined) {
-      session.lastActiveOrganizationId = organization;
+      if (organization === null) {
+        session.lastActiveOrganizationId = null;
+      } else if (typeof organization === 'string') {
+        session.lastActiveOrganizationId = organization;
+      } else {
+        session.lastActiveOrganizationId = organization.id;
+      }
     }
 
     if (session) {
diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts
index e58041e1496..a98196bb7cb 100644
--- a/packages/types/src/clerk.ts
+++ b/packages/types/src/clerk.ts
@@ -334,10 +334,10 @@ export type SetActiveParams = {
   session?: ActiveSessionResource | string | null;
 
   /**
-   * The organization id to be set as active in the current session.
+   * The organization resource or organization id (string version) to be set as active in the current session.
    * If `null`, the currently active organization is removed as active.
    */
-  organization?: string | null;
+  organization?: OrganizationResource | string | null;
 
   /**
    * Callback run just before the active session and/or organization is set to the passed object.

From 37f4010362e8af4ea8aa62f8bf925df4527906ef Mon Sep 17 00:00:00 2001
From: Alexandros Ntousias <antousias@gmail.com>
Date: Wed, 1 Jun 2022 08:38:02 +0300
Subject: [PATCH 7/8] fix(clerk-js): Fixed bugs in `setActive` caused by new
 conditions on session

The `setActive` contains a few new conditions on the
`session` param, given that in this case `session` can
also be undefined (which is something we didn't have
in the previous `setSession`).

However, given that we use the current session if we
don't pass a `session`, a lot of these checks can be
removed.

They were wrong in the first place, because they were
also preventing the execution for `session === null`
so the behaviour was different.

https://www.notion.so/clerkdev/Add-ClerkJS-method-to-set-the-active-organization-2f551fafdbd14834a7b5519e87c6f254
---
 packages/clerk-js/src/core/clerk.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
index ec86cf598f8..bb74692e98a 100644
--- a/packages/clerk-js/src/core/clerk.ts
+++ b/packages/clerk-js/src/core/clerk.ts
@@ -295,9 +295,7 @@ export default class Clerk implements ClerkInterface {
       }
     }
 
-    if (session) {
-      this.#authService?.setAuthCookiesFromSession(session);
-    }
+    this.#authService?.setAuthCookiesFromSession(session);
 
     // If this.session exists, then signout was triggered by the current tab
     // and should emit. Other tabs should not emit the same event again
@@ -308,7 +306,7 @@ export default class Clerk implements ClerkInterface {
     //1. setLastActiveSession to passed usersession (add a param).
     //   Note that this will also update the session's active organization
     //   id.
-    if (session && typeof document != 'undefined' && document.hasFocus()) {
+    if (typeof document != 'undefined' && document.hasFocus()) {
       await this.#touchLastActiveSession(session);
     }
 
@@ -317,7 +315,7 @@ export default class Clerk implements ClerkInterface {
     //   When undefined, neither SignedIn nor SignedOut renders, which avoids flickers or
     //   automatic reloading when reloading shouldn't be happening.
     const beforeUnloadTracker = createBeforeUnloadTracker();
-    if (session && beforeEmit) {
+    if (beforeEmit) {
       beforeUnloadTracker.startTracking();
       this.session = undefined;
       this.organization = undefined;

From 358d11f005d7649ec899add9a9acab532cba59e4 Mon Sep 17 00:00:00 2001
From: Peter Perlepes <p.perlepes@gmail.com>
Date: Wed, 1 Jun 2022 18:13:57 +0300
Subject: [PATCH 8/8] chore(release): Publish

 - @clerk/backend-core@1.9.1-staging.1
 - @clerk/clerk-js@3.12.0-staging.6
 - @clerk/edge@1.5.2-staging.1
 - @clerk/clerk-expo@0.9.25-staging.1
 - @clerk/nextjs@3.6.6-staging.1
 - @clerk/clerk-react@3.3.0-staging.1
 - @clerk/remix@0.5.1-staging.1
 - @clerk/clerk-sdk-node@3.6.1-staging.1
 - @clerk/shared@0.2.8-staging.1
 - @clerk/types@2.15.0-staging.1
---
 package-lock.json                  | 88 +++++++++++++++---------------
 packages/backend-core/CHANGELOG.md |  4 ++
 packages/backend-core/package.json |  4 +-
 packages/clerk-js/CHANGELOG.md     | 13 +++++
 packages/clerk-js/package.json     |  6 +-
 packages/edge/CHANGELOG.md         |  4 ++
 packages/edge/package.json         |  4 +-
 packages/edge/src/info.ts          |  2 +-
 packages/expo/CHANGELOG.md         |  4 ++
 packages/expo/package.json         |  6 +-
 packages/nextjs/CHANGELOG.md       |  4 ++
 packages/nextjs/package.json       | 10 ++--
 packages/react/CHANGELOG.md        |  6 ++
 packages/react/package.json        |  4 +-
 packages/react/src/info.ts         |  2 +-
 packages/remix/CHANGELOG.md        |  4 ++
 packages/remix/package.json        |  8 +--
 packages/sdk-node/CHANGELOG.md     |  4 ++
 packages/sdk-node/package.json     |  6 +-
 packages/sdk-node/src/info.ts      |  2 +-
 packages/shared/CHANGELOG.md       |  4 ++
 packages/shared/package.json       |  4 +-
 packages/types/CHANGELOG.md        | 11 ++++
 packages/types/package.json        |  2 +-
 24 files changed, 132 insertions(+), 74 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 263247ae2dc..bd82e75ba7f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35162,10 +35162,10 @@
     },
     "packages/backend-core": {
       "name": "@clerk/backend-core",
-      "version": "1.9.1-staging.0",
+      "version": "1.9.1-staging.1",
       "license": "MIT",
       "dependencies": {
-        "@clerk/types": "^2.15.0-staging.0",
+        "@clerk/types": "^2.15.0-staging.1",
         "query-string": "^7.0.1",
         "snakecase-keys": "^5.1.2",
         "tslib": "^2.3.1"
@@ -35191,10 +35191,10 @@
     },
     "packages/clerk-js": {
       "name": "@clerk/clerk-js",
-      "version": "3.12.0-staging.5",
+      "version": "3.12.0-staging.6",
       "license": "MIT",
       "dependencies": {
-        "@clerk/types": "^2.15.0-staging.0",
+        "@clerk/types": "^2.15.0-staging.1",
         "@emotion/cache": "^11.7.1",
         "@emotion/react": "^11.9.0",
         "@popperjs/core": "^2.4.4",
@@ -35216,7 +35216,7 @@
         "@babel/preset-env": "^7.12.1",
         "@babel/preset-react": "^7.12.5",
         "@babel/preset-typescript": "^7.12.1",
-        "@clerk/shared": "^0.2.8-staging.0",
+        "@clerk/shared": "^0.2.8-staging.1",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.6",
         "@svgr/webpack": "^6.2.1",
         "@testing-library/dom": "^7.28.1",
@@ -35336,10 +35336,10 @@
     },
     "packages/edge": {
       "name": "@clerk/edge",
-      "version": "1.5.2-staging.0",
+      "version": "1.5.2-staging.1",
       "license": "MIT",
       "dependencies": {
-        "@clerk/backend-core": "^1.9.1-staging.0",
+        "@clerk/backend-core": "^1.9.1-staging.1",
         "@peculiar/webcrypto": "^1.2.3",
         "next": "^12.0.7"
       },
@@ -35362,15 +35362,15 @@
     },
     "packages/expo": {
       "name": "@clerk/clerk-expo",
-      "version": "0.9.25-staging.0",
+      "version": "0.9.25-staging.1",
       "license": "MIT",
       "dependencies": {
         "@clerk/clerk-js": "^3.12.0",
-        "@clerk/clerk-react": "^3.3.0-staging.0",
+        "@clerk/clerk-react": "^3.3.0-staging.1",
         "base-64": "^1.0.0"
       },
       "devDependencies": {
-        "@clerk/types": "^2.15.0-staging.0",
+        "@clerk/types": "^2.15.0-staging.1",
         "@types/jest": "^27.4.0",
         "@types/node": "^16.11.9",
         "@types/react": "^17.0.39",
@@ -35565,13 +35565,13 @@
     },
     "packages/nextjs": {
       "name": "@clerk/nextjs",
-      "version": "3.6.6-staging.0",
+      "version": "3.6.6-staging.1",
       "license": "MIT",
       "dependencies": {
-        "@clerk/clerk-react": "^3.3.0-staging.0",
-        "@clerk/clerk-sdk-node": "^3.6.1-staging.0",
-        "@clerk/edge": "^1.5.2-staging.0",
-        "@clerk/types": "^2.15.0-staging.0",
+        "@clerk/clerk-react": "^3.3.0-staging.1",
+        "@clerk/clerk-sdk-node": "^3.6.1-staging.1",
+        "@clerk/edge": "^1.5.2-staging.1",
+        "@clerk/types": "^2.15.0-staging.1",
         "tslib": "^2.3.1"
       },
       "devDependencies": {
@@ -35601,10 +35601,10 @@
     },
     "packages/react": {
       "name": "@clerk/clerk-react",
-      "version": "3.3.0-staging.0",
+      "version": "3.3.0-staging.1",
       "license": "MIT",
       "dependencies": {
-        "@clerk/types": "^2.15.0-staging.0",
+        "@clerk/types": "^2.15.0-staging.1",
         "tslib": "^2.3.1"
       },
       "devDependencies": {
@@ -35641,12 +35641,12 @@
     },
     "packages/remix": {
       "name": "@clerk/remix",
-      "version": "0.5.1-staging.0",
+      "version": "0.5.1-staging.1",
       "license": "MIT",
       "dependencies": {
-        "@clerk/clerk-react": "^3.3.0-staging.0",
-        "@clerk/clerk-sdk-node": "^3.6.1-staging.0",
-        "@clerk/types": "^2.15.0-staging.0",
+        "@clerk/clerk-react": "^3.3.0-staging.1",
+        "@clerk/clerk-sdk-node": "^3.6.1-staging.1",
+        "@clerk/types": "^2.15.0-staging.1",
         "cookie": "^0.5.0",
         "tslib": "^2.3.1"
       },
@@ -35692,11 +35692,11 @@
     },
     "packages/sdk-node": {
       "name": "@clerk/clerk-sdk-node",
-      "version": "3.6.1-staging.0",
+      "version": "3.6.1-staging.1",
       "license": "MIT",
       "dependencies": {
-        "@clerk/backend-core": "^1.9.1-staging.0",
-        "@clerk/types": "^2.15.0-staging.0",
+        "@clerk/backend-core": "^1.9.1-staging.1",
+        "@clerk/types": "^2.15.0-staging.1",
         "@peculiar/webcrypto": "^1.2.3",
         "camelcase-keys": "^6.2.2",
         "cookies": "^0.8.0",
@@ -35769,12 +35769,12 @@
     },
     "packages/shared": {
       "name": "@clerk/shared",
-      "version": "0.2.8-staging.0",
+      "version": "0.2.8-staging.1",
       "devDependencies": {
         "@babel/core": "^7.13.14",
         "@babel/preset-env": "^7.13.12",
         "@babel/preset-react": "^7.13.13",
-        "@clerk/types": "^2.15.0-staging.0",
+        "@clerk/types": "^2.15.0-staging.1",
         "@popperjs/core": "^2.5.4",
         "@sentry/browser": "^6.3.0",
         "@svgr/webpack": "^6.2.1",
@@ -35828,7 +35828,7 @@
     },
     "packages/types": {
       "name": "@clerk/types",
-      "version": "2.15.0-staging.0",
+      "version": "2.15.0-staging.1",
       "license": "MIT",
       "devDependencies": {
         "@types/jest": "^27.4.0",
@@ -37069,7 +37069,7 @@
     "@clerk/backend-core": {
       "version": "file:packages/backend-core",
       "requires": {
-        "@clerk/types": "^2.15.0-staging.0",
+        "@clerk/types": "^2.15.0-staging.1",
         "@peculiar/webcrypto": "^1.3.2",
         "@types/jest": "^27.4.0",
         "@types/node": "^16.11.12",
@@ -37097,8 +37097,8 @@
       "version": "file:packages/expo",
       "requires": {
         "@clerk/clerk-js": "^3.12.0",
-        "@clerk/clerk-react": "^3.3.0-staging.0",
-        "@clerk/types": "^2.15.0-staging.0",
+        "@clerk/clerk-react": "^3.3.0-staging.1",
+        "@clerk/types": "^2.15.0-staging.1",
         "@types/jest": "^27.4.0",
         "@types/node": "^16.11.9",
         "@types/react": "^17.0.39",
@@ -37155,8 +37155,8 @@
         "@babel/preset-env": "^7.12.1",
         "@babel/preset-react": "^7.12.5",
         "@babel/preset-typescript": "^7.12.1",
-        "@clerk/shared": "^0.2.8-staging.0",
-        "@clerk/types": "^2.15.0-staging.0",
+        "@clerk/shared": "^0.2.8-staging.1",
+        "@clerk/types": "^2.15.0-staging.1",
         "@emotion/cache": "^11.7.1",
         "@emotion/react": "^11.9.0",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.6",
@@ -37266,7 +37266,7 @@
     "@clerk/clerk-react": {
       "version": "file:packages/react",
       "requires": {
-        "@clerk/types": "^2.15.0-staging.0",
+        "@clerk/types": "^2.15.0-staging.1",
         "@testing-library/dom": "^7.28.1",
         "@testing-library/jest-dom": "^5.11.6",
         "@testing-library/react": "^11.2.1",
@@ -37298,8 +37298,8 @@
     "@clerk/clerk-sdk-node": {
       "version": "file:packages/sdk-node",
       "requires": {
-        "@clerk/backend-core": "^1.9.1-staging.0",
-        "@clerk/types": "^2.15.0-staging.0",
+        "@clerk/backend-core": "^1.9.1-staging.1",
+        "@clerk/types": "^2.15.0-staging.1",
         "@peculiar/webcrypto": "^1.2.3",
         "@types/cookies": "^0.7.7",
         "@types/express": "^4.17.11",
@@ -37355,7 +37355,7 @@
     "@clerk/edge": {
       "version": "file:packages/edge",
       "requires": {
-        "@clerk/backend-core": "^1.9.1-staging.0",
+        "@clerk/backend-core": "^1.9.1-staging.1",
         "@peculiar/webcrypto": "^1.2.3",
         "@types/jest": "^27.4.0",
         "@types/node": "^16.11.12",
@@ -37376,10 +37376,10 @@
     "@clerk/nextjs": {
       "version": "file:packages/nextjs",
       "requires": {
-        "@clerk/clerk-react": "^3.3.0-staging.0",
-        "@clerk/clerk-sdk-node": "^3.6.1-staging.0",
-        "@clerk/edge": "^1.5.2-staging.0",
-        "@clerk/types": "^2.15.0-staging.0",
+        "@clerk/clerk-react": "^3.3.0-staging.1",
+        "@clerk/clerk-sdk-node": "^3.6.1-staging.1",
+        "@clerk/edge": "^1.5.2-staging.1",
+        "@clerk/types": "^2.15.0-staging.1",
         "@types/jest": "^27.4.0",
         "@types/node": "^16.11.9",
         "@types/react": "^17.0.39",
@@ -37404,9 +37404,9 @@
     "@clerk/remix": {
       "version": "file:packages/remix",
       "requires": {
-        "@clerk/clerk-react": "^3.3.0-staging.0",
-        "@clerk/clerk-sdk-node": "^3.6.1-staging.0",
-        "@clerk/types": "^2.15.0-staging.0",
+        "@clerk/clerk-react": "^3.3.0-staging.1",
+        "@clerk/clerk-sdk-node": "^3.6.1-staging.1",
+        "@clerk/types": "^2.15.0-staging.1",
         "@types/cookie": "^0.5.0",
         "@types/jest": "^27.4.0",
         "@types/node": "^16.11.9",
@@ -37446,7 +37446,7 @@
         "@babel/core": "^7.13.14",
         "@babel/preset-env": "^7.13.12",
         "@babel/preset-react": "^7.13.13",
-        "@clerk/types": "^2.15.0-staging.0",
+        "@clerk/types": "^2.15.0-staging.1",
         "@popperjs/core": "^2.5.4",
         "@sentry/browser": "^6.3.0",
         "@svgr/webpack": "^6.2.1",
diff --git a/packages/backend-core/CHANGELOG.md b/packages/backend-core/CHANGELOG.md
index 042e9b3cacf..891eb22fa41 100644
--- a/packages/backend-core/CHANGELOG.md
+++ b/packages/backend-core/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [1.9.1-staging.1](https://github.com/clerkinc/javascript/compare/@clerk/backend-core@1.9.1-staging.0...@clerk/backend-core@1.9.1-staging.1) (2022-06-01)
+
+**Note:** Version bump only for package @clerk/backend-core
+
 ## [1.9.0](https://github.com/clerkinc/javascript/compare/@clerk/backend-core@1.9.0-staging.4...@clerk/backend-core@1.9.0) (2022-05-20)
 
 **Note:** Version bump only for package @clerk/backend-core
diff --git a/packages/backend-core/package.json b/packages/backend-core/package.json
index 9426cf75e19..8174e670c95 100644
--- a/packages/backend-core/package.json
+++ b/packages/backend-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@clerk/backend-core",
-  "version": "1.9.1-staging.0",
+  "version": "1.9.1-staging.1",
   "license": "MIT",
   "description": "Clerk Backend API core resources and authentication utilities for JavaScript environments.",
   "scripts": {
@@ -12,7 +12,7 @@
   "main": "dist/cjs/index.js",
   "module": "dist/mjs/index.js",
   "dependencies": {
-    "@clerk/types": "^2.15.0-staging.0",
+    "@clerk/types": "^2.15.0-staging.1",
     "query-string": "^7.0.1",
     "snakecase-keys": "^5.1.2",
     "tslib": "^2.3.1"
diff --git a/packages/clerk-js/CHANGELOG.md b/packages/clerk-js/CHANGELOG.md
index 2ab1e4496b4..026188a52ab 100644
--- a/packages/clerk-js/CHANGELOG.md
+++ b/packages/clerk-js/CHANGELOG.md
@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.12.0-staging.6](https://github.com/clerkinc/javascript/compare/@clerk/clerk-js@3.12.0-staging.5...@clerk/clerk-js@3.12.0-staging.6) (2022-06-01)
+
+### Features
+
+- **types,clerk-js:** Introduce web3 wallet operations in UserProfile ([6570a87](https://github.com/clerkinc/javascript/commit/6570a87439d92a59057b2df50ec482511428495e))
+
+### Bug Fixes
+
+- **clerk-js:** Do not show verification status badges for ext accnts on the user profile page ([0fa4f46](https://github.com/clerkinc/javascript/commit/0fa4f462931ca91560d8dc0d16259b910555c741))
+- **clerk-js:** Emit changes in organization to listeners ([798ee62](https://github.com/clerkinc/javascript/commit/798ee622e7961d3aa7f8842184f5fadbcfed517f))
+- **clerk-js:** Fixed bugs in `setActive` caused by new conditions on session ([37f4010](https://github.com/clerkinc/javascript/commit/37f4010362e8af4ea8aa62f8bf925df4527906ef))
+- **types,clerk-js:** Same component navigate after OAuth flow with missing requirements ([39ca6ce](https://github.com/clerkinc/javascript/commit/39ca6cee3a8a160fdf0ca95a713707afee55f1fc))
+
 ## [3.12.0](https://github.com/clerkinc/javascript/compare/@clerk/clerk-js@3.12.0-staging.4...@clerk/clerk-js@3.12.0) (2022-05-20)
 
 **Note:** Version bump only for package @clerk/clerk-js
diff --git a/packages/clerk-js/package.json b/packages/clerk-js/package.json
index fe4495f1252..e600fbd6027 100644
--- a/packages/clerk-js/package.json
+++ b/packages/clerk-js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@clerk/clerk-js",
-  "version": "3.12.0-staging.5",
+  "version": "3.12.0-staging.6",
   "license": "MIT",
   "description": "Clerk.dev JS library",
   "keywords": [
@@ -39,7 +39,7 @@
     "dev:v4": "webpack serve --config webpack.dev.v4.js"
   },
   "dependencies": {
-    "@clerk/types": "^2.15.0-staging.0",
+    "@clerk/types": "^2.15.0-staging.1",
     "@emotion/cache": "^11.7.1",
     "@emotion/react": "^11.9.0",
     "@popperjs/core": "^2.4.4",
@@ -61,7 +61,7 @@
     "@babel/preset-env": "^7.12.1",
     "@babel/preset-react": "^7.12.5",
     "@babel/preset-typescript": "^7.12.1",
-    "@clerk/shared": "^0.2.8-staging.0",
+    "@clerk/shared": "^0.2.8-staging.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.6",
     "@svgr/webpack": "^6.2.1",
     "@testing-library/dom": "^7.28.1",
diff --git a/packages/edge/CHANGELOG.md b/packages/edge/CHANGELOG.md
index 5ea07917508..48424d17dd6 100644
--- a/packages/edge/CHANGELOG.md
+++ b/packages/edge/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [1.5.2-staging.1](https://github.com/clerkinc/javascript/compare/@clerk/edge@1.5.2-staging.0...@clerk/edge@1.5.2-staging.1) (2022-06-01)
+
+**Note:** Version bump only for package @clerk/edge
+
 ### [1.5.1](https://github.com/clerkinc/javascript/compare/@clerk/edge@1.5.1-staging.4...@clerk/edge@1.5.1) (2022-05-20)
 
 **Note:** Version bump only for package @clerk/edge
diff --git a/packages/edge/package.json b/packages/edge/package.json
index 5a28892d6e8..e4621b18af3 100644
--- a/packages/edge/package.json
+++ b/packages/edge/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@clerk/edge",
-  "version": "1.5.2-staging.0",
+  "version": "1.5.2-staging.1",
   "license": "MIT",
   "description": "Clerk SDK for serverless and edge environments",
   "keywords": [
@@ -36,7 +36,7 @@
     "build": "node ./scripts/info.cjs && tsc -p tsconfig.esm.json && tsc -p tsconfig.cjs.json && ./moduleTypeFix"
   },
   "dependencies": {
-    "@clerk/backend-core": "^1.9.1-staging.0",
+    "@clerk/backend-core": "^1.9.1-staging.1",
     "@peculiar/webcrypto": "^1.2.3",
     "next": "^12.0.7"
   },
diff --git a/packages/edge/src/info.ts b/packages/edge/src/info.ts
index 81b4c90ee37..b3333525861 100644
--- a/packages/edge/src/info.ts
+++ b/packages/edge/src/info.ts
@@ -1,3 +1,3 @@
 /** DO NOT EDIT: This file is automatically generated by ../scripts/info.js */
-export const LIB_VERSION = '1.5.2-staging.0';
+export const LIB_VERSION = '1.5.2-staging.1';
 export const LIB_NAME = '@clerk/edge';
diff --git a/packages/expo/CHANGELOG.md b/packages/expo/CHANGELOG.md
index 70e9caa8b1c..208ceffddd9 100644
--- a/packages/expo/CHANGELOG.md
+++ b/packages/expo/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [0.9.25-staging.1](https://github.com/clerkinc/javascript/compare/@clerk/clerk-expo@0.9.25-staging.0...@clerk/clerk-expo@0.9.25-staging.1) (2022-06-01)
+
+**Note:** Version bump only for package @clerk/clerk-expo
+
 ### [0.9.24](https://github.com/clerkinc/javascript/compare/@clerk/clerk-expo@0.9.24-staging.5...@clerk/clerk-expo@0.9.24) (2022-05-20)
 
 **Note:** Version bump only for package @clerk/clerk-expo
diff --git a/packages/expo/package.json b/packages/expo/package.json
index 9d1a84481b8..df1c25b4557 100644
--- a/packages/expo/package.json
+++ b/packages/expo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@clerk/clerk-expo",
-  "version": "0.9.25-staging.0",
+  "version": "0.9.25-staging.1",
   "license": "MIT",
   "description": "Clerk.dev React Native/Expo library",
   "keywords": [
@@ -27,11 +27,11 @@
   },
   "dependencies": {
     "@clerk/clerk-js": "^3.12.0",
-    "@clerk/clerk-react": "^3.3.0-staging.0",
+    "@clerk/clerk-react": "^3.3.0-staging.1",
     "base-64": "^1.0.0"
   },
   "devDependencies": {
-    "@clerk/types": "^2.15.0-staging.0",
+    "@clerk/types": "^2.15.0-staging.1",
     "@types/jest": "^27.4.0",
     "@types/node": "^16.11.9",
     "@types/react": "^17.0.39",
diff --git a/packages/nextjs/CHANGELOG.md b/packages/nextjs/CHANGELOG.md
index b48db94e50a..c989bc9b8b4 100644
--- a/packages/nextjs/CHANGELOG.md
+++ b/packages/nextjs/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [3.6.6-staging.1](https://github.com/clerkinc/javascript/compare/@clerk/nextjs@3.6.6-staging.0...@clerk/nextjs@3.6.6-staging.1) (2022-06-01)
+
+**Note:** Version bump only for package @clerk/nextjs
+
 ### [3.6.5](https://github.com/clerkinc/javascript/compare/@clerk/nextjs@3.6.5-staging.4...@clerk/nextjs@3.6.5) (2022-05-20)
 
 **Note:** Version bump only for package @clerk/nextjs
diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
index 4154814bb0e..51c1cc4d100 100644
--- a/packages/nextjs/package.json
+++ b/packages/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@clerk/nextjs",
-  "version": "3.6.6-staging.0",
+  "version": "3.6.6-staging.1",
   "license": "MIT",
   "description": "Clerk.dev SDK for NextJS",
   "keywords": [
@@ -32,10 +32,10 @@
     "dev": "tsc -p tsconfig.build.json --watch"
   },
   "dependencies": {
-    "@clerk/clerk-react": "^3.3.0-staging.0",
-    "@clerk/clerk-sdk-node": "^3.6.1-staging.0",
-    "@clerk/edge": "^1.5.2-staging.0",
-    "@clerk/types": "^2.15.0-staging.0",
+    "@clerk/clerk-react": "^3.3.0-staging.1",
+    "@clerk/clerk-sdk-node": "^3.6.1-staging.1",
+    "@clerk/edge": "^1.5.2-staging.1",
+    "@clerk/types": "^2.15.0-staging.1",
     "tslib": "^2.3.1"
   },
   "devDependencies": {
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index e4fc2bb76cb..85ffbfdbe77 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.3.0-staging.1](https://github.com/clerkinc/javascript/compare/@clerk/clerk-react@3.3.0-staging.0...@clerk/clerk-react@3.3.0-staging.1) (2022-06-01)
+
+### Bug Fixes
+
+- **clerk-js:** Emit changes in organization to listeners ([798ee62](https://github.com/clerkinc/javascript/commit/798ee622e7961d3aa7f8842184f5fadbcfed517f))
+
 ### [3.2.18](https://github.com/clerkinc/javascript/compare/@clerk/clerk-react@3.2.18-staging.1...@clerk/clerk-react@3.2.18) (2022-05-20)
 
 **Note:** Version bump only for package @clerk/clerk-react
diff --git a/packages/react/package.json b/packages/react/package.json
index 7ff8ee9d467..bea021314eb 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@clerk/clerk-react",
-  "version": "3.3.0-staging.0",
+  "version": "3.3.0-staging.1",
   "license": "MIT",
   "description": "Clerk.dev React library",
   "keywords": [
@@ -28,7 +28,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@clerk/types": "^2.15.0-staging.0",
+    "@clerk/types": "^2.15.0-staging.1",
     "tslib": "^2.3.1"
   },
   "devDependencies": {
diff --git a/packages/react/src/info.ts b/packages/react/src/info.ts
index 22cd1489da6..330c936c3bf 100644
--- a/packages/react/src/info.ts
+++ b/packages/react/src/info.ts
@@ -1,3 +1,3 @@
 /** DO NOT EDIT: This file is automatically generated by ../scripts/info.js */
-export const LIB_VERSION = '3.3.0-staging.0';
+export const LIB_VERSION = '3.3.0-staging.1';
 export const LIB_NAME = '@clerk/clerk-react';
diff --git a/packages/remix/CHANGELOG.md b/packages/remix/CHANGELOG.md
index 227c8c9f775..e64db9da8ca 100644
--- a/packages/remix/CHANGELOG.md
+++ b/packages/remix/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [0.5.1-staging.1](https://github.com/clerkinc/javascript/compare/@clerk/remix@0.5.1-staging.0...@clerk/remix@0.5.1-staging.1) (2022-06-01)
+
+**Note:** Version bump only for package @clerk/remix
+
 ## [0.5.0](https://github.com/clerkinc/javascript/compare/@clerk/remix@0.5.0-staging.2...@clerk/remix@0.5.0) (2022-05-20)
 
 **Note:** Version bump only for package @clerk/remix
diff --git a/packages/remix/package.json b/packages/remix/package.json
index 973a7bfe1ab..e84395be2e7 100644
--- a/packages/remix/package.json
+++ b/packages/remix/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@clerk/remix",
-  "version": "0.5.1-staging.0",
+  "version": "0.5.1-staging.1",
   "license": "MIT",
   "description": "Clerk.dev SDK for Remix",
   "keywords": [
@@ -32,9 +32,9 @@
     "dev": "tsc -p tsconfig.build.json --watch"
   },
   "dependencies": {
-    "@clerk/clerk-react": "^3.3.0-staging.0",
-    "@clerk/clerk-sdk-node": "^3.6.1-staging.0",
-    "@clerk/types": "^2.15.0-staging.0",
+    "@clerk/clerk-react": "^3.3.0-staging.1",
+    "@clerk/clerk-sdk-node": "^3.6.1-staging.1",
+    "@clerk/types": "^2.15.0-staging.1",
     "cookie": "^0.5.0",
     "tslib": "^2.3.1"
   },
diff --git a/packages/sdk-node/CHANGELOG.md b/packages/sdk-node/CHANGELOG.md
index 7d4650bbf69..0f77ee36b1e 100644
--- a/packages/sdk-node/CHANGELOG.md
+++ b/packages/sdk-node/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [3.6.1-staging.1](https://github.com/clerkinc/javascript/compare/@clerk/clerk-sdk-node@3.6.1-staging.0...@clerk/clerk-sdk-node@3.6.1-staging.1) (2022-06-01)
+
+**Note:** Version bump only for package @clerk/clerk-sdk-node
+
 ## [3.6.0](https://github.com/clerkinc/javascript/compare/@clerk/clerk-sdk-node@3.6.0-staging.4...@clerk/clerk-sdk-node@3.6.0) (2022-05-20)
 
 **Note:** Version bump only for package @clerk/clerk-sdk-node
diff --git a/packages/sdk-node/package.json b/packages/sdk-node/package.json
index 7a13fa5f280..73ff948b3de 100644
--- a/packages/sdk-node/package.json
+++ b/packages/sdk-node/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "3.6.1-staging.0",
+  "version": "3.6.1-staging.1",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "esm/index.js",
@@ -47,8 +47,8 @@
     "typescript": "^4.6.4"
   },
   "dependencies": {
-    "@clerk/backend-core": "^1.9.1-staging.0",
-    "@clerk/types": "^2.15.0-staging.0",
+    "@clerk/backend-core": "^1.9.1-staging.1",
+    "@clerk/types": "^2.15.0-staging.1",
     "@peculiar/webcrypto": "^1.2.3",
     "camelcase-keys": "^6.2.2",
     "cookies": "^0.8.0",
diff --git a/packages/sdk-node/src/info.ts b/packages/sdk-node/src/info.ts
index e44759e6122..b667b415033 100644
--- a/packages/sdk-node/src/info.ts
+++ b/packages/sdk-node/src/info.ts
@@ -1,3 +1,3 @@
 /** DO NOT EDIT: This file is automatically generated by ../scripts/info.js */
-export const LIB_VERSION = '3.6.1-staging.0';
+export const LIB_VERSION = '3.6.1-staging.1';
 export const LIB_NAME = '@clerk/clerk-sdk-node';
diff --git a/packages/shared/CHANGELOG.md b/packages/shared/CHANGELOG.md
index ed7dd5de777..b1dd7b4a897 100644
--- a/packages/shared/CHANGELOG.md
+++ b/packages/shared/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [0.2.8-staging.1](https://github.com/clerkinc/clerk_docker/compare/@clerk/shared@0.2.8-staging.0...@clerk/shared@0.2.8-staging.1) (2022-06-01)
+
+**Note:** Version bump only for package @clerk/shared
+
 ### [0.2.7](https://github.com/clerkinc/clerk_docker/compare/@clerk/shared@0.2.7-staging.1...@clerk/shared@0.2.7) (2022-05-20)
 
 **Note:** Version bump only for package @clerk/shared
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 81d9f52a33f..94abbac6b1f 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@clerk/shared",
-  "version": "0.2.8-staging.0",
+  "version": "0.2.8-staging.1",
   "private": true,
   "main": "index.js",
   "module": "index.js",
@@ -26,7 +26,7 @@
     "@babel/core": "^7.13.14",
     "@babel/preset-env": "^7.13.12",
     "@babel/preset-react": "^7.13.13",
-    "@clerk/types": "^2.15.0-staging.0",
+    "@clerk/types": "^2.15.0-staging.1",
     "@popperjs/core": "^2.5.4",
     "@sentry/browser": "^6.3.0",
     "@svgr/webpack": "^6.2.1",
diff --git a/packages/types/CHANGELOG.md b/packages/types/CHANGELOG.md
index 8f236dff75e..0c62973dbac 100644
--- a/packages/types/CHANGELOG.md
+++ b/packages/types/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.15.0-staging.1](https://github.com/clerkinc/javascript/compare/@clerk/types@2.15.0-staging.0...@clerk/types@2.15.0-staging.1) (2022-06-01)
+
+### Features
+
+- **types,clerk-js:** Introduce web3 wallet operations in UserProfile ([6570a87](https://github.com/clerkinc/javascript/commit/6570a87439d92a59057b2df50ec482511428495e))
+
+### Bug Fixes
+
+- **clerk-js:** Emit changes in organization to listeners ([798ee62](https://github.com/clerkinc/javascript/commit/798ee622e7961d3aa7f8842184f5fadbcfed517f))
+- **types,clerk-js:** Same component navigate after OAuth flow with missing requirements ([39ca6ce](https://github.com/clerkinc/javascript/commit/39ca6cee3a8a160fdf0ca95a713707afee55f1fc))
+
 ## [2.14.0](https://github.com/clerkinc/javascript/compare/@clerk/types@2.14.0-staging.1...@clerk/types@2.14.0) (2022-05-20)
 
 **Note:** Version bump only for package @clerk/types
diff --git a/packages/types/package.json b/packages/types/package.json
index c76a4a69455..c064e8d47b9 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@clerk/types",
-  "version": "2.15.0-staging.0",
+  "version": "2.15.0-staging.1",
   "license": "MIT",
   "description": "Typings for Clerk libraries.",
   "keywords": [