From 85b9df0382b6971462bbee5895e3f43e5fa390f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?jeesun=20=EC=A7=80=EC=84=A0?= Date: Fri, 8 Nov 2024 13:02:40 -0800 Subject: [PATCH 1/6] add copy button for the json payload for RPC (#1141) will add a component in the next pr --- .../(sidebar)/endpoints/[[...pages]]/page.tsx | 24 ++++++++++++++++--- .../components/SavedEndpointsPage.tsx | 22 ++++++++++++++--- 2 files changed, 40 insertions(+), 6 deletions(-) diff --git a/src/app/(sidebar)/endpoints/[[...pages]]/page.tsx b/src/app/(sidebar)/endpoints/[[...pages]]/page.tsx index c9cd7018..bb326f41 100644 --- a/src/app/(sidebar)/endpoints/[[...pages]]/page.tsx +++ b/src/app/(sidebar)/endpoints/[[...pages]]/page.tsx @@ -610,9 +610,27 @@ export default function Endpoints() { if (renderedProps) { return ( -
- -
+ <> +
+ +
+ + + + + + ); } return null; diff --git a/src/app/(sidebar)/endpoints/components/SavedEndpointsPage.tsx b/src/app/(sidebar)/endpoints/components/SavedEndpointsPage.tsx index 21b6c27a..d530a69b 100644 --- a/src/app/(sidebar)/endpoints/components/SavedEndpointsPage.tsx +++ b/src/app/(sidebar)/endpoints/components/SavedEndpointsPage.tsx @@ -5,6 +5,7 @@ import { Badge, Button, Card, + CopyText, Icon, Input, Modal, @@ -24,6 +25,7 @@ import { localStorageSavedEndpointsHorizon } from "@/helpers/localStorageSavedEn import { localStorageSavedRpcMethods } from "@/helpers/localStorageSavedRpcMethods"; import { arrayItem } from "@/helpers/arrayItem"; import { formatTimestamp } from "@/helpers/formatTimestamp"; +import { stringify } from "lossless-json"; import { useStore } from "@/store/useStore"; import { Network, @@ -316,9 +318,23 @@ export const SavedEndpointsPage = () => { {expandedPayloadIndex[idx] ? ( -
- -
+ <> +
+ +
+ + + + + + ) : ( <> )} From ca5870cce623b2c291f9a3893bcf638fdb683afd Mon Sep 17 00:00:00 2001 From: Iveta Date: Tue, 12 Nov 2024 08:56:32 -0500 Subject: [PATCH 2/6] Upgrade to Node v22 LTS (#1144) --- .github/workflows/build.yml | 2 +- .nvmrc | 2 +- Dockerfile | 2 +- package.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 8f7e7ada..f8c6b0a5 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -8,7 +8,7 @@ jobs: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: - node-version: 20 + node-version: 22 - name: Install dependencies run: npm install -g yarn && yarn - name: Install Playwright Browsers diff --git a/.nvmrc b/.nvmrc index 9a2a0e21..53d1c14d 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v20 +v22 diff --git a/Dockerfile b/Dockerfile index dc0cdaed..8740a804 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,4 @@ -FROM node:20 +FROM node:22 ENV NEXT_TELEMETRY_DISABLED 1 ENV PORT 80 diff --git a/package.json b/package.json index 3aacdfe2..5ae8ed3c 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "author": "Stellar Development Foundation ", "license": "Apache-2.0", "engines": { - "node": ">=20.0.0" + "node": ">=22.0.0" }, "scripts": { "dev": "export NEXT_PUBLIC_COMMIT_HASH=$(git rev-parse --short HEAD) && next dev", From d7f5b80cd30a43754ad8d7e12f31a126b3cc6582 Mon Sep 17 00:00:00 2001 From: Iveta Date: Tue, 12 Nov 2024 09:12:48 -0500 Subject: [PATCH 3/6] Saved Keypairs: show balance or fund account button (#1147) --- src/app/(sidebar)/account/saved/page.tsx | 282 +++++++++++++----- .../components/SavedEndpointsPage.tsx | 7 +- src/components/NetworkSelector/index.tsx | 7 +- src/helpers/getNetworkById.ts | 6 + src/query/useAccountInfo.ts | 42 +++ src/query/useFriendBot.ts | 2 +- 6 files changed, 256 insertions(+), 90 deletions(-) create mode 100644 src/helpers/getNetworkById.ts create mode 100644 src/query/useAccountInfo.ts diff --git a/src/app/(sidebar)/account/saved/page.tsx b/src/app/(sidebar)/account/saved/page.tsx index 5546087e..b909748e 100644 --- a/src/app/(sidebar)/account/saved/page.tsx +++ b/src/app/(sidebar)/account/saved/page.tsx @@ -1,20 +1,33 @@ "use client"; import { useCallback, useEffect, useState } from "react"; -import { Alert, Text, Card, Input, Icon, Button } from "@stellar/design-system"; +import { + Alert, + Text, + Card, + Input, + Icon, + Button, + Loader, + Badge, +} from "@stellar/design-system"; import { Box } from "@/components/layout/Box"; import { InputSideElement } from "@/components/InputSideElement"; import { SaveKeypairModal } from "@/components/SaveKeypairModal"; import { SavedItemTimestampAndDelete } from "@/components/SavedItemTimestampAndDelete"; -import { useStore } from "@/store/useStore"; import { localStorageSavedKeypairs } from "@/helpers/localStorageSavedKeypairs"; -import { NetworkOptions } from "@/constants/settings"; +import { arrayItem } from "@/helpers/arrayItem"; +import { getNetworkHeaders } from "@/helpers/getNetworkHeaders"; +import { getNetworkById } from "@/helpers/getNetworkById"; + +import { useStore } from "@/store/useStore"; import { useIsTestingNetwork } from "@/hooks/useIsTestingNetwork"; +import { useFriendBot } from "@/query/useFriendBot"; +import { useAccountInfo } from "@/query/useAccountInfo"; import { NetworkType, SavedKeypair } from "@/types/types"; -import { arrayItem } from "@/helpers/arrayItem"; export default function SavedKeypairs() { const { network, selectNetwork, updateIsDynamicNetworkSelect } = useStore(); @@ -37,79 +50,8 @@ export default function SavedKeypairs() { updateSavedKeypairs(); }, [updateSavedKeypairs]); - const SavedKeypair = ({ keypair }: { keypair: SavedKeypair }) => { - return ( - - { - setCurrentKeypairTimestamp(keypair.timestamp); - }} - icon={} - /> - } - /> - - - - - - - { - const savedKeypairs = localStorageSavedKeypairs.get(); - const indexToUpdate = savedKeypairs.findIndex( - (kp) => kp.timestamp === keypair.timestamp, - ); - - if (indexToUpdate >= 0) { - const updatedList = arrayItem.delete( - savedKeypairs, - indexToUpdate, - ); - - localStorageSavedKeypairs.set(updatedList); - updateSavedKeypairs(); - } - }} - /> - - - ); - }; - - const getNetworkById = (networkId: NetworkType) => { - const newNetwork = NetworkOptions.find((n) => n.id === networkId); + const getAndSetNetwork = (networkId: NetworkType) => { + const newNetwork = getNetworkById(networkId); if (newNetwork) { updateIsDynamicNetworkSelect(true); @@ -132,7 +74,7 @@ export default function SavedKeypairs() { const newNetworkId = network.id === "testnet" ? "futurenet" : "testnet"; - getNetworkById(newNetworkId); + getAndSetNetwork(newNetworkId); }} > {`You must switch your network to ${otherNetworkLabel} in order to see those saved @@ -153,7 +95,27 @@ export default function SavedKeypairs() { {savedKeypairs.length === 0 ? `There are no saved keypairs on ${network.label} network.` : savedKeypairs.map((kp) => ( - + { + const savedKeypairs = localStorageSavedKeypairs.get(); + const indexToUpdate = savedKeypairs.findIndex( + (kp) => kp.timestamp === keypair.timestamp, + ); + + if (indexToUpdate >= 0) { + const updatedList = arrayItem.delete( + savedKeypairs, + indexToUpdate, + ); + + localStorageSavedKeypairs.set(updatedList); + updateSavedKeypairs(); + } + }} + /> ))} @@ -173,7 +135,7 @@ export default function SavedKeypairs() { variant="tertiary" size="sm" onClick={() => { - getNetworkById("futurenet"); + getAndSetNetwork("futurenet"); }} > Switch to Futurenet @@ -183,7 +145,7 @@ export default function SavedKeypairs() { variant="tertiary" size="sm" onClick={() => { - getNetworkById("testnet"); + getAndSetNetwork("testnet"); }} > Switch to Testnet @@ -236,3 +198,161 @@ export default function SavedKeypairs() { ); } + +const SavedKeypairItem = ({ + keypair, + setCurrentKeypairTimestamp, + onDelete, +}: { + keypair: SavedKeypair; + setCurrentKeypairTimestamp: (timestamp: number) => void; + onDelete: (keypair: SavedKeypair) => void; +}) => { + const network = getNetworkById(keypair.network.id); + const publicKey = keypair.publicKey; + const horizonUrl = network?.horizonUrl || ""; + const headers = network ? getNetworkHeaders(network, "horizon") : {}; + + const { + error: friendbotError, + isFetching: isFriendbotFetching, + isLoading: isFriendbotLoading, + isSuccess: isFriendbotSuccess, + refetch: fundWithFriendbot, + } = useFriendBot({ + network: network!, + publicKey: publicKey, + key: { type: "saved" }, + headers, + }); + + const { + isFetching: isAccountFetching, + isLoading: isAccountLoading, + error: accountError, + data: accountInfo, + refetch: fetchAccountInfo, + } = useAccountInfo({ + publicKey, + horizonUrl, + headers, + }); + + useEffect(() => { + if (publicKey && horizonUrl) { + fetchAccountInfo(); + } + }, [publicKey, horizonUrl, fetchAccountInfo]); + + useEffect(() => { + if (isFriendbotSuccess) { + fetchAccountInfo(); + } + }, [fetchAccountInfo, isFriendbotSuccess]); + + const renderAccountData = () => { + if ( + isAccountFetching || + isAccountLoading || + isFriendbotFetching || + isFriendbotLoading + ) { + return ; + } + + if (accountError || friendbotError) { + return ( +
+ {accountError?.message || friendbotError?.message} +
+ ); + } + + if (accountInfo && !accountInfo.isFunded) { + return ( + + ); + } + + if (accountInfo?.isFunded) { + const xlmAsset = accountInfo.details.balances.find( + (b: any) => b.asset_type === "native", + ); + + if (xlmAsset) { + return ( + {`Balance: ${xlmAsset.balance} XLM`} + ); + } + } + + return null; + }; + + return ( + + { + setCurrentKeypairTimestamp(keypair.timestamp); + }} + icon={} + /> + } + /> + + + + + + + + <>{renderAccountData()} + + + onDelete(keypair)} + /> + + + ); +}; diff --git a/src/app/(sidebar)/endpoints/components/SavedEndpointsPage.tsx b/src/app/(sidebar)/endpoints/components/SavedEndpointsPage.tsx index d530a69b..0aa3408d 100644 --- a/src/app/(sidebar)/endpoints/components/SavedEndpointsPage.tsx +++ b/src/app/(sidebar)/endpoints/components/SavedEndpointsPage.tsx @@ -11,6 +11,8 @@ import { Modal, Text, } from "@stellar/design-system"; +import { stringify } from "lossless-json"; + import { TabView } from "@/components/TabView"; import { Box } from "@/components/layout/Box"; import { InputSideElement } from "@/components/InputSideElement"; @@ -19,13 +21,12 @@ import { ShareUrlButton } from "@/components/ShareUrlButton"; import { PrettyJsonTextarea } from "@/components/PrettyJsonTextarea"; import { SavedItemTimestampAndDelete } from "@/components/SavedItemTimestampAndDelete"; -import { NetworkOptions } from "@/constants/settings"; import { Routes } from "@/constants/routes"; import { localStorageSavedEndpointsHorizon } from "@/helpers/localStorageSavedEndpointsHorizon"; import { localStorageSavedRpcMethods } from "@/helpers/localStorageSavedRpcMethods"; import { arrayItem } from "@/helpers/arrayItem"; import { formatTimestamp } from "@/helpers/formatTimestamp"; -import { stringify } from "lossless-json"; +import { getNetworkById } from "@/helpers/getNetworkById"; import { useStore } from "@/store/useStore"; import { Network, @@ -73,7 +74,7 @@ export const SavedEndpointsPage = () => { const getNetworkConfig = ( network: LocalStorageSavedNetwork, ): Network | undefined => { - const defaults = NetworkOptions.find((n) => n.id === network.id); + const defaults = getNetworkById(network.id); switch (network.id) { case "testnet": diff --git a/src/components/NetworkSelector/index.tsx b/src/components/NetworkSelector/index.tsx index b8325425..a4fd2589 100644 --- a/src/components/NetworkSelector/index.tsx +++ b/src/components/NetworkSelector/index.tsx @@ -15,8 +15,9 @@ import { localStorageSavedNetwork } from "@/helpers/localStorageSavedNetwork"; import { delayedAction } from "@/helpers/delayedAction"; import { isEmptyObject } from "@/helpers/isEmptyObject"; import { sanitizeObject } from "@/helpers/sanitizeObject"; +import { getNetworkById } from "@/helpers/getNetworkById"; -import { AnyObject, EmptyObj, Network, NetworkType } from "@/types/types"; +import { AnyObject, EmptyObj, Network } from "@/types/types"; import "./styles.scss"; @@ -216,10 +217,6 @@ export const NetworkSelector = () => { }); }; - const getNetworkById = (networkId: NetworkType) => { - return NetworkOptions.find((op) => op.id === networkId); - }; - const getButtonLabel = () => { if (activeNetwork.id === "custom") { return "Switch to Custom Network"; diff --git a/src/helpers/getNetworkById.ts b/src/helpers/getNetworkById.ts new file mode 100644 index 00000000..1110ce74 --- /dev/null +++ b/src/helpers/getNetworkById.ts @@ -0,0 +1,6 @@ +import { NetworkOptions } from "@/constants/settings"; +import { NetworkType } from "@/types/types"; + +export const getNetworkById = (networkId: NetworkType) => { + return NetworkOptions.find((op) => op.id === networkId); +}; diff --git a/src/query/useAccountInfo.ts b/src/query/useAccountInfo.ts new file mode 100644 index 00000000..9acaec78 --- /dev/null +++ b/src/query/useAccountInfo.ts @@ -0,0 +1,42 @@ +import { NetworkHeaders } from "@/types/types"; +import { useQuery } from "@tanstack/react-query"; + +export const useAccountInfo = ({ + publicKey, + horizonUrl, + headers, +}: { + publicKey: string; + horizonUrl: string; + headers: NetworkHeaders; +}) => { + const query = useQuery({ + queryKey: ["useAccountInfo", publicKey], + queryFn: async () => { + try { + const response = await fetch(`${horizonUrl}/accounts/${publicKey}`, { + headers, + }); + const responseJson = await response.json(); + + if (responseJson.status === 404) { + return { + id: publicKey, + isFunded: false, + }; + } + + return { + id: publicKey, + isFunded: true, + details: responseJson, + }; + } catch (e: any) { + throw `Something went wrong. ${e}`; + } + }, + enabled: false, + }); + + return query; +}; diff --git a/src/query/useFriendBot.ts b/src/query/useFriendBot.ts index 3a63ac1c..2658100e 100644 --- a/src/query/useFriendBot.ts +++ b/src/query/useFriendBot.ts @@ -20,7 +20,7 @@ export const useFriendBot = ({ : "https://friendbot.stellar.org"; const query = useQuery({ - queryKey: ["friendBot", key], + queryKey: ["friendBot", publicKey, key], queryFn: async () => { if (!network.horizonUrl) { throw new Error(`Please use a network that supports Horizon`); From ab1a3faa93bbe67a8a78ddfb6147829f780c4221 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?jeesun=20=EC=A7=80=EC=84=A0?= Date: Tue, 12 Nov 2024 11:09:02 -0800 Subject: [PATCH 4/6] add all eligible modules from stellar wallets kit (#1149) --- package.json | 2 +- src/components/WalletKitContextProvider.tsx | 6 ++---- yarn.lock | 9 +++++---- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 5ae8ed3c..8b7389cd 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "pre-push": "yarn lint:ts && yarn test" }, "dependencies": { - "@creit.tech/stellar-wallets-kit": "^1.2.3", + "@creit.tech/stellar-wallets-kit": "^1.2.5", "@ledgerhq/hw-app-str": "^7.0.4", "@ledgerhq/hw-transport-webusb": "^6.29.4", "@stellar/design-system": "^2.0.0-beta.17", diff --git a/src/components/WalletKitContextProvider.tsx b/src/components/WalletKitContextProvider.tsx index 113ea3b0..0cdf2cd7 100644 --- a/src/components/WalletKitContextProvider.tsx +++ b/src/components/WalletKitContextProvider.tsx @@ -5,10 +5,8 @@ import { useStore } from "@/store/useStore"; import { StellarWalletsKit, - FreighterModule, - xBullModule, - AlbedoModule, XBULL_ID, + allowAllModules, } from "@creit.tech/stellar-wallets-kit"; import { getWalletKitNetwork } from "@/helpers/getWalletKitNetwork"; @@ -80,7 +78,7 @@ export const WalletKitContextProvider = ({ return new StellarWalletsKit({ network: networkType, selectedWalletId: XBULL_ID, - modules: [new xBullModule(), new FreighterModule(), new AlbedoModule()], + modules: allowAllModules(), ...(theme && { buttonTheme: isDarkTheme ? { diff --git a/yarn.lock b/yarn.lock index 4e06d941..84859d9d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -262,10 +262,10 @@ "@babel/helper-validator-identifier" "^7.24.7" to-fast-properties "^2.0.0" -"@creit.tech/stellar-wallets-kit@^1.2.3": - version "1.2.3" - resolved "https://registry.yarnpkg.com/@creit.tech/stellar-wallets-kit/-/stellar-wallets-kit-1.2.3.tgz#4a7cb03786fdf8c4ac3da8f872e951d3e9a2c349" - integrity sha512-AM1fL/cQkI0i+lefJlViOPR4uxZrPDImbF+eCYST7FEIWYZrPsd/Mtne5qGVJDC6Umzdg9HqJt7CSFZTUJ2b3A== +"@creit.tech/stellar-wallets-kit@^1.2.5": + version "1.2.5" + resolved "https://registry.yarnpkg.com/@creit.tech/stellar-wallets-kit/-/stellar-wallets-kit-1.2.5.tgz#852cdb9a1c248a5e9d9e899ff7fa59d99db69848" + integrity sha512-PcNK//8LzMLwZgpJwrnVAKR6PRN9Idt37VgG5SzkQEyLze5G1v+T+sUAc4OBQ0jkpFqHLarpgeMjfeB21T5ZGA== dependencies: "@albedo-link/intent" "0.12.0" "@creit.tech/xbull-wallet-connect" "0.3.0" @@ -277,6 +277,7 @@ "@stellar/freighter-api" "3.0.0" "@walletconnect/modal" "2.6.2" "@walletconnect/sign-client" "2.11.2" + buffer "6.0.3" events "3.3.0" lit "3.2.0" rxjs "7.8.1" From b87fdb02da555f45fceb491a80970cb521ef3387 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?jeesun=20=EC=A7=80=EC=84=A0?= Date: Tue, 12 Nov 2024 11:13:58 -0800 Subject: [PATCH 5/6] Create "CopyJsonPayloadButton" component (#1148) --- .../(sidebar)/endpoints/[[...pages]]/page.tsx | 34 ++++--------------- .../components/SavedEndpointsPage.tsx | 15 +++----- src/app/(sidebar)/xdr/view/page.tsx | 17 +++------- src/components/CopyJsonPayloadButton.tsx | 23 +++++++++++++ 4 files changed, 38 insertions(+), 51 deletions(-) create mode 100644 src/components/CopyJsonPayloadButton.tsx diff --git a/src/app/(sidebar)/endpoints/[[...pages]]/page.tsx b/src/app/(sidebar)/endpoints/[[...pages]]/page.tsx index bb326f41..63e2b31a 100644 --- a/src/app/(sidebar)/endpoints/[[...pages]]/page.tsx +++ b/src/app/(sidebar)/endpoints/[[...pages]]/page.tsx @@ -6,7 +6,6 @@ import { Alert, Button, Card, - CopyText, Icon, Input, Link, @@ -22,6 +21,7 @@ import { InputSideElement } from "@/components/InputSideElement"; import { Box } from "@/components/layout/Box"; import { PrettyJsonTextarea } from "@/components/PrettyJsonTextarea"; import { ShareUrlButton } from "@/components/ShareUrlButton"; +import { CopyJsonPayloadButton } from "@/components/CopyJsonPayloadButton"; import { useStore } from "@/store/useStore"; import { isEmptyObject } from "@/helpers/isEmptyObject"; @@ -615,20 +615,9 @@ export default function Endpoints() { - - - + ); @@ -1032,18 +1021,9 @@ export default function Endpoints() { {renderPostAsyncTxResponseMessage()}
- - - +
diff --git a/src/app/(sidebar)/endpoints/components/SavedEndpointsPage.tsx b/src/app/(sidebar)/endpoints/components/SavedEndpointsPage.tsx index 0aa3408d..aed52213 100644 --- a/src/app/(sidebar)/endpoints/components/SavedEndpointsPage.tsx +++ b/src/app/(sidebar)/endpoints/components/SavedEndpointsPage.tsx @@ -5,7 +5,6 @@ import { Badge, Button, Card, - CopyText, Icon, Input, Modal, @@ -20,6 +19,7 @@ import { NextLink } from "@/components/NextLink"; import { ShareUrlButton } from "@/components/ShareUrlButton"; import { PrettyJsonTextarea } from "@/components/PrettyJsonTextarea"; import { SavedItemTimestampAndDelete } from "@/components/SavedItemTimestampAndDelete"; +import { CopyJsonPayloadButton } from "@/components/CopyJsonPayloadButton"; import { Routes } from "@/constants/routes"; import { localStorageSavedEndpointsHorizon } from "@/helpers/localStorageSavedEndpointsHorizon"; @@ -324,16 +324,9 @@ export const SavedEndpointsPage = () => { - - - + ) : ( diff --git a/src/app/(sidebar)/xdr/view/page.tsx b/src/app/(sidebar)/xdr/view/page.tsx index 235b351a..d32a466c 100644 --- a/src/app/(sidebar)/xdr/view/page.tsx +++ b/src/app/(sidebar)/xdr/view/page.tsx @@ -9,7 +9,6 @@ import { Loader, Button, Icon, - CopyText, } from "@stellar/design-system"; import { useQueryClient } from "@tanstack/react-query"; import { stringify } from "lossless-json"; @@ -24,6 +23,7 @@ import { XdrPicker } from "@/components/FormElements/XdrPicker"; import { XdrTypeSelect } from "@/components/XdrTypeSelect"; import { PrettyJsonTransaction } from "@/components/PrettyJsonTransaction"; import { TransactionHashReadOnlyField } from "@/components/TransactionHashReadOnlyField"; +import { CopyJsonPayloadButton } from "@/components/CopyJsonPayloadButton"; import { parseToLosslessJson } from "@/helpers/parseToLosslessJson"; import { useIsXdrInit } from "@/hooks/useIsXdrInit"; @@ -180,18 +180,9 @@ export default function ViewXdr() { - - - + ) : null} diff --git a/src/components/CopyJsonPayloadButton.tsx b/src/components/CopyJsonPayloadButton.tsx new file mode 100644 index 00000000..5fa52b18 --- /dev/null +++ b/src/components/CopyJsonPayloadButton.tsx @@ -0,0 +1,23 @@ +import { Button, Icon, CopyText } from "@stellar/design-system"; + +export const CopyJsonPayloadButton = ({ + jsonString, +}: { + jsonString: string; +}) => { + return ( + + + + ); +}; From f72986a110a632fea30af1465d71047dd58239ec Mon Sep 17 00:00:00 2001 From: Iveta Date: Tue, 12 Nov 2024 14:43:31 -0500 Subject: [PATCH 6/6] Create Account: reset on network change (#1152) --- src/app/(sidebar)/account/create/page.tsx | 14 +++----------- src/hooks/useNetworkChanged.ts | 12 ++++++++++++ src/store/createStore.ts | 3 +++ 3 files changed, 18 insertions(+), 11 deletions(-) create mode 100644 src/hooks/useNetworkChanged.ts diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx index 131f1d3a..6436d7ff 100644 --- a/src/app/(sidebar)/account/create/page.tsx +++ b/src/app/(sidebar)/account/create/page.tsx @@ -1,6 +1,6 @@ "use client"; -import { useCallback, useEffect, useRef, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import { Card, Text, Button, Icon } from "@stellar/design-system"; import { Keypair } from "@stellar/stellar-sdk"; @@ -9,6 +9,7 @@ import { useFriendBot } from "@/query/useFriendBot"; import { useQueryClient } from "@tanstack/react-query"; import { useIsTestingNetwork } from "@/hooks/useIsTestingNetwork"; +import { useNetworkChanged } from "@/hooks/useNetworkChanged"; import { getNetworkHeaders } from "@/helpers/getNetworkHeaders"; import { GenerateKeypair } from "@/components/GenerateKeypair"; @@ -33,8 +34,6 @@ export default function CreateAccount() { const IS_CUSTOM_NETWORK_WITH_HORIZON = network.id === "custom" && network.horizonUrl; - const networkRef = useRef(network); - const resetQuery = useCallback( () => queryClient.resetQueries({ @@ -62,14 +61,7 @@ export default function CreateAccount() { } }, [isError, isSuccess]); - useEffect(() => { - if (networkRef.current.id !== network.id) { - networkRef.current = network; - resetStates(); - } - // Not including network and resetStates() - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [networkRef.current.id, network.id]); + useNetworkChanged(resetStates); const generateKeypair = () => { resetStates(); diff --git a/src/hooks/useNetworkChanged.ts b/src/hooks/useNetworkChanged.ts new file mode 100644 index 00000000..b3861bc9 --- /dev/null +++ b/src/hooks/useNetworkChanged.ts @@ -0,0 +1,12 @@ +import { useEffect } from "react"; +import { useStore } from "@/store/useStore"; + +export const useNetworkChanged = (onChange: () => void) => { + const { network, previousNetwork } = useStore(); + + useEffect(() => { + if (previousNetwork.id && previousNetwork.id !== network.id) { + onChange(); + } + }, [previousNetwork.id, network.id, onChange]); +}; diff --git a/src/store/createStore.ts b/src/store/createStore.ts index 6a1dc801..86033b90 100644 --- a/src/store/createStore.ts +++ b/src/store/createStore.ts @@ -57,6 +57,7 @@ export type SignTxActiveView = "import" | "overview"; export interface Store { // Shared network: Network | EmptyObj; + previousNetwork: Network | EmptyObj; // Theme Color theme: ThemeColorType | null; // isDynamicNetworkSelect flag to indicate network update outside of the dropdown @@ -262,10 +263,12 @@ export const createStore = (options: CreateStoreOptions) => immer((set) => ({ // Shared network: {}, + previousNetwork: {}, theme: null, isDynamicNetworkSelect: false, selectNetwork: (network: Network) => set((state) => { + state.previousNetwork = state.network; state.network = network; }), updateIsDynamicNetworkSelect: (isDynamic: boolean) =>