make display on creation page look halfway decent, and switch fully to it

project.task.yaml

@@ -4,6 +4,7 @@
     - add infinite scroll assignee:matthew
   blocks: ref:https://raw.githubusercontent.com/trentlarson/lives-of-gifts/master/project.yaml#kickstarter%20for%20time
 
+- fix error with server getting reset back to default on every code change & app refresh
 - allow new (random) user creation, and make accurate message about registration
 - allow type annotations in World.js & landmarks.js (since we get this error: "Types are not supported by current JavaScript version")
 - replace user-affecting console.log & console.error with error messages (eg. catches)
@@ -35,6 +36,7 @@
 
 - .5 customize favicon
 - .5 make advanced features harder to access; advanced build?
+- 04 allow user to download claims, mine + ones I can see about me from others
 
 - Release Minimum Viable Product :
   - Turn off stats-world or ensure it's usable (eg. cannot zoom out too far and lose world, cannot screenshot).

src/main.ts

@@ -10,6 +10,7 @@ import "./assets/styles/tailwind.css";
 
 import { library } from "@fortawesome/fontawesome-svg-core";
 import {
+  faBurst,
   faCalendar,
   faChevronLeft,
   faCircle,
@@ -43,6 +44,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
+  faBurst,
   faCalendar,
   faChevronLeft,
   faCircle,

src/views/AccountViewView.vue

@@ -263,10 +263,10 @@
       />
       <button
         v-if="apiServerInput != apiServer"
-        class="px-4 rounded bg-slate-200 border border-slate-400"
+        class="px-4 rounded bg-red-500 border border-slate-400"
         @click="onClickSaveApiServer()"
       >
-        <fa icon="floppy-disk" class="fa-fw"></fa>
+        <fa icon="floppy-disk" class="fa-fw" color="white"></fa>
       </button>
       <button
         class="px-4 rounded bg-slate-200 border border-slate-400"
@@ -332,12 +332,7 @@ import { useClipboard } from "@vueuse/core";
 import { AppString } from "@/constants/app";
 import { db, accountsDB } from "@/db";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import {
+import { accessToken } from "@/libs/crypto";
-  accessToken,
-  deriveAddress,
-  generateSeed,
-  newIdentifier,
-} from "@/libs/crypto";
 import { AxiosError } from "axios/index";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -411,32 +406,8 @@ export default class AccountViewView extends Vue {
       this.showContactGives = !!settings?.showContactGivesInline;
 
       await accountsDB.open();
-      this.numAccounts = await accountsDB.accounts.count();
-      if (this.numAccounts === 0) {
-        let address = ""; // 0x... ETH address, without "did:eth:"
-        let privateHex = "";
-        const mnemonic = generateSeed();
-        [address, privateHex, this.publicHex, this.derivationPath] =
-          deriveAddress(mnemonic);
-
-        const newId = newIdentifier(
-          address,
-          this.publicHex,
-          privateHex,
-          this.derivationPath
-        );
-        await accountsDB.accounts.add({
-          dateCreated: new Date().toISOString(),
-          derivationPath: this.derivationPath,
-          did: newId.did,
-          identity: JSON.stringify(newId),
-          mnemonic: mnemonic,
-          publicKeyHex: newId.keys[0].publicKeyHex,
-        });
-        this.activeDid = newId.did;
-      }
-
       const accounts = await accountsDB.accounts.toArray();
+      this.numAccounts = accounts.length;
       const account = R.find((acc) => acc.did === this.activeDid, accounts);
       const identity = JSON.parse(account?.identity || "undefined");
       this.publicHex = identity.keys[0].publicKeyHex;

src/views/HelpView.vue

@@ -196,8 +196,8 @@
       <h2 class="text-xl font-semibold">How do I create another identity?</h2>
       <p>
         Go
-        <router-link to="import-account" class="text-blue-500">
+        <router-link to="start" class="text-blue-500">
-          import another mnemonic here.
+          create another identity here.
         </router-link>
       </p>
 

src/views/NewIdentifierView.vue

@@ -54,18 +54,32 @@
       Your Identity
     </h1>
 
-    <div class="flex justify-between py-2">
+    <div class="flex justify-center py-12">
       <span />
       <span v-if="loading">
-        Creating... <i class="fa-solid fa-loader fa-spin"></i>
+        <span class="text-xl">Creating...&nbsp;</span>
+        <fa
+          icon="spinner"
+          class="fa-spin fa-spin-pulse"
+          color="green"
+          size="128"
+        ></fa>
       </span>
       <span v-else>
-        Created!
+        <span class="text-xl">Created!</span>
-        <i
+        <fa
-          class="fa-solid fa-burst fa-beat"
+          icon="burst"
-          style="--fa-animation-duration: 3s"
+          class="fa-beat px-12"
-        ></i>
+          color="green"
+          style="
+            --fa-animation-duration: 1s;
+            --fa-animation-direction: reverse;
+            --fa-animation-iteration-count: 1;
+            --fa-beat-scale: 6;
+          "
+        ></fa>
       </span>
+      <span />
     </div>
   </section>
 </template>
@@ -106,7 +120,7 @@ export default class AccountViewView extends Vue {
     this.loading = false;
     setTimeout(() => {
       this.$router.push({ name: "account" });
-    }, 3000);
+    }, 1000);
   }
 }
 </script>