move override methods to thirdpartywallet module

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

@@ -1,21 +1,17 @@
-import { Extension, JsonRpcRequestPayload, MagicUserMetadata, ThirdPartyWalletEvents } from '@magic-sdk/commons';
+import { Extension, ThirdPartyWalletEvents } from '@magic-sdk/commons';
 import { Web3Modal, createWeb3Modal, defaultConfig } from '@web3modal/ethers5';
-import { DefaultEvents, EventsDefinition, PromiEvent, createPromiEvent } from '@magic-sdk/provider';
 import { Web3ModalExtensionOptions } from './types';
 
 export class Web3ModalExtension extends Extension.Internal<'web3modal', any> {
  name = 'web3modal' as const;
  config: any = {};
  modal: Web3Modal;
- connectedPublicAddress: string | undefined;
- connectedChainId: number | undefined;
 
  static eventsListenerAdded = false;
 
  constructor({ configOptions, modalOptions }: Web3ModalExtensionOptions) {
  super();
- console.log('super.sdk', super.sdk);
- // @ts-ignore
+
  this.modal = createWeb3Modal({
  ...modalOptions,
  ...{ themeVariables: { '--w3m-z-index': 3000000000 } },
@@ -24,15 +20,19 @@ export class Web3ModalExtension extends Extension.Internal<'web3modal', any> {
 
  // Set delay for web3modal to register if user is connected
  setTimeout(() => {
- // @ts-ignore
- if (!this.sdk.web3modal.modal.getIsConnected()) return;
- this.setThirdPartyWalletInfo();
+ if (!this.modal.getIsConnected()) return;
+ this.setIsConnected();
  this.setEip1193EventListenersIfConnected();
  }, 50);
  }
 
+ public setIsConnected() {
+ localStorage.setItem('3pw_provider', 'web3modal');
+ localStorage.setItem('3pw_address', this.modal.getAddress() as string);
+ this.sdk.thirdPartyWallet.isConnected = true;
+ }
+
  public initialize() {
- this.setOverrides();
  this.sdk.thirdPartyWallet.enabledWallets.web3Modal = true;
  this.sdk.thirdPartyWallet.eventListeners.push({
  event: ThirdPartyWalletEvents.Web3ModalSelected,
@@ -42,35 +42,34 @@ export class Web3ModalExtension extends Extension.Internal<'web3modal', any> {
  });
  }
 
- private setThirdPartyWalletInfo() {
- // @ts-ignore
- this.connectedPublicAddress = this.sdk.web3modal.modal.getAddress();
- // @ts-ignore
- this.connectedChainId = this.sdk.web3modal.modal.getChainId();
- }
-
  private setEip1193EventListenersIfConnected() {
  if (Web3ModalExtension.eventsListenerAdded) return;
  Web3ModalExtension.eventsListenerAdded = true;
- // @ts-ignore
- this.sdk.web3modal.modal.subscribeProvider(({ address, chainId }) => {
- if (address && address !== this.connectedPublicAddress) {
- this.connectedPublicAddress = address;
- this.sdk.rpcProvider.emit('accountsChanged', [address]);
+
+ this.modal.subscribeProvider(({ address, chainId }) => {
+ // If user disconnected all accounts from wallet
+ if (!address && localStorage.getItem('3pw_address')) {
+ this.sdk.thirdPartyWallet.logout();
+ return this.sdk.rpcProvider.emit('accountsChanged', [address]);
+ }
+ if (address && address !== localStorage.getItem('3pw_address')) {
+ localStorage.setItem('3pw_address', address);
+ return this.sdk.rpcProvider.emit('accountsChanged', [address]);
  }
- if (chainId && chainId !== this.connectedChainId) {
- this.connectedChainId = chainId;
- this.sdk.rpcProvider.emit('chainChanged', chainId);
+ if (chainId && chainId !== Number(localStorage.getItem('3pw_chainId'))) {
+ localStorage.setItem('3pw_chainId', chainId.toString());
+ return this.sdk.rpcProvider.emit('chainChanged', chainId);
  }
+ return null;
  });
  }
 
  private connectToWeb3Modal(payloadId: string) {
- const { modal } = this as Web3ModalExtension;
+ const { modal } = this;
 
- const promiEvent = createPromiEvent<string[]>(async () => {
+ const promiEvent = this.utils.createPromiEvent<string[]>(async () => {
  // Listen for wallet connected
- const unsubscribeFromProviderEvents = modal.subscribeProvider(({ address, chainId, error }: any) => {
+ const unsubscribeFromProviderEvents = modal.subscribeProvider(({ address, chainId, error }) => {
  // User rejected connection request
  if (error) {
  unsubscribeFromProviderEvents();
@@ -79,19 +78,16 @@ export class Web3ModalExtension extends Extension.Internal<'web3modal', any> {
  // If user connected wallet, keep listeners active
  if (address) {
  // unsubscribeFromProviderEvents();
- this.connectedPublicAddress = address;
- this.connectedChainId = chainId;
+ this.setIsConnected();
  this.createIntermediaryEvent(ThirdPartyWalletEvents.WalletConnected as any, payloadId as any)(address);
  }
  });
 
- // Listen for connection rejected
+ // Listen for modal close before user connects wallet
  const unsubscribeFromModalEvents = modal.subscribeEvents((event) => {
- const userClosedModal = event.data.event === 'MODAL_CLOSE';
- const userRejectedConnectionInWallet = event.data.event === 'CONNECT_ERROR';
- if (userClosedModal || userRejectedConnectionInWallet) {
+ if (event.data.event === 'MODAL_CLOSE') {
+ // Remove listeners
  unsubscribeFromModalEvents();
- // Remove listener for wallet connected
  unsubscribeFromProviderEvents();
  this.createIntermediaryEvent(ThirdPartyWalletEvents.WalletRejected, payloadId)();
  }
@@ -102,76 +98,4 @@ export class Web3ModalExtension extends Extension.Internal<'web3modal', any> {
 
  return promiEvent;
  }
-
- private getInfoOverride() {
- const promiEvent = createPromiEvent<MagicUserMetadata, any>((resolve) => {
- setTimeout(() => {
- // @ts-ignore
- const address = this.sdk.web3modal.modal.getAddress();
- if (address) {
- resolve({
- publicAddress: address,
- email: null,
- issuer: `$did:ethr:${address}`,
- phoneNumber: null,
- isMfaEnabled: false,
- recoveryFactors: [undefined as any],
- // walletType: 'web3Modal',
- });
- } else {
- resolve(super.sdk.user.getInfo());
- }
- }, 50);
- });
- return promiEvent;
- }
-
- private isLoggedInOverride() {
- const promiEvent = createPromiEvent<boolean, any>((resolve) => {
- setTimeout(() => {
- // @ts-ignore
- if (this.sdk.web3modal.modal.getIsConnected()) {
- resolve(true);
- } else {
- resolve(super.sdk.user.isLoggedIn());
- }
- }, 50);
- });
- return promiEvent;
- }
-
- private logoutOverride() {
- // @ts-ignore
- this.sdk.web3modal.modal.disconnect();
- return super.sdk.user.logout();
- }
-
- private requestOverride<ResultType = any, Events extends EventsDefinition = void>(
- payload: Partial<JsonRpcRequestPayload>,
- ) {
- // @ts-ignore
- if (this.sdk.web3modal.modal.getIsConnected()) {
- const promiEvent = createPromiEvent<ResultType, Events>((resolve, reject) => {
- // @ts-ignore
- return (this.sdk.web3modal.modal.getWalletProvider() as any)
- .request(payload)
- .then((res: ResultType | PromiseLike<ResultType>) => {
- resolve(res);
- })
- .catch(reject);
- });
- return promiEvent;
- }
- return super.sdk.rpcProvider.request(payload) as PromiEvent<
- ResultType,
- Events extends void ? DefaultEvents<ResultType> : Events & DefaultEvents<ResultType>
- >;
- }
-
- private setOverrides() {
- this.sdk.user.getInfo = this.getInfoOverride;
- this.sdk.user.isLoggedIn = this.isLoggedInOverride;
- this.sdk.user.logout = this.logoutOverride;
- this.sdk.rpcProvider.request = this.requestOverride;
- }
 }

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

@@ -26,6 +26,17 @@ export class BaseModule {
  * Emits promisified requests to the Magic `<iframe>` context.
  */
  protected request<ResultType = any, Events extends EventsDefinition = void>(payload: Partial<JsonRpcRequestPayload>) {
+ // If connected to 3pw, route all non-Magic rpc requests
+ if (
+ this.sdk.thirdPartyWallet.isConnected &&
+ !Object.values(MagicPayloadMethod).includes(payload.method as MagicPayloadMethod)
+ ) {
+ const promiEvent = createPromiEvent<ResultType, Events>((resolve, reject) => {
+ resolve(this.sdk.thirdPartyWallet.requestOverride(payload));
+ });
+ return promiEvent;
+ }
+
  const responsePromise = this.overlay.post<ResultType>(
  MagicOutgoingWindowMessage.MAGIC_HANDLE_REQUEST,
  standardizeJsonRpcRequestPayload(payload),

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

@@ -4,4 +4,84 @@ import { BaseModule } from './base-module';
 export class ThirdPartyWalletModule extends BaseModule {
  public eventListeners: { event: ThirdPartyWalletEvents; callback: (payloadId: string) => Promise<void> }[] = [];
  public enabledWallets: Record<string, boolean> = {};
+ public isConnected = !!localStorage.getItem('3pw_address');
+
+ /* Public Methods */
+ public getInfo() {
+ switch (localStorage.getItem('3pw_provider')) {
+ case 'web3modal':
+ return this.web3modalGetInfo();
+ default:
+ return null;
+ }
+ }
+
+ public isLoggedIn() {
+ switch (localStorage.getItem('3pw_provider')) {
+ case 'web3modal':
+ return this.web3modalIsLoggedIn();
+ default:
+ return null;
+ }
+ }
+
+ public logout() {
+ const provider = localStorage.getItem('3pw_provider');
+ localStorage.removeItem('3pw_provider');
+ localStorage.removeItem('3pw_address');
+ localStorage.removeItem('3pw_chainId');
+ this.isConnected = false;
+ switch (provider) {
+ case 'web3modal': {
+ return this.web3modalLogout();
+ }
+ default:
+ return true;
+ }
+ }
+
+ public requestOverride(payload: any) {
+ switch (localStorage.getItem('3pw_provider')) {
+ case 'web3modal':
+ return this.web3modalRequest(payload);
+ default:
+ return null;
+ }
+ }
+
+ /* Web3Modal Methods */
+ private web3modalGetInfo() {
+ // @ts-ignore
+ const userAddress = this.sdk.web3modal.modal.getAddress() || localStorage.getItem('3pw_address');
+ return {
+ publicAddress: userAddress,
+ email: null,
+ issuer: `$did:ethr:${userAddress}`,
+ phoneNumber: null,
+ isMfaEnabled: false,
+ recoveryFactors: [] as any,
+ // TODO:
+ // walletType: 'web3Modal',
+ };
+ }
+
+ private async web3modalIsLoggedIn(): Promise<boolean> {
+ return new Promise((resolve) => {
+ setTimeout(() => {
+ // @ts-ignore
+ const isLoggedIn: boolean = this.sdk.web3modal.modal.getIsConnected();
+ resolve(isLoggedIn);
+ }, 50);
+ });
+ }
+
+ private web3modalRequest(payload: any) {
+ // @ts-ignore
+ return this.sdk.web3modal.modal.getWalletProvider().request(payload);
+ }
+
+ private web3modalLogout() {
+ // @ts-ignore
+ return this.sdk.web3modal.modal.disconnect();
+ }
 }

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

@@ -36,6 +36,9 @@ export class UserModule extends BaseModule {
  }
 
  public async getInfo() {
+ if (this.sdk.thirdPartyWallet.isConnected) {
+ return this.sdk.thirdPartyWallet.getInfo();
+ }
  const activeWallet = await getItem(this.localForageKey);
  const requestPayload = createJsonRpcRequestPayload(MagicPayloadMethod.GetInfo, [{ walletType: activeWallet }]);
  return this.request<MagicUserMetadata>(requestPayload);
@@ -44,6 +47,10 @@ export class UserModule extends BaseModule {
  public isLoggedIn() {
  return createPromiEvent<boolean, any>(async (resolve, reject) => {
  try {
+ if (this.sdk.thirdPartyWallet.isConnected) {
+ const isLoggedIn = await this.sdk.thirdPartyWallet.isLoggedIn();
+ resolve(isLoggedIn as boolean);
+ }
  let cachedIsLoggedIn = false;
  if (this.sdk.useStorageCache) {
  cachedIsLoggedIn = (await getItem(this.localForageIsLoggedInKey)) === 'true';
@@ -83,6 +90,10 @@ export class UserModule extends BaseModule {
 
  return createPromiEvent<boolean, any>(async (resolve, reject) => {
  try {
+ if (this.sdk.thirdPartyWallet.isConnected) {
+ await this.sdk.thirdPartyWallet.logout();
+ resolve(true);
+ }
  const requestPayload = createJsonRpcRequestPayload(
  this.sdk.testMode ? MagicPayloadMethod.LogoutTestMode : MagicPayloadMethod.Logout,
  );