ID-1122 & ID-742 Add isRegisteredOffchain & registerOffchain methods,…

… lazy wallet initialisation (#1015) Co-authored-by: Hayden Fowler <[email protected]> Co-authored-by: Jon <[email protected]> Co-authored-by: Jon <[email protected]> Co-authored-by: Hayden Fowler <[email protected]>
immutable · Nov 13, 2023 · b6b2848 · b6b2848
1 parent 75d0d51
commit b6b2848
Show file tree

Hide file tree

Showing 15 changed files with 688 additions and 336 deletions.
diff --git a/packages/passport/sdk-sample-app/README.md b/packages/passport/sdk-sample-app/README.md
@@ -3,14 +3,11 @@
 ## Running Locally
 
 ```bash
-# install deps & build the sdk at project root
+# Install deps
 yarn
-yarn build
 
-# install deps & run the sample app
-# cd packages/passport/sdk-sample-app
-yarn
-yarn dev
+# Build the passport SDK and run the sample app
+yarn workspace @imtbl/passport build && yarn workspace @imtbl/passport-sdk-sample-app dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
diff --git a/packages/passport/sdk-sample-app/src/components/imx/ImxWorkflow.tsx b/packages/passport/sdk-sample-app/src/components/imx/ImxWorkflow.tsx
@@ -18,29 +18,57 @@ function ImxWorkflow() {
  const [showTransfer, setShowTransfer] = useState<boolean>(false);
  const [showOrder, setShowOrder] = useState<boolean>(false);
 
- const { addMessage, isLoading } = useStatusProvider();
+ const { addMessage, isLoading, setIsLoading } = useStatusProvider();
  const { connectImx, imxProvider } = usePassportProvider();
 
- const getAddress = useCallback(async () => {
- const address = await imxProvider?.getAddress();
- addMessage('Get Address', address);
- }, [addMessage, imxProvider]);
+ const ensureUserIsRegistered = useCallback(async (callback: Function) => {
+ setIsLoading(true);
+ try {
+ if (await imxProvider?.isRegisteredOffchain()) {
+ await callback();
+ } else {
+ addMessage('Please call `registerOffchain` before calling this method');
+ }
+ } finally {
+ setIsLoading(false);
+ }
+ }, [addMessage, imxProvider, setIsLoading]);
 
- const handleBulkTransfer = () => {
- setShowBulkTransfer(true);
- };
+ const getAddress = useCallback(async () => (
+ ensureUserIsRegistered(async () => {
+ const address = await imxProvider?.getAddress();
+ addMessage('Get Address', address);
+ })
+ ), [addMessage, ensureUserIsRegistered, imxProvider]);
 
- const handleTransfer = () => {
- setShowTransfer(true);
+ const isRegisteredOffchain = async () => {
+ try {
+ setIsLoading(true);
+ const result = await imxProvider?.isRegisteredOffchain();
+ addMessage('Is Registered Offchain', result);
+ } catch (err) {
+ addMessage('Is Registered Offchain', err);
+ } finally {
+ setIsLoading(false);
+ }
  };
 
- const handleTrade = () => {
- setShowTrade(true);
+ const registerUser = async () => {
+ try {
+ setIsLoading(true);
+ const result = await imxProvider?.registerOffchain();
+ addMessage('Register off chain', result);
+ } catch (err) {
+ addMessage('Register off chain', err);
+ } finally {
+ setIsLoading(false);
+ }
  };
 
- const handleOrder = useCallback(() => {
- setShowOrder(true);
- }, []);
+ const handleBulkTransfer = () => ensureUserIsRegistered(() => setShowBulkTransfer(true));
+ const handleTransfer = () => ensureUserIsRegistered(() => setShowTransfer(true));
+ const handleTrade = () => ensureUserIsRegistered(() => setShowTrade(true));
+ const handleOrder = () => ensureUserIsRegistered(() => setShowOrder(true));
 
  return (
  <CardStack title="Imx Workflow">
@@ -113,6 +141,18 @@ function ImxWorkflow() {
  >
  Get Address
  </WorkflowButton>
+ <WorkflowButton
+ disabled={isLoading}
+ onClick={isRegisteredOffchain}
+ >
+ Is Registered Offchain
+ </WorkflowButton>
+ <WorkflowButton
+ disabled={isLoading}
+ onClick={registerUser}
+ >
+ Register User
+ </WorkflowButton>
  </>
  )}
  </Stack>

diff --git a/packages/passport/sdk-sample-app/src/context/StatusProvider.tsx b/packages/passport/sdk-sample-app/src/context/StatusProvider.tsx
@@ -23,17 +23,19 @@ export function StatusProvider({
 
  const addMessage = useCallback((operation: string, ...args: any[]) => {
  let messageString: string;
- if (args[0] instanceof PassportError) {
- messageString = `${args[0].type}: ${args[0].message}`;
+ if (!args?.length) {
+ messageString = operation;
+ } else if (args[0] instanceof PassportError) {
+ messageString = `${operation}: ${args[0].type} - ${args[0].message}`;
  } else {
- messageString = args.map((arg) => {
+ messageString = `${operation}: ${args.map((arg) => {
  if (arg instanceof Error) {
  return arg.toString();
  }
  return JSON.stringify(arg, null, 2);
- }).join(': ');
+ }).join(' - ')}`;
  }
- setMessages((prevMessages) => [...prevMessages, `${operation}: ${messageString}`]);
+ setMessages((prevMessages) => [...prevMessages, messageString]);
  }, []);
 
  const providerValues = useMemo(() => ({

diff --git a/packages/passport/sdk/src/authManager.ts b/packages/passport/sdk/src/authManager.ts
@@ -14,7 +14,7 @@ import { PassportErrorType, withPassportError } from './errors/passportError';
 import {
  PassportMetadata,
  User,
- DeviceCodeReponse,
+ DeviceCodeResponse,
  DeviceConnectResponse,
  DeviceTokenResponse,
  DeviceErrorResponse,
@@ -106,9 +106,9 @@ export default class AuthManager {
  };
  if (passport?.imx_eth_address) {
  user.imx = {
- ethAddress: passport?.imx_eth_address,
- starkAddress: passport?.imx_stark_address,
- userAdminAddress: passport?.imx_user_admin_address,
+ ethAddress: passport.imx_eth_address,
+ starkAddress: passport.imx_stark_address,
+ userAdminAddress: passport.imx_user_admin_address,
  };
  }
  if (passport?.zkevm_eth_address) {
@@ -132,11 +132,11 @@ export default class AuthManager {
  nickname: idTokenPayload.nickname,
  },
  };
- if (idTokenPayload?.passport?.imx_eth_address) {
+ if (idTokenPayload?.passport.imx_eth_address) {
  user.imx = {
- ethAddress: idTokenPayload?.passport?.imx_eth_address,
- starkAddress: idTokenPayload?.passport?.imx_stark_address,
- userAdminAddress: idTokenPayload?.passport?.imx_user_admin_address,
+ ethAddress: idTokenPayload.passport.imx_eth_address,
+ starkAddress: idTokenPayload.passport.imx_stark_address,
+ userAdminAddress: idTokenPayload.passport.imx_user_admin_address,
  };
  }
  if (idTokenPayload?.passport?.zkevm_eth_address) {
@@ -168,7 +168,7 @@ export default class AuthManager {
 
  public async loginWithDeviceFlow(): Promise<DeviceConnectResponse> {
  return withPassportError<DeviceConnectResponse>(async () => {
- const response = await axios.post<DeviceCodeReponse>(
+ const response = await axios.post<DeviceCodeResponse>(
  `${this.config.authenticationDomain}/oauth/device/code`,
  {
  client_id: this.config.oidcConfiguration.clientId,

diff --git a/packages/passport/sdk/src/starkEx/passportImxProvider.test.ts b/packages/passport/sdk/src/starkEx/passportImxProvider.test.ts
@@ -14,19 +14,31 @@ import {
  UnsignedOrderRequest,
  UnsignedTransferRequest,
 } from '@imtbl/core-sdk';
-import { mockUserImx, testConfig } from '../test/mocks';
+import { Web3Provider } from '@ethersproject/providers';
+import registerPassportStarkEx from './workflows/registration';
+import { mockUserImx, testConfig, mockUser } from '../test/mocks';
 import { PassportError, PassportErrorType } from '../errors/passportError';
 import { PassportImxProvider } from './passportImxProvider';
 import {
- batchNftTransfer, cancelOrder, createOrder, createTrade, exchangeTransfer, transfer,
+ batchNftTransfer,
+ cancelOrder,
+ createOrder,
+ createTrade,
+ exchangeTransfer,
+ transfer,
 } from './workflows';
 import { ConfirmationScreen } from '../confirmation';
 import { PassportConfiguration } from '../config';
 import { PassportEventMap, PassportEvents } from '../types';
 import TypedEventEmitter from '../utils/typedEventEmitter';
 import AuthManager from '../authManager';
+import MagicAdapter from '../magicAdapter';
+import { getStarkSigner } from './getStarkSigner';
 
+jest.mock('@ethersproject/providers');
 jest.mock('./workflows');
+jest.mock('./workflows/registration');
+jest.mock('./getStarkSigner');
 
 describe('PassportImxProvider', () => {
  afterEach(jest.resetAllMocks);
@@ -52,22 +64,81 @@ describe('PassportImxProvider', () => {
  getAddress: jest.fn(),
  } as StarkSigner;
 
+ const mockEthSigner = {
+ signMessage: jest.fn(),
+ getAddress: jest.fn(),
+ };
+
+ const magicAdapterMock = {
+ login: jest.fn(),
+ };
+
+ const getSignerMock = jest.fn();
+
  let passportEventEmitter: TypedEventEmitter<PassportEventMap>;
 
  beforeEach(() => {
+ jest.restoreAllMocks();
+ getSignerMock.mockReturnValue(mockEthSigner);
+ (registerPassportStarkEx as jest.Mock).mockResolvedValue(null);
  passportEventEmitter = new TypedEventEmitter<PassportEventMap>();
  mockAuthManager.getUser.mockResolvedValue(mockUserImx);
 
+ // Signers
+ magicAdapterMock.login.mockResolvedValue({ getSigner: getSignerMock });
+ (Web3Provider as unknown as jest.Mock).mockReturnValue({ getSigner: getSignerMock });
+ (getStarkSigner as jest.Mock).mockResolvedValue(mockStarkSigner);
+
  passportImxProvider = new PassportImxProvider({
  authManager: mockAuthManager as unknown as AuthManager,
- starkSigner: mockStarkSigner,
+ magicAdapter: magicAdapterMock as unknown as MagicAdapter,
  confirmationScreen,
  immutableXClient,
  config: testConfig,
  passportEventEmitter,
  });
  });
 
+ describe('async signer initialisation', () => {
+ it('initialises the eth and stark signers correctly', async () => {
+ // The promise is created in the constructor but not awaited until a method is called
+ await passportImxProvider.getAddress();
+
+ expect(magicAdapterMock.login).toHaveBeenCalledWith(mockUserImx.idToken);
+ expect(getStarkSigner).toHaveBeenCalledWith(mockEthSigner);
+ });
+
+ it('initialises the eth and stark signers only once', async () => {
+ await passportImxProvider.getAddress();
+ await passportImxProvider.getAddress();
+ await passportImxProvider.getAddress();
+
+ expect(magicAdapterMock.login).toHaveBeenCalledTimes(1);
+ expect(getStarkSigner).toHaveBeenCalledTimes(1);
+ });
+
+ it('re-throws the initialisation error when a method is called', async () => {
+ jest.resetAllMocks();
+ jest.restoreAllMocks();
+
+ mockAuthManager.getUser.mockResolvedValue(mockUserImx);
+ // Signers
+ magicAdapterMock.login.mockResolvedValue({});
+ (getStarkSigner as jest.Mock).mockRejectedValue(new Error('error'));
+
+ const pp = new PassportImxProvider({
+ authManager: mockAuthManager as unknown as AuthManager,
+ magicAdapter: magicAdapterMock as unknown as MagicAdapter,
+ confirmationScreen,
+ immutableXClient,
+ config: testConfig,
+ passportEventEmitter: new TypedEventEmitter<PassportEventMap>(),
+ });
+
+ await expect(pp.getAddress()).rejects.toThrow(new Error('error'));
+ });
+ });
+
  describe('transfer', () => {
  it('calls transfer workflow', async () => {
  const returnValue = {} as CreateTransferResponseV1;
@@ -90,27 +161,25 @@ describe('PassportImxProvider', () => {
  });
  });
 
- describe('registerOffchain', () => {
- it('should throw error', async () => {
- expect(passportImxProvider.registerOffchain)
- .toThrow(
- new PassportError(
- 'Operation not supported',
- PassportErrorType.OPERATION_NOT_SUPPORTED_ERROR,
- ),
- );
+ describe('isRegisteredOffchain', () => {
+ it('should return true when a user is registered', async () => {
+ const isRegistered = await passportImxProvider.isRegisteredOffchain();
+ expect(isRegistered).toEqual(true);
  });
- });
 
- describe('isRegisteredOnchain', () => {
- it('should throw error', async () => {
- expect(passportImxProvider.isRegisteredOnchain)
- .toThrow(
- new PassportError(
- 'Operation not supported',
- PassportErrorType.OPERATION_NOT_SUPPORTED_ERROR,
- ),
- );
+ it('should return false when a user is not registered', async () => {
+ mockAuthManager.getUser.mockResolvedValue({});
+ const isRegistered = await passportImxProvider.isRegisteredOffchain();
+ expect(isRegistered).toEqual(false);
+ });
+
+ it('should bubble up the error if user is not logged in', async () => {
+ mockAuthManager.getUser.mockResolvedValue(undefined);
+
+ await expect(passportImxProvider.isRegisteredOffchain()).rejects.toThrow(new PassportError(
+ 'User has been logged out',
+ PassportErrorType.NOT_LOGGED_IN_ERROR,
+ ));
  });
  });
 
@@ -266,6 +335,26 @@ describe('PassportImxProvider', () => {
  });
  });
 
+ describe('registerOffChain', () => {
+ it('should register the user and update the provider instance user', async () => {
+ const magicProviderMock = {};
+
+ mockAuthManager.login.mockResolvedValue(mockUser);
+ magicAdapterMock.login.mockResolvedValue(magicProviderMock);
+ mockAuthManager.loginSilent.mockResolvedValue({ ...mockUser, imx: { ethAddress: '', starkAddress: '', userAdminAddress: '' } });
+
+ await passportImxProvider.registerOffchain();
+
+ expect(registerPassportStarkEx).toHaveBeenCalledWith({
+ ethSigner: mockEthSigner,
+ starkSigner: mockStarkSigner,
+ usersApi: immutableXClient.usersApi,
+ }, mockUserImx.accessToken);
+ expect(mockAuthManager.loginSilent).toHaveBeenCalledTimes(1);
+ expect(mockAuthManager.loginSilent).toHaveBeenCalledWith({ forceRefresh: true });
+ });
+ });
+
  describe.each([
  ['transfer' as const, {} as UnsignedTransferRequest],
  ['createOrder' as const, {} as UnsignedOrderRequest],