pluralize thirdpartywallets & update to web3modal canary version for …

…status

packages/@magic-ext/web3modal-ethers5/package.json

@@ -28,10 +28,11 @@
  ]
  },
  "devDependencies": {
- "@magic-sdk/commons": "^24.0.2"
+ "@magic-sdk/commons": "^24.0.2",
+ "@magic-sdk/types": "24.0.2-canary.742.9175925480.0"
  },
  "dependencies": {
- "@web3modal/ethers5": "^4.1.11",
+ "@web3modal/ethers5": "4.1.12-ethers-status.0",
  "ethers": "5.7.2"
  }
 }

packages/@magic-ext/web3modal-ethers5/src/index.ts

@@ -19,26 +19,30 @@ export class Web3ModalExtension extends Extension.Internal<'web3modal'> {
  ethersConfig: defaultConfig({ metadata: configOptions }),
  });
 
- // Set delay for web3modal to register if user is connected
- setTimeout(() => {
- if (!this.modal.getIsConnected()) return;
- this.setIsConnected();
- this.setEip1193EventListeners();
- }, 50);
+ const unsubscribeFromProviderEvents = this.modal.subscribeProvider(({ status }) => {
+ if (status === 'connected') {
+ unsubscribeFromProviderEvents();
+ this.setIsConnected();
+ this.setEip1193EventListeners();
+ }
+ if (status === 'disconnected') {
+ unsubscribeFromProviderEvents();
+ }
+ });
  }
 
  public setIsConnected() {
  localStorage.setItem('magic_3pw_provider', 'web3modal');
  localStorage.setItem('magic_3pw_address', this.modal.getAddress() as string);
  localStorage.setItem('magic_3pw_chainId', (this.modal.getChainId() as number).toString());
- this.sdk.thirdPartyWallet.isConnected = true;
+ this.sdk.thirdPartyWallets.isConnected = true;
  }
 
  public initialize() {
- this.sdk.thirdPartyWallet.enabledWallets.web3modal = true;
- this.sdk.thirdPartyWallet.isConnected = Boolean(localStorage.getItem('magic_3pw_address'));
- this.sdk.thirdPartyWallet.eventListeners.push({
- event: 'web3modal_selected' as ThirdPartyWalletEvents,
+ this.sdk.thirdPartyWallets.enabledWallets.web3modal = true;
+ this.sdk.thirdPartyWallets.isConnected = Boolean(localStorage.getItem('magic_3pw_address'));
+ this.sdk.thirdPartyWallets.eventListeners.push({
+ event: ThirdPartyWalletEvents.Web3ModalSelected,
  callback: async (payloadId) => {
  await this.connectToWeb3modal(payloadId);
  },
@@ -52,7 +56,7 @@ export class Web3ModalExtension extends Extension.Internal<'web3modal'> {
  this.modal.subscribeProvider(({ address, chainId }) => {
  // If user disconnected all accounts from wallet
  if (!address && localStorage.getItem('magic_3pw_address')) {
- this.sdk.thirdPartyWallet.resetState();
+ this.sdk.thirdPartyWallets.resetThirdPartyWalletState();
  return this.sdk.rpcProvider.emit('accountsChanged', []);
  }
  if (address && address !== localStorage.getItem('magic_3pw_address')) {
@@ -67,23 +71,33 @@ export class Web3ModalExtension extends Extension.Internal<'web3modal'> {
  });
  }
 
+ private handleUserConnected(payloadId: string, address: string = this.modal.getAddress() as string) {
+ this.setIsConnected();
+ this.createIntermediaryEvent(ThirdPartyWalletEvents.WalletConnected, payloadId)(address);
+ this.setEip1193EventListeners();
+ }
+
  private connectToWeb3modal(payloadId: string) {
  const { modal } = this;
 
- const promiEvent = this.utils.createPromiEvent<string[]>(() => {
- // Listen for wallet connected
+ const promiEvent = this.utils.createPromiEvent<string[]>(async () => {
+ // If user is already connected, emit event and return
+ if (this.modal.getIsConnected()) {
+ this.handleUserConnected(payloadId);
+ return;
+ }
+
+ // Listen for wallet connected event
  const unsubscribeFromProviderEvents = modal.subscribeProvider(({ address, error }) => {
  // User rejected connection request
  if (error) {
  unsubscribeFromProviderEvents();
- this.createIntermediaryEvent('wallet_rejected', payloadId)();
+ this.createIntermediaryEvent(ThirdPartyWalletEvents.WalletRejected, payloadId)();
  }
  // If user connected wallet, keep listeners active
  if (address) {
- this.setIsConnected();
- this.createIntermediaryEvent('wallet_connected', payloadId)(address);
+ this.handleUserConnected(payloadId);
  unsubscribeFromProviderEvents();
- this.setEip1193EventListeners();
  }
  });
 
@@ -92,7 +106,7 @@ export class Web3ModalExtension extends Extension.Internal<'web3modal'> {
  if (event.data.event === 'MODAL_CLOSE') {
  unsubscribeFromModalEvents();
  unsubscribeFromProviderEvents();
- this.createIntermediaryEvent('wallet_rejected', payloadId)();
+ this.createIntermediaryEvent(ThirdPartyWalletEvents.WalletRejected, payloadId)();
  }
  });
 

packages/@magic-ext/web3modal-ethers5/test/spec/initialize.spec.ts

@@ -27,7 +27,7 @@ const web3modalParams = {
 test('initialize updates `enabledWallets`, `isConnected`, and `eventListeners`', () => {
  const magic = createMagicSDKWithExtension({}, [new Web3ModalExtension(web3modalParams)]);
  magic.web3modal.initialize();
- expect(magic.thirdPartyWallet.enabledWallets.web3modal).toBeTruthy();
- expect(magic.thirdPartyWallet.isConnected).toBeFalsy();
- expect(magic.thirdPartyWallet.eventListeners.length).toEqual(1);
+ expect(magic.thirdPartyWallets.enabledWallets.web3modal).toBeTruthy();
+ expect(magic.thirdPartyWallets.isConnected).toBeFalsy();
+ expect(magic.thirdPartyWallets.eventListeners.length).toEqual(1);
 });

packages/@magic-ext/web3modal-ethers5/test/spec/setIsConnected.spec.ts

@@ -35,5 +35,5 @@ test('setIsConnected sets localStorage values', () => {
  expect(localStorage.getItem('magic_3pw_provider')).toEqual('web3modal');
  expect(localStorage.getItem('magic_3pw_address')).toEqual('0x123');
  expect(localStorage.getItem('magic_3pw_chainId')).toEqual('1');
- expect(magic.thirdPartyWallet.isConnected).toBeTruthy();
+ expect(magic.thirdPartyWallets.isConnected).toBeTruthy();
 });

packages/@magic-sdk/provider/src/core/sdk.ts

@@ -12,7 +12,7 @@ import {
 import { AuthModule } from '../modules/auth';
 import { UserModule } from '../modules/user';
 import { WalletModule } from '../modules/wallet';
-import { ThirdPartyWalletModule } from '../modules/third-party-wallet';
+import { ThirdPartyWalletsModule } from '../modules/third-party-wallets';
 import { RPCProviderModule } from '../modules/rpc-provider';
 import { ViewController } from './view-controller';
 import { createURL } from '../util/url';
@@ -156,7 +156,7 @@ export class SDKBase {
  /**
  * Contains internal methods for third-party wallets.
  */
- public thirdPartyWallet: ThirdPartyWalletModule;
+ public thirdPartyWallets: ThirdPartyWalletsModule;
 
  /**
  * Contains a Web3-compliant provider. Pass this module to your Web3/Ethers
@@ -184,7 +184,7 @@ export class SDKBase {
  this.user = new UserModule(this);
  this.wallet = new WalletModule(this);
  this.nft = new NFTModule(this);
- this.thirdPartyWallet = new ThirdPartyWalletModule(this);
+ this.thirdPartyWallets = new ThirdPartyWalletsModule(this);
  this.rpcProvider = new RPCProviderModule(this) as any;
 
  // Prepare extensions

packages/@magic-sdk/provider/src/modules/base-module.ts

@@ -27,13 +27,13 @@ export class BaseModule {
  */
  protected request<ResultType = any, Events extends EventsDefinition = void>(payload: Partial<JsonRpcRequestPayload>) {
  if (
- this.sdk.thirdPartyWallet.isConnected &&
+ this.sdk.thirdPartyWallets.isConnected &&
  payload.method !== MagicPayloadMethod.IntermediaryEvent &&
  payload.method !== MagicPayloadMethod.NFTCheckout &&
  payload.method !== MagicPayloadMethod.Login
  ) {
  const promiEvent = createPromiEvent<ResultType, Events>((resolve, reject) => {
- this.sdk.thirdPartyWallet.requestOverride(payload).then(resolve).catch(reject);
+ this.sdk.thirdPartyWallets.requestOverride(payload).then(resolve).catch(reject);
  });
  return promiEvent;
  }

packages/@magic-sdk/provider/src/modules/third-party-wallet.ts → packages/@magic-sdk/provider/src/modules/third-party-wallets.ts

@@ -2,12 +2,12 @@ import { JsonRpcRequestPayload, MagicPayloadMethod, MagicUserMetadata, ThirdPart
 import { BaseModule } from './base-module';
 import { PromiEvent, createPromiEvent } from '../util';
 
-export class ThirdPartyWalletModule extends BaseModule {
+export class ThirdPartyWalletsModule extends BaseModule {
  public eventListeners: { event: ThirdPartyWalletEvents; callback: (payloadId: string) => Promise<void> }[] = [];
  public enabledWallets: Record<string, boolean> = {};
  public isConnected = false;
 
- public resetState() {
+ public resetThirdPartyWalletState() {
  localStorage.removeItem('magic_3pw_provider');
  localStorage.removeItem('magic_3pw_address');
  localStorage.removeItem('magic_3pw_chainId');
@@ -17,7 +17,7 @@ export class ThirdPartyWalletModule extends BaseModule {
  public requestOverride(payload: Partial<JsonRpcRequestPayload>) {
  // Handle method overrides if login/getInfo/isLoggedIn/logout
  if (payload.method === MagicPayloadMethod.Login) {
- this.resetState();
+ this.resetThirdPartyWalletState();
  return super.request(payload);
  }
  if (payload.method === MagicPayloadMethod.GetInfo) {
@@ -35,7 +35,7 @@ export class ThirdPartyWalletModule extends BaseModule {
  return this.web3modalRequest(payload);
  // Fallback to default request
  default:
- this.resetState();
+ this.resetThirdPartyWalletState();
  return super.request(payload);
  }
  }
@@ -47,7 +47,7 @@ export class ThirdPartyWalletModule extends BaseModule {
  case 'web3modal':
  return this.web3modalIsLoggedIn();
  default:
- this.resetState();
+ this.resetThirdPartyWalletState();
  return super.request(payload);
  }
  }
@@ -57,14 +57,14 @@ export class ThirdPartyWalletModule extends BaseModule {
  case 'web3modal':
  return this.web3modalGetInfo();
  default:
- this.resetState();
+ this.resetThirdPartyWalletState();
  return super.request(payload);
  }
  }
 
  private logout(payload: Partial<JsonRpcRequestPayload>): PromiEvent<boolean> {
  const provider = localStorage.getItem('magic_3pw_provider');
- this.resetState();
+ this.resetThirdPartyWalletState();
  switch (provider) {
  case 'web3modal': {
  return this.web3modalLogout();
@@ -85,30 +85,75 @@ export class ThirdPartyWalletModule extends BaseModule {
 
  private web3modalIsLoggedIn() {
  return createPromiEvent<boolean>((resolve) => {
- // Required delay to allow web3modal to register connection
- setTimeout(() => {
+ // @ts-expect-error Property 'web3modal' does not exist on type 'SDKBase'.
+ const walletStatus = this.sdk.web3modal.modal.getStatus();
+ if (walletStatus === 'connected') {
+ resolve(true);
+ }
+ if (walletStatus === 'disconnected') {
+ this.resetThirdPartyWalletState();
+ resolve(false);
+ }
+ if (walletStatus === 'reconnecting') {
  // @ts-expect-error Property 'web3modal' does not exist on type 'SDKBase'.
- const isLoggedIn: boolean = this.sdk.web3modal.modal.getIsConnected();
- resolve(isLoggedIn);
- }, 50);
+ const unsubscribeFromProviderEvents = this.sdk.web3modal.modal.subscribeProvider(({ status }) => {
+ if (status === 'connected') {
+ unsubscribeFromProviderEvents();
+ resolve(true);
+ }
+ if (status === 'disconnected') {
+ unsubscribeFromProviderEvents();
+ this.resetThirdPartyWalletState();
+ resolve(false);
+ }
+ });
+ }
  });
  }
 
+ private formatWeb3modalGetInfoResponse() {
+ // @ts-expect-error Property 'web3modal' does not exist on type 'SDKBase'.
+ const walletType = this.sdk.web3modal.modal.getWalletInfo()?.name;
+ // @ts-expect-error Property 'web3modal' does not exist on type 'SDKBase'.
+ const userAddress = this.sdk.web3modal.modal.getAddress();
+ return {
+ publicAddress: userAddress as string,
+ email: null,
+ issuer: `$did:ethr:${userAddress}`,
+ phoneNumber: null,
+ isMfaEnabled: false,
+ recoveryFactors: [] as [],
+ walletType: walletType || 'web3modal',
+ };
+ }
+
  private web3modalGetInfo() {
- return createPromiEvent<MagicUserMetadata>((resolve) => {
- // @ts-expect-error Property 'web3modal' does not exist on type 'SDKBase'.
- const walletType = this.sdk.web3modal.modal.getWalletInfo()?.name;
+ return createPromiEvent<MagicUserMetadata>((resolve, reject) => {
  // @ts-expect-error Property 'web3modal' does not exist on type 'SDKBase'.
- const userAddress = this.sdk.web3modal.modal.getAddress();
- resolve({
- publicAddress: userAddress,
- email: null,
- issuer: `$did:ethr:${userAddress}`,
- phoneNumber: null,
- isMfaEnabled: false,
- recoveryFactors: [],
- walletType,
- });
+ const walletStatus = this.sdk.web3modal.modal.getStatus();
+ if (walletStatus === 'connected') {
+ resolve(this.formatWeb3modalGetInfoResponse());
+ }
+
+ if (walletStatus === 'disconnected') {
+ this.resetThirdPartyWalletState();
+ reject('Magic RPC Error: [-32603] Internal error: User denied account access.');
+ }
+
+ if (walletStatus === 'reconnecting') {
+ // @ts-expect-error Property 'web3modal' does not exist on type 'SDKBase'.
+ const unsubscribeFromProviderEvents = this.sdk.web3modal.modal.subscribeProvider(({ status }) => {
+ if (status === 'connected') {
+ unsubscribeFromProviderEvents();
+ resolve(this.formatWeb3modalGetInfoResponse());
+ }
+ if (status === 'disconnected') {
+ unsubscribeFromProviderEvents();
+ this.resetThirdPartyWalletState();
+ reject('Magic RPC Error: [-32603] Internal error: User denied account access.');
+ }
+ });
+ }
  });
  }
 

packages/@magic-sdk/provider/src/modules/wallet.ts

@@ -22,14 +22,14 @@ export class WalletModule extends BaseModule {
  try {
  const loginRequestPayload = createJsonRpcRequestPayload(MagicPayloadMethod.Login, [
  {
- enabledWallets: this.sdk.thirdPartyWallet.enabledWallets,
+ enabledWallets: this.sdk.thirdPartyWallets.enabledWallets,
  ...options,
  },
  ]);
 
  const loginRequest = this.request<string[], ConnectWithUiEvents>(loginRequestPayload);
 
- this.sdk.thirdPartyWallet.eventListeners.forEach(({ event, callback }) => {
+ this.sdk.thirdPartyWallets.eventListeners.forEach(({ event, callback }) => {
  loginRequest.on(event, () => callback(loginRequestPayload.id as string));
  });
 

packages/@magic-sdk/provider/test/spec/modules/base-module/request.spec.ts

@@ -315,9 +315,9 @@ test('Calls third party wallet request override if third party wallet is connect
  mockLocalStorage();
  const response = new JsonRpcResponse(requestPayload).applyResult('hello world');
  const { baseModule } = createBaseModule(jest.fn().mockImplementation(() => Promise.resolve(response)));
- baseModule.sdk.thirdPartyWallet.isConnected = true;
+ baseModule.sdk.thirdPartyWallets.isConnected = true;
  const spy = jest
- .spyOn(baseModule.sdk.thirdPartyWallet, 'requestOverride')
+ .spyOn(baseModule.sdk.thirdPartyWallets, 'requestOverride')
  .mockImplementation(() => Promise.resolve('hello world'));
  const result = await baseModule.request(requestPayload);
  expect(result).toBe('hello world');
@@ -328,9 +328,9 @@ test('Does not call thirdPartyWallet requestOverride if method is magic_intermed
  mockLocalStorage();
  const response = new JsonRpcResponse(requestPayload).applyResult('magic_intermediary_event');
  const { baseModule } = createBaseModule(jest.fn().mockImplementation(() => Promise.resolve(response)));
- baseModule.sdk.thirdPartyWallet.isConnected = true;
+ baseModule.sdk.thirdPartyWallets.isConnected = true;
  const spy = jest
- .spyOn(baseModule.sdk.thirdPartyWallet, 'requestOverride')
+ .spyOn(baseModule.sdk.thirdPartyWallets, 'requestOverride')
  .mockImplementation(() => Promise.resolve({}));
  expect(spy).toBeCalledTimes(0);
 });
@@ -339,9 +339,9 @@ test('Does not call thirdPartyWallet requestOverride if method is magic_nft_chec
  mockLocalStorage();
  const response = new JsonRpcResponse(requestPayload).applyResult('magic_nft_checkout');
  const { baseModule } = createBaseModule(jest.fn().mockImplementation(() => Promise.resolve(response)));
- baseModule.sdk.thirdPartyWallet.isConnected = true;
+ baseModule.sdk.thirdPartyWallets.isConnected = true;
  const spy = jest
- .spyOn(baseModule.sdk.thirdPartyWallet, 'requestOverride')
+ .spyOn(baseModule.sdk.thirdPartyWallets, 'requestOverride')
  .mockImplementation(() => Promise.resolve({}));
  expect(spy).toBeCalledTimes(0);
 });
@@ -350,9 +350,9 @@ test('Does not call thirdPartyWallet requestOverride if method is mc_login', ()
  mockLocalStorage();
  const response = new JsonRpcResponse(requestPayload).applyResult('mc_login');
  const { baseModule } = createBaseModule(jest.fn().mockImplementation(() => Promise.resolve(response)));
- baseModule.sdk.thirdPartyWallet.isConnected = true;
+ baseModule.sdk.thirdPartyWallets.isConnected = true;
  const spy = jest
- .spyOn(baseModule.sdk.thirdPartyWallet, 'requestOverride')
+ .spyOn(baseModule.sdk.thirdPartyWallets, 'requestOverride')
  .mockImplementation(() => Promise.resolve({}));
  expect(spy).toBeCalledTimes(0);
 });