diff --git a/public/locales/en.json b/public/locales/en.json index f2b5aa9..b47691a 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -1058,5 +1058,10 @@ "purchaseKrist": { "modalTitle": "Purchase Krist" + }, + + "syncWallets": { + "errorMessage": "Error syncing wallets", + "errorDescription": "There was an error while syncing your wallets. See console for details." } } diff --git a/src/components/wallets/SyncWallets.tsx b/src/components/wallets/SyncWallets.tsx index bb819c7..5a85511 100644 --- a/src/components/wallets/SyncWallets.tsx +++ b/src/components/wallets/SyncWallets.tsx @@ -2,21 +2,38 @@ // This file is part of KristWeb 2 under AGPL-3.0. // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt import { useEffect } from "react"; -import { message } from "antd"; +import { message, notification } from "antd"; +import { useSelector } from "react-redux"; +import { RootState } from "@store"; import { useTranslation } from "react-i18next"; import { syncWallets, useWallets, ADDRESS_LIST_LIMIT } from "@wallets"; -import { useMountEffect } from "@utils"; -/** Sync the wallets with the Krist node on startup. */ +import Debug from "debug"; +const debug = Debug("kristweb:sync-wallets"); + +/** Sync the wallets with the Krist node when connected. */ export function SyncWallets(): JSX.Element | null { const { t } = useTranslation(); - useMountEffect(() => { - // TODO: show errors to the user? - syncWallets().catch(console.error); - }); + const connectionState = useSelector((s: RootState) => s.websocket.connectionState); + + // When the websocket connects (usually just on startup), perform the initial + // sync. This replaces `WebsocketConnection.refreshBalances`. + useEffect(() => { + if (connectionState !== "connected") return; + debug("syncing wallets (ws is %s)", connectionState); + syncWallets() + .then(() => debug("synced")) + .catch(err => { + console.error(err); + notification.error({ + message: t("syncWallets.errorMessage"), + description: t("syncWallets.errorDescription"), + }); + }); + }, [t, connectionState]); // This is an appropriate place to perform the wallet limit check too. Warn // the user if they have more wallets than ADDRESS_LIST_LIMIT; bypassing this diff --git a/src/global/ws/WebsocketConnection.ts b/src/global/ws/WebsocketConnection.ts index b9acee3..14492c4 100644 --- a/src/global/ws/WebsocketConnection.ts +++ b/src/global/ws/WebsocketConnection.ts @@ -108,6 +108,7 @@ } private setConnectionState(state: WSConnectionState) { + debug("ws conn state: %s", state); store.dispatch(wsActions.setConnectionState(state)); } @@ -120,7 +121,6 @@ if (data.type === "hello") { // Initial connection debug("connected"); - this.setConnectionState("connected"); // Subscribe to all the events this.subscribe("transactions"); @@ -128,8 +128,7 @@ this.subscribe("names"); this.subscribe("motd"); - // Re-sync all balances just in case - this.refreshBalances(); + this.setConnectionState("connected"); } else if (data.address && this.wallets) { // Probably a response to `refreshBalance` const address: KristAddress = data.address; @@ -269,18 +268,6 @@ }); } - /** Re-syncs balances for all the wallets, just in case. */ - refreshBalances(): void { - debug("refreshing all balances"); - - const { wallets } = this; - if (!wallets) return; - - for (const id in wallets) { - this.refreshBalance(wallets[id].address); - } - } - /** Subscribe to a Krist WS event. */ subscribe(event: WSSubscriptionLevel): void { this.ws?.sendPacked({ type: "subscribe", event, id: this.messageID++ });