Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[FEAT]: Add trustchain & createQRCodeHostInstance flow
- Loading branch information
1 parent
233c9e2
commit 81b473e
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "live-mobile": patch | ||
| --- | ||
|
|
||
| Add trustchain & createQRCodeHostInstance flow |
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 |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import React from "react"; | ||
| import { render, screen } from "@tests/test-renderer"; | ||
|
|
||
| import { INITIAL_TEST, WalletSyncSettingsNavigator } from "./shared"; | ||
|
|
||
| describe("scanQRCode", () => { | ||
| it("Should open the QR code scene when 'scan a qr code' toggle is pressed", async () => { | ||
| const { user } = render(<WalletSyncSettingsNavigator />, { | ||
| overrideInitialState: INITIAL_TEST, | ||
| }); | ||
| await user.press(await screen.findByText(/ledger sync/i)); | ||
| await user.press(await screen.findByText(/already created a key?/i)); | ||
| await user.press(await screen.findByText(/scan a qr code/i)); | ||
| await expect(await screen.findByText(/show qr/i)).toBeVisible(); | ||
| }); | ||
| }); |
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 |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import React from "react"; | ||
| import { render, screen, waitFor } from "@tests/test-renderer"; | ||
|
|
||
| import { INITIAL_TEST, WalletSyncSettingsNavigator } from "./shared"; | ||
| import getWalletSyncEnvironmentParams from "@ledgerhq/live-common/walletSync/getEnvironmentParams"; | ||
|
|
||
| jest.mock("@ledgerhq/trustchain/qrcode/index", () => ({ | ||
| createQRCodeHostInstance: () => ({ | ||
| trustchainApiBaseUrl: getWalletSyncEnvironmentParams("STAGING").trustchainApiBaseUrl, | ||
| onDisplayQRCode: jest.fn().mockImplementation(url => url), | ||
| onDisplayDigits: jest.fn().mockImplementation(digits => digits), | ||
| addMember: jest.fn(), | ||
| }), | ||
| })); | ||
|
|
||
| describe("SynchronizeWithQrCode", () => { | ||
| it("Should display the QR code when 'show qr' toggle is pressed and add a new member through the flow", async () => { | ||
| const { user } = render(<WalletSyncSettingsNavigator />, { | ||
| overrideInitialState: INITIAL_TEST, | ||
| }); | ||
| await user.press(await screen.findByText(/ledger sync/i)); | ||
| await user.press(await screen.findByText(/already created a key?/i)); | ||
| await user.press(await screen.findByText(/scan a qr code/i)); | ||
| await user.press(await screen.findByText(/show qr/i)); | ||
| expect(await screen.getByTestId("ws-qr-code-displayed")).toBeVisible(); | ||
|
|
||
| //PinCode Page after scanning QRCode | ||
| // Need to wait 3 seconds to simulate the time taken to scan the QR code | ||
| setTimeout(async () => { | ||
| await waitFor(() => { | ||
| expect(screen.getByText("Enter the code")).toBeDefined(); | ||
| }); | ||
| }, 3000); | ||
|
|
||
| //Succes Page after PinCode | ||
| setTimeout(async () => { | ||
| await waitFor(() => { | ||
| expect( | ||
| screen.getByText( | ||
| "Changes in your accounts will now automatically appear across all apps and platforms.", | ||
| ), | ||
| ).toBeDefined(); | ||
| }); | ||
| }, 3000); | ||
| }); | ||
| }); |
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 |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import { useCallback, useEffect, useState } from "react"; | ||
| import { createQRCodeHostInstance } from "@ledgerhq/trustchain/qrcode/index"; | ||
| import { InvalidDigitsError } from "@ledgerhq/trustchain/errors"; | ||
| import { useSelector } from "react-redux"; | ||
| import { trustchainSelector, memberCredentialsSelector } from "@ledgerhq/trustchain/store"; | ||
| import { useTrustchainSdk } from "./useTrustchainSdk"; | ||
| import { Options, Steps } from "../types/Activation"; | ||
| import { useNavigation } from "@react-navigation/native"; | ||
| import { WalletSyncNavigatorStackParamList } from "~/components/RootNavigator/types/WalletSyncNavigator"; | ||
| import { StackNavigatorNavigation } from "~/components/RootNavigator/types/helpers"; | ||
| import { ScreenName } from "~/const"; | ||
| import { useFeature } from "@ledgerhq/live-common/featureFlags/index"; | ||
| import getWalletSyncEnvironmentParams from "@ledgerhq/live-common/walletSync/getEnvironmentParams"; | ||
|
|
||
| interface Props { | ||
| setCurrentStep: (step: Steps) => void; | ||
| currentStep: Steps; | ||
| currentOption: Options; | ||
| } | ||
|
|
||
| export function useQRCodeHost({ setCurrentStep, currentStep, currentOption }: Props) { | ||
| const trustchain = useSelector(trustchainSelector); | ||
| const memberCredentials = useSelector(memberCredentialsSelector); | ||
| const sdk = useTrustchainSdk(); | ||
|
|
||
| const featureWalletSync = useFeature("llmWalletSync"); | ||
| const { trustchainApiBaseUrl } = getWalletSyncEnvironmentParams( | ||
| featureWalletSync?.params?.environment, | ||
| ); | ||
|
|
||
| const [isLoading, setIsLoading] = useState(false); | ||
| const [url, setUrl] = useState<string | null>(null); | ||
| const [error, setError] = useState<Error | null>(null); | ||
| const [pinCode, setPinCode] = useState<string | null>(null); | ||
|
|
||
| const navigation = useNavigation<StackNavigatorNavigation<WalletSyncNavigatorStackParamList>>(); | ||
|
|
||
| const startQRCodeProcessing = useCallback(() => { | ||
| if (!trustchain || !memberCredentials || isLoading) return; | ||
|
|
||
| setError(null); | ||
| setIsLoading(true); | ||
| createQRCodeHostInstance({ | ||
| trustchainApiBaseUrl, | ||
| onDisplayQRCode: url => { | ||
| setUrl(url); | ||
|
|
||
| //TODO-remove when clearing code, used to test behavior with webTool | ||
| console.log("onDisplayQRCode", url); | ||
| }, | ||
| onDisplayDigits: digits => { | ||
| setPinCode(digits); | ||
| setCurrentStep(Steps.PinDisplay); | ||
| }, | ||
| addMember: async member => { | ||
| await sdk.addMember(trustchain, memberCredentials, member); | ||
|
|
||
| return trustchain; | ||
| }, | ||
| }) | ||
| .catch(e => { | ||
| if (e instanceof InvalidDigitsError) { | ||
| setCurrentStep(Steps.SyncError); | ||
| return; | ||
| } | ||
| setError(e); | ||
| }) | ||
| .then(() => { | ||
| if (!error) | ||
| navigation.navigate(ScreenName.WalletSyncSuccess, { | ||
| created: false, | ||
| }); | ||
| }) | ||
| .finally(() => { | ||
| setUrl(null); | ||
| setPinCode(null); | ||
| setIsLoading(false); | ||
| }); | ||
| }, [ | ||
| trustchain, | ||
| memberCredentials, | ||
| isLoading, | ||
| trustchainApiBaseUrl, | ||
| setCurrentStep, | ||
| sdk, | ||
| error, | ||
| navigation, | ||
| ]); | ||
|
|
||
| useEffect(() => { | ||
| if (currentStep === Steps.QrCodeMethod && currentOption === Options.SHOW_QR) { | ||
| startQRCodeProcessing(); | ||
| } | ||
| }, [currentOption, currentStep, startQRCodeProcessing]); | ||
|
|
||
| return { | ||
| url, | ||
| error, | ||
| isLoading, | ||
| startQRCodeProcessing, | ||
| pinCode, | ||
| }; | ||
| } | ||
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
Oops, something went wrong.