-
Notifications
You must be signed in to change notification settings - Fork 473
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: Enable 1-click safe create for social login (#2620)
- Loading branch information
1 parent
cc7398b
commit daf6bdb
Showing
11 changed files
with
268 additions
and
121 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,24 @@ | ||
| import { act, render, waitFor } from '@/tests/test-utils' | ||
| import { render, waitFor } from '@/tests/test-utils' | ||
| import * as useWallet from '@/hooks/wallets/useWallet' | ||
| import * as useMPCWallet from '@/hooks/wallets/mpc/useMPCWallet' | ||
| import * as chains from '@/hooks/useChains' | ||
|
|
||
| import MPCLogin from '../MPCLogin' | ||
| import { hexZeroPad } from '@ethersproject/bytes' | ||
| import { type EIP1193Provider } from '@web3-onboard/common' | ||
| import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/module' | ||
| import { MpcWalletProvider } from '../MPCWalletProvider' | ||
| import { type ChainInfo } from '@safe-global/safe-gateway-typescript-sdk' | ||
|
|
||
| describe('MPCLogin', () => { | ||
| beforeEach(() => { | ||
| jest.resetAllMocks() | ||
| }) | ||
|
|
||
| it('should render continue with connected account', async () => { | ||
| it('should render continue with connected account when on gnosis chain', async () => { | ||
| const mockOnLogin = jest.fn() | ||
| const walletAddress = hexZeroPad('0x1', 20) | ||
| jest.spyOn(chains, 'useCurrentChain').mockReturnValue({ chainId: '100' } as unknown as ChainInfo) | ||
| jest.spyOn(useWallet, 'default').mockReturnValue({ | ||
| address: walletAddress, | ||
| chainId: '5', | ||
|
|
@@ -50,19 +54,13 @@ describe('MPCLogin', () => { | |
| expect(mockOnLogin).toHaveBeenCalled() | ||
| }) | ||
|
|
||
| it('should render google login button and invoke the callback on connection if no wallet is connected', async () => { | ||
| it('should render google login button and invoke the callback on connection if no wallet is connected on gnosis chain', async () => { | ||
| const mockOnLogin = jest.fn() | ||
| const walletAddress = hexZeroPad('0x1', 20) | ||
| const mockUseWallet = jest.spyOn(useWallet, 'default').mockReturnValue(null) | ||
| jest.spyOn(chains, 'useCurrentChain').mockReturnValue({ chainId: '100' } as unknown as ChainInfo) | ||
| jest.spyOn(useWallet, 'default').mockReturnValue(null) | ||
| const mockTriggerLogin = jest.fn(() => true) | ||
| const mockUseMPCWallet = jest.spyOn(useMPCWallet, 'useMPCWallet').mockReturnValue({ | ||
| userInfo: { | ||
| email: undefined, | ||
| name: undefined, | ||
| profileImage: undefined, | ||
| }, | ||
| jest.spyOn(useMPCWallet, 'useMPCWallet').mockReturnValue({ | ||
| triggerLogin: mockTriggerLogin, | ||
| walletState: useMPCWallet.MPCWalletState.NOT_INITIALIZED, | ||
| } as unknown as useMPCWallet.MPCWalletHook) | ||
|
|
||
| const result = render( | ||
|
|
@@ -78,30 +76,27 @@ describe('MPCLogin', () => { | |
| // We do not automatically invoke the callback as the user did not actively connect | ||
| expect(mockOnLogin).not.toHaveBeenCalled() | ||
|
|
||
| await act(async () => { | ||
| // Click the button and mock a successful login | ||
| const button = await result.findByRole('button') | ||
| button.click() | ||
| mockUseMPCWallet.mockReset().mockReturnValue({ | ||
| userInfo: { | ||
| email: '[email protected]', | ||
| name: 'Test Testermann', | ||
| profileImage: 'test.png', | ||
| }, | ||
| triggerLogin: jest.fn(), | ||
| walletState: useMPCWallet.MPCWalletState.READY, | ||
| } as unknown as useMPCWallet.MPCWalletHook) | ||
|
|
||
| mockUseWallet.mockReset().mockReturnValue({ | ||
| address: walletAddress, | ||
| chainId: '5', | ||
| label: ONBOARD_MPC_MODULE_LABEL, | ||
| provider: {} as unknown as EIP1193Provider, | ||
| }) | ||
| }) | ||
| const button = await result.findByRole('button') | ||
| button.click() | ||
|
|
||
| await waitFor(() => { | ||
| expect(mockOnLogin).toHaveBeenCalled() | ||
| }) | ||
| }) | ||
|
|
||
| it('should disable the Google Login button with a message when not on gnosis chain', async () => { | ||
| jest.spyOn(chains, 'useCurrentChain').mockReturnValue({ chainId: '1' } as unknown as ChainInfo) | ||
| jest.spyOn(useMPCWallet, 'useMPCWallet').mockReturnValue({ | ||
| triggerLogin: jest.fn(), | ||
| } as unknown as useMPCWallet.MPCWalletHook) | ||
|
|
||
| const result = render( | ||
| <MpcWalletProvider> | ||
| <MPCLogin /> | ||
| </MpcWalletProvider>, | ||
| ) | ||
|
|
||
| expect(result.getByText('Currently only supported on Gnosis Chain')).toBeInTheDocument() | ||
| expect(await result.findByRole('button')).toBeDisabled() | ||
| }) | ||
| }) | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -31,4 +31,8 @@ | |
| .walletName { | ||
| display: none; | ||
| } | ||
|
|
||
| .socialLoginInfo > div > div { | ||
| display: none; | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
41 changes: 41 additions & 0 deletions
41
src/components/new-safe/create/steps/ReviewStep/index.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import { type ChainInfo } from '@safe-global/safe-gateway-typescript-sdk' | ||
|
|
||
| import { render } from '@/tests/test-utils' | ||
| import { NetworkFee } from '@/components/new-safe/create/steps/ReviewStep/index' | ||
| import * as useWallet from '@/hooks/wallets/useWallet' | ||
| import { type ConnectedWallet } from '@/services/onboard' | ||
| import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/module' | ||
|
|
||
| const mockChainInfo = { | ||
| chainId: '100', | ||
| l2: false, | ||
| nativeCurrency: { | ||
| symbol: 'ETH', | ||
| }, | ||
| } as ChainInfo | ||
|
|
||
| describe('NetworkFee', () => { | ||
| it('should display the total fee if not social login', () => { | ||
| jest.spyOn(useWallet, 'default').mockReturnValue({ label: 'MetaMask' } as unknown as ConnectedWallet) | ||
| const mockTotalFee = '0.0123' | ||
| const result = render(<NetworkFee totalFee={mockTotalFee} chain={mockChainInfo} willRelay={true} />) | ||
|
|
||
| expect(result.getByText(`≈ ${mockTotalFee} ${mockChainInfo.nativeCurrency.symbol}`)).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('displays a sponsored by message for social login', () => { | ||
| jest.spyOn(useWallet, 'default').mockReturnValue({ label: ONBOARD_MPC_MODULE_LABEL } as unknown as ConnectedWallet) | ||
| const result = render(<NetworkFee totalFee="0" chain={mockChainInfo} willRelay={true} />) | ||
|
|
||
| expect(result.getByText(/Your account is sponsored by Gnosis Chain/)).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('displays an error message for social login if there are no relays left', () => { | ||
| jest.spyOn(useWallet, 'default').mockReturnValue({ label: ONBOARD_MPC_MODULE_LABEL } as unknown as ConnectedWallet) | ||
| const result = render(<NetworkFee totalFee="0" chain={mockChainInfo} willRelay={false} />) | ||
|
|
||
| expect( | ||
| result.getByText(/You have used up your 5 free transactions per hour. Please try again later/), | ||
| ).toBeInTheDocument() | ||
| }) | ||
| }) |
Oops, something went wrong.