diff --git a/frontends/web/src/routes/account/add/add.tsx b/frontends/web/src/routes/account/add/add.tsx
index c25f91614a..62a4735b28 100644
--- a/frontends/web/src/routes/account/add/add.tsx
+++ b/frontends/web/src/routes/account/add/add.tsx
@@ -14,9 +14,10 @@
* limitations under the License.
*/
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import * as backendAPI from '../../../api/backend';
+import * as keystoresAPI from '../../../api/keystores';
import { SimpleMarkup } from '../../../utils/markup';
import { Message } from '../../../components/message/message';
import { Button, Input } from '../../../components/forms';
@@ -45,10 +46,6 @@ export const AddAccount = () => {
const { t } = useTranslation();
- useEffect(() => {
- startProcess();
- }, []);
-
useEffect(() => {
if (step === 'choose-name') {
inputRef.current?.focus();
@@ -59,7 +56,7 @@ export const AddAccount = () => {
return supportedCoins.length === 1;
};
- const startProcess = async () => {
+ const startProcess = useCallback(async () => {
try {
const coins = await backendAPI.getSupportedCoins();
const onlyOneCoinIsSupported = (coins.length === 1);
@@ -73,7 +70,16 @@ export const AddAccount = () => {
} catch (err) {
console.error(err);
}
- };
+ }, []);
+
+ useEffect(() => {
+ startProcess();
+
+ const unsubscribe = keystoresAPI.subscribeKeystores(() => {
+ startProcess();
+ });
+ return unsubscribe;
+ }, [startProcess]);
const back = () => {
switch (step) {
@@ -122,6 +128,13 @@ export const AddAccount = () => {
const renderContent = () => {
switch (step) {
case 'select-coin':
+ if (supportedCoins.length === 0) {
+ return (
+
+ {t('connectKeystore.promptNoName')}
+
+ );
+ }
return (
{