Improve wallet state detection

src/App.vue

@@ -6,6 +6,7 @@ import { toSvg } from 'jdenticon';
 import { chiaState } from './state/chia';
 import { IpcService } from './helpers/ipc-service';
 import { useRouter } from 'vue-router';
+import { useIntervalFn } from '@vueuse/core';
 
 const router = useRouter();
 onMounted(() => {
@@ -27,31 +28,49 @@ const svgString = ref('');
 watchEffect(() => {
  if (chiaState.activeFingerprint) {
  svgString.value = toSvg(chiaState.activeFingerprint, 36);
+ } else {
+ svgString.value = '';
  }
 });
 
 const ipc = new IpcService();
 
-let syncPollInterval = undefined;
+const getSyncStatus = async () => {
+ const { synced, syncing } = await ipc.send('get_sync_status');
+ chiaState.synced = synced;
+ chiaState.syncing = syncing;
+};
+const getFingerprints = async () => {
+ const response = await ipc.send<{ fingerprints: string[]; fingerprint: string }>('get_public_keys');
+ fingerprints.value = response.fingerprints;
+ chiaState.activeFingerprint = response.fingerprint;
+};
+
 const init = async () => {
  try {
- const { synced, syncing } = await ipc.send('get_sync_status');
- chiaState.synced = synced;
- chiaState.syncing = syncing;
-
- syncPollInterval = setInterval(async () => {
- const { synced, syncing } = await ipc.send('get_sync_status');
- chiaState.synced = synced;
- chiaState.syncing = syncing;
- }, 5000);
-
- const response = await ipc.send<{ fingerprints: string[]; fingerprint: string }>('get_public_keys');
- fingerprints.value = response.fingerprints;
- chiaState.activeFingerprint = response.fingerprint;
+ await getSyncStatus();
+ await getFingerprints();
  } catch (e) {
  loginError.value = e;
  }
  loginInProgress.value = false;
+
+ useIntervalFn(async () => {
+ try {
+ await getSyncStatus();
+
+ if (loginError.value) {
+ loginError.value = undefined;
+ await getFingerprints();
+ }
+ } catch (e) {
+ loginError.value = e;
+ chiaState.synced = false;
+ chiaState.syncing = false;
+ fingerprints.value = [];
+ chiaState.activeFingerprint = undefined;
+ }
+ }, 5000);
 };
 init();
 
@@ -168,9 +187,14 @@ const login = async (fingerprint: string) => {
  <div v-html="svgString"></div>
  <div class="ml-3">
  <p class="text-sm font-medium text-gray-700 group-hover:text-gray-900">
- {{ chiaState.activeFingerprint }}
+ {{ chiaState.activeFingerprint || 'Wallet Disconnected' }}
+ </p>
+ <p
+ v-if="fingerprints?.length > 0"
+ class="text-xs text-left font-medium text-gray-500 group-hover:text-gray-700"
+ >
+ Change key
  </p>
- <p class="text-xs text-left font-medium text-gray-500 group-hover:text-gray-700">Change key</p>
  </div>
  </div>
  </MenuButton>

src/pages/Setup.vue

@@ -2,6 +2,7 @@
 import { IpcService } from '../helpers/ipc-service';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
+import { XCircleIcon } from '@heroicons/vue/solid';
 
 const router = useRouter();
 const ipc = new IpcService();
@@ -17,7 +18,11 @@ const init = async () => {
  console.log('push minting');
  await router.push('minting');
  } catch (e: any) {
- connectionError.value = e;
+ if (e?.error) {
+ connectionError.value = e.error;
+ } else {
+ connectionError.value = e;
+ }
  chiaRoot.value = e.data.chiaRoot;
  }
 };
@@ -35,8 +40,19 @@ const setChiaRoot = async (event: any) => {
  <h3 class="text-3xl leading-6 font-medium text-gray-900">Set up</h3>
  </div>
  <div v-if="connectionError" class="flex flex-col gap-4">
- <p>Failed to connect to your Chia wallet: <br />{{ connectionError }}</p>
- <p>Please make sure the wallet is running and the CHIA_ROOT is set correctly, then restart this application.</p>
+ <div class="rounded-md bg-red-50 p-4">
+ <div class="flex">
+ <div class="flex-shrink-0">
+ <XCircleIcon class="h-5 w-5 text-red-400" aria-hidden="true" />
+ </div>
+ <div class="ml-3">
+ <h3 class="text-sm font-medium text-red-800">Failed to connect to your Chia wallet.</h3>
+ <div class="mt-2 text-sm text-red-700">
+ <p>Please make sure the wallet is running and the CHIA_ROOT is set correctly.</p>
+ </div>
+ </div>
+ </div>
+ </div>
  </div>
  <form v-if="connectionError" class="flex flex-col gap-4" @submit="setChiaRoot">
  <div>
@@ -57,7 +73,7 @@ const setChiaRoot = async (event: any) => {
  type="submit"
  class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-emerald-600 hover:bg-emerald-700"
  >
- Update Chia Root
+ Reload
  </button>
  </div>
  </form>