From 05a9a20d0d7b08f4c8987c57753ebe6de0bf2e27 Mon Sep 17 00:00:00 2001 From: Caso Date: Tue, 21 Nov 2023 16:05:52 +0100 Subject: [PATCH] fix(ui): DTIS-450 removal crypto UI and deps (#259) * fix: remove pages, components, reducers, fixtures from Crypto * fix: remove Crypto types * fix: remove unused defaultCredentialsCardData * fix: remove unnecessary ChooseAccountName component * fix: remove unused toast state * fix: remove seedPhraseType from GenerateSeedPhrase.tsx * fix: remove passing route params from onboarding * fix: unit test after clean up on generate seed * fix: clean unused operationState fields * fix: remove unused imports * fix: remove crypto fields from redux in VerifySeedPhrase.test.tsx * fix: remove unused validateMnemonic import in GenerateSeedPhrase.tsx * fix: remove unnecessary stateRestore condition in GenerateSeedPhrase.tsx * fix: remove unnecessary cryptoAccountsCache from GenerateSeedPhrase.test.tsx * fix: remove unnecessary onboardingRoute dict and deps * fix: crypto clean up in i18n * fix: remove unused cryptoAccountsCache * fix: remove unnecessary restore tests * fix: remove unnecessary unit tests for Generate Seed Phrase screen from Crypto/Generate * fix: remove comment * fix: remove unused wallet toast messages in i18n * fix: remove unused restoreCryptoAccount * fix: remove unnecessary undefined value * fix: using optional route in handleNavigation, Onboarding.tsx * fix: put back route condition in handleNavigation * fix: rename crypto placeholder to just crypto * fix: crypto wallet messages for toast * fix: remove unused toast message after verify seed phrase * fix: remove defaultCryptoAccount from redux * fix: remove newcryptoaccount from i18n * fix: remove AlertVerify in GenerateSeedPhrase.tsx * fix: refactor GenerateSeedPhrase.tsx * fix: remove AlertExit from GenerateSeedPhrase.tsx * fix: remove AlertExit and refactor --- src/locales/en/en.json | 90 ----- src/routes/backRoute/backRoute.test.ts | 18 - src/routes/index.tsx | 11 - src/routes/nextRoute/nextRoute.test.ts | 31 +- src/routes/nextRoute/nextRoute.ts | 26 +- src/routes/paths.ts | 1 - src/store/index.ts | 2 - .../cryptoAccountsCache.test.ts | 91 ----- .../cryptoAccountsCache.ts | 53 --- .../reducers/cryptoAccountsCache/index.ts | 1 - .../reducers/stateCache/stateCache.test.ts | 3 +- src/store/reducers/stateCache/stateCache.ts | 1 - .../reducers/stateCache/stateCache.types.ts | 1 - src/ui/__fixtures__/cryptoAccountsFix.ts | 295 -------------- .../AddCryptoAccount/AddCryptoAccount.scss | 51 --- .../AddCryptoAccount/AddCryptoAccount.tsx | 154 ------- .../AddCryptoAccount.types.ts | 8 - src/ui/components/AddCryptoAccount/index.ts | 1 - src/ui/components/AppWrapper/AppWrapper.tsx | 16 - .../AssetsTransactions.scss | 222 ----------- .../AssetsTransactions.test.tsx | 87 ---- .../AssetsTransactions/AssetsTransactions.tsx | 328 --------------- .../AssetsTransactions.types.ts | 13 - src/ui/components/AssetsTransactions/index.ts | 1 - .../ChooseAccountName/ChooseAccountName.scss | 5 - .../ChooseAccountName.test.tsx | 134 ------- .../ChooseAccountName/ChooseAccountName.tsx | 150 ------- .../ChooseAccountName.types.ts | 9 - src/ui/components/ChooseAccountName/index.ts | 1 - .../CryptoBalance/CryptoBalance.scss | 78 ---- .../CryptoBalance/CryptoBalance.test.tsx | 101 ----- .../CryptoBalance/CryptoBalance.tsx | 104 ----- .../CryptoBalance/CryptoBalance.types.ts | 13 - src/ui/components/CryptoBalance/index.ts | 1 - src/ui/components/MyWallets/MyWallets.scss | 109 ----- .../components/MyWallets/MyWallets.test.tsx | 109 ----- src/ui/components/MyWallets/MyWallets.tsx | 308 -------------- .../components/MyWallets/MyWallets.types.ts | 13 - src/ui/components/MyWallets/index.ts | 1 - .../components/RenameWallet/RenameWallet.scss | 13 - .../components/RenameWallet/RenameWallet.tsx | 147 ------- .../RenameWallet/RenameWallet.types.ts | 8 - src/ui/components/RenameWallet/index.ts | 1 - .../VerifyPasscode/VerifyPasscode.tsx | 5 - .../VerifyPassword/VerifyPassword.tsx | 5 - .../navigation/TabsMenu/TabsMenu.tsx | 6 +- src/ui/constants/dictionary.ts | 43 -- .../pages/CreatePassword/CreatePassword.tsx | 6 +- src/ui/pages/Crypto/Crypto.scss | 92 +---- src/ui/pages/Crypto/Crypto.test.tsx | 335 +--------------- src/ui/pages/Crypto/Crypto.tsx | 377 +++--------------- src/ui/pages/Crypto/Crypto.types.ts | 41 -- .../CryptoPlaceholder/CryptoPlaceholder.scss | 21 - .../CryptoPlaceholder.test.tsx | 16 - .../CryptoPlaceholder/CryptoPlaceholder.tsx | 95 ----- src/ui/pages/CryptoPlaceholder/index.ts | 1 - .../GenerateSeedPhrase.test.tsx | 172 +------- .../GenerateSeedPhrase/GenerateSeedPhrase.tsx | 247 ++---------- .../GenerateSeedPhrase.types.ts | 3 - src/ui/pages/Onboarding/Onboarding.test.tsx | 8 +- src/ui/pages/Onboarding/Onboarding.tsx | 36 +- .../VerifySeedPhrase.test.tsx | 10 +- .../VerifySeedPhrase/VerifySeedPhrase.tsx | 69 +--- 63 files changed, 152 insertions(+), 4246 deletions(-) delete mode 100644 src/store/reducers/cryptoAccountsCache/cryptoAccountsCache.test.ts delete mode 100644 src/store/reducers/cryptoAccountsCache/cryptoAccountsCache.ts delete mode 100644 src/store/reducers/cryptoAccountsCache/index.ts delete mode 100644 src/ui/__fixtures__/cryptoAccountsFix.ts delete mode 100644 src/ui/components/AddCryptoAccount/AddCryptoAccount.scss delete mode 100644 src/ui/components/AddCryptoAccount/AddCryptoAccount.tsx delete mode 100644 src/ui/components/AddCryptoAccount/AddCryptoAccount.types.ts delete mode 100644 src/ui/components/AddCryptoAccount/index.ts delete mode 100644 src/ui/components/AssetsTransactions/AssetsTransactions.scss delete mode 100644 src/ui/components/AssetsTransactions/AssetsTransactions.test.tsx delete mode 100644 src/ui/components/AssetsTransactions/AssetsTransactions.tsx delete mode 100644 src/ui/components/AssetsTransactions/AssetsTransactions.types.ts delete mode 100644 src/ui/components/AssetsTransactions/index.ts delete mode 100644 src/ui/components/ChooseAccountName/ChooseAccountName.scss delete mode 100644 src/ui/components/ChooseAccountName/ChooseAccountName.test.tsx delete mode 100644 src/ui/components/ChooseAccountName/ChooseAccountName.tsx delete mode 100644 src/ui/components/ChooseAccountName/ChooseAccountName.types.ts delete mode 100644 src/ui/components/ChooseAccountName/index.ts delete mode 100644 src/ui/components/CryptoBalance/CryptoBalance.scss delete mode 100644 src/ui/components/CryptoBalance/CryptoBalance.test.tsx delete mode 100644 src/ui/components/CryptoBalance/CryptoBalance.tsx delete mode 100644 src/ui/components/CryptoBalance/CryptoBalance.types.ts delete mode 100644 src/ui/components/CryptoBalance/index.ts delete mode 100644 src/ui/components/MyWallets/MyWallets.scss delete mode 100644 src/ui/components/MyWallets/MyWallets.test.tsx delete mode 100644 src/ui/components/MyWallets/MyWallets.tsx delete mode 100644 src/ui/components/MyWallets/MyWallets.types.ts delete mode 100644 src/ui/components/MyWallets/index.ts delete mode 100644 src/ui/components/RenameWallet/RenameWallet.scss delete mode 100644 src/ui/components/RenameWallet/RenameWallet.tsx delete mode 100644 src/ui/components/RenameWallet/RenameWallet.types.ts delete mode 100644 src/ui/components/RenameWallet/index.ts delete mode 100644 src/ui/pages/Crypto/Crypto.types.ts delete mode 100644 src/ui/pages/CryptoPlaceholder/CryptoPlaceholder.scss delete mode 100644 src/ui/pages/CryptoPlaceholder/CryptoPlaceholder.test.tsx delete mode 100644 src/ui/pages/CryptoPlaceholder/CryptoPlaceholder.tsx delete mode 100644 src/ui/pages/CryptoPlaceholder/index.ts diff --git a/src/locales/en/en.json b/src/locales/en/en.json index ce76806fb..aa2c88b77 100644 --- a/src/locales/en/en.json +++ b/src/locales/en/en.json @@ -57,27 +57,6 @@ "continue": "Continue" } }, - "newcryptoaccount": { - "title": "Generate your Seed Phrase", - "paragraph": { - "top": "It is critical that you securely store this secret recovery phrase, also referred to as a mnemonic, seed, or backup phrase. You will require this phrase in the event that you change mobile devices or need to regain access to your identity wallet profile.", - "bottom": "This phrase is essentially a representation of your Identity Wallet profile private key. This means that anyone with access to it can control your identity. We strongly recommend not using screenshots or storing this phrase without encryption." - }, - "button": { - "continue": "Continue" - } - }, - "restorecryptoaccount": { - "title": "Enter Seed Phrase", - "suggestions": "Suggestions", - "paragraph": { - "top": "Restore a crypto account based on an existing seed phrase.", - "bottom": "" - }, - "button": { - "continue": "Verify Seed Phrase" - } - }, "segment": "{{length}} words", "privacy": { "overlay": { @@ -153,12 +132,6 @@ "continue": "Continue" } }, - "newcryptoaccount": { - "title": "Verify your Seed Phrase", - "button": { - "continue": "Verify your Seed Phrase" - } - }, "paragraph": { "top": "Please select every word from your seed phrase in the correct order. If you select a word in the wrong order, select it again to move it back down to the list of available words." }, @@ -589,75 +562,12 @@ ] } }, - "crypto": { - "tab": { - "create": "Add a crypto account", - "network": { - "mainnet": "Mainnet" - }, - "slider": { - "title": { - "mainbalance": "Main balance", - "rewardbalance": "Reward balance" - } - }, - "actionbuttons": { - "send": "Send", - "receive": "Receive", - "nfts": "NFTs", - "staking": "Staking" - }, - "assetstransactions": { - "swipeupmessage": "Swipe up to see assets & transactions", - "assets": "Assets", - "nfts": "NFTs", - "metadata": "Metadata", - "transactions": "Transactions", - "searchtransactions": "Search transactions" - } - }, - "mywalletsmodal": { - "title": "My wallets", - "empty": "No wallets available", - "create": "Add a crypto account" - }, - "addcryptoaccountmodal": { - "title": "Add a new crypto account", - "reuse": "Use existing identity seed phrase", - "generate": "Generate a new seed phrase", - "restore": "Restore using an existing seed phrase" - }, - "chooseaccountnamemodal": { - "title": "Wallet name", - "skip": "Skip", - "label": "Display name", - "placeholder": "My wallet", - "confirm": "Create wallet" - }, - "renamewallet": { - "title": "Rename wallet", - "cancel": "Cancel", - "label": "Display name", - "placeholder": "Wallet name", - "confirm": "Confirm changes" - }, - "receivemodal": { - "title": "Receive", - "derivationpath": "Derivation path", - "divider": "or", - "more": "More share options" - } - }, "shareqr": { "divider": "or", "more": "More share options" }, "toast": { "copiedtoclipboard": "Copied to clipboard", - "walletcreated": "Seed phrase verified", - "walletrenamed": "Account renamed successfully", - "walletrestored": "Seed phrase verified", - "walletdeleted": "Account deleted successfully", "identitycreated": "New identity created successfully", "identityupdated": "Identity successfully updated", "identitydeleted": "Identity successfully deleted", diff --git a/src/routes/backRoute/backRoute.test.ts b/src/routes/backRoute/backRoute.test.ts index f658e9fc0..cf08c2148 100644 --- a/src/routes/backRoute/backRoute.test.ts +++ b/src/routes/backRoute/backRoute.test.ts @@ -42,7 +42,6 @@ describe("getBackRoute", () => { time: 0, }, currentOperation: "", - defaultCryptoAccount: "", queueConnectionCredentialRequest: { isProcessing: false, queues: [], @@ -51,11 +50,6 @@ describe("getBackRoute", () => { }, identitiesCache: { identities: [], favourites: [] }, credsCache: { creds: [], favourites: [] }, - cryptoAccountsCache: { - cryptoAccounts: [], - defaultCryptoAccount: "", - hideCryptoBalances: false, - }, connectionsCache: { connections: [], }, @@ -128,7 +122,6 @@ describe("getBackRoute", () => { passwordIsSkipped: true, }, currentOperation: "", - defaultCryptoAccount: "", queueConnectionCredentialRequest: { isProcessing: false, queues: [], @@ -142,11 +135,6 @@ describe("getBackRoute", () => { }, identitiesCache: { identities: [], favourites: [] }, credsCache: { creds: [], favourites: [] }, - cryptoAccountsCache: { - cryptoAccounts: [], - defaultCryptoAccount: "", - hideCryptoBalances: false, - }, connectionsCache: { connections: [], }, @@ -209,7 +197,6 @@ describe("getPreviousRoute", () => { time: 0, }, currentOperation: "", - defaultCryptoAccount: "", queueConnectionCredentialRequest: { isProcessing: false, queues: [], @@ -218,11 +205,6 @@ describe("getPreviousRoute", () => { }, identitiesCache: { identities: [], favourites: [] }, credsCache: { creds: [], favourites: [] }, - cryptoAccountsCache: { - cryptoAccounts: [], - defaultCryptoAccount: "", - hideCryptoBalances: false, - }, connectionsCache: { connections: [], }, diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 318972597..7a1bdabf0 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -22,7 +22,6 @@ import { DidCardDetails } from "../ui/pages/DidCardDetails"; import { CredCardDetails } from "../ui/pages/CredCardDetails"; import { ConnectionDetails } from "../ui/pages/ConnectionDetails"; import { AuthenticatedRouteProps } from "./routes.types"; -import { onboardingRoute } from "../ui/constants/dictionary"; const AuthenticatedRoute: React.FC = (props) => { const authentication = useAppSelector(getAuthentication); @@ -89,16 +88,6 @@ const Routes = () => { component={GenerateSeedPhrase} nextPathname={nextPath.pathname} /> - - { @@ -34,7 +33,6 @@ describe("NextRoute", () => { passwordIsSkipped: true, }, currentOperation: "", - defaultCryptoAccount: "", queueConnectionCredentialRequest: { isProcessing: false, queues: [], @@ -48,11 +46,6 @@ describe("NextRoute", () => { }, identitiesCache: { identities: [], favourites: [] }, credsCache: { creds: [], favourites: [] }, - cryptoAccountsCache: { - cryptoAccounts: [], - defaultCryptoAccount: "", - hideCryptoBalances: false, - }, connectionsCache: { connections: [], }, @@ -119,28 +112,16 @@ describe("NextRoute", () => { }); test("should return correct route for /verifyseedphrase", () => { - let data = { - store: storeMock, - state: { - currentOperation: onboardingRoute.create, - }, - }; - let result = getNextVerifySeedPhraseRoute(data); - - expect(result).toEqual({ - pathname: RoutePath.CREATE_PASSWORD, - }); - - data = { + const data = { store: storeMock, state: { currentOperation: "", }, }; - result = getNextVerifySeedPhraseRoute(data); + const result = getNextVerifySeedPhraseRoute(data); expect(result).toEqual({ - pathname: TabsRoutePath.CRYPTO, + pathname: RoutePath.CREATE_PASSWORD, }); }); }); @@ -159,7 +140,6 @@ describe("getNextRoute", () => { passwordIsSkipped: true, }, currentOperation: "", - defaultCryptoAccount: "", queueConnectionCredentialRequest: { isProcessing: false, queues: [], @@ -173,11 +153,6 @@ describe("getNextRoute", () => { }, identitiesCache: { identities: [], favourites: [] }, credsCache: { creds: [], favourites: [] }, - cryptoAccountsCache: { - cryptoAccounts: [], - defaultCryptoAccount: "", - hideCryptoBalances: false, - }, connectionsCache: { connections: [], }, diff --git a/src/routes/nextRoute/nextRoute.ts b/src/routes/nextRoute/nextRoute.ts index 85ba47d25..42d766049 100644 --- a/src/routes/nextRoute/nextRoute.ts +++ b/src/routes/nextRoute/nextRoute.ts @@ -11,7 +11,7 @@ import { } from "../../store/reducers/seedPhraseCache"; import { DataProps, StoreState } from "./nextRoute.types"; import { RoutePath, TabsRoutePath } from "../paths"; -import { onboardingRoute, toastState } from "../../ui/constants/dictionary"; +import { toastState } from "../../ui/constants/dictionary"; const getNextRootRoute = (store: StoreState) => { const isInitialized = store.stateCache.initialized; @@ -26,14 +26,7 @@ const getNextRootRoute = (store: StoreState) => { } else if (routes.length === 1 && !isInitialized) { path = RoutePath.ONBOARDING; } else if (authentication.passcodeIsSet && authentication.seedPhraseIsSet) { - if ( - store.stateCache.currentOperation === - (onboardingRoute.create || onboardingRoute.restore) - ) { - path = RoutePath.CREATE_PASSWORD; - } else { - path = RoutePath.TABS_MENU; - } + path = RoutePath.TABS_MENU; } else { if (initialRoute) { path = RoutePath.ONBOARDING; @@ -46,18 +39,11 @@ const getNextRootRoute = (store: StoreState) => { }; const getNextOnboardingRoute = (data: DataProps) => { - const route = data?.state?.currentOperation; - let query = ""; - if (route === onboardingRoute.create) { - query = onboardingRoute.createRoute; - } else if (route === onboardingRoute.restore) { - query = onboardingRoute.restoreRoute; - } let path; if (!data.store.stateCache.authentication.passcodeIsSet) { path = RoutePath.SET_PASSCODE; } else { - path = RoutePath.GENERATE_SEED_PHRASE + query; + path = RoutePath.GENERATE_SEED_PHRASE; } return { pathname: path }; @@ -113,11 +99,7 @@ const getNextGenerateSeedPhraseRoute = () => { }; const getNextVerifySeedPhraseRoute = (data: DataProps) => { - const route = data?.state?.currentOperation; - const nextPath: string = - route === onboardingRoute.create - ? RoutePath.CREATE_PASSWORD - : TabsRoutePath.CRYPTO; + const nextPath: string = RoutePath.CREATE_PASSWORD; return { pathname: nextPath }; }; diff --git a/src/routes/paths.ts b/src/routes/paths.ts index 2320cfde5..5cd482d8b 100644 --- a/src/routes/paths.ts +++ b/src/routes/paths.ts @@ -16,7 +16,6 @@ enum TabsRoutePath { CREDS = "/tabs/creds", SCAN = "/tabs/scan", CRYPTO = "/tabs/crypto", - CRYPTO_PLACEHOLDER = "/tabs/cryptoplaceholder", CHAT = "/tabs/chat", DID_DETAILS = "/tabs/dids/:id?", CRED_DETAILS = "/tabs/creds/:id?", diff --git a/src/store/index.ts b/src/store/index.ts index c504bc479..4163a7a5b 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -3,7 +3,6 @@ import { seedPhraseCacheSlice } from "./reducers/seedPhraseCache"; import { stateCacheSlice } from "./reducers/stateCache"; import { identitiesCacheSlice } from "./reducers/identitiesCache"; import { credsCacheSlice } from "./reducers/credsCache"; -import { cryptoAccountsCacheSlice } from "./reducers/cryptoAccountsCache"; import { connectionsCacheSlice } from "./reducers/connectionsCache"; const store = configureStore({ @@ -12,7 +11,6 @@ const store = configureStore({ seedPhraseCache: seedPhraseCacheSlice.reducer, identitiesCache: identitiesCacheSlice.reducer, credsCache: credsCacheSlice.reducer, - cryptoAccountsCache: cryptoAccountsCacheSlice.reducer, connectionsCache: connectionsCacheSlice.reducer, }, }); diff --git a/src/store/reducers/cryptoAccountsCache/cryptoAccountsCache.test.ts b/src/store/reducers/cryptoAccountsCache/cryptoAccountsCache.test.ts deleted file mode 100644 index 954de9aa2..000000000 --- a/src/store/reducers/cryptoAccountsCache/cryptoAccountsCache.test.ts +++ /dev/null @@ -1,91 +0,0 @@ -import { PayloadAction } from "@reduxjs/toolkit"; -import { - cryptoAccountsCacheSlice, - getCryptoAccountsCache, - getDefaultCryptoAccountCache, - getHideCryptoBalances, - setCryptoAccountsCache, - setDefaultCryptoAccountCache, - setHideCryptoBalances, -} from "./cryptoAccountsCache"; -import { RootState } from "../../index"; -import { CryptoAccountProps } from "../../../ui/pages/Crypto/Crypto.types"; -import { cryptoAccountsFix } from "../../../ui/__fixtures__/cryptoAccountsFix"; - -describe("cryptoAccountsCacheSlice", () => { - const initialState = { - cryptoAccounts: [], - defaultCryptoAccount: "", - hideCryptoBalances: false, - }; - it("should return the initial state", () => { - expect( - cryptoAccountsCacheSlice.reducer(undefined, {} as PayloadAction) - ).toEqual(initialState); - }); - - it("should handle setCryptoAccountsCache", () => { - const cryptoAccounts: CryptoAccountProps[] = cryptoAccountsFix; - const newState = cryptoAccountsCacheSlice.reducer( - initialState, - setCryptoAccountsCache(cryptoAccounts) - ); - expect(newState.cryptoAccounts).toEqual(cryptoAccounts); - }); - - it("should handle getCryptoAccountsCache", () => { - const state = { - cryptoAccountsCache: { - cryptoAccounts: cryptoAccountsFix, - }, - } as RootState; - const cryptoAccountsCache = getCryptoAccountsCache(state); - expect(cryptoAccountsCache).toEqual( - state.cryptoAccountsCache.cryptoAccounts - ); - }); - - it("should handle setDefaultCryptoAccountCache", () => { - const defaultCryptoAccount = - "stake1u9f9v0z5zzlldgx58n8tklphu8mf7h4jvp2j2gddluemnssjfnkzz"; - const newState = cryptoAccountsCacheSlice.reducer( - initialState, - setDefaultCryptoAccountCache(defaultCryptoAccount) - ); - expect(newState.defaultCryptoAccount).toEqual(defaultCryptoAccount); - }); - - it("should handle getDefaultCryptoAccountCache", () => { - const state = { - cryptoAccountsCache: { - defaultCryptoAccount: - "stake1u9f9v0z5zzlldgx58n8tklphu8mf7h4jvp2j2gddluemnssjfnkzz", - }, - } as RootState; - const cryptoAccountsCache = getDefaultCryptoAccountCache(state); - expect(cryptoAccountsCache).toEqual( - state.cryptoAccountsCache.defaultCryptoAccount - ); - }); - - it("should handle setHideCryptoBalances", () => { - const hideCryptoBalances = true; - const newState = cryptoAccountsCacheSlice.reducer( - initialState, - setHideCryptoBalances(hideCryptoBalances) - ); - expect(newState.hideCryptoBalances).toEqual(hideCryptoBalances); - }); - - it("should handle getHideCryptoBalances", () => { - const state = { - cryptoAccountsCache: { - hideCryptoBalances: true, - }, - } as RootState; - const cryptoAccountsCache = getHideCryptoBalances(state); - expect(cryptoAccountsCache).toEqual( - state.cryptoAccountsCache.hideCryptoBalances - ); - }); -}); diff --git a/src/store/reducers/cryptoAccountsCache/cryptoAccountsCache.ts b/src/store/reducers/cryptoAccountsCache/cryptoAccountsCache.ts deleted file mode 100644 index 2a34bcb2c..000000000 --- a/src/store/reducers/cryptoAccountsCache/cryptoAccountsCache.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { createSlice, PayloadAction } from "@reduxjs/toolkit"; -import { RootState } from "../../index"; -import { CryptoAccountProps } from "../../../ui/pages/Crypto/Crypto.types"; -const initialState: { - cryptoAccounts: CryptoAccountProps[]; - defaultCryptoAccount: string; - hideCryptoBalances: boolean; -} = { - cryptoAccounts: [], - defaultCryptoAccount: "", - hideCryptoBalances: false, -}; -const cryptoAccountsCacheSlice = createSlice({ - name: "cryptoAccountsCache", - initialState, - reducers: { - setCryptoAccountsCache: ( - state, - action: PayloadAction - ) => { - state.cryptoAccounts = action.payload; - }, - setDefaultCryptoAccountCache: (state, action: PayloadAction) => { - state.defaultCryptoAccount = action.payload; - }, - setHideCryptoBalances: (state, action: PayloadAction) => { - state.hideCryptoBalances = action.payload; - }, - }, -}); - -export { initialState, cryptoAccountsCacheSlice }; - -export const { - setCryptoAccountsCache, - setDefaultCryptoAccountCache, - setHideCryptoBalances, -} = cryptoAccountsCacheSlice.actions; - -const getCryptoAccountsCache = (state: RootState) => - state.cryptoAccountsCache.cryptoAccounts; - -const getDefaultCryptoAccountCache = (state: RootState) => - state.cryptoAccountsCache.defaultCryptoAccount; - -const getHideCryptoBalances = (state: RootState) => - state.cryptoAccountsCache.hideCryptoBalances; - -export { - getCryptoAccountsCache, - getDefaultCryptoAccountCache, - getHideCryptoBalances, -}; diff --git a/src/store/reducers/cryptoAccountsCache/index.ts b/src/store/reducers/cryptoAccountsCache/index.ts deleted file mode 100644 index d5ff4e6f4..000000000 --- a/src/store/reducers/cryptoAccountsCache/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./cryptoAccountsCache"; diff --git a/src/store/reducers/stateCache/stateCache.test.ts b/src/store/reducers/stateCache/stateCache.test.ts index c480886b7..29ff30d22 100644 --- a/src/store/reducers/stateCache/stateCache.test.ts +++ b/src/store/reducers/stateCache/stateCache.test.ts @@ -20,7 +20,6 @@ import { } from "./stateCache"; import { RootState } from "../../index"; import { RoutePath } from "../../../routes"; -import { onboardingRoute } from "../../../ui/constants/dictionary"; import { ConnectionCredentialRequestProps, ConnectionCredentialRequestType, @@ -70,7 +69,7 @@ describe("State Cache", () => { }); test("should set the onboarding route cache", () => { - const route = onboardingRoute.create; + const route = "onboarding"; const action = setCurrentOperation(route); const nextState = stateCacheSlice.reducer(initialState, action); diff --git a/src/store/reducers/stateCache/stateCache.ts b/src/store/reducers/stateCache/stateCache.ts index 6310816fc..f73d3b49c 100644 --- a/src/store/reducers/stateCache/stateCache.ts +++ b/src/store/reducers/stateCache/stateCache.ts @@ -20,7 +20,6 @@ const initialState: StateCacheProps = { passwordIsSkipped: true, }, currentOperation: "", - defaultCryptoAccount: "", queueConnectionCredentialRequest: { isProcessing: false, queues: [], diff --git a/src/store/reducers/stateCache/stateCache.types.ts b/src/store/reducers/stateCache/stateCache.types.ts index 23a747411..d557517d7 100644 --- a/src/store/reducers/stateCache/stateCache.types.ts +++ b/src/store/reducers/stateCache/stateCache.types.ts @@ -38,7 +38,6 @@ interface StateCacheProps { routes: CurrentRouteCacheProps[]; authentication: AuthenticationCacheProps; currentOperation: string; - defaultCryptoAccount: string; queueConnectionCredentialRequest: QueueProps; } diff --git a/src/ui/__fixtures__/cryptoAccountsFix.ts b/src/ui/__fixtures__/cryptoAccountsFix.ts deleted file mode 100644 index acb39e7b5..000000000 --- a/src/ui/__fixtures__/cryptoAccountsFix.ts +++ /dev/null @@ -1,295 +0,0 @@ -import { CryptoAccountProps } from "../pages/Crypto/Crypto.types"; -import CardanoLogo from "../assets/images/CardanoLogo.jpg"; - -const cryptoAccountsFix: CryptoAccountProps[] = [ - { - address: "stake1u9f9v0z5zzlldgx58n8tklphu8mf7h4jvp2j2gddluemnssjfnkzz", - derivationPath: "m/1852'/1815'/0'/1/32", - name: "Test wallet 1", - blockchain: "Cardano", - currency: "ADA", - logo: CardanoLogo, - balance: { - main: { - nativeBalance: 3678.05563949, - usdBalance: 1012.0, - }, - reward: { - nativeBalance: 52.8638809, - usdBalance: 15.45, - }, - }, - usesIdentitySeedPhrase: false, - assets: [ - { - name: "ADA", - logo: CardanoLogo, - balance: 1000.0, - currentPrice: 0.36, - performance: -2.94, - }, - { - name: "Snek", - logo: CardanoLogo, - balance: 10, - currentPrice: 0.0012, - performance: -8.13, - }, - { - name: "Aada DAO Token", - logo: CardanoLogo, - balance: 1.0, - currentPrice: 1.92367, - performance: +169.9, - }, - { - name: "HOSKY Token", - logo: CardanoLogo, - balance: 1, - currentPrice: 0.039821, - performance: -1.54, - }, - { - name: "Stablecoin", - logo: CardanoLogo, - balance: 0.0, - currentPrice: 1.0555, - performance: -1.54, - }, - { - name: "MILK", - logo: CardanoLogo, - balance: 0.0, - currentPrice: 1.37842, - performance: -0.75, - }, - { - name: "Genius Yeld Token", - logo: CardanoLogo, - balance: 0.0, - currentPrice: 0.29303, - performance: -2.17, - }, - { - name: "CherryLend", - logo: CardanoLogo, - balance: 0.0, - currentPrice: 0.11387, - performance: -3.25, - }, - { - name: "Random Token", - logo: CardanoLogo, - balance: 0.0, - currentPrice: 0.54962, - performance: +4.17, - }, - { - name: "Another Finance", - logo: CardanoLogo, - balance: 0.0, - currentPrice: 1.65854, - performance: 4.21, - }, - ], - transactions: [ - { - address: "stake1u9f9v0z5zzlldgx58n8tklphu8mf7h4jvp2j2gddluemnssjfnkzz", - type: ["assets"], - operation: "send", - timestamp: "2023-07-05T14:48:00.000Z", - amount: 30.0, - currency: "ADA", - status: "pending", - }, - { - address: "stake1u9f9v0z5zzlldgx58n8tklphu8mf7h4jvp2j2gddluemnssjfnkzz", - type: ["assets", "nfts"], - operation: "send", - timestamp: "2023-05-04T04:16:00.000Z", - amount: 100.0, - currency: "ADA", - status: "confirmed", - }, - { - address: "stake1u9f9v0z5zzlldgx58n8tklphu8mf7h4jvp2j2gddluemnssjfnkzz", - type: ["metadata"], - operation: "receive", - timestamp: "2023-06-02T12:03:00.000Z", - amount: 15.0, - currency: "ADA", - status: "confirmed", - }, - { - address: "stake1u9f9v0z5zzlldgx58n8tklphu8mf7h4jvp2j2gddluemnssjfnkzz", - type: ["nfts"], - operation: "receive", - timestamp: "2023-03-27T10:30:00.000Z", - amount: 120.0, - currency: "ADA", - status: "confirmed", - }, - { - address: "stake1u9f9v0z5zzlldgx58n8tklphu8mf7h4jvp2j2gddluemnssjfnkzz", - type: ["assets"], - operation: "send", - timestamp: "2023-07-05T14:48:00.000Z", - amount: 31.0, - currency: "ADA", - status: "pending", - }, - { - address: "stake1u9f9v0z5zzlldgx58n8tklphu8mf7h4jvp2j2gddluemnssjfnkzz", - type: ["assets", "nfts"], - operation: "send", - timestamp: "2023-05-04T04:16:00.000Z", - amount: 101.0, - currency: "ADA", - status: "confirmed", - }, - { - address: "stake1u9f9v0z5zzlldgx58n8tklphu8mf7h4jvp2j2gddluemnssjfnkzz", - type: ["metadata"], - operation: "receive", - timestamp: "2023-06-02T12:03:00.000Z", - amount: 11.0, - currency: "ADA", - status: "confirmed", - }, - { - address: "stake1u9f9v0z5zzlldgx58n8tklphu8mf7h4jvp2j2gddluemnssjfnkzz", - type: ["nfts"], - operation: "receive", - timestamp: "2023-03-27T10:30:00.000Z", - amount: 121.0, - currency: "ADA", - status: "confirmed", - }, - { - address: "stake1u9f9v0z5zzlldgx58n8tklphu8mf7h4jvp2j2gddluemnssjfnkzz", - type: ["assets"], - operation: "send", - timestamp: "2023-07-05T14:48:00.000Z", - amount: 32.0, - currency: "ADA", - status: "pending", - }, - { - address: "stake1u9f9v0z5zzlldgx58n8tklphu8mf7h4jvp2j2gddluemnssjfnkzz", - type: ["assets", "nfts"], - operation: "send", - timestamp: "2023-05-04T04:16:00.000Z", - amount: 102.0, - currency: "ADA", - status: "confirmed", - }, - { - address: "stake1u9f9v0z5zzlldgx58n8tklphu8mf7h4jvp2j2gddluemnssjfnkzz", - type: ["metadata"], - operation: "receive", - timestamp: "2023-06-02T12:03:00.000Z", - amount: 12.0, - currency: "ADA", - status: "confirmed", - }, - { - address: "stake1u9f9v0z5zzlldgx58n8tklphu8mf7h4jvp2j2gddluemnssjfnkzz", - type: ["nfts"], - operation: "receive", - timestamp: "2023-03-27T10:30:00.000Z", - amount: 122.0, - currency: "ADA", - status: "confirmed", - }, - ], - }, - { - address: "stake1u9eauga0y2das8xvmmptq4kqdzvqjdmc6e357qplyrpatfgu2w47a", - derivationPath: "m/1852'/1815'/0'/1/32", - name: "Test wallet 2", - blockchain: "Cardano", - currency: "ADA", - logo: CardanoLogo, - balance: { - main: { - nativeBalance: 47526.01302044, - usdBalance: 13000.0, - }, - reward: { - nativeBalance: 362.04059792, - usdBalance: 105.81, - }, - }, - usesIdentitySeedPhrase: false, - assets: [ - { - name: "ADA", - logo: CardanoLogo, - balance: 1000.0, - currentPrice: 0.36, - performance: -2.94, - }, - { - name: "Snek", - logo: CardanoLogo, - balance: 10, - currentPrice: 0.0012, - performance: -8.13, - }, - { - name: "Aada DAO Token", - logo: CardanoLogo, - balance: 1.0, - currentPrice: 1.92367, - performance: +169.9, - }, - { - name: "HOSKY Token", - logo: CardanoLogo, - balance: 1, - currentPrice: 0.039821, - performance: -1.54, - }, - ], - transactions: [ - { - address: "stake1u9f9v0z5zzlldgx58n8tklphu8mf7h4jvp2j2gddluemnssjfnkzz", - type: ["assets"], - operation: "send", - timestamp: "2023-07-05T14:48:00.000Z", - amount: 30.0, - currency: "ADA", - status: "pending", - }, - { - address: "stake1u9f9v0z5zzlldgx58n8tklphu8mf7h4jvp2j2gddluemnssjfnkzz", - type: ["assets", "nfts"], - operation: "send", - timestamp: "2023-05-04T04:16:00.000Z", - amount: 100.0, - currency: "ADA", - status: "confirmed", - }, - { - address: "stake1u9f9v0z5zzlldgx58n8tklphu8mf7h4jvp2j2gddluemnssjfnkzz", - type: ["metadata"], - operation: "receive", - timestamp: "2023-06-02T12:03:00.000Z", - amount: 15.0, - currency: "ADA", - status: "confirmed", - }, - { - address: "stake1u9f9v0z5zzlldgx58n8tklphu8mf7h4jvp2j2gddluemnssjfnkzz", - type: ["nfts"], - operation: "receive", - timestamp: "2023-03-27T10:30:00.000Z", - amount: 120.0, - currency: "ADA", - status: "confirmed", - }, - ], - }, -]; - -export { cryptoAccountsFix }; diff --git a/src/ui/components/AddCryptoAccount/AddCryptoAccount.scss b/src/ui/components/AddCryptoAccount/AddCryptoAccount.scss deleted file mode 100644 index adce3b118..000000000 --- a/src/ui/components/AddCryptoAccount/AddCryptoAccount.scss +++ /dev/null @@ -1,51 +0,0 @@ -.add-crypto-account { - ion-title { - text-align: left; - } - - margin-top: 0.5rem; - - ion-col { - display: flex; - flex-direction: column; - } - - ion-button, - ion-button.md { - width: 2.8125rem; - height: 2.8125rem; - margin: 0; - --background: transparent; - --box-shadow: none; - --color: var(--ion-color-secondary); - --background-activated: var(--ion-color-light-grey); - - &::part(native) { - padding: 0; - } - } - - ion-icon { - width: 1.475rem; - height: 1.475rem; - margin: 0; - } - - .add-crypto-account-option { - display: flex; - - > * { - display: flex; - flex-direction: column; - justify-content: center; - } - - &:not(:last-child) { - margin-bottom: 0.5rem; - } - } -} - -.short-modal::part(content) { - height: 43rem; -} diff --git a/src/ui/components/AddCryptoAccount/AddCryptoAccount.tsx b/src/ui/components/AddCryptoAccount/AddCryptoAccount.tsx deleted file mode 100644 index 310db579c..000000000 --- a/src/ui/components/AddCryptoAccount/AddCryptoAccount.tsx +++ /dev/null @@ -1,154 +0,0 @@ -import { - IonModal, - IonGrid, - IonRow, - IonCol, - IonButton, - IonIcon, -} from "@ionic/react"; -import { - repeatOutline, - addCircleOutline, - refreshOutline, -} from "ionicons/icons"; -import { useHistory } from "react-router-dom"; -import { i18n } from "../../../i18n"; -import { PageLayout } from "../layout/PageLayout"; -import { AddCryptoAccountsProps } from "./AddCryptoAccount.types"; -import "./AddCryptoAccount.scss"; -import { DataProps } from "../../../routes/nextRoute/nextRoute.types"; -import { useAppDispatch, useAppSelector } from "../../../store/hooks"; -import { - getStateCache, - setCurrentOperation, -} from "../../../store/reducers/stateCache"; -import { getNextRoute } from "../../../routes/nextRoute"; -import { TabsRoutePath } from "../navigation/TabsMenu"; -import { updateReduxState } from "../../../store/utils"; -import { operationState } from "../../constants/dictionary"; - -const AddCryptoAccount = ({ - addAccountIsOpen, - setAddAccountIsOpen, - setChooseAccountNameIsOpen, - idwProfileInUse, -}: AddCryptoAccountsProps) => { - const history = useHistory(); - const dispatch = useAppDispatch(); - const stateCache = useAppSelector(getStateCache); - - const handleNewAccount = (type: string) => { - setAddAccountIsOpen(false); - dispatch(setCurrentOperation(type)); - const data: DataProps = { - store: { stateCache }, - }; - const { nextPath, updateRedux } = getNextRoute(TabsRoutePath.CRYPTO, data); - updateReduxState(nextPath.pathname, data, dispatch, updateRedux); - history.push({ - pathname: nextPath.pathname, - state: { - type: type, - }, - }); - }; - - return ( - setAddAccountIsOpen(false)} - > -
- - - - - {!idwProfileInUse && ( - { - setAddAccountIsOpen(false); - setChooseAccountNameIsOpen(true); - }} - > - - - - - - - {i18n.t("crypto.addcryptoaccountmodal.reuse")} - - - )} - { - setAddAccountIsOpen(false); - dispatch( - setCurrentOperation(operationState.newCryptoAccount) - ); - handleNewAccount(operationState.newCryptoAccount); - }} - > - - - - - - - {i18n.t("crypto.addcryptoaccountmodal.generate")} - - - { - setAddAccountIsOpen(false); - dispatch( - setCurrentOperation(operationState.restoreCryptoAccount) - ); - handleNewAccount(operationState.restoreCryptoAccount); - }} - > - - - - - - - {i18n.t("crypto.addcryptoaccountmodal.restore")} - - - - - - -
- - ); -}; - -export { AddCryptoAccount }; diff --git a/src/ui/components/AddCryptoAccount/AddCryptoAccount.types.ts b/src/ui/components/AddCryptoAccount/AddCryptoAccount.types.ts deleted file mode 100644 index bf263f36b..000000000 --- a/src/ui/components/AddCryptoAccount/AddCryptoAccount.types.ts +++ /dev/null @@ -1,8 +0,0 @@ -interface AddCryptoAccountsProps { - addAccountIsOpen: boolean; - setAddAccountIsOpen: (value: boolean) => void; - setChooseAccountNameIsOpen: (value: boolean) => void; - idwProfileInUse: boolean; -} - -export type { AddCryptoAccountsProps }; diff --git a/src/ui/components/AddCryptoAccount/index.ts b/src/ui/components/AddCryptoAccount/index.ts deleted file mode 100644 index 2f30ecb20..000000000 --- a/src/ui/components/AddCryptoAccount/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./AddCryptoAccount"; diff --git a/src/ui/components/AppWrapper/AppWrapper.tsx b/src/ui/components/AppWrapper/AppWrapper.tsx index 83d20ab06..f9b8db87a 100644 --- a/src/ui/components/AppWrapper/AppWrapper.tsx +++ b/src/ui/components/AppWrapper/AppWrapper.tsx @@ -25,15 +25,10 @@ import { updateOrAddCredsCache, } from "../../../store/reducers/credsCache"; import { AriesAgent } from "../../../core/agent/agent"; -import { - setCryptoAccountsCache, - setHideCryptoBalances, -} from "../../../store/reducers/cryptoAccountsCache"; import { PreferencesKeys, PreferencesStorage, } from "../../../core/storage/preferences"; -import { CryptoAccountProps } from "../../pages/Crypto/Crypto.types"; import { setConnectionsCache, updateOrAddConnectionCache, @@ -219,16 +214,6 @@ const AppWrapper = (props: { children: ReactNode }) => { const storedIdentities = await AriesAgent.agent.identifiers.getIdentifiers(); // @TODO - sdisalvo: This will need to be updated as soon as we have something to get our stored crypto accounts. - const storedCryptoAccounts: CryptoAccountProps[] = []; - - try { - const hideCryptoBalances = await PreferencesStorage.get( - PreferencesKeys.APP_HIDE_CRYPTO_BALANCES - ); - dispatch(setHideCryptoBalances(!!hideCryptoBalances.hidden)); - } catch (e) { - // @TODO - sdisalvo: handle error - } try { const didsFavourites = await PreferencesStorage.get( @@ -263,7 +248,6 @@ const AppWrapper = (props: { children: ReactNode }) => { dispatch(setIdentitiesCache(storedIdentities)); dispatch(setCredsCache(credentials)); - dispatch(setCryptoAccountsCache(storedCryptoAccounts)); dispatch(setConnectionsCache(connectionsDetails)); AriesAgent.agent.connections.onConnectionStateChanged((event) => { diff --git a/src/ui/components/AssetsTransactions/AssetsTransactions.scss b/src/ui/components/AssetsTransactions/AssetsTransactions.scss deleted file mode 100644 index bd075a10b..000000000 --- a/src/ui/components/AssetsTransactions/AssetsTransactions.scss +++ /dev/null @@ -1,222 +0,0 @@ -.assets-transactions { - display: flex; - flex-direction: column; - - .compact { - padding-top: 1.5rem; - } - - .assets-transactions-header { - width: 100%; - - &.expanded { - max-height: 6rem; - - &.assets { - max-height: 4rem; - &.md { - max-height: 5rem; - } - } - &.transactions { - max-height: 9.5rem; - &.md { - max-height: 10.5rem; - } - } - } - - .assets-transactions-toggle-segment { - --background: var(--ion-color-medium-grey); - - ion-segment-button.segment-button-checked { - &::part(indicator-background) { - background: var(--ion-color-primary-gradient); - } - } - } - - ion-searchbar { - padding: 0; - height: 2.25rem; - margin: 0.63rem 0; - } - - .assets-transactions-swipe-message, - .assets-transactions-toggle-segment { - margin-top: 1rem; - } - - .filter-icon { - width: 1.18rem; - height: 1.18rem; - } - } - - &.hide-balance { - .account-balance, - .transaction-amount { - filter: blur(0.438rem); - } - } - - ion-item { - --background: var(--ion-color-light-grey); - } - - .assets-transactions-swipe-message { - display: flex; - justify-content: center; - width: 100%; - color: var(--ion-color-secondary); - font-weight: 400; - } - - .transaction-type { - width: 1.18rem; - height: 1.18rem; - } - - .transactions-filters { - ion-button { - margin: 0; - height: 1.93rem; - --padding-start: 0.63rem; - --padding-end: 0.63rem; - - &:not(:first-child) { - margin-left: 0.63rem; - } - - ion-icon { - margin-right: 0.3rem; - } - } - } - - .assets-list, - .transactions-list { - padding-top: 0; - background: var(--ion-color-light-grey); - - ion-item { - &:not(:last-child) { - border-bottom: 1px solid var(--ion-color-dark-grey); - } - --inner-padding-end: 0; - - &::part(native) { - padding: 0; - } - } - - ion-row { - display: flex; - justify-content: space-between; - padding: 0.5rem 0; - - ion-col { - display: flex; - flex-direction: column; - justify-content: center; - } - } - } - - .assets-list ion-col { - &.asset-logo { - position: relative; - - img { - width: 2.5rem; - height: 2.5rem; - border-radius: 2rem; - } - } - - &.asset-info { - .asset-name { - margin-bottom: 0.31rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .asset-rate { - font-size: 0.875rem; - color: var(--ion-color-secondary); - } - } - - &.asset-balance { - ion-label { - text-align: right; - } - } - } - - .transactions-list ion-col { - &.transaction-icon { - .icon-container { - width: 2.75rem; - height: 2.75rem; - display: flex; - flex-direction: column; - justify-content: center; - border: 1.5px solid; - border-radius: 1.375rem; - margin: 0 auto; - - &.send { - border-color: var(--ion-color-danger); - } - - &.receive { - border-color: var(--ion-color-green); - } - - &::part(native) { - width: 2.75rem; - height: 2.75rem; - padding: 0; - } - - ion-icon { - width: 1.9375rem; - height: 1.9375rem; - margin: 0 auto; - } - } - } - - &.transaction-info { - ion-label { - display: flex; - flex-direction: row; - justify-content: flex-start; - margin-bottom: 0.2rem; - } - - .transaction-address { - display: flex; - flex-direction: column; - justify-content: center; - } - - .transaction-type { - margin-left: 0.62rem; - } - - .transaction-time { - font-size: 0.875rem; - color: var(--ion-color-secondary); - } - } - - &.transaction-amount { - ion-label { - text-align: right; - } - } - } -} diff --git a/src/ui/components/AssetsTransactions/AssetsTransactions.test.tsx b/src/ui/components/AssetsTransactions/AssetsTransactions.test.tsx deleted file mode 100644 index f2a335459..000000000 --- a/src/ui/components/AssetsTransactions/AssetsTransactions.test.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import { render, waitFor } from "@testing-library/react"; -import { act } from "react-dom/test-utils"; -import { ionFireEvent as fireEvent } from "@ionic/react-test-utils"; -import configureStore from "redux-mock-store"; -import { Provider } from "react-redux"; -import { TabsRoutePath } from "../navigation/TabsMenu"; -import { cryptoAccountsFix } from "../../__fixtures__/cryptoAccountsFix"; -import EN_TRANSLATIONS from "../../../locales/en/en.json"; -import { AssetsTransactions } from "./AssetsTransactions"; - -describe("Slides Component", () => { - const mockStore = configureStore(); - const dispatchMock = jest.fn(); - const initialState = { - stateCache: { - routes: [TabsRoutePath.CRYPTO], - authentication: { - loggedIn: true, - time: Date.now(), - passcodeIsSet: true, - }, - }, - seedPhraseCache: {}, - cryptoAccountsCache: cryptoAccountsFix, - }; - const storeMocked = { - ...mockStore(initialState), - dispatch: dispatchMock, - }; - - test("Render Assets Transactions (compact)", () => { - const { getByText } = render( - - - - ); - const swipeUpMessage = getByText( - EN_TRANSLATIONS.crypto.tab.assetstransactions.swipeupmessage - ); - const firstAsset = getByText( - cryptoAccountsFix[0].assets[0].balance.toFixed(2) + " ADA" - ); - expect(swipeUpMessage).toBeInTheDocument(); - expect(firstAsset).toBeInTheDocument(); - }); - - test("Render Assets Transactions (expanded)", async () => { - const { getByText, getByTestId } = render( - - - - ); - const segment = getByTestId("assets-transactions-toggle-segment"); - const firstAsset = getByText( - cryptoAccountsFix[0].assets[0].balance.toFixed(2) + " ADA" - ); - expect(segment).toBeInTheDocument(); - expect(getByTestId("assets-list")).toBeInTheDocument(); - expect(firstAsset).toBeInTheDocument(); - expect(segment).toHaveValue("assets"); - - act(() => { - fireEvent.ionChange(segment, "transactions"); - }); - - await waitFor(() => expect(segment).toHaveValue("transactions")); - - await waitFor(() => - expect(getByTestId("transactions-list")).toBeInTheDocument() - ); - - const firstTransaction = getByText( - cryptoAccountsFix[0].transactions[0].amount.toFixed(2) + " ADA" - ); - expect(firstTransaction).toBeInTheDocument(); - }); -}); diff --git a/src/ui/components/AssetsTransactions/AssetsTransactions.tsx b/src/ui/components/AssetsTransactions/AssetsTransactions.tsx deleted file mode 100644 index 66da08380..000000000 --- a/src/ui/components/AssetsTransactions/AssetsTransactions.tsx +++ /dev/null @@ -1,328 +0,0 @@ -import { useEffect, useState } from "react"; -import { - IonButton, - IonCol, - IonGrid, - IonIcon, - IonItem, - IonLabel, - IonList, - IonRow, - IonSearchbar, - IonSegment, - IonSegmentButton, -} from "@ionic/react"; -import { - arrowUpOutline, - arrowDownOutline, - imageOutline, - cashOutline, - codeSlashOutline, -} from "ionicons/icons"; -import { i18n } from "../../../i18n"; -import { PageLayout } from "../layout/PageLayout"; -import { - CryptoAssetsProps, - CryptoTransactionsProps, -} from "../../pages/Crypto/Crypto.types"; -import "./AssetsTransactions.scss"; -import { formatLongDate, formatShortTime } from "../../../utils"; -import { AssetsTransactionsProps } from "./AssetsTransactions.types"; - -interface AssetTransactionItemProps { - key: number; - asset?: CryptoAssetsProps; - transaction?: CryptoTransactionsProps; -} - -const AssetItem = ({ asset }: AssetTransactionItemProps) => { - return ( - - - - - asset-logo - - - {asset?.name} - - {asset?.currentPrice} {asset?.performance}% - - - - {asset?.balance.toFixed(2) + " ADA"} - - - - - ); -}; - -const TransactionItem = ({ transaction }: AssetTransactionItemProps) => { - return ( - - - - -
- {transaction?.operation === "send" ? ( - - ) : ( - - )} -
- - - - - {transaction?.address.substring(0, 4)}... - {transaction?.address.slice(-4)} - - - {transaction?.type.map((type: string, index) => { - let icon; - switch (type) { - case "assets": - icon = cashOutline; - break; - case "nfts": - icon = imageOutline; - break; - case "metadata": - icon = codeSlashOutline; - break; - default: - break; - } - return ( - - ); - })} - - - {formatLongDate(`${transaction?.timestamp}`) + - " | " + - formatShortTime(`${transaction?.timestamp}`)} - - - - {transaction?.operation === "send" ? ( - {transaction?.amount.toFixed(2) + " ADA"} - ) : ( - - +{transaction?.amount.toFixed(2) + " ADA"} - - )} - - - - - ); -}; - -const TransactionFilters = () => { - return ( -
- - - - {i18n.t("crypto.tab.assetstransactions.assets")} - - - - - - {i18n.t("crypto.tab.assetstransactions.nfts")} - - - - - - {i18n.t("crypto.tab.assetstransactions.metadata")} - - -
- ); -}; - -const AssetsTransactions = ({ - assets, - transactions, - expanded, - hideBalance, -}: AssetsTransactionsProps) => { - const [selectedTab, setSelectedTab] = useState("assets"); - useEffect(() => { - if (!expanded) { - setSelectedTab("assets"); - } - }, [expanded]); - return ( -
- {expanded ? ( - - - - { - setSelectedTab(`${event.detail.value}`); - }} - > - - - {i18n.t("crypto.tab.assetstransactions.assets")} - - - - - {i18n.t("crypto.tab.assetstransactions.transactions")} - - - - {selectedTab === "transactions" ? ( - <> - - - - ) : null} - - - - ) : null} - - - {expanded ? ( - - - {selectedTab === "assets" && assets.length ? ( - - {assets.map((asset, index) => { - return ( - - ); - })} - - ) : null} - {selectedTab === "transactions" && transactions.length ? ( - - {transactions.map((transaction, index) => { - return ( - - ); - })} - - ) : null} - - - ) : ( - <> - - - - {i18n.t("crypto.tab.assetstransactions.swipeupmessage")} - - - - - - {assets.length ? ( - - - - ) : null} - - - - )} - - -
- ); -}; - -export { AssetsTransactions }; diff --git a/src/ui/components/AssetsTransactions/AssetsTransactions.types.ts b/src/ui/components/AssetsTransactions/AssetsTransactions.types.ts deleted file mode 100644 index 59bcb8c52..000000000 --- a/src/ui/components/AssetsTransactions/AssetsTransactions.types.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { - CryptoAssetsProps, - CryptoTransactionsProps, -} from "../../pages/Crypto/Crypto.types"; - -interface AssetsTransactionsProps { - assets: CryptoAssetsProps[]; - transactions: CryptoTransactionsProps[]; - expanded: boolean; - hideBalance: boolean; -} - -export type { AssetsTransactionsProps }; diff --git a/src/ui/components/AssetsTransactions/index.ts b/src/ui/components/AssetsTransactions/index.ts deleted file mode 100644 index 5c92882fb..000000000 --- a/src/ui/components/AssetsTransactions/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./AssetsTransactions"; diff --git a/src/ui/components/ChooseAccountName/ChooseAccountName.scss b/src/ui/components/ChooseAccountName/ChooseAccountName.scss deleted file mode 100644 index 69eca02f8..000000000 --- a/src/ui/components/ChooseAccountName/ChooseAccountName.scss +++ /dev/null @@ -1,5 +0,0 @@ -.choose-account-name { - .primary-button { - margin-top: 1.5rem; - } -} diff --git a/src/ui/components/ChooseAccountName/ChooseAccountName.test.tsx b/src/ui/components/ChooseAccountName/ChooseAccountName.test.tsx deleted file mode 100644 index 841bffc59..000000000 --- a/src/ui/components/ChooseAccountName/ChooseAccountName.test.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import { act, render, waitFor } from "@testing-library/react"; -import { ionFireEvent as fireEvent } from "@ionic/react-test-utils"; -import { Provider } from "react-redux"; -import configureStore from "redux-mock-store"; -import { ChooseAccountName } from "./ChooseAccountName"; -import { TabsRoutePath } from "../../../routes/paths"; -import EN_TRANSLATIONS from "../../../locales/en/en.json"; - -describe("Choose Crypto Account name", () => { - test.skip("Render the modal", async () => { - const mockStore = configureStore(); - const dispatchMock = jest.fn(); - const initialState = { - stateCache: { - routes: [TabsRoutePath.CRYPTO], - authentication: { - loggedIn: true, - time: Date.now(), - passcodeIsSet: true, - }, - }, - seedPhraseCache: {}, - cryptoAccountsCache: [], - }; - const storeMocked = { - ...mockStore(initialState), - dispatch: dispatchMock, - }; - const setChooseAccountNameIsOpen = jest.fn(); - const { getByTestId, queryByText } = render( - - - - ); - - expect(getByTestId("choose-account-name")).toBeInTheDocument(); - - await waitFor(() => { - expect( - queryByText(EN_TRANSLATIONS.crypto.chooseaccountnamemodal.skip) - ).toBeVisible(); - }); - }); - - test.skip("Skip the name selection", async () => { - const mockStore = configureStore(); - const dispatchMock = jest.fn(); - const initialState = { - stateCache: { - routes: [TabsRoutePath.CRYPTO], - authentication: { - loggedIn: true, - time: Date.now(), - passcodeIsSet: true, - }, - }, - seedPhraseCache: {}, - cryptoAccountsCache: [], - }; - const storeMocked = { - ...mockStore(initialState), - dispatch: dispatchMock, - }; - const setChooseAccountNameIsOpen = jest.fn(); - - const { getByTestId, queryByText } = render( - - - - ); - - expect(getByTestId("choose-account-name")).toBeInTheDocument(); - - await waitFor(() => { - expect( - queryByText(EN_TRANSLATIONS.crypto.chooseaccountnamemodal.skip) - ).toBeVisible(); - }); - - act(() => { - fireEvent.click(getByTestId("action-button")); - }); - - // @TODO - foconnor: If unskipped can test Aries agent called and Redux updated - }); - - test.skip("Set a custom name", async () => { - const mockStore = configureStore(); - const dispatchMock = jest.fn(); - const initialState = { - stateCache: { - routes: [TabsRoutePath.CRYPTO], - authentication: { - loggedIn: true, - time: Date.now(), - passcodeIsSet: true, - }, - }, - seedPhraseCache: {}, - cryptoAccountsCache: [], - }; - const storeMocked = { - ...mockStore(initialState), - dispatch: dispatchMock, - }; - const setChooseAccountNameIsOpen = jest.fn(); - const { getByTestId } = render( - - - - ); - - const continueButton = getByTestId("continue-button"); - expect(continueButton).toBeDisabled(); - - fireEvent.change(getByTestId("edit-display-name"), { - target: { value: "a" }, - }); - - expect(continueButton).not.toBeDisabled(); - }); -}); diff --git a/src/ui/components/ChooseAccountName/ChooseAccountName.tsx b/src/ui/components/ChooseAccountName/ChooseAccountName.tsx deleted file mode 100644 index f0931ca01..000000000 --- a/src/ui/components/ChooseAccountName/ChooseAccountName.tsx +++ /dev/null @@ -1,150 +0,0 @@ -import { IonModal, IonGrid, IonRow, IonCol, IonButton } from "@ionic/react"; -import { useEffect, useRef, useState } from "react"; -import crypto from "crypto"; -import { Capacitor } from "@capacitor/core"; -import { Keyboard } from "@capacitor/keyboard"; -import { i18n } from "../../../i18n"; -import { CustomInput } from "../CustomInput"; -import { PageLayout } from "../layout/PageLayout"; -import { CryptoAccountProps } from "../../pages/Crypto/Crypto.types"; -import { - getCryptoAccountsCache, - setCryptoAccountsCache, -} from "../../../store/reducers/cryptoAccountsCache"; -import { useAppDispatch, useAppSelector } from "../../../store/hooks"; -import { ChooseAccountNameProps } from "./ChooseAccountName.types"; -import "./ChooseAccountName.scss"; -import CardanoLogo from "../../assets/images/CardanoLogo.jpg"; -import { SeedPhraseStorageService } from "../../../core/storage/services"; - -const ChooseAccountName = ({ - chooseAccountNameIsOpen, - setChooseAccountNameIsOpen, - seedPhrase, - usesIdentitySeedPhrase, - onDone, -}: ChooseAccountNameProps) => { - const dispatch = useAppDispatch(); - const seedPhraseStorageService = useRef(new SeedPhraseStorageService()); - const cryptoAccountsData: CryptoAccountProps[] = useAppSelector( - getCryptoAccountsCache - ); - const [accountName, setAccountName] = useState(""); - const [keyboardIsOpen, setkeyboardIsOpen] = useState(false); - - useEffect(() => { - if (Capacitor.isNativePlatform()) { - Keyboard.addListener("keyboardWillShow", () => { - setkeyboardIsOpen(true); - }); - Keyboard.addListener("keyboardWillHide", () => { - setkeyboardIsOpen(false); - }); - } - }, []); - - const handleCreateWallet = async (displayName?: string) => { - const randomizer = crypto.randomBytes(3).toString("hex"); - const name = - displayName ?? - `${i18n.t("crypto.chooseaccountnamemodal.placeholder")} #${randomizer}`; - - const newWallet: CryptoAccountProps = { - name, - usesIdentitySeedPhrase: usesIdentitySeedPhrase, - // @TODO - sdisalvo: remember to remove hardcoded values below this point - address: - "stake1ux3d3808s26u3ep7ps24sxyxe7qlt5xh783tc7a304yq0wg" + randomizer, - derivationPath: "m/1852'/1815'/0'/1/32", - blockchain: "Cardano", - currency: "ADA", - logo: CardanoLogo, - balance: { - main: { - nativeBalance: 273.85, - usdBalance: 75.2, - }, - reward: { - nativeBalance: 0, - usdBalance: 0, - }, - }, - assets: [], - transactions: [], - // End of hardcoded values - }; - - if (usesIdentitySeedPhrase) { - await seedPhraseStorageService.current.createCryptoAccountFromIdentitySeedPhrase( - name - ); - } else if (seedPhrase) { - await seedPhraseStorageService.current.createCryptoAccountFromSeedPhrase( - name, - seedPhrase - ); - } else { - throw new Error( - "Tried to create a new crypto wallet from seed phrase, but no seed phrase was provided to the component" - ); - } - - dispatch(setCryptoAccountsCache([...cryptoAccountsData, newWallet])); - setChooseAccountNameIsOpen(false); - if (onDone) { - onDone(); - } - }; - - return ( - setChooseAccountNameIsOpen(false)} - > -
- handleCreateWallet()} - > - - - - - - - handleCreateWallet(accountName)} - disabled={!accountName.length} - > - {i18n.t("crypto.chooseaccountnamemodal.confirm")} - - - -
- - ); -}; - -export { ChooseAccountName }; diff --git a/src/ui/components/ChooseAccountName/ChooseAccountName.types.ts b/src/ui/components/ChooseAccountName/ChooseAccountName.types.ts deleted file mode 100644 index afb39e62b..000000000 --- a/src/ui/components/ChooseAccountName/ChooseAccountName.types.ts +++ /dev/null @@ -1,9 +0,0 @@ -interface ChooseAccountNameProps { - chooseAccountNameIsOpen: boolean; - setChooseAccountNameIsOpen: (value: boolean) => void; - seedPhrase?: string; - usesIdentitySeedPhrase: boolean; - onDone?: () => void; -} - -export type { ChooseAccountNameProps }; diff --git a/src/ui/components/ChooseAccountName/index.ts b/src/ui/components/ChooseAccountName/index.ts deleted file mode 100644 index 266d22c2b..000000000 --- a/src/ui/components/ChooseAccountName/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./ChooseAccountName"; diff --git a/src/ui/components/CryptoBalance/CryptoBalance.scss b/src/ui/components/CryptoBalance/CryptoBalance.scss deleted file mode 100644 index 133cc686a..000000000 --- a/src/ui/components/CryptoBalance/CryptoBalance.scss +++ /dev/null @@ -1,78 +0,0 @@ -@import "swiper/css"; -@import "@ionic/react/css/ionic-swiper.css"; - -.crypto-balance-container { - padding-inline: 30px; - text-align: center; - - .account-network { - display: inline-flex; - padding: 0.3125rem 0.625rem; - justify-content: center; - align-items: center; - gap: 0.3125rem; - border-radius: 1rem; - color: var(--ion-color-light); - background: rgba(var(--ion-color-primary-rgb), 0.5); - margin-bottom: 2.19rem; - min-height: 2rem; - min-width: 6rem; - } - - .swiper-slide { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - .slide-title, - .slide-fiatbalance, - .slide-nativebalance { - > * { - color: var(--ion-color-primary); - vertical-align: middle; - } - } - - .slide-title { - margin-bottom: 0.63rem; - - ion-icon { - margin-left: 0.62rem; - width: 1.375rem; - height: 1.375rem; - } - } - - .slide-fiatbalance { - margin-bottom: 1.56rem; - } - - .slide-nativebalance { - padding: 0.3125rem 0.625rem; - background-color: var(--ion-color-light-grey); - border-radius: 0.5rem; - - ion-icon { - margin-right: 0.3rem; - width: 1rem; - height: 1rem; - } - } - } - - .pagination { - display: flex; - justify-content: center; - align-items: center; - margin-top: 3.12rem; - } - - .page-indicator-active { - background-color: var(--ion-color-secondary); - } - - &.hide-balance .balance { - filter: blur(0.438rem); - } -} diff --git a/src/ui/components/CryptoBalance/CryptoBalance.test.tsx b/src/ui/components/CryptoBalance/CryptoBalance.test.tsx deleted file mode 100644 index b8447d729..000000000 --- a/src/ui/components/CryptoBalance/CryptoBalance.test.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import { act, fireEvent, render, waitFor } from "@testing-library/react"; -import configureStore from "redux-mock-store"; -import { Provider } from "react-redux"; -import { CryptoBalance } from "./index"; -import { TabsRoutePath } from "../navigation/TabsMenu"; -import { cryptoAccountsFix } from "../../__fixtures__/cryptoAccountsFix"; -import EN_TRANSLATIONS from "../../../locales/en/en.json"; -import { formatCurrencyUSD } from "../../../utils"; -import { CryptoBalanceItem } from "./CryptoBalance.types"; - -const items: CryptoBalanceItem[] = [ - { - title: EN_TRANSLATIONS.crypto.tab.slider.title.mainbalance, - fiatBalance: formatCurrencyUSD( - cryptoAccountsFix[0].balance.main.usdBalance - ), - nativeBalance: - cryptoAccountsFix[0].balance.main.nativeBalance.toFixed(2) + " ADA", - }, - { - title: EN_TRANSLATIONS.crypto.tab.slider.title.rewardbalance, - fiatBalance: formatCurrencyUSD( - cryptoAccountsFix[1].balance.reward.usdBalance - ), - nativeBalance: - cryptoAccountsFix[1].balance.reward.nativeBalance.toFixed(2) + " ADA", - }, -]; - -describe("Slides Component", () => { - const mockStore = configureStore(); - const dispatchMock = jest.fn(); - const initialState = { - stateCache: { - routes: [TabsRoutePath.CRYPTO], - authentication: { - loggedIn: true, - time: Date.now(), - passcodeIsSet: true, - }, - }, - seedPhraseCache: {}, - cryptoAccountsCache: cryptoAccountsFix, - }; - const storeMocked = { - ...mockStore(initialState), - dispatch: dispatchMock, - }; - - test("Render slide 1", () => { - const hideBalance = false; - const setHideBalance = jest.fn(); - const { getByText } = render( - - - - ); - const linkElement = getByText( - EN_TRANSLATIONS.crypto.tab.slider.title.mainbalance - ); - expect(linkElement).toBeInTheDocument(); - }); - - test.skip("Toggle hide balance", async () => { - const hideBalance = false; - const setHideBalance = jest.fn(); - const { getByTestId } = render( - - - - ); - - const container = getByTestId("crypto-balance-container"); - const swiper = getByTestId("crypto-balance-swiper"); - expect(container).not.toHaveClass("hide-balance"); - - act(() => { - fireEvent.click(swiper); - }); - - await waitFor(() => { - expect(container).toHaveClass("hide-balance"); - }); - - act(() => { - fireEvent.click(swiper); - }); - - await waitFor(() => { - expect(container).not.toHaveClass("hide-balance"); - }); - }); -}); diff --git a/src/ui/components/CryptoBalance/CryptoBalance.tsx b/src/ui/components/CryptoBalance/CryptoBalance.tsx deleted file mode 100644 index 3e7179ec8..000000000 --- a/src/ui/components/CryptoBalance/CryptoBalance.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import { useState } from "react"; -import { IonIcon } from "@ionic/react"; -import { Swiper, SwiperSlide } from "swiper/react"; -import { - eyeOutline, - eyeOffOutline, - checkmarkCircleOutline, -} from "ionicons/icons"; -import { Swiper as SwiperClass } from "swiper/types"; -import { CryptoBalanceProps } from "./CryptoBalance.types"; -import "./CryptoBalance.scss"; -import { i18n } from "../../../i18n"; -import { useAppDispatch } from "../../../store/hooks"; -import { setHideCryptoBalances } from "../../../store/reducers/cryptoAccountsCache"; -import { - PreferencesKeys, - PreferencesStorage, -} from "../../../core/storage/preferences/preferencesStorage"; - -const CryptoBalance = ({ - items, - hideBalance, - setHideBalance, -}: CryptoBalanceProps) => { - const dispatch = useAppDispatch(); - const [swiper, setSwiper] = useState(undefined); - const [activeIndex, setActiveIndex] = useState(0); - - const handleToggleHide = () => { - dispatch(setHideCryptoBalances(!hideBalance)); - PreferencesStorage.set(PreferencesKeys.APP_HIDE_CRYPTO_BALANCES, { - hidden: !hideBalance, - }); - setHideBalance(!hideBalance); - }; - - return ( -
-
- {i18n.t("crypto.tab.network.mainnet")} -
- setSwiper(swiper)} - onSlideChange={() => (swiper ? setActiveIndex(swiper.realIndex) : null)} - slidesPerView={1} - onClick={handleToggleHide} - > - {items.map((slide, index) => ( - -
- {slide.title} - -
-

- {slide.fiatBalance} -

-
- - {slide.nativeBalance} -
- - ))} - -
- {items.map((_, index) => ( -
- ))} -
-
- ); -}; - -export { CryptoBalance }; diff --git a/src/ui/components/CryptoBalance/CryptoBalance.types.ts b/src/ui/components/CryptoBalance/CryptoBalance.types.ts deleted file mode 100644 index e2a8ced31..000000000 --- a/src/ui/components/CryptoBalance/CryptoBalance.types.ts +++ /dev/null @@ -1,13 +0,0 @@ -interface CryptoBalanceItem { - title: string; - fiatBalance: string; - nativeBalance: string; -} - -interface CryptoBalanceProps { - items: CryptoBalanceItem[]; - hideBalance: boolean; - setHideBalance: (value: boolean) => void; -} - -export type { CryptoBalanceItem, CryptoBalanceProps }; diff --git a/src/ui/components/CryptoBalance/index.ts b/src/ui/components/CryptoBalance/index.ts deleted file mode 100644 index 87c43aba4..000000000 --- a/src/ui/components/CryptoBalance/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./CryptoBalance"; diff --git a/src/ui/components/MyWallets/MyWallets.scss b/src/ui/components/MyWallets/MyWallets.scss deleted file mode 100644 index f89d94515..000000000 --- a/src/ui/components/MyWallets/MyWallets.scss +++ /dev/null @@ -1,109 +0,0 @@ -.my-wallets { - display: flex; - flex-direction: column; - justify-content: space-between; - - .accounts-list { - background: transparent; - - ion-item-sliding { - &:not(:last-child) { - border-bottom: 1px solid var(--ion-color-dark-grey); - } - - &.item-sliding-active-slide ion-grid { - transform: translate3d(-1rem, 0px, 0px) !important; - transition: transform 1s linear; - } - - &:not(.item-sliding-active-slide) ion-grid { - transform: translate3d(0px, 0px, 0px) !important; - transition: transform 0.35s linear; - } - - &.item-sliding-active-swipe-end .delete-button { - width: 120vw; - } - - ion-item { - --inner-padding-end: 0; - - &::part(native) { - padding: 0; - background: var(--ion-color-light); - } - } - } - - ion-item-option { - width: 5.625rem; - } - - ion-row { - display: flex; - justify-content: space-between; - padding: 0.5rem 0; - - ion-col { - display: flex; - flex-direction: column; - justify-content: center; - - &.account-logo { - position: relative; - - img { - width: 2.75rem; - height: 2.75rem; - border-radius: 2rem; - } - .selected-account-checkmark { - width: 1.375rem; - height: 1.375rem; - border-radius: 1.375rem; - background: var(--ion-color-light); - position: absolute; - top: 0; - right: -0.438rem; - text-align: center; - display: flex; - flex-direction: column; - justify-content: center; - - .selected-account-checkmark-inner { - width: 1.125rem; - height: 1.125rem; - margin: auto; - border-radius: 1.125rem; - background: var(--ion-color-primary-gradient); - } - } - } - - &.account-info { - .account-name { - margin-bottom: 0.31rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .account-blockchain { - font-size: 0.875rem; - color: var(--ion-color-secondary); - } - } - - &.account-balance { - ion-label { - text-align: right; - } - } - } - } - } - - .my-wallets-footer { - margin-bottom: 1.63rem; - } -} diff --git a/src/ui/components/MyWallets/MyWallets.test.tsx b/src/ui/components/MyWallets/MyWallets.test.tsx deleted file mode 100644 index 80eb5862e..000000000 --- a/src/ui/components/MyWallets/MyWallets.test.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import { act, fireEvent, render, waitFor } from "@testing-library/react"; -import { Provider } from "react-redux"; -import configureStore from "redux-mock-store"; -import { waitForIonicReact } from "@ionic/react-test-utils"; -import { MyWallets } from "./MyWallets"; -import EN_TRANSLATIONS from "../../../locales/en/en.json"; -import { cryptoAccountsFix } from "../../__fixtures__/cryptoAccountsFix"; -import { TabsRoutePath } from "../navigation/TabsMenu"; - -describe("MyWallets modal", () => { - const myWalletsIsOpen = true; - const setMyWalletsIsOpen = jest.fn(); - const setAddAccountIsOpen = jest.fn(); - const defaultAccountData = cryptoAccountsFix[0]; - const setDefaultAccountData = jest.fn(); - const defaultAccountAddress = cryptoAccountsFix[0].address; - const setDefaultAccountAddress = jest.fn(); - const mockStore = configureStore(); - const dispatchMock = jest.fn(); - const initialState = { - stateCache: { - routes: [TabsRoutePath.CRYPTO], - authentication: { - loggedIn: true, - time: Date.now(), - passcodeIsSet: true, - }, - }, - seedPhraseCache: {}, - cryptoAccountsCache: cryptoAccountsFix, - }; - - const storeMocked = { - ...mockStore(initialState), - dispatch: dispatchMock, - }; - - test("Renders MyWallets modal", async () => { - const { queryByText } = render( - - - - ); - - waitForIonicReact(); - - await waitFor(() => { - expect( - queryByText(EN_TRANSLATIONS.crypto.mywalletsmodal.title) - ).toBeVisible(); - }); - }); - - test.skip("Renders all wallets", async () => { - const { queryByText } = render( - - - - ); - - await waitFor(() => { - expect(queryByText(cryptoAccountsFix[0].name)).toBeVisible(); - }); - }); - - test.skip("I can create a wallet", async () => { - const { queryByText, getByText } = render( - - - - ); - - await waitFor(() => { - expect(queryByText(EN_TRANSLATIONS.crypto.tab.create)).toBeVisible(); - }); - - act(() => { - fireEvent.click(getByText(EN_TRANSLATIONS.crypto.tab.create)); - }); - - await waitFor(() => { - expect(setAddAccountIsOpen).toHaveBeenCalledWith(true); - }); - }); -}); diff --git a/src/ui/components/MyWallets/MyWallets.tsx b/src/ui/components/MyWallets/MyWallets.tsx deleted file mode 100644 index b09a5624a..000000000 --- a/src/ui/components/MyWallets/MyWallets.tsx +++ /dev/null @@ -1,308 +0,0 @@ -import { - IonButton, - IonCol, - IonGrid, - IonIcon, - IonItem, - IonItemOption, - IonItemOptions, - IonItemSliding, - IonLabel, - IonList, - IonModal, - IonRow, -} from "@ionic/react"; -import { addOutline, checkmark } from "ionicons/icons"; -import { useState } from "react"; -import { i18n } from "../../../i18n"; -import { PageLayout } from "../layout/PageLayout"; -import { MyWalletsProps } from "./MyWallets.types"; -import "./MyWallets.scss"; -import { CryptoAccountProps } from "../../pages/Crypto/Crypto.types"; -import { useAppDispatch, useAppSelector } from "../../../store/hooks"; -import { - getCryptoAccountsCache, - setCryptoAccountsCache, - setDefaultCryptoAccountCache, -} from "../../../store/reducers/cryptoAccountsCache"; -import { formatCurrencyUSD } from "../../../utils"; -import { VerifyPassword } from "../VerifyPassword"; -import { RenameWallet } from "../RenameWallet"; -import { - PreferencesKeys, - PreferencesStorage, -} from "../../../core/storage/preferences"; -import { VerifyPasscode } from "../VerifyPasscode"; -import { - getStateCache, - setCurrentOperation, -} from "../../../store/reducers/stateCache"; -import { operationState } from "../../constants/dictionary"; - -const MyWallets = ({ - myWalletsIsOpen, - setMyWalletsIsOpen, - setAddAccountIsOpen, - defaultAccountData, - setDefaultAccountData, - defaultAccountAddress, - setDefaultAccountAddress, -}: MyWalletsProps) => { - const dispatch = useAppDispatch(); - const stateCache = useAppSelector(getStateCache); - const cryptoAccountsData: CryptoAccountProps[] = useAppSelector( - getCryptoAccountsCache - ); - const [selectedAccount, setSelectedAccount] = useState({ - name: "", - address: "", - }); - const [editIsOpen, setEditIsOpen] = useState(false); - const [verifyPasswordIsOpen, setVerifyPasswordIsOpen] = useState(false); - const [verifyPasscodeIsOpen, setVerifyPasscodeIsOpen] = useState(false); - - const handleSetDefaultAccount = (address: string) => { - dispatch(setDefaultCryptoAccountCache(address)); - PreferencesStorage.set(PreferencesKeys.APP_DEFAULT_CRYPTO_ACCOUNT, { - data: address, - }); - cryptoAccountsData.forEach((account) => { - if (account.address === address) { - setDefaultAccountData(account); - setDefaultAccountAddress(address); - } - }); - setMyWalletsIsOpen(false); - }; - - const handleDelete = () => { - const updatedAccountsData = cryptoAccountsData.filter( - (account) => account.address !== selectedAccount.address - ); - - if (selectedAccount.address === defaultAccountAddress) { - if (updatedAccountsData.length > 0) { - setDefaultAccountAddress(updatedAccountsData[0].address); - dispatch(setDefaultCryptoAccountCache(updatedAccountsData[0].address)); - PreferencesStorage.set(PreferencesKeys.APP_DEFAULT_CRYPTO_ACCOUNT, { - data: updatedAccountsData[0].address, - }); - } else { - setDefaultAccountAddress(""); - dispatch(setDefaultCryptoAccountCache("")); - PreferencesStorage.remove(PreferencesKeys.APP_DEFAULT_CRYPTO_ACCOUNT); - } - } - dispatch(setCryptoAccountsCache(updatedAccountsData)); - // @TODO - sdisalvo: Remember to update Database. - }; - - const Checkmark = () => { - return ( -
-
- -
-
- ); - }; - - interface AccountItemProps { - key: number; - index: number; - account: CryptoAccountProps; - } - - const AccountItem = ({ account, index }: AccountItemProps) => { - return ( - handleSetDefaultAccount(account.address)} - data-testid={`my-wallets-account-${index}`} - > - - - - - blockchain-logo - {account.address === defaultAccountData.address && ( - - )} - - - {account.name} - - {account.blockchain} - - - - - {formatCurrencyUSD(account.balance.main.usdBalance)} - - - - - - { - setSelectedAccount({ - name: account.name, - address: account.address, - }); - if (stateCache?.authentication.passwordIsSet) { - setVerifyPasswordIsOpen(true); - } else { - setVerifyPasscodeIsOpen(true); - } - }} - > - { - event.stopPropagation(); - dispatch(setCurrentOperation(operationState.renameWallet)); - setSelectedAccount({ - name: account.name, - address: account.address, - }); - setEditIsOpen(true); - }} - > - Rename - - { - event.stopPropagation(); - dispatch(setCurrentOperation(operationState.deleteWallet)); - setSelectedAccount({ - name: account.name, - address: account.address, - }); - - if ( - !stateCache?.authentication.passwordIsSkipped && - stateCache?.authentication.passwordIsSet - ) { - setVerifyPasswordIsOpen(true); - } else { - setVerifyPasscodeIsOpen(true); - } - }} - > - Delete - - - - ); - }; - - return ( - <> - { - setMyWalletsIsOpen(false); - dispatch(setCurrentOperation("")); - }} - > -
- - - - - {cryptoAccountsData?.length ? ( - - {cryptoAccountsData.map((account, index) => { - return ( - - ); - })} - - ) : ( - {i18n.t("crypto.mywalletsmodal.empty")} - )} - - - - -
- { - setMyWalletsIsOpen(false); - setAddAccountIsOpen(true); - }} - > - - {i18n.t("crypto.mywalletsmodal.create")} - -
-
- - - - - - ); -}; - -export { MyWallets }; diff --git a/src/ui/components/MyWallets/MyWallets.types.ts b/src/ui/components/MyWallets/MyWallets.types.ts deleted file mode 100644 index 1393faa0f..000000000 --- a/src/ui/components/MyWallets/MyWallets.types.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { CryptoAccountProps } from "../../pages/Crypto/Crypto.types"; - -interface MyWalletsProps { - myWalletsIsOpen: boolean; - setMyWalletsIsOpen: (value: boolean) => void; - setAddAccountIsOpen: (value: boolean) => void; - defaultAccountData: CryptoAccountProps; - setDefaultAccountData: (value: CryptoAccountProps) => void; - defaultAccountAddress: string; - setDefaultAccountAddress: (value: string) => void; -} - -export type { MyWalletsProps }; diff --git a/src/ui/components/MyWallets/index.ts b/src/ui/components/MyWallets/index.ts deleted file mode 100644 index 1e94a02a2..000000000 --- a/src/ui/components/MyWallets/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./MyWallets"; diff --git a/src/ui/components/RenameWallet/RenameWallet.scss b/src/ui/components/RenameWallet/RenameWallet.scss deleted file mode 100644 index 92df16356..000000000 --- a/src/ui/components/RenameWallet/RenameWallet.scss +++ /dev/null @@ -1,13 +0,0 @@ -.rename-wallet { - .close-button-label { - color: var(--ion-color-primary); - } - - h2 { - text-align: center; - } - - .primary-button { - margin-top: 1.5rem; - } -} diff --git a/src/ui/components/RenameWallet/RenameWallet.tsx b/src/ui/components/RenameWallet/RenameWallet.tsx deleted file mode 100644 index d546ea9c3..000000000 --- a/src/ui/components/RenameWallet/RenameWallet.tsx +++ /dev/null @@ -1,147 +0,0 @@ -import { useEffect, useState } from "react"; -import { - IonButton, - IonButtons, - IonCol, - IonContent, - IonGrid, - IonHeader, - IonModal, - IonRow, - IonTitle, - IonToolbar, -} from "@ionic/react"; -import { Capacitor } from "@capacitor/core"; -import { Keyboard } from "@capacitor/keyboard"; -import { i18n } from "../../../i18n"; -import "./RenameWallet.scss"; -import { CustomInput } from "../CustomInput"; -import { useAppDispatch, useAppSelector } from "../../../store/hooks"; -import { RenameWalletProps } from "./RenameWallet.types"; -import { CryptoAccountProps } from "../../pages/Crypto/Crypto.types"; -import { - getCryptoAccountsCache, - setCryptoAccountsCache, -} from "../../../store/reducers/cryptoAccountsCache"; -import { setCurrentOperation } from "../../../store/reducers/stateCache"; -import { toastState } from "../../constants/dictionary"; - -const RenameWallet = ({ - isOpen, - setIsOpen, - address, - name, -}: RenameWalletProps) => { - const [newWalletName, setNewWalletName] = useState(name); - const [keyboardIsOpen, setkeyboardIsOpen] = useState(false); - const verifyDisplayName = newWalletName.length > 0 && newWalletName !== name; - const dispatch = useAppDispatch(); - const cryptoAccountsData: CryptoAccountProps[] = useAppSelector( - getCryptoAccountsCache - ); - - useEffect(() => { - setNewWalletName(name); - }, [name]); - - const handleClose = () => { - setIsOpen(false); - setNewWalletName(name); - dispatch(setCurrentOperation("")); - }; - - const handleSubmit = () => { - handleRename(); - setIsOpen(false); - dispatch(setCurrentOperation(toastState.walletRenamed)); - }; - - const handleRename = () => { - // @TODO - sdisalvo: Update Database. - const updatedAccountsData: CryptoAccountProps[] = []; - cryptoAccountsData.forEach((account) => { - const obj = { ...account }; - if (account.address === address) { - obj.name = newWalletName; - } - updatedAccountsData.push(obj); - }); - dispatch(setCryptoAccountsCache(updatedAccountsData)); - }; - - useEffect(() => { - if (Capacitor.isNativePlatform()) { - Keyboard.addListener("keyboardWillShow", () => { - setkeyboardIsOpen(true); - }); - Keyboard.addListener("keyboardWillHide", () => { - setkeyboardIsOpen(false); - }); - } - }, []); - - return ( - <> - -
- - - - - {i18n.t("crypto.renamewallet.cancel")} - - - -

{i18n.t("crypto.renamewallet.title")}

- - - - - - - - - - - - - {i18n.t("crypto.renamewallet.confirm")} - - - -
- - - ); -}; - -export { RenameWallet }; diff --git a/src/ui/components/RenameWallet/RenameWallet.types.ts b/src/ui/components/RenameWallet/RenameWallet.types.ts deleted file mode 100644 index 0a7e4adc6..000000000 --- a/src/ui/components/RenameWallet/RenameWallet.types.ts +++ /dev/null @@ -1,8 +0,0 @@ -interface RenameWalletProps { - isOpen: boolean; - setIsOpen: (value: boolean) => void; - address: string; - name: string; -} - -export type { RenameWalletProps }; diff --git a/src/ui/components/RenameWallet/index.ts b/src/ui/components/RenameWallet/index.ts deleted file mode 100644 index 20e723654..000000000 --- a/src/ui/components/RenameWallet/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./RenameWallet"; diff --git a/src/ui/components/VerifyPasscode/VerifyPasscode.tsx b/src/ui/components/VerifyPasscode/VerifyPasscode.tsx index 80a05686f..994212de7 100644 --- a/src/ui/components/VerifyPasscode/VerifyPasscode.tsx +++ b/src/ui/components/VerifyPasscode/VerifyPasscode.tsx @@ -60,11 +60,6 @@ const VerifyPasscode = ({ currentOperation === operationState.deleteCredential ) { operation = toastState.credentialDeleted; - } else if ( - currentRoute?.path?.includes(TabsRoutePath.CRYPTO) && - currentOperation === operationState.deleteWallet - ) { - operation = toastState.walletDeleted; } else if ( currentRoute?.path?.includes(RoutePath.CONNECTION_DETAILS) && currentOperation === operationState.deleteConnection diff --git a/src/ui/components/VerifyPassword/VerifyPassword.tsx b/src/ui/components/VerifyPassword/VerifyPassword.tsx index 927f94810..955b953bc 100644 --- a/src/ui/components/VerifyPassword/VerifyPassword.tsx +++ b/src/ui/components/VerifyPassword/VerifyPassword.tsx @@ -64,11 +64,6 @@ const VerifyPassword = ({ currentOperation === operationState.deleteCredential ) { operation = toastState.credentialDeleted; - } else if ( - currentRoute?.path?.includes(TabsRoutePath.CRYPTO) && - currentOperation === operationState.deleteWallet - ) { - operation = toastState.walletDeleted; } else if ( currentRoute?.path?.includes(RoutePath.CONNECTION_DETAILS) && currentOperation === operationState.deleteConnection diff --git a/src/ui/components/navigation/TabsMenu/TabsMenu.tsx b/src/ui/components/navigation/TabsMenu/TabsMenu.tsx index f746f996c..5e37bd4dc 100644 --- a/src/ui/components/navigation/TabsMenu/TabsMenu.tsx +++ b/src/ui/components/navigation/TabsMenu/TabsMenu.tsx @@ -28,7 +28,7 @@ import { Dids } from "../../../pages/Dids"; import { Creds } from "../../../pages/Creds"; import { Scan } from "../../../pages/Scan"; import { Chat } from "../../../pages/Chat"; -import { CryptoPlaceholder } from "../../../pages/CryptoPlaceholder/CryptoPlaceholder"; +import { Crypto } from "../../../pages/Crypto"; const tabsRoutes = [ { @@ -51,8 +51,8 @@ const tabsRoutes = [ }, { label: i18n.t("tabsmenu.label.crypto"), - path: TabsRoutePath.CRYPTO_PLACEHOLDER, - component: CryptoPlaceholder, + path: TabsRoutePath.CRYPTO, + component: Crypto, icon: [wallet, walletOutline], }, { diff --git a/src/ui/constants/dictionary.ts b/src/ui/constants/dictionary.ts index 244f601ac..6993c16c5 100644 --- a/src/ui/constants/dictionary.ts +++ b/src/ui/constants/dictionary.ts @@ -1,9 +1,7 @@ import { - ConnectionShortDetails, ConnectionStatus, CredentialDetails, } from "../../core/agent/agent.types"; -import { CryptoAccountProps } from "../pages/Crypto/Crypto.types"; import { CredentialMetadataRecordStatus } from "../../core/agent/modules/generalStorage/repositories/credentialMetadataRecord.types"; import BackgroundDidKey0 from "../assets/images/did-key-0.png"; import BackgroundDidKey1 from "../assets/images/did-key-1.png"; @@ -37,12 +35,6 @@ const connectionType = { const operationState = { onboarding: "onboarding", - newCryptoAccount: "newCryptoAccount", - restoreCryptoAccount: "restoreCryptoAccount", - createWallet: "createWallet", - renameWallet: "renameWallet", - restoreWallet: "restoreWallet", - deleteWallet: "deleteWallet", updateIdentity: "updateIdentity", deleteIdentity: "deleteIdentity", deleteConnection: "deleteConnection", @@ -54,10 +46,6 @@ const operationState = { const toastState = { copiedToClipboard: "copiedToClipboard", - walletCreated: "walletCreated", - walletRenamed: "walletRenamed", - walletRestored: "walletRestored", - walletDeleted: "walletDeleted", identityCreated: "identityCreated", identityUpdated: "identityUpdated", identityDeleted: "identityDeleted", @@ -79,37 +67,8 @@ const toastState = { maxFavouritesReached: "maxFavouritesReached", }; -const defaultCryptoAccountData: CryptoAccountProps = { - address: "", - derivationPath: "", - name: "", - blockchain: "", - currency: "", - logo: "", - balance: { - main: { - nativeBalance: 0, - usdBalance: 0, - }, - reward: { - nativeBalance: 0, - usdBalance: 0, - }, - }, - usesIdentitySeedPhrase: false, - assets: [], - transactions: [], -}; - const blurredCryptoData = "••••••••••••••••••"; -const onboardingRoute = { - create: "onboardingcreate", - createRoute: "?route=onboardingcreate", - restore: "onboardingrestore", - restoreRoute: "?route=onboardingrestore", -}; - const themeBackgroundMapping: Record = { 0: BackgroundDidKey0, 1: BackgroundDidKey1, @@ -141,9 +100,7 @@ export { connectionStatus, operationState, toastState, - defaultCryptoAccountData, blurredCryptoData, - onboardingRoute, connectionType, themeBackgroundMapping, passcodeMapping, diff --git a/src/ui/pages/CreatePassword/CreatePassword.tsx b/src/ui/pages/CreatePassword/CreatePassword.tsx index 34561f119..56a2e747b 100644 --- a/src/ui/pages/CreatePassword/CreatePassword.tsx +++ b/src/ui/pages/CreatePassword/CreatePassword.tsx @@ -28,7 +28,6 @@ import { import { getNextRoute } from "../../../routes/nextRoute"; import { updateReduxState } from "../../../store/utils"; import { Alert } from "../../components/Alert"; -import { onboardingRoute } from "../../constants/dictionary"; import { MiscRecordId } from "../../../core/agent/agent.types"; const errorMessages = { @@ -145,9 +144,6 @@ const PasswordRegex = ({ password }: PasswordRegexProps) => { const CreatePassword = () => { const stateCache = useAppSelector(getStateCache); - const onboarding = - stateCache?.currentOperation === onboardingRoute.create || - onboardingRoute.restore; const history = useHistory(); const dispatch = useAppDispatch(); const [createPasswordValue, setCreatePasswordValue] = useState(""); @@ -226,7 +222,7 @@ const CreatePassword = () => { handleClose()} title={`${i18n.t("createpassword.title")}`} footer={true} diff --git a/src/ui/pages/Crypto/Crypto.scss b/src/ui/pages/Crypto/Crypto.scss index 3ac844607..e8602194b 100644 --- a/src/ui/pages/Crypto/Crypto.scss +++ b/src/ui/pages/Crypto/Crypto.scss @@ -1,85 +1,21 @@ -.crypto-tab { - &.wallet-details { - background: var(--ion-color-primary-gradient); - - ion-toolbar, - ion-content main { - --background: transparent; - } - - .identicon { - width: 2.8125rem; - height: 2.8125rem; - border-radius: 1.5rem; - } - - .crypto-tab-content { - margin-top: 8vh; - } - - ion-title { - margin-left: 3.4375rem; - max-width: 11.25rem; - - &.md { - margin-left: 0.63rem; - } - - h2 { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - - .crypto-tab-action-buttons { - display: flex; - flex-direction: row; - justify-content: space-around; - margin-top: 3.62rem; - - ion-button { - width: 3.8125rem; - height: 5.1875rem; - --border-radius: 0.5rem; - - .button-inner { - display: flex; - flex-direction: column !important; - - ion-icon { - width: 1.9375rem; - height: 1.9375rem; - margin: 0 auto; - } - - span { - margin-top: 0.62rem; - font-size: 0.75rem; - font-weight: 400; - - &.button-label-dark { - color: var(--ion-color-primary); - } - - &.button-label-light { - color: var(--ion-color-light); - } - } - } - } - } +.crypto-placeholder-tab-content { + margin-top: 35vh; + text-align: center; + width: 100%; + color: var(--ion-color-secondary); + + h2, + a { + color: var(--ion-color-primary); } } -.crypto-assets-transactions { - bottom: calc(8vh + 1px + var(--ion-safe-area-bottom)); - - &.md { - bottom: calc(8vh + 0.75rem + 1px); +.crypto-placeholder-modal-body { + ol { + padding-left: 2rem; } - .modal { - background-color: var(--ion-color-light-grey); + li { + line-height: 2rem; } } diff --git a/src/ui/pages/Crypto/Crypto.test.tsx b/src/ui/pages/Crypto/Crypto.test.tsx index bcd3dfb81..4ac6838f1 100644 --- a/src/ui/pages/Crypto/Crypto.test.tsx +++ b/src/ui/pages/Crypto/Crypto.test.tsx @@ -1,13 +1,7 @@ -import { act, fireEvent, render, waitFor } from "@testing-library/react"; +import { render } from "@testing-library/react"; import { Provider } from "react-redux"; -import configureStore from "redux-mock-store"; -import { waitForIonicReact } from "@ionic/react-test-utils"; import { Crypto } from "./Crypto"; import { store } from "../../../store"; -import { TabsRoutePath } from "../../../routes/paths"; -import EN_TRANSLATIONS from "../../../locales/en/en.json"; -import { cryptoAccountsFix } from "../../__fixtures__/cryptoAccountsFix"; -import { FIFTEEN_WORDS_BIT_LENGTH } from "../../../constants/appConstants"; describe("Crypto Tab", () => { test("Renders Crypto Tab", () => { @@ -17,331 +11,6 @@ describe("Crypto Tab", () => { ); - expect(getByTestId("crypto-tab")).toBeInTheDocument(); - }); - - test("Renders placeholder when no crypto accounts are found", () => { - const mockStore = configureStore(); - const dispatchMock = jest.fn(); - const initialState = { - stateCache: { - routes: [TabsRoutePath.CRYPTO], - authentication: { - loggedIn: true, - time: Date.now(), - passcodeIsSet: true, - }, - }, - seedPhraseCache: {}, - cryptoAccountsCache: [], - }; - - const storeMocked = { - ...mockStore(initialState), - dispatch: dispatchMock, - }; - const { getByTestId } = render( - - - - ); - - expect(getByTestId("crypto-cards-placeholder")).toBeInTheDocument(); - }); - - test("User has an option for reusing existing IDW seed phrase as a crypto account", async () => { - const mockStore = configureStore(); - const dispatchMock = jest.fn(); - const initialState = { - stateCache: { - routes: [TabsRoutePath.CRYPTO], - authentication: { - loggedIn: true, - time: Date.now(), - passcodeIsSet: true, - }, - }, - seedPhraseCache: {}, - cryptoAccountsCache: [], - }; - - const storeMocked = { - ...mockStore(initialState), - dispatch: dispatchMock, - }; - const { getByText } = render( - - - - ); - - act(() => { - fireEvent.click(getByText(EN_TRANSLATIONS.crypto.tab.create)); - }); - - await waitFor(() => { - expect( - getByText(EN_TRANSLATIONS.crypto.addcryptoaccountmodal.reuse) - ).toBeVisible(); - }); - }); - - test.skip("User can reuse existing IDW seed phrase as a crypto account", async () => { - const mockStore = configureStore(); - const dispatchMock = jest.fn(); - const initialState = { - stateCache: { - routes: [TabsRoutePath.CRYPTO], - authentication: { - loggedIn: true, - time: Date.now(), - passcodeIsSet: true, - }, - }, - seedPhraseCache: { - seedPhrase160: - "example1 example2 example3 example4 example5 example6 example7 example8 example9 example10 example11 example12 example13 example14 example15", - seedPhrase256: "", - selected: FIFTEEN_WORDS_BIT_LENGTH, - }, - cryptoAccountsCache: [], - }; - - const storeMocked = { - ...mockStore(initialState), - dispatch: dispatchMock, - }; - const { getByTestId, getByText, queryAllByTestId } = render( - - - - ); - - act(() => { - fireEvent.click(getByText(EN_TRANSLATIONS.crypto.tab.create)); - }); - - await waitFor(() => { - expect( - getByText(EN_TRANSLATIONS.crypto.addcryptoaccountmodal.reuse) - ).toBeVisible(); - }); - - act(() => { - fireEvent.click(getByTestId("add-crypto-account-reuse-button")); - }); - - await waitFor(() => { - expect(queryAllByTestId("verify-password")[0]).toHaveAttribute( - "is-open", - "true" - ); - }); - }); - - test("User doesn't see an option for reusing existing IDW seed phrase as a crypto account if this is already in use", async () => { - const mockStore = configureStore(); - const dispatchMock = jest.fn(); - const initialState = { - stateCache: { - routes: [TabsRoutePath.CRYPTO], - authentication: { - loggedIn: true, - time: Date.now(), - passcodeIsSet: true, - }, - }, - seedPhraseCache: {}, - cryptoAccountsCache: { - cryptoAccounts: cryptoAccountsFix, - defaultCryptoAccount: cryptoAccountsFix[0].address, - }, - }; - - const storeMocked = { - ...mockStore(initialState), - dispatch: dispatchMock, - }; - const { getByText, queryByText, getByTestId } = render( - - - - ); - - act(() => { - fireEvent.click(getByTestId("my-wallets-button")); - }); - - await waitFor(() => { - expect(queryByText(EN_TRANSLATIONS.crypto.tab.create)).toBeVisible(); - }); - - act(() => { - fireEvent.click(getByText(EN_TRANSLATIONS.crypto.tab.create)); - }); - - await waitFor(() => { - expect( - queryByText(EN_TRANSLATIONS.crypto.addcryptoaccountmodal.reuse) - ).toBeNull(); - }); - }); - - test("User can open My Wallets menu and it's empty when no wallets have been creted", async () => { - const mockStore = configureStore(); - const dispatchMock = jest.fn(); - const initialState = { - stateCache: { - routes: [TabsRoutePath.CRYPTO], - authentication: { - loggedIn: true, - time: Date.now(), - passcodeIsSet: true, - }, - }, - seedPhraseCache: {}, - cryptoAccountsCache: [], - }; - - const storeMocked = { - ...mockStore(initialState), - dispatch: dispatchMock, - }; - const { getByText, getByTestId, queryByText } = render( - - - - ); - - expect(queryByText(EN_TRANSLATIONS.crypto.mywalletsmodal.empty)).toBeNull(); - - act(() => { - fireEvent.click(getByTestId("my-wallets-button")); - }); - - await waitFor(() => { - expect( - getByText(EN_TRANSLATIONS.crypto.mywalletsmodal.empty) - ).toBeVisible(); - }); - }); - - test("User can toggle accounts", async () => { - const mockStore = configureStore(); - const dispatchMock = jest.fn(); - const initialState = { - stateCache: { - routes: [TabsRoutePath.CRYPTO], - authentication: { - loggedIn: true, - time: Date.now(), - passcodeIsSet: true, - }, - }, - seedPhraseCache: {}, - cryptoAccountsCache: { - cryptoAccounts: cryptoAccountsFix, - defaultCryptoAccount: cryptoAccountsFix[0].address, - }, - }; - - const storeMocked = { - ...mockStore(initialState), - dispatch: dispatchMock, - }; - - const { queryByTestId, getByTestId, queryByText } = render( - - - - ); - - expect(queryByText(cryptoAccountsFix[0].name)).toBeVisible(); - - await waitFor(() => { - expect(queryByTestId("crypto-tab-content")).toBeVisible(); - }); - - await waitFor(() => { - expect(getByTestId("my-wallets")).toHaveAttribute("is-open", "false"); - }); - - act(() => { - fireEvent.click(getByTestId("my-wallets-button")); - }); - - await waitFor(() => { - expect(queryByTestId("my-wallets-account-1")).toBeVisible(); - }); - - await waitFor(() => { - expect(getByTestId("my-wallets")).toHaveAttribute("is-open", "true"); - }); - - act(() => { - fireEvent.click(getByTestId("my-wallets-account-1")); - }); - - expect(queryByText(cryptoAccountsFix[1].name)).toBeVisible(); - }); - - test("User can check receiving account", async () => { - const mockStore = configureStore(); - const dispatchMock = jest.fn(); - const refresh = jest.fn(); - const initialState = { - stateCache: { - routes: [TabsRoutePath.CRYPTO], - authentication: { - loggedIn: true, - time: Date.now(), - passcodeIsSet: true, - }, - }, - seedPhraseCache: {}, - cryptoAccountsCache: { - cryptoAccounts: cryptoAccountsFix, - defaultCryptoAccount: cryptoAccountsFix[0].address, - }, - }; - - const storeMocked = { - ...mockStore(initialState), - dispatch: dispatchMock, - }; - - const { queryByTestId, getByTestId, queryByText } = render( - - - - ); - - await waitFor(() => { - expect(queryByTestId("receive-button")).toBeVisible(); - }); - - await waitFor(() => { - expect(getByTestId("share-qr-modal")).toHaveAttribute("is-open", "false"); - }); - - act(() => { - fireEvent.click(getByTestId("receive-button")); - }); - - await waitFor(() => { - expect(getByTestId("share-qr-modal")).toHaveAttribute("is-open", "true"); - }); - - expect(document.querySelector("canvas")).toBeVisible(); - - await waitForIonicReact(); - - await waitFor(() => { - expect( - queryByText(`${cryptoAccountsFix[0].address.substring(0, 22)}...`) - ).toBeVisible(); - }); - - expect(queryByText(cryptoAccountsFix[0].derivationPath)).toBeVisible(); + expect(getByTestId("crypto-placeholder-tab")).toBeInTheDocument(); }); }); diff --git a/src/ui/pages/Crypto/Crypto.tsx b/src/ui/pages/Crypto/Crypto.tsx index de404b303..34c392a11 100644 --- a/src/ui/pages/Crypto/Crypto.tsx +++ b/src/ui/pages/Crypto/Crypto.tsx @@ -1,354 +1,93 @@ +import { Trans } from "react-i18next"; +import { useState } from "react"; import { - IonButton, - IonIcon, + IonCol, + IonGrid, IonModal, IonPage, + IonRow, useIonViewWillEnter, } from "@ionic/react"; -import Blockies from "react-18-blockies"; -import { useEffect, useState } from "react"; -import { - walletOutline, - arrowUpOutline, - arrowDownOutline, - imageOutline, - layersOutline, -} from "ionicons/icons"; import { TabLayout } from "../../components/layout/TabLayout"; -import { useAppDispatch, useAppSelector } from "../../../store/hooks"; -import { - setCurrentRoute, - getCurrentRoute, - setCurrentOperation, -} from "../../../store/reducers/stateCache"; +import { useAppDispatch } from "../../../store/hooks"; +import { setCurrentRoute } from "../../../store/reducers/stateCache"; import { TabsRoutePath } from "../../../routes/paths"; -import { CardsPlaceholder } from "../../components/CardsPlaceholder"; -import { - getCryptoAccountsCache, - getDefaultCryptoAccountCache, - getHideCryptoBalances, - setDefaultCryptoAccountCache, -} from "../../../store/reducers/cryptoAccountsCache"; -import { i18n } from "../../../i18n"; import "./Crypto.scss"; -import { CryptoAccountProps } from "./Crypto.types"; -import { MyWallets } from "../../components/MyWallets"; -import { AddCryptoAccount } from "../../components/AddCryptoAccount"; -import { ChooseAccountName } from "../../components/ChooseAccountName"; -import { CryptoBalance } from "../../components/CryptoBalance"; -import { CryptoBalanceItem } from "../../components/CryptoBalance/CryptoBalance.types"; -import { formatCurrencyUSD } from "../../../utils"; -import { AssetsTransactions } from "../../components/AssetsTransactions"; -import { - defaultCryptoAccountData, - toastState, -} from "../../constants/dictionary"; -import { - PreferencesKeys, - PreferencesStorage, -} from "../../../core/storage/preferences"; -import { ShareQR } from "../../components/ShareQR/ShareQR"; -import { MoreOptions } from "../../components/ShareQR/MoreOptions"; +import { i18n } from "../../../i18n"; +import { PageLayout } from "../../components/layout/PageLayout"; const Crypto = () => { const dispatch = useAppDispatch(); - const currentRoute = useAppSelector(getCurrentRoute); - const cryptoAccountsData: CryptoAccountProps[] = useAppSelector( - getCryptoAccountsCache - ); - const [myWalletsIsOpen, setMyWalletsIsOpen] = useState(false); - const [addAccountIsOpen, setAddAccountIsOpen] = useState(false); - const [receiveIsOpen, setReceiveIsOpen] = useState(false); - const [idwProfileInUse, setIdwProfileInUse] = useState(false); - const [chooseAccountNameIsOpen, setChooseAccountNameIsOpen] = useState(false); - const [showAssetsTransactions, setShowAssetsTransactions] = useState(true); - const [assetsTransactionsExpanded, setAssetsTransactionsExpanded] = - useState(false); - const [defaultAccountAddress, setDefaultAccountAddress] = useState( - useAppSelector(getDefaultCryptoAccountCache) - ); - const [defaultAccountData, setDefaultAccountData] = useState( - defaultCryptoAccountData - ); - const accountAvailable = cryptoAccountsData?.length && defaultAccountData; - const items: CryptoBalanceItem[] = [ - { - title: i18n.t("crypto.tab.slider.title.mainbalance"), - fiatBalance: formatCurrencyUSD( - defaultAccountData.balance.main.usdBalance - ), - nativeBalance: - defaultAccountData.balance.main.nativeBalance.toFixed(2) + " ADA", - }, - { - title: i18n.t("crypto.tab.slider.title.rewardbalance"), - fiatBalance: formatCurrencyUSD( - defaultAccountData.balance.reward.usdBalance - ), - nativeBalance: - defaultAccountData.balance.reward.nativeBalance.toFixed(2) + " ADA", - }, - ]; - const [hideBalance, setHideBalance] = useState( - useAppSelector(getHideCryptoBalances) - ); + const [featuresModalIsOpen, setFeaturesModalIsOpen] = useState(false); useIonViewWillEnter(() => { dispatch(setCurrentRoute({ path: TabsRoutePath.CRYPTO })); - setShowAssetsTransactions(true); }); - useEffect(() => { - if (!currentRoute?.path || currentRoute.path !== TabsRoutePath.CRYPTO) { - setShowAssetsTransactions(false); - } else { - setShowAssetsTransactions(true); - } - }, [currentRoute]); - - useEffect(() => { - setIdwProfileInUse(false); - cryptoAccountsData?.forEach((account) => { - if (account.address === defaultAccountAddress) { - setDefaultAccountData(account); - } - if (account.usesIdentitySeedPhrase) { - setIdwProfileInUse(true); - } - }); - if (cryptoAccountsData?.length === 1) { - setDefaultAccountData(cryptoAccountsData[0]); - dispatch(setDefaultCryptoAccountCache(cryptoAccountsData[0].address)); - PreferencesStorage.set(PreferencesKeys.APP_DEFAULT_CRYPTO_ACCOUNT, { - data: cryptoAccountsData[0].address, - }); - } - }, [cryptoAccountsData, defaultAccountAddress]); - - useEffect(() => { - if (defaultAccountAddress) { - setShowAssetsTransactions(true); - } else { - setShowAssetsTransactions(false); - } - }, [defaultAccountAddress]); - - const AdditionalButtons = () => { - return ( - { - setMyWalletsIsOpen(true); - }} - > - - - ); - }; - - const Avatar = () => { + const HandleFeatures = () => { return ( - + setFeaturesModalIsOpen(true)}> + {i18n.t("cryptoplaceholder.tab.action.link")} + ); }; - const ActionButtons = () => { - return ( -
- -
- - - {i18n.t("crypto.tab.actionbuttons.send")} - -
- - setReceiveIsOpen(true)} - > -
- - - {i18n.t("crypto.tab.actionbuttons.receive")} - -
- - -
- - - {i18n.t("crypto.tab.actionbuttons.nfts")} - -
- - -
- - - {i18n.t("crypto.tab.actionbuttons.staking")} - -
- -
- ); - }; + const features: string[] = i18n.t("cryptoplaceholder.modal.features", { + returnObjects: true, + }); return ( <> : null} - title={accountAvailable ? defaultAccountData.name : ""} menuButton={true} - additionalButtons={} > - {cryptoAccountsData?.length && defaultAccountData ? ( - <> -
- - - {showAssetsTransactions && ( - - setAssetsTransactionsExpanded(!assetsTransactionsExpanded) - } - className="crypto-assets-transactions page-layout" - data-testid="crypto-assets-transactions" - > - - - )} -
- setReceiveIsOpen(false)} - /> - } - /> - - ) : ( - setAddAccountIsOpen(true)} - testId="crypto-cards-placeholder" +
+

{i18n.t("cryptoplaceholder.tab.header")}

+ ]} /> - )} +
- - - { - dispatch(setCurrentOperation(toastState.walletCreated)); - }} - /> + setFeaturesModalIsOpen(false)} + > +
+ setFeaturesModalIsOpen(false)} + title={`${i18n.t("cryptoplaceholder.modal.title")}`} + > + + + +
    + {features.map((feature: string, index: number) => ( +
  1. {feature}
    2. + ))} +
+ + + + +
+ ); }; diff --git a/src/ui/pages/Crypto/Crypto.types.ts b/src/ui/pages/Crypto/Crypto.types.ts deleted file mode 100644 index 2dc120ed6..000000000 --- a/src/ui/pages/Crypto/Crypto.types.ts +++ /dev/null @@ -1,41 +0,0 @@ -interface CryptoAssetsProps { - name: string; - balance: number; - logo: string; - currentPrice: number; - performance: number; -} - -interface CryptoTransactionsProps { - address: string; - type: string[]; - operation: string; - timestamp: string; - amount: number; - currency: string; - status: string; -} - -interface CryptoAccountProps { - address: string; - derivationPath: string; - name: string; - blockchain: string; - currency: string; - logo: string; - balance: { - main: { - nativeBalance: number; - usdBalance: number; - }; - reward: { - nativeBalance: number; - usdBalance: number; - }; - }; - usesIdentitySeedPhrase: boolean; - assets: CryptoAssetsProps[]; - transactions: CryptoTransactionsProps[]; -} - -export type { CryptoAccountProps, CryptoAssetsProps, CryptoTransactionsProps }; diff --git a/src/ui/pages/CryptoPlaceholder/CryptoPlaceholder.scss b/src/ui/pages/CryptoPlaceholder/CryptoPlaceholder.scss deleted file mode 100644 index e8602194b..000000000 --- a/src/ui/pages/CryptoPlaceholder/CryptoPlaceholder.scss +++ /dev/null @@ -1,21 +0,0 @@ -.crypto-placeholder-tab-content { - margin-top: 35vh; - text-align: center; - width: 100%; - color: var(--ion-color-secondary); - - h2, - a { - color: var(--ion-color-primary); - } -} - -.crypto-placeholder-modal-body { - ol { - padding-left: 2rem; - } - - li { - line-height: 2rem; - } -} diff --git a/src/ui/pages/CryptoPlaceholder/CryptoPlaceholder.test.tsx b/src/ui/pages/CryptoPlaceholder/CryptoPlaceholder.test.tsx deleted file mode 100644 index af38a1685..000000000 --- a/src/ui/pages/CryptoPlaceholder/CryptoPlaceholder.test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { render } from "@testing-library/react"; -import { Provider } from "react-redux"; -import { CryptoPlaceholder } from "./CryptoPlaceholder"; -import { store } from "../../../store"; - -describe("CryptoPlaceholder Tab", () => { - test("Renders CryptoPlaceholder Tab", () => { - const { getByText, getByTestId } = render( - - - - ); - - expect(getByTestId("crypto-placeholder-tab")).toBeInTheDocument(); - }); -}); diff --git a/src/ui/pages/CryptoPlaceholder/CryptoPlaceholder.tsx b/src/ui/pages/CryptoPlaceholder/CryptoPlaceholder.tsx deleted file mode 100644 index f1a027b6b..000000000 --- a/src/ui/pages/CryptoPlaceholder/CryptoPlaceholder.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import { Trans } from "react-i18next"; -import { useState } from "react"; -import { - IonCol, - IonGrid, - IonModal, - IonPage, - IonRow, - useIonViewWillEnter, -} from "@ionic/react"; -import { TabLayout } from "../../components/layout/TabLayout"; -import { useAppDispatch } from "../../../store/hooks"; -import { setCurrentRoute } from "../../../store/reducers/stateCache"; -import { TabsRoutePath } from "../../../routes/paths"; -import "./CryptoPlaceholder.scss"; -import { i18n } from "../../../i18n"; -import { PageLayout } from "../../components/layout/PageLayout"; - -const CryptoPlaceholder = () => { - const dispatch = useAppDispatch(); - const [featuresModalIsOpen, setFeaturesModalIsOpen] = useState(false); - - useIonViewWillEnter(() => { - dispatch(setCurrentRoute({ path: TabsRoutePath.CRYPTO_PLACEHOLDER })); - }); - - const HandleFeatures = () => { - return ( - setFeaturesModalIsOpen(true)}> - {i18n.t("cryptoplaceholder.tab.action.link")} - - ); - }; - - const features: string[] = i18n.t("cryptoplaceholder.modal.features", { - returnObjects: true, - }); - - return ( - <> - - -
-

{i18n.t("cryptoplaceholder.tab.header")}

- ]} - /> -
- - - setFeaturesModalIsOpen(false)} - > -
- setFeaturesModalIsOpen(false)} - title={`${i18n.t("cryptoplaceholder.modal.title")}`} - > - - - -
    - {features.map((feature: string, index: number) => ( -
  1. {feature}
    2. - ))} -
- - - - -
- - - ); -}; - -export { CryptoPlaceholder }; diff --git a/src/ui/pages/CryptoPlaceholder/index.ts b/src/ui/pages/CryptoPlaceholder/index.ts deleted file mode 100644 index 159a7bbad..000000000 --- a/src/ui/pages/CryptoPlaceholder/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./CryptoPlaceholder"; diff --git a/src/ui/pages/GenerateSeedPhrase/GenerateSeedPhrase.test.tsx b/src/ui/pages/GenerateSeedPhrase/GenerateSeedPhrase.test.tsx index 36a946c2a..2a8494af7 100644 --- a/src/ui/pages/GenerateSeedPhrase/GenerateSeedPhrase.test.tsx +++ b/src/ui/pages/GenerateSeedPhrase/GenerateSeedPhrase.test.tsx @@ -7,7 +7,7 @@ import { } from "@ionic/react-test-utils"; import { Provider } from "react-redux"; import configureStore from "redux-mock-store"; -import { Route, Router } from "react-router-dom"; +import { MemoryRouter, Route, Router } from "react-router-dom"; import { GenerateSeedPhrase } from "./GenerateSeedPhrase"; import { MNEMONIC_FIFTEEN_WORDS, @@ -15,7 +15,7 @@ import { FIFTEEN_WORDS_BIT_LENGTH, TWENTYFOUR_WORDS_BIT_LENGTH, } from "../../../constants/appConstants"; -import { operationState, onboardingRoute } from "../../constants/dictionary"; +import { operationState } from "../../constants/dictionary"; import EN_TRANSLATIONS from "../../../locales/en/en.json"; import { store } from "../../../store"; import { RoutePath } from "../../../routes"; @@ -36,9 +36,6 @@ interface StoreMocked { seedPhrase256: string; selected: number; }; - cryptoAccountsCache: { - cryptoAccounts: never[]; - }; } const mockStore = configureStore(); @@ -103,7 +100,7 @@ describe("Generate Seed Phrase screen from Onboarding", () => { time: Date.now(), passcodeIsSet: true, }, - currentOperation: onboardingRoute.createRoute, + currentOperation: "", }, seedPhraseCache: { seedPhrase160: @@ -112,9 +109,6 @@ describe("Generate Seed Phrase screen from Onboarding", () => { "example example example example example example example example example example example example example example example example example example example example example example example example", selected: FIFTEEN_WORDS_BIT_LENGTH, }, - cryptoAccountsCache: { - cryptoAccounts: [], - }, }; const { getByTestId } = render( @@ -163,16 +157,13 @@ describe("Generate Seed Phrase screen from Onboarding", () => { time: Date.now(), passcodeIsSet: true, }, - currentOperation: onboardingRoute.createRoute, + currentOperation: "", }, seedPhraseCache: { seedPhrase160: "", seedPhrase256: "", selected: FIFTEEN_WORDS_BIT_LENGTH, }, - cryptoAccountsCache: { - cryptoAccounts: [], - }, }; const { getByTestId } = render( @@ -345,16 +336,13 @@ describe("Generate Seed Phrase screen from Onboarding", () => { time: Date.now(), passcodeIsSet: true, }, - currentOperation: onboardingRoute.createRoute, + currentOperation: "", }, seedPhraseCache: { seedPhrase160: "", seedPhrase256: "", selected: FIFTEEN_WORDS_BIT_LENGTH, }, - cryptoAccountsCache: { - cryptoAccounts: [], - }, }; const { getByTestId } = render( @@ -383,153 +371,3 @@ describe("Generate Seed Phrase screen from Onboarding", () => { await waitFor(() => expect(overlay).toHaveClass("visible")); }); }); - -describe("Generate Seed Phrase screen from Crypto/Generate", () => { - beforeAll(() => { - history.push( - RoutePath.GENERATE_SEED_PHRASE, - operationState.newCryptoAccount - ); - }); - - const initialState = { - stateCache: { - routes: [RoutePath.GENERATE_SEED_PHRASE], - authentication: { - loggedIn: true, - time: Date.now(), - passcodeIsSet: true, - seedPhraseIsSet: true, - }, - currentOperation: "", - }, - seedPhraseCache: { - seedPhrase160: - "example1 example2 example3 example4 example5 example6 example7 example8 example9 example10 example11 example12 example13 example14 example15", - seedPhrase256: "", - selected: FIFTEEN_WORDS_BIT_LENGTH, - }, - cryptoAccountsCache: { - cryptoAccounts: [], - }, - }; - - test("User can generate a new seed phrase", async () => { - const { getByTestId } = render( - - - - - - ); - - expect(getByTestId("close-button")).toBeInTheDocument(); - const overlay = getByTestId("seed-phrase-privacy-overlay"); - const revealSeedPhraseButton = getByTestId("reveal-seed-phrase-button"); - - expect(overlay).toHaveClass("visible"); - - act(() => { - fireEvent.click(revealSeedPhraseButton); - }); - await waitFor(() => expect(overlay).toHaveClass("hidden")); - - const termsCheckbox = getByTestId("termsandconditions-checkbox"); - expect(termsCheckbox.hasAttribute("[checked=\"false")); - fireEvent.click(termsCheckbox); - expect(termsCheckbox.hasAttribute("[checked=\"true")); - - const continueButton = getByTestId("primary-button"); - - await waitFor(() => expect(continueButton).not.toBeDisabled); - - act(() => { - fireEvent.click(continueButton); - }); - - await waitForIonicReact(); - - await waitFor(() => expect(getByTestId("alert-confirm")).toBeVisible()); - }); - - test("Shows an alert when close button is clicked", async () => { - const { getByTestId, queryByText } = render( - - - - - - ); - - act(() => { - fireEvent.click(getByTestId("close-button")); - }); - - await waitFor(() => - expect( - queryByText(EN_TRANSLATIONS.generateseedphrase.alert.exit.text) - ).toBeVisible() - ); - }); -}); - -describe.skip("Restore account from existing seed phrase", () => { - beforeAll(() => { - history.push( - RoutePath.GENERATE_SEED_PHRASE, - operationState.restoreCryptoAccount - ); - }); - - const initialState = { - stateCache: { - routes: [RoutePath.GENERATE_SEED_PHRASE], - authentication: { - loggedIn: true, - time: Date.now(), - passcodeIsSet: true, - seedPhraseIsSet: true, - }, - currentOperation: "", - }, - seedPhraseCache: { - seedPhrase160: - "example1 example2 example3 example4 example5 example6 example7 example8 example9 example10 example11 example12 example13 example14 example15", - seedPhrase256: "", - selected: FIFTEEN_WORDS_BIT_LENGTH, - }, - cryptoAccountsCache: { - cryptoAccounts: [], - }, - }; - - test("User can enter a seed phrase", async () => { - window.history.pushState( - { type: operationState.restoreCryptoAccount }, - "", - RoutePath.GENERATE_SEED_PHRASE - ); - const { getByTestId, getByText } = render( - - - - - - ); - - expect( - getByText( - EN_TRANSLATIONS.generateseedphrase.restorecryptoaccount.paragraph.top - ) - ).toBeVisible(); - - const overlay = getByTestId("seed-phrase-privacy-overlay"); - expect(overlay).toHaveClass("hidden"); - - const continueButton = getByTestId("primary-button"); - expect(continueButton).toBeDisabled; - }); -}); diff --git a/src/ui/pages/GenerateSeedPhrase/GenerateSeedPhrase.tsx b/src/ui/pages/GenerateSeedPhrase/GenerateSeedPhrase.tsx index 177a6bc17..17b7a0a97 100644 --- a/src/ui/pages/GenerateSeedPhrase/GenerateSeedPhrase.tsx +++ b/src/ui/pages/GenerateSeedPhrase/GenerateSeedPhrase.tsx @@ -9,7 +9,6 @@ import { IonCol, IonGrid, IonIcon, - IonInput, IonItem, IonLabel, IonPage, @@ -20,7 +19,7 @@ import { import { useHistory } from "react-router-dom"; import "./GenerateSeedPhrase.scss"; import { eyeOffOutline } from "ionicons/icons"; -import { generateMnemonic, validateMnemonic } from "bip39"; +import { generateMnemonic } from "bip39"; import { Trans } from "react-i18next"; import { i18n } from "../../../i18n"; import { @@ -28,21 +27,10 @@ import { MNEMONIC_TWENTYFOUR_WORDS, FIFTEEN_WORDS_BIT_LENGTH, TWENTYFOUR_WORDS_BIT_LENGTH, - SEED_PHRASE_SUGGESTIONS, } from "../../../constants/appConstants"; -import { - operationState, - onboardingRoute, - toastState, -} from "../../constants/dictionary"; import { PageLayout } from "../../components/layout/PageLayout"; +import { Alert as AlertConfirm } from "../../components/Alert"; import { - Alert as AlertConfirm, - Alert as AlertExit, - Alert as AlertVerify, -} from "../../components/Alert"; -import { - getCurrentOperation, getStateCache, setCurrentOperation, } from "../../../store/reducers/stateCache"; @@ -53,69 +41,29 @@ import { updateReduxState } from "../../../store/utils"; import { RoutePath } from "../../../routes"; import { DataProps } from "../../../routes/nextRoute/nextRoute.types"; import { getSeedPhraseCache } from "../../../store/reducers/seedPhraseCache"; -import { TabsRoutePath } from "../../../routes/paths"; -import { GenerateSeedPhraseProps } from "./GenerateSeedPhrase.types"; -import { bip39Seeds } from "../../constants/bip39Seeds"; -import { ChooseAccountName } from "../../components/ChooseAccountName"; +import { getBackRoute } from "../../../routes/backRoute"; const GenerateSeedPhrase = () => { const history = useHistory(); const dispatch = useAppDispatch(); const stateCache = useAppSelector(getStateCache); - const currentOperation = useAppSelector(getCurrentOperation); - const seedPhraseType = !stateCache.authentication.seedPhraseIsSet - ? operationState.onboarding - : ( - (history?.location?.state as GenerateSeedPhraseProps)?.type || - currentOperation - ).toLowerCase(); - const stateOnboarding = seedPhraseType === operationState.onboarding; - const stateRestore = currentOperation === operationState.restoreCryptoAccount; + const seedPhraseStore = useAppSelector(getSeedPhraseCache); + const [seedPhrase, setSeedPhrase] = useState([]); const [seedPhrase160, setSeedPhrase160] = useState([]); const [seedPhrase256, setSeedPhrase256] = useState([]); const [showSeedPhrase, setShowSeedPhrase] = useState(false); - const [alertVerifyIsOpen, setAlertVerifyIsOpen] = useState(false); const [alertConfirmIsOpen, setAlertConfirmIsOpen] = useState(false); - const [alertExitIsOpen, setAlertExitIsOpen] = useState(false); const [termsModalIsOpen, setTermsModalIsOpen] = useState(false); const [checked, setChecked] = useState(false); - const [reloadSeedPhrase, setReloadSeedPhrase] = useState(false); - const [verifySeedPhrase, setVerifySeedPhrase] = useState(true); - const [validateSeedPhrase, setValidateSeedPhrase] = useState(false); - const [suggestions, setSuggestions] = useState([]); - const [currentIndex, setCurrentIndex] = useState(0); - const [isTyping, setIsTyping] = useState(false); - const [chooseAccountNameIsOpen, setChooseAccountNameIsOpen] = useState(false); - - useEffect(() => { - setSeedPhrase(seedPhrase); - const isVerifiable = () => { - let verify = true; - for (let index = 0; index < seedPhrase.length; index++) { - if (seedPhrase[index] === "") { - verify = false; - } - } - return verify; - }; - setVerifySeedPhrase(isVerifiable); - setValidateSeedPhrase(validateMnemonic(seedPhrase.join(" "))); - }, [reloadSeedPhrase, isTyping]); const initializeSeedPhrase = () => { const isFifteenWordsSelected = seedPhraseStore.selected === FIFTEEN_WORDS_BIT_LENGTH; let seed160; let seed256; - if (stateRestore) { - setShowSeedPhrase(true); - seed160 = new Array(MNEMONIC_FIFTEEN_WORDS).fill(""); - setSeedPhrase160(seed160); - seed256 = new Array(MNEMONIC_TWENTYFOUR_WORDS).fill(""); - setSeedPhrase256(seed256); - } else if ( + if ( seedPhraseStore.seedPhrase160.length > 0 && seedPhraseStore.seedPhrase256.length > 0 ) { @@ -133,10 +81,7 @@ const GenerateSeedPhrase = () => { }; useEffect(() => { - if ( - history?.location.pathname === RoutePath.GENERATE_SEED_PHRASE || - RoutePath.GENERATE_SEED_PHRASE + onboardingRoute.createRoute - ) { + if (history?.location.pathname === RoutePath.GENERATE_SEED_PHRASE) { initializeSeedPhrase(); } }, [history?.location.pathname]); @@ -147,7 +92,6 @@ const GenerateSeedPhrase = () => { initializeSeedPhrase(); setShowSeedPhrase(false); setAlertConfirmIsOpen(false); - setAlertExitIsOpen(false); setChecked(false); }; @@ -188,115 +132,62 @@ const GenerateSeedPhrase = () => { handleClearState(); history.push({ pathname: nextPath.pathname, - state: { - type: seedPhraseType, - }, }); }; - const handleExit = () => { + const handleBack = () => { handleClearState(); dispatch(setCurrentOperation("")); - history.push(TabsRoutePath.CRYPTO); - }; - const Suggestions = () => { - return ( -
- - {i18n.t("generateseedphrase." + seedPhraseType + ".suggestions")} - -
- {suggestions.map((suggestion, index) => ( - { - updateSeedPhrase(currentIndex, suggestion); - }} - > - {suggestion} - - ))} -
-
+ const { backPath, updateRedux } = getBackRoute( + RoutePath.GENERATE_SEED_PHRASE, + { + store: { stateCache }, + } ); - }; - const handleSuggestions = (index: number, word: string) => { - setCurrentIndex(index); - const query = word.toLowerCase(); - const filteredSuggestions = - isTyping && query.length - ? bip39Seeds - .filter( - (suggestion: string) => - suggestion.toLowerCase().indexOf(query) > -1 - ) - .splice(0, SEED_PHRASE_SUGGESTIONS) - : []; - setSuggestions(filteredSuggestions); - }; - - const updateSeedPhrase = (index: number, word: string) => { - const newSeedPhrase = seedPhrase; - newSeedPhrase[index] = word; - setSeedPhrase(newSeedPhrase); - setReloadSeedPhrase(!reloadSeedPhrase); + updateReduxState( + backPath.pathname, + { store: { stateCache } }, + dispatch, + updateRedux + ); + history.push(backPath.pathname); }; return ( <> - {isTyping && suggestions.length ? : null} setAlertExitIsOpen(true)} + closeButton={false} + closeButtonAction={() => handleBack()} currentPath={RoutePath.GENERATE_SEED_PHRASE} - progressBar={stateOnboarding} + progressBar={true} progressBarValue={0.66} progressBarBuffer={1} footer={true} primaryButtonText={`${i18n.t( - "generateseedphrase." + seedPhraseType + ".button.continue" + "generateseedphrase.onboarding.button.continue" )}`} primaryButtonAction={() => { - if (stateRestore) { - if (validateSeedPhrase) { - setChooseAccountNameIsOpen(true); - } else { - setAlertVerifyIsOpen(true); - } - } else { - setAlertConfirmIsOpen(true); - } + setAlertConfirmIsOpen(true); }} - primaryButtonDisabled={ - !(showSeedPhrase && checked && verifySeedPhrase) - } + primaryButtonDisabled={!(showSeedPhrase && checked)} > - {stateOnboarding && ( -

- {i18n.t("generateseedphrase." + seedPhraseType + ".title")} -

- )} +

+ {i18n.t("generateseedphrase.onboarding.title")} +

- {i18n.t( - "generateseedphrase." + seedPhraseType + ".paragraph.top" - )} + {i18n.t("generateseedphrase.onboarding.paragraph.top")}

@@ -312,7 +203,6 @@ const GenerateSeedPhrase = () => { : FIFTEEN_WORDS_BIT_LENGTH }`} onIonChange={(event) => { - setShowSeedPhrase(stateRestore); toggleSeedPhrase(Number(event.detail.value)); }} > @@ -365,7 +255,7 @@ const GenerateSeedPhrase = () => {
{ }`} > {seedPhrase.map((word, index) => { - return stateRestore ? ( - - {index + 1}. - { - updateSeedPhrase(index, ""); - setIsTyping(true); - }} - onIonChange={(event) => { - handleSuggestions(index, `${event.target.value}`); - updateSeedPhrase(index, `${event.target.value}`); - }} - onIonBlur={() => { - setIsTyping(false); - setSuggestions([]); - }} - value={word} - /> - - ) : ( + return ( {index + 1}. @@ -416,9 +284,7 @@ const GenerateSeedPhrase = () => { className="page-paragraph" data-testid="page-paragraph-bottom" > - {i18n.t( - "generateseedphrase." + seedPhraseType + ".paragraph.bottom" - )} + {i18n.t("generateseedphrase.onboarding.paragraph.bottom")}

@@ -457,23 +323,6 @@ const GenerateSeedPhrase = () => { - setAlertVerifyIsOpen(false)} - actionCancel={() => { - setAlertVerifyIsOpen(false); - handleExit(); - }} - /> { )}`} actionConfirm={handleContinue} /> - dispatch(setCurrentOperation(""))} - actionDismiss={() => dispatch(setCurrentOperation(""))} - /> - { - handleClearState(); - dispatch(setCurrentOperation(toastState.walletRestored)); - history.push({ - pathname: TabsRoutePath.CRYPTO, - }); - }} - /> diff --git a/src/ui/pages/GenerateSeedPhrase/GenerateSeedPhrase.types.ts b/src/ui/pages/GenerateSeedPhrase/GenerateSeedPhrase.types.ts index 23d9e499f..f1604ef59 100644 --- a/src/ui/pages/GenerateSeedPhrase/GenerateSeedPhrase.types.ts +++ b/src/ui/pages/GenerateSeedPhrase/GenerateSeedPhrase.types.ts @@ -1,8 +1,5 @@ -import { CryptoAccountProps } from "../Crypto/Crypto.types"; - interface GenerateSeedPhraseProps { type: string; - defaultAccountData: CryptoAccountProps; } export type { GenerateSeedPhraseProps }; diff --git a/src/ui/pages/Onboarding/Onboarding.test.tsx b/src/ui/pages/Onboarding/Onboarding.test.tsx index cf53b79ff..2dfef6163 100644 --- a/src/ui/pages/Onboarding/Onboarding.test.tsx +++ b/src/ui/pages/Onboarding/Onboarding.test.tsx @@ -9,7 +9,6 @@ import { SetPasscode } from "../SetPasscode"; import { store } from "../../../store"; import { RoutePath } from "../../../routes"; import { FIFTEEN_WORDS_BIT_LENGTH } from "../../../constants/appConstants"; -import { onboardingRoute } from "../../constants/dictionary"; describe("Onboarding Page", () => { test("Render slide 1", () => { @@ -67,7 +66,7 @@ describe("Onboarding Page", () => { ); }); - test("If the user has already set a passcode but they haven't created a profile, they will be asked to generate a seed phrase", async () => { + test("If the user has already set a passcode but they haven't created a seed phrase, they will be asked to generate a seed phrase", async () => { const mockStore = configureStore(); const initialState = { stateCache: { @@ -83,9 +82,6 @@ describe("Onboarding Page", () => { seedPhrase256: "", selected: FIFTEEN_WORDS_BIT_LENGTH, }, - cryptoAccountsCache: { - cryptoAccounts: [], - }, }; const storeMocked = mockStore(initialState); @@ -97,7 +93,7 @@ describe("Onboarding Page", () => { component={Onboarding} /> diff --git a/src/ui/pages/Onboarding/Onboarding.tsx b/src/ui/pages/Onboarding/Onboarding.tsx index 3c62f10b4..408b3f5e8 100644 --- a/src/ui/pages/Onboarding/Onboarding.tsx +++ b/src/ui/pages/Onboarding/Onboarding.tsx @@ -1,10 +1,8 @@ import { useHistory } from "react-router-dom"; -import { IonPage } from "@ionic/react"; import { i18n } from "../../../i18n"; import "./Onboarding.scss"; import { Slides } from "../../components/Slides"; import { SlideItem } from "../../components/Slides/Slides.types"; -import { PageLayout } from "../../components/layout/PageLayout"; import { RoutePath } from "../../../routes"; import { useAppDispatch, useAppSelector } from "../../../store/hooks"; import { @@ -14,7 +12,6 @@ import { import { getNextRoute } from "../../../routes/nextRoute"; import { updateReduxState } from "../../../store/utils"; import { DataProps } from "../../../routes/nextRoute/nextRoute.types"; -import { onboardingRoute } from "../../constants/dictionary"; import introImg0 from "../../assets/lottie/wallet.json"; import introImg1 from "../../assets/images/intro-1.png"; import introImg2 from "../../assets/images/intro-2.png"; @@ -58,26 +55,20 @@ const Onboarding = () => { }, ]; - const handleNavigation = (route: string) => { - if (route === onboardingRoute.restore) { + const handleNavigation = (route?: string) => { + if (route) { // @TODO - sdisalvo: Remove this condition and default to dispatch when the restore route is ready return; - } else { - dispatch(setCurrentOperation(route)); - const data: DataProps = { - store: { stateCache }, - state: { currentOperation: route }, - }; - const { nextPath, updateRedux } = getNextRoute( - RoutePath.ONBOARDING, - data - ); - updateReduxState(nextPath.pathname, data, dispatch, updateRedux); - history.push({ - pathname: nextPath.pathname, - state: data.state, - }); } + const data: DataProps = { + store: { stateCache }, + }; + const { nextPath, updateRedux } = getNextRoute(RoutePath.ONBOARDING, data); + updateReduxState(nextPath.pathname, data, dispatch, updateRedux); + history.push({ + pathname: nextPath.pathname, + state: data.state, + }); }; return ( @@ -86,11 +77,12 @@ const Onboarding = () => { handleNavigation(onboardingRoute.create)} + primaryButtonAction={() => handleNavigation()} tertiaryButtonText={`${i18n.t( "onboarding.alreadywallet.button.label" )}`} - tertiaryButtonAction={() => handleNavigation(onboardingRoute.restore)} + // TODO: set restore route when available + tertiaryButtonAction={() => handleNavigation("#")} /> ); diff --git a/src/ui/pages/VerifySeedPhrase/VerifySeedPhrase.test.tsx b/src/ui/pages/VerifySeedPhrase/VerifySeedPhrase.test.tsx index f37e3c975..f4ff62ab4 100644 --- a/src/ui/pages/VerifySeedPhrase/VerifySeedPhrase.test.tsx +++ b/src/ui/pages/VerifySeedPhrase/VerifySeedPhrase.test.tsx @@ -47,7 +47,6 @@ describe("Verify Seed Phrase Page", () => { seedPhrase256: "", selected: FIFTEEN_WORDS_BIT_LENGTH, }, - cryptoAccountsCache: [], }; const storeMocked = { @@ -226,7 +225,7 @@ describe("Verify Seed Phrase Page", () => { test.skip("The user can Verify the Seed Phrase when generating a new seed phrase", async () => { const history = createMemoryHistory(); - history.push(RoutePath.VERIFY_SEED_PHRASE, operationState.newCryptoAccount); + history.push(RoutePath.VERIFY_SEED_PHRASE); const { getByTestId, getByText, queryByTestId } = render( @@ -235,12 +234,6 @@ describe("Verify Seed Phrase Page", () => { ); - await waitFor(() => - expect( - getByText(EN_TRANSLATIONS.verifyseedphrase.newcryptoaccount.title) - ).toBeVisible() - ); - const continueButton = getByTestId("primary-button-verify-seedphrase"); const originalSeedPhraseContainer = getByTestId( "original-seed-phrase-container" @@ -297,7 +290,6 @@ describe("Verify Seed Phrase Page", () => { seedPhrase256: "", selected: FIFTEEN_WORDS_BIT_LENGTH, }, - cryptoAccountsCache: [], }; const storeMocked = { diff --git a/src/ui/pages/VerifySeedPhrase/VerifySeedPhrase.tsx b/src/ui/pages/VerifySeedPhrase/VerifySeedPhrase.tsx index c4f47ff54..03766c1a9 100644 --- a/src/ui/pages/VerifySeedPhrase/VerifySeedPhrase.tsx +++ b/src/ui/pages/VerifySeedPhrase/VerifySeedPhrase.tsx @@ -18,31 +18,17 @@ import "./VerifySeedPhrase.scss"; import { KeyStoreKeys, SecureStorage } from "../../../core/storage"; import { getNextRoute } from "../../../routes/nextRoute"; import { updateReduxState } from "../../../store/utils"; -import { - getStateCache, - setCurrentOperation, - setInitialized, -} from "../../../store/reducers/stateCache"; +import { getStateCache } from "../../../store/reducers/stateCache"; import { FIFTEEN_WORDS_BIT_LENGTH } from "../../../constants/appConstants"; -import { operationState, toastState } from "../../constants/dictionary"; import { getBackRoute } from "../../../routes/backRoute"; -import { ChooseAccountName } from "../../components/ChooseAccountName"; import { DataProps } from "../../../routes/nextRoute/nextRoute.types"; -import { GenerateSeedPhraseProps } from "../GenerateSeedPhrase/GenerateSeedPhrase.types"; import { Addresses } from "../../../core/cardano"; -import { - PreferencesKeys, - PreferencesStorage, -} from "../../../core/storage/preferences"; const VerifySeedPhrase = () => { const history = useHistory(); const dispatch = useAppDispatch(); const stateCache = useAppSelector(getStateCache); - const seedPhraseType = !stateCache.authentication.seedPhraseIsSet - ? operationState.onboarding - : (history?.location?.state as GenerateSeedPhraseProps)?.type || - stateCache?.currentOperation; + const seedPhraseStore = useAppSelector(getSeedPhraseCache); const originalSeedPhrase = seedPhraseStore.selected === FIFTEEN_WORDS_BIT_LENGTH @@ -52,7 +38,6 @@ const VerifySeedPhrase = () => { const [seedPhraseSelected, setSeedPhraseSelected] = useState([]); const [alertIsOpen, setAlertIsOpen] = useState(false); const [alertExitIsOpen, setAlertExitIsOpen] = useState(false); - const [chooseAccountNameIsOpen, setChooseAccountNameIsOpen] = useState(false); useEffect(() => { if (history?.location.pathname === RoutePath.VERIFY_SEED_PHRASE) { @@ -118,11 +103,7 @@ const VerifySeedPhrase = () => { originalSeedPhrase.length === seedPhraseSelected.length && originalSeedPhrase.every((v, i) => v === seedPhraseSelected[i]) ) { - if (seedPhraseType === operationState.onboarding) { - storeIdentitySeedPhrase(); - } else { - setChooseAccountNameIsOpen(true); - } + storeIdentitySeedPhrase(); } else { setAlertIsOpen(true); } @@ -132,10 +113,6 @@ const VerifySeedPhrase = () => { const data: DataProps = { store: { stateCache }, state: { - type: - seedPhraseType !== operationState.onboarding - ? toastState.walletCreated - : "", currentOperation: stateCache.currentOperation, }, }; @@ -164,9 +141,6 @@ const VerifySeedPhrase = () => { ); history.push({ pathname: backPath.pathname, - state: { - type: seedPhraseType, - }, }); }; @@ -175,27 +149,18 @@ const VerifySeedPhrase = () => { { - handleClearState(); - handleExit(); - } - : () => setAlertExitIsOpen(true) - } + onBack={() => { + handleClearState(); + handleExit(); + }} currentPath={RoutePath.VERIFY_SEED_PHRASE} - progressBar={seedPhraseType === operationState.onboarding} + progressBar={true} progressBarValue={1} progressBarBuffer={1} footer={true} primaryButtonText={`${i18n.t( - "verifyseedphrase." + seedPhraseType + ".button.continue" + "verifyseedphrase.onboarding.button.continue" )}`} primaryButtonAction={() => handleContinue()} primaryButtonDisabled={ @@ -205,11 +170,7 @@ const VerifySeedPhrase = () => { - {seedPhraseType === operationState.onboarding && ( -

- {i18n.t("verifyseedphrase." + seedPhraseType + ".title")} -

- )} +

{i18n.t("verifyseedphrase.onboarding.title")}

{i18n.t("verifyseedphrase.paragraph.top")}

@@ -300,16 +261,6 @@ const VerifySeedPhrase = () => { )}`} actionConfirm={handleExit} /> - { - dispatch(setCurrentOperation(toastState.walletCreated)); - handleNavigate(); - }} - /> );