Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add web3modal extension #742

Open
wants to merge 42 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
4df5a5a
add web3modal extension
hcote Apr 22, 2024
0b7d9c7
remove unused vars
hcote Apr 22, 2024
a5864bb
rename
hcote Apr 22, 2024
55cc255
move override methods to thirdpartywallet module
hcote Apr 23, 2024
a746b06
remove provider dependency
hcote Apr 23, 2024
ffbb08d
typing updates
hcote Apr 24, 2024
a92e507
fix logout on disconnect
hcote Apr 24, 2024
a29c027
add returns to fns routing to tpw methods
hcote Apr 24, 2024
c3b302e
Merge branch 'master' into hcote-web3modal
hcote Apr 24, 2024
26604e3
move all logic to thirdpartywallet module
hcote Apr 25, 2024
42a4280
dont route nftCheckout to 3pw
hcote Apr 25, 2024
5a56d1a
update iframe.allow for google login
hcote Apr 30, 2024
3732179
fix capitalization
hcote May 4, 2024
56bb93c
add connectWIthUI options param
hcote May 7, 2024
f262429
make param optional
hcote May 12, 2024
b9b9caa
add event 1193 event listeners after connecting
hcote May 13, 2024
56fde71
update isConnected initialization
hcote May 14, 2024
3390b6f
remove old tests
hcote May 15, 2024
ad6d291
update tests
hcote May 18, 2024
dac3493
fix deepsource lint errors
hcote May 19, 2024
7953979
Merge branch 'master' into hcote-web3modal
hcote May 19, 2024
3a83159
update ls key names
hcote May 20, 2024
d328947
temp: remove reference to ThirdPartyWallets
hcote May 21, 2024
b44497f
update import
hcote May 21, 2024
53124ba
pluralize thirdpartywallets & update to web3modal canary version for …
hcote May 29, 2024
afa46ff
fix tests
hcote May 29, 2024
0386f43
implement nft.checkout with 3rd-party wallets (#744)
octave08 May 31, 2024
e8f9583
nft checkout update
hcote May 31, 2024
d862d23
add intermediary events for nft.checkout
hcote Jun 6, 2024
baa4f36
Merge branch 'master' into hcote-web3modal
hcote Jun 6, 2024
7ebccbf
Merge branch 'master' into hcote-web3modal
hcote Jun 7, 2024
218e104
yarn.lock
hcote Jun 7, 2024
c714eea
update web3modal package
hcote Jun 12, 2024
c05cd91
Merge branch 'master' into hcote-web3modal
hcote Jun 12, 2024
884053f
yarn.lock
hcote Jun 12, 2024
39d6e46
update web3modal package
hcote Jun 14, 2024
ff13a5f
yarn.lock
hcote Jun 14, 2024
17937db
update web3modal sdk
hcote Jun 20, 2024
3fe30b8
Merge branch 'master' into hcote-web3modal
hcote Jun 20, 2024
fb7b0c8
remove unsubscribeFromModalEvents
hcote Jun 21, 2024
911b23e
remove comments
hcote Jun 21, 2024
adddb32
add web3modal polyfill
hcote Jun 22, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix deepsource lint errors
  • Loading branch information
hcote committed May 19, 2024
commit dac34931835900790c8e66272f4675f3f3c0293b
10 changes: 5 additions & 5 deletions packages/@magic-ext/web3modal-ethers5/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import { Extension, ThirdPartyWalletEvents } from '@magic-sdk/commons';
import { Web3Modal, createWeb3Modal, defaultConfig } from '@web3modal/ethers5';
import { Web3ModalExtensionOptions } from './types';

export class Web3ModalExtension extends Extension.Internal<'web3modal', any> {
export class Web3ModalExtension extends Extension.Internal<'web3modal'> {
name = 'web3modal' as const;
config: any = {};
config = {};
modal: Web3Modal;

static eventsListenerAdded = false;
Expand Down Expand Up @@ -35,7 +35,7 @@ export class Web3ModalExtension extends Extension.Internal<'web3modal', any> {

public initialize() {
this.sdk.thirdPartyWallet.enabledWallets.web3modal = true;
this.sdk.thirdPartyWallet.isConnected = !!localStorage.getItem('3pw_address');
this.sdk.thirdPartyWallet.isConnected = Boolean(localStorage.getItem('3pw_address'));
this.sdk.thirdPartyWallet.eventListeners.push({
event: ThirdPartyWalletEvents.Web3ModalSelected,
callback: async (payloadId) => {
Expand Down Expand Up @@ -69,7 +69,7 @@ export class Web3ModalExtension extends Extension.Internal<'web3modal', any> {
private connectToWeb3modal(payloadId: string) {
const { modal } = this;

const promiEvent = this.utils.createPromiEvent<string[]>(async () => {
const promiEvent = this.utils.createPromiEvent<string[]>(() => {
// Listen for wallet connected
const unsubscribeFromProviderEvents = modal.subscribeProvider(({ address, error }) => {
// User rejected connection request
Expand All @@ -80,7 +80,7 @@ export class Web3ModalExtension extends Extension.Internal<'web3modal', any> {
// If user connected wallet, keep listeners active
if (address) {
this.setIsConnected();
this.createIntermediaryEvent(ThirdPartyWalletEvents.WalletConnected as any, payloadId as any)(address);
this.createIntermediaryEvent(ThirdPartyWalletEvents.WalletConnected, payloadId)(address);
unsubscribeFromProviderEvents();
this.setEip1193EventListeners();
}
Expand Down
2 changes: 1 addition & 1 deletion packages/@magic-ext/web3modal-ethers5/src/types.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// @ts-ignore
// @ts-expect-error Module '"@web3modal/ethers5"' has no exported member 'ConfigOptions'.
import { ConfigOptions, Web3ModalOptions } from '@web3modal/ethers5';

export interface Web3ModalExtensionOptions {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const web3modalParams = {
},
};

test('setEip1193EventListeners emits accountsChanged', async () => {
test('setEip1193EventListeners emits accountsChanged', () => {
const magic = createMagicSDKWithExtension({}, [new Web3ModalExtension(web3modalParams)]);
magic.web3modal.modal.subscribeProvider = jest.fn(
(callback: (provider: { address: string; chainId: number }) => void) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const web3modalParams = {
},
};

test('setEip1193EventListeners emits chainChanged', async () => {
test('setEip1193EventListeners emits chainChanged', () => {
const magic = createMagicSDKWithExtension({}, [new Web3ModalExtension(web3modalParams)]);
localStorage.setItem('3pw_address', '0x123');
magic.web3modal.modal.subscribeProvider = jest.fn(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,31 +33,31 @@ const web3modalParams = {
},
};

test('connectToWeb3modal returns promiEvent', async () => {
test('connectToWeb3modal returns promiEvent', () => {
const magic = createMagicSDKWithExtension({}, [new Web3ModalExtension(web3modalParams)]);
expect(isPromiEvent(magic.web3modal.connectToWeb3modal())).toBeTruthy();
});

test('connectToWeb3modal calls subscribeProvider', async () => {
test('connectToWeb3modal calls subscribeProvider', () => {
const magic = createMagicSDKWithExtension({}, [new Web3ModalExtension(web3modalParams)]);
magic.web3modal.connectToWeb3modal();
expect(magic.web3modal.modal.subscribeProvider).toBeCalled();
});

test('connectToWeb3modal calls subscribeEvents', async () => {
test('connectToWeb3modal calls subscribeEvents', () => {
const magic = createMagicSDKWithExtension({}, [new Web3ModalExtension(web3modalParams)]);
magic.web3modal.connectToWeb3modal();
expect(magic.web3modal.modal.subscribeEvents).toBeCalled();
});

test('connectToWeb3modal calls `open`', async () => {
test('connectToWeb3modal calls `open`', () => {
const magic = createMagicSDKWithExtension({}, [new Web3ModalExtension(web3modalParams)]);
magic.web3modal.connectToWeb3modal();
expect(magic.web3modal.modal.open).toBeCalled();
});

// skip because it does not like calling the unsubscribe function
test.skip('connectToWeb3modal emits wallet_rejected event on subscribeProvider error', async () => {
test.skip('connectToWeb3modal emits wallet_rejected event on subscribeProvider error', () => {
const magic = createMagicSDKWithExtension({}, [new Web3ModalExtension(web3modalParams)]);
magic.web3modal.modal.subscribeProvider = jest.fn((callback: (provider: { error: boolean }) => void) => {
callback({ error: true });
Expand All @@ -70,7 +70,7 @@ test.skip('connectToWeb3modal emits wallet_rejected event on subscribeProvider e
});

// skip because it does not like calling the unsubscribe function
test.skip('connectToWeb3modal emits wallet_connected event on `address` event', async () => {
test.skip('connectToWeb3modal emits wallet_connected event on `address` event', () => {
const magic = createMagicSDKWithExtension({}, [new Web3ModalExtension(web3modalParams)]);
magic.web3modal.modal.subscribeProvider = jest.fn((callback: (provider: { address: string }) => void) => {
callback({ address: '0x123' });
Expand All @@ -90,7 +90,7 @@ test.skip('connectToWeb3modal emits wallet_connected event on `address` event',
});

// skip because it does not like calling the unsubscribe function
test.skip('connectToWeb3modal emits wallet_rejected event on "MODAL_CLOSE" event', async () => {
test.skip('connectToWeb3modal emits wallet_rejected event on "MODAL_CLOSE" event', () => {
const magic = createMagicSDKWithExtension({}, [new Web3ModalExtension(web3modalParams)]);
magic.web3modal.modal.subscribeEvents = jest.fn(
(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,14 @@ const web3modalParams = {
},
};

test('constructor sets up modal and getIsConnected is false', async () => {
test('constructor sets up modal and getIsConnected is false', () => {
const magic = createMagicSDKWithExtension({}, [new Web3ModalExtension(web3modalParams)]);
magic.web3modal.modal.getIsConnected.mockReturnValueOnce(false);
expect(magic.web3modal.modal).toBeDefined();
expect(magic.web3modal.modal.getIsConnected()).toBeFalsy();
});

test('constructor sets event listeners when getIsConnected is true', async () => {
test('constructor sets event listeners when getIsConnected is true', () => {
const magic = createMagicSDKWithExtension({}, [new Web3ModalExtension(web3modalParams)]);
magic.web3modal.modal.getIsConnected = jest.fn().mockReturnValue(true);
const setIsConnectedSpy = jest.spyOn(magic.web3modal, 'setIsConnected').mockImplementation(() => Promise.resolve({}));
Expand All @@ -49,70 +49,3 @@ test('constructor sets event listeners when getIsConnected is true', async () =>
expect(setIsConnectedSpy).toBeCalled();
expect(setEip1193EventListenersSpy).toBeCalled();
});

// test('setIsConnected', async () => {
// const magic = createMagicSDKWithExtension({}, [new Web3ModalExtension(web3modalParams)]);
// magic.web3modal.setIsConnected();
// expect(localStorage.getItem('3pw_provider')).toEqual('web3modal');
// expect(localStorage.getItem('3pw_address')).toEqual('0x123');
// expect(localStorage.getItem('3pw_chainId')).toEqual('1');
// expect(magic.thirdPartyWallet.isConnected).toBeTruthy();
// });

// test('initialize', async () => {
// 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);
// });

// // this one is triggering the callback console.log
// test('setEip1193EventListeners calls subscribeProvider', async () => {
// const magic = createMagicSDKWithExtension({}, [new Web3ModalExtension(web3modalParams)]);
// magic.web3modal.setEip1193EventListeners();
// expect(magic.web3modal.modal.subscribeProvider).toBeCalled();
// });

// test('setEip1193EventListeners emits accountsChanged', async () => {
// const magic = createMagicSDKWithExtension({}, [new Web3ModalExtension(web3modalParams)]);
// magic.web3modal.modal.subscribeProvider = jest.fn(
// (callback: (provider: { address: string; chainId: number }) => void) => {
// callback({ address: '0x123', chainId: 1 });
// },
// );
// const emitSpy = jest.spyOn(magic.rpcProvider, 'emit').mockImplementation(() => Promise.resolve({}));
// magic.web3modal.setEip1193EventListeners();
// expect(emitSpy).toBeCalledWith('accountsChanged', ['0x123']);
// });

// test('setEip1193EventListeners emits chainChanged', async () => {
// const magic = createMagicSDKWithExtension({}, [new Web3ModalExtension(web3modalParams)]);
// localStorage.setItem('3pw_address', '0x123');
// magic.web3modal.modal.subscribeProvider = jest.fn(
// (callback: (provider: { address: string; chainId: number }) => void) => {
// callback({ address: '0x123', chainId: 1 });
// },
// );
// const emitSpy = jest.spyOn(magic.rpcProvider, 'emit').mockImplementation(() => Promise.resolve({}));
// magic.web3modal.setEip1193EventListeners();
// expect(magic.web3modal.modal.subscribeProvider).toBeCalled();
// expect(emitSpy).toBeCalledWith('chainChanged', [1]);
// });

// test('setEip1193EventListeners does not set listeners if they were already set', async () => {
// const magic = createMagicSDKWithExtension({}, [new Web3ModalExtension(web3modalParams)]);
// magic.web3modal.eventsListenerAdded = true;
// const subscribeProviderSpy = jest.spyOn(magic.web3modal.modal, 'subscribeProvider');
// magic.web3modal.setEip1193EventListeners();
// expect(subscribeProviderSpy).toBeCalledTimes(0);
// });

// test('calls subscribeProvider callback', async () => {
// const magic = createMagicSDKWithExtension({}, [new Web3ModalExtension(web3modalParams)]);
// const callback = jest.fn();
// magic.web3modal.eventsListenerAdded = false;
// jest.spyOn(magic.web3modal.modal, 'subscribeProvider').mockImplementation(callback);
// magic.web3modal.setEip1193EventListeners();
// expect(callback).toBeCalled();
// });
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const web3modalParams = {
},
};

test('initialize updates `enabledWallets`, `isConnected`, and `eventListeners`', async () => {
test('initialize updates `enabledWallets`, `isConnected`, and `eventListeners`', () => {
const magic = createMagicSDKWithExtension({}, [new Web3ModalExtension(web3modalParams)]);
magic.web3modal.initialize();
expect(magic.thirdPartyWallet.enabledWallets.web3modal).toBeTruthy();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,13 @@ const web3modalParams = {
},
};

test('setEip1193EventListeners calls subscribeProvider', async () => {
test('setEip1193EventListeners calls subscribeProvider', () => {
const magic = createMagicSDKWithExtension({}, [new Web3ModalExtension(web3modalParams)]);
magic.web3modal.setEip1193EventListeners();
expect(magic.web3modal.modal.subscribeProvider).toBeCalled();
});

test('setEip1193EventListeners does not set listeners if they were already set', async () => {
test('setEip1193EventListeners does not set listeners if they were already set', () => {
const magic = createMagicSDKWithExtension({}, [new Web3ModalExtension(web3modalParams)]);
magic.web3modal.eventsListenerAdded = true;
const subscribeProviderSpy = jest.spyOn(magic.web3modal.modal, 'subscribeProvider');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const web3modalParams = {
},
};

test('setIsConnected sets localStorage values', async () => {
test('setIsConnected sets localStorage values', () => {
const magic = createMagicSDKWithExtension({}, [new Web3ModalExtension(web3modalParams)]);
magic.web3modal.setIsConnected();
expect(localStorage.getItem('3pw_provider')).toEqual('web3modal');
Expand Down
30 changes: 15 additions & 15 deletions packages/@magic-sdk/provider/src/modules/third-party-wallet.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export class ThirdPartyWalletModule extends BaseModule {

/* Core Method Overrides */

private isLoggedIn(payload: Partial<JsonRpcRequestPayload>): PromiEvent<boolean, any> {
private isLoggedIn(payload: Partial<JsonRpcRequestPayload>): PromiEvent<boolean> {
switch (localStorage.getItem('3pw_provider')) {
case 'web3modal':
return this.web3modalIsLoggedIn();
Expand All @@ -52,7 +52,7 @@ export class ThirdPartyWalletModule extends BaseModule {
}
}

private getInfo(payload: Partial<JsonRpcRequestPayload>): PromiEvent<MagicUserMetadata, any> {
private getInfo(payload: Partial<JsonRpcRequestPayload>): PromiEvent<MagicUserMetadata> {
switch (localStorage.getItem('3pw_provider')) {
case 'web3modal':
return this.web3modalGetInfo();
Expand All @@ -62,7 +62,7 @@ export class ThirdPartyWalletModule extends BaseModule {
}
}

private logout(payload: Partial<JsonRpcRequestPayload>): PromiEvent<boolean, any> {
private logout(payload: Partial<JsonRpcRequestPayload>): PromiEvent<boolean> {
const provider = localStorage.getItem('3pw_provider');
this.resetState();
switch (provider) {
Expand All @@ -77,46 +77,46 @@ export class ThirdPartyWalletModule extends BaseModule {
/* Web3Modal Methods */

private web3modalRequest(payload: Partial<JsonRpcRequestPayload>) {
return createPromiEvent<any, any>((resolve, reject) => {
// @ts-ignore
return createPromiEvent<unknown>((resolve, reject) => {
// @ts-expect-error Property 'web3modal' does not exist on type 'SDKBase'.
this.sdk.web3modal.modal.getWalletProvider().request(payload).then(resolve).catch(reject);
});
}

private web3modalIsLoggedIn() {
return createPromiEvent<boolean, any>((resolve) => {
return createPromiEvent<boolean>((resolve) => {
// Required delay to allow web3modal to register connection
setTimeout(() => {
// @ts-ignore
// @ts-expect-error Property 'web3modal' does not exist on type 'SDKBase'.
const isLoggedIn: boolean = this.sdk.web3modal.modal.getIsConnected();
resolve(isLoggedIn);
}, 50);
});
}

private web3modalGetInfo() {
return createPromiEvent<MagicUserMetadata, any>((resolve) => {
// @ts-ignore
return createPromiEvent<MagicUserMetadata>((resolve) => {
// @ts-expect-error Property 'web3modal' does not exist on type 'SDKBase'.
const walletType = this.sdk.web3modal.modal.getWalletInfo()?.name;
// @ts-ignore
// @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: [] as any,
recoveryFactors: [],
walletType,
});
});
}

private web3modalLogout(): PromiEvent<boolean, any> {
return createPromiEvent<boolean, any>(async (resolve) => {
private web3modalLogout(): PromiEvent<boolean> {
return createPromiEvent<boolean>(async (resolve) => {
try {
// @ts-ignore
await this.sdk.web3modal.modal?.disconnect();
// @ts-expect-error Property 'web3modal' does not exist on type 'SDKBase'.
await this.sdk.web3modal.modal.disconnect();
} catch (error) {
console.error(error);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/@magic-sdk/provider/src/modules/wallet.ts
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export class WalletModule extends BaseModule {

/* Get user info such as the wallet type they are logged in with */
// deprecating
public async getInfo() {
public getInfo() {
createDeprecationWarning({
method: 'wallet.getInfo()',
removalVersions: ProductConsolidationMethodRemovalVersions,
Expand Down
6 changes: 4 additions & 2 deletions packages/@magic-sdk/provider/test/mocks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,12 @@ export function mockLocalStorage() {
ls[key] = value.toString();
}),
removeItem: jest.fn((key) => {
delete ls[key];
ls[key] = undefined;
}),
clear: jest.fn(() => {
Object.keys(ls).forEach((key) => delete ls[key]);
Object.keys(ls).forEach((key) => {
ls[key] = undefined;
});
}),
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -324,7 +324,7 @@ test('Calls third party wallet request override if third party wallet is connect
expect(spy).toBeCalledTimes(1);
});

test('Does not call thirdPartyWallet requestOverride if method is magic_intermediary_event', async () => {
test('Does not call thirdPartyWallet requestOverride if method is magic_intermediary_event', () => {
mockLocalStorage();
const response = new JsonRpcResponse(requestPayload).applyResult('magic_intermediary_event');
const { baseModule } = createBaseModule(jest.fn().mockImplementation(() => Promise.resolve(response)));
Expand All @@ -335,7 +335,7 @@ test('Does not call thirdPartyWallet requestOverride if method is magic_intermed
expect(spy).toBeCalledTimes(0);
});

test('Does not call thirdPartyWallet requestOverride if method is magic_nft_checkout', async () => {
test('Does not call thirdPartyWallet requestOverride if method is magic_nft_checkout', () => {
mockLocalStorage();
const response = new JsonRpcResponse(requestPayload).applyResult('magic_nft_checkout');
const { baseModule } = createBaseModule(jest.fn().mockImplementation(() => Promise.resolve(response)));
Expand All @@ -346,7 +346,7 @@ test('Does not call thirdPartyWallet requestOverride if method is magic_nft_chec
expect(spy).toBeCalledTimes(0);
});

test('Does not call thirdPartyWallet requestOverride if method is mc_login', async () => {
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)));
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ describe('third party wallet getInfo', () => {
const payload = { method: 'getInfo' };
const magic = createMagicSDK();
const requestMock = jest.fn();
(BaseModule as any).prototype.request = requestMock;
// @ts-expect-error 'request' is protected
BaseModule.prototype.request = requestMock;
magic.thirdPartyWallet.getInfo(payload);
expect(requestMock).toHaveBeenCalled();
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ describe('third party wallet isLoggedIn', () => {
const payload = { method: 'isLoggedIn' };
const magic = createMagicSDK();
const requestMock = jest.fn();
(BaseModule as any).prototype.request = requestMock;
// @ts-expect-error 'request' is protected
BaseModule.prototype.request = requestMock;
magic.thirdPartyWallet.isLoggedIn(payload);
expect(requestMock).toHaveBeenCalled();
});
Expand Down
Loading
Loading