Merge pull request 'A couple small fixes, plus a merge from master' (#1 ) from trentlarson/crowd-funder-from-jason:feat/vitejs-trent into feat/vitejs

Reviewed-on: jsnbuchanan/crowd-funder-for-time-pwa#1
remove a lingering debug console.log
2024-04-07 13:52:43 -04:00 · 2024-04-07 11:39:13 -06:00 · 2024-04-07 11:32:53 -06:00 · 2024-04-07 11:22:20 -06:00 · 2024-04-07 11:02:54 -06:00 · 2024-04-07 09:41:14 -06:00
35 changed files with 6162 additions and 14211 deletions
--- a/.env.production
+++ b/.env.production
@@ -1,4 +1,4 @@
-# Only the variables that start with VUE_APP_ are seen in the application process.env in Vue.
+# Only the variables that start with VITE_ are seen in the application process.env in Vue.
-VUE_APP_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01GXYPFF7FA03NXKPYY142PY4H
+VITE_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01GXYPFF7FA03NXKPYY142PY4H
-VUE_APP_DEFAULT_ENDORSER_API_SERVER=https://api.endorser.ch
+VITE_DEFAULT_ENDORSER_API_SERVER=https://api.endorser.ch
-VUE_APP_DEFAULT_IMAGE_API_SERVER=https://image-api.timesafari.app
+VITE_DEFAULT_IMAGE_API_SERVER=https://image-api.timesafari.app
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -2,6 +2,7 @@ module.exports = {
  root: true,
  env: {
    node: true,
    es2022: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
@@ -9,9 +10,9 @@ module.exports = {
    "@vue/typescript/recommended",
    "plugin:prettier/recommended",
  ],
-  parserOptions: {
+  // parserOptions: {
-    ecmaVersion: 2020,
+  //   ecmaVersion: 2020,
-  },
+  // },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
--- a/README.md
+++ b/README.md
@@ -18,6 +18,11 @@ npm install
 ### Compiles and hot-reloads for development
 ```
 npm run dev
 ```
 ### Builds the production app
 ```
 npm run serve
 ```
@@ -42,7 +47,7 @@ npm run lint
 ```
 # (See .env.development for more details.)
 # The test BVC_MEETUPS_PROJECT_CLAIM_ID does not resolve as a URL because it's only in the test DB and the prod redirect won't redirect there.
-TIME_SAFARI_APP_TITLE="TimeSafari_Test" VUE_APP_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01HNTZYJJXTGT0EZS3VEJGX7AK VUE_APP_DEFAULT_ENDORSER_API_SERVER=https://test-api.endorser.ch VUE_APP_DEFAULT_IMAGE_API_SERVER=https://test-image-api.timesafari.app npm run build
+VITE_TIME_SAFARI_APP_TITLE="TimeSafari_Test" VITE_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01HNTZYJJXTGT0EZS3VEJGX7AK VITE_DEFAULT_ENDORSER_API_SERVER=https://test-api.endorser.ch VITE_DEFAULT_IMAGE_API_SERVER=https://test-image-api.timesafari.app npm run build
 ```
  * Production
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,3 +0,0 @@
 module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
 };
--- a/index.html
+++ b/index.html
@@ -0,0 +1,17 @@
 <!DOCTYPE html>
 <html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico">
    <title>TimeSafari</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but TimeSafari doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -3,93 +3,89 @@
  "version": "0.3.7-beta",
  "private": true,
  "scripts": {
-    "serve": "vue-cli-service serve",
+    "dev": "vite",
-    "build": "vue-cli-service build",
+    "serve": "vite preview",
-    "lint": "vue-cli-service lint"
+    "build": "eslint --ext .js,.ts,.vue --ignore-path .gitignore src && vite build",
    "lint": "eslint --ext .js,.ts,.vue --ignore-path .gitignore src",
    "lint-fix": "eslint --ext .js,.ts,.vue --ignore-path .gitignore --fix src"
  },
  "dependencies": {
-    "@dicebear/collection": "^5.3.5",
+    "@dicebear/collection": "^5.4.1",
-    "@dicebear/core": "^5.3.5",
+    "@dicebear/core": "^5.4.1",
    "@ethersproject/hdnode": "^5.7.0",
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@fortawesome/vue-fontawesome": "^3.0.3",
+    "@fortawesome/vue-fontawesome": "^3.0.6",
    "@pvermeer/dexie-encrypted-addon": "^3.0.0",
-    "@tweenjs/tween.js": "^21.0.0",
+    "@tweenjs/tween.js": "^21.1.1",
    "@types/js-yaml": "^4.0.9",
    "@types/luxon": "^3.4.2",
-    "@veramo/core": "^5.4.1",
+    "@veramo/core": "^5.6.0",
-    "@veramo/credential-w3c": "^5.4.1",
+    "@veramo/credential-w3c": "^5.6.0",
-    "@veramo/data-store": "^5.4.1",
+    "@veramo/data-store": "^5.6.0",
-    "@veramo/did-manager": "^5.4.1",
+    "@veramo/did-manager": "^5.6.0",
-    "@veramo/did-provider-ethr": "^5.4.1",
+    "@veramo/did-provider-ethr": "^5.6.0",
-    "@veramo/did-resolver": "^5.4.1",
+    "@veramo/did-resolver": "^5.6.0",
-    "@veramo/key-manager": "^5.4.1",
+    "@veramo/key-manager": "^5.6.0",
-    "@vueuse/core": "^10.4.1",
+    "@vueuse/core": "^10.9.0",
    "@zxing/text-encoding": "^0.9.0",
-    "axios": "^1.5.0",
+    "axios": "^1.6.8",
    "buffer": "^6.0.3",
    "class-transformer": "^0.5.1",
-    "core-js": "^3.32.1",
+    "dexie": "^3.2.7",
-    "dexie": "^3.2.4",
+    "dexie-export-import": "^4.1.1",
-    "dexie-export-import": "^4.0.7",
+    "did-jwt": "^7.4.7",
-    "did-jwt": "^7.2.7",
+    "ethereum-cryptography": "^2.1.3",
    "ethereum-cryptography": "^2.1.2",
    "ethereumjs-util": "^7.1.5",
    "ethr-did-resolver": "^8.1.2",
    "git-describe": "^4.1.1",
    "jdenticon": "^3.2.0",
    "js-generate-password": "^0.1.9",
    "js-yaml": "^4.1.0",
-    "localstorage-slim": "^2.5.0",
+    "localstorage-slim": "^2.7.0",
    "lru-cache": "^10.2.0",
    "luxon": "^3.4.4",
    "merkletreejs": "^0.3.11",
-    "moment": "^2.29.4",
+    "moment": "^2.30.1",
    "notiwind": "^2.0.2",
    "papaparse": "^5.4.1",
    "pina": "^0.20.2204228",
-    "pinia-plugin-persistedstate": "^3.2.0",
+    "pinia-plugin-persistedstate": "^3.2.1",
    "qr-code-generator-vue3": "^1.4.21",
-    "ramda": "^0.29.0",
+    "ramda": "^0.29.1",
-    "readable-stream": "^4.4.2",
+    "readable-stream": "^4.5.2",
-    "reflect-metadata": "^0.1.13",
+    "reflect-metadata": "^0.1.14",
    "register-service-worker": "^1.7.2",
    "simple-vue-camera": "^1.1.3",
    "three": "^0.156.1",
    "ua-parser-js": "^1.0.37",
    "util": "^0.12.5",
-    "vue": "^3.3.4",
+    "vue": "^3.4.21",
    "vue-axios": "^3.5.2",
-    "vue-facing-decorator": "^3.0.2",
+    "vue-facing-decorator": "^3.0.4",
-    "vue-qrcode-reader": "^5.4.1",
+    "vue-qrcode-reader": "^5.5.3",
-    "vue-router": "^4.2.4",
+    "vue-router": "^4.3.0",
    "web-did-resolver": "^2.0.27"
  },
  "devDependencies": {
-    "@types/leaflet": "^1.9.4",
+    "@types/leaflet": "^1.9.8",
-    "@types/ramda": "^0.29.3",
+    "@types/ramda": "^0.29.11",
    "@types/three": "^0.155.1",
    "@types/ua-parser-js": "^0.7.39",
-    "@typescript-eslint/eslint-plugin": "^6.6.0",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.6.0",
+    "@typescript-eslint/parser": "^6.21.0",
    "@vitejs/plugin-vue": "^5.0.4",
    "@vue-leaflet/vue-leaflet": "^0.10.1",
    "@vue/cli-plugin-babel": "~5.0.8",
    "@vue/cli-plugin-eslint": "~5.0.8",
    "@vue/cli-plugin-pwa": "~5.0.8",
    "@vue/cli-plugin-router": "~5.0.8",
    "@vue/cli-plugin-typescript": "~5.0.8",
    "@vue/cli-plugin-vuex": "~5.0.8",
    "@vue/cli-service": "~5.0.8",
    "@vue/eslint-config-typescript": "^11.0.3",
-    "autoprefixer": "^10.4.15",
+    "autoprefixer": "^10.4.19",
-    "eslint": "^8.53.0",
+    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.17.0",
+    "eslint-plugin-vue": "^9.23.0",
    "leaflet": "^1.9.4",
-    "postcss": "^8.4.29",
+    "postcss": "^8.4.38",
-    "prettier": "^3.1.0",
+    "prettier": "^3.2.5",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^3.4.1",
-    "typescript": "~5.2.2"
+    "typescript": "~5.2.2",
    "vite": "^5.2.0"
  }
 }
--- a/project.task.yaml
+++ b/project.task.yaml
@@ -1,31 +1,37 @@
 tasks :
 - fix the notification link to the app
 - 01 change scanning flow - allow them to stay on the QR/scanning screen after scanning someone
 - 24 contextual tutorials https://docs.google.com/document/d/11C_K3RM0rgo0onih20KFhcIzukZyq_CRWqaWX5om_kM/edit#heading=h.iwiwcydou5hw
- 24 Move to Vite
+- 24 Move to Vite assignee:jason
 - feeds - add "remote" filter, if they choose 'visible' then warn that they won't see any others, cache list & don't reload front page on change
 - .1 add shortcut from project (etc?) to the public project page in a browser
 - .1 add KindSpring link to ideas
 - .1 on feed, don't show "to someone anonymous" if it's to a project
 - .1 on ideas, put an "x" to close it assignee-group:ui
 - 16 save data backups in Google
 - 16 generate and use passkeys for identities
 - .5 show "give" buttons (eg. from anonymous) even if they can't give, greyed out, and give them a warning and instructions
 - .2 when adding a claim on home screen, push that claim to the top of the list
 - .2 fix give dialog from "more contacts" off home page to allow giving to this user
 - .2 fix bottom of project selection map, where the icons are hidden but a tap goes to the icon's page assignee-group:ui
 - .5 stop from seeing an error on the first page when browser doesn't support service workers (which I've seen on iPhone; visible in Firefox private window)
 - .2 don't show a warning on a totally new project when the authorized agent is set
 - .2 anchor hash into BTC
 - .2 list the "show more" contacts alphabetically
 - .5 add back the explicit wait for browser subscription timing problems?
 - .5 make Time Safari a share_target for images
 - 08 add image on profile
- ask to detect location & record it in settings
+- 01 ask to detect location & record it in settings
- if personal location is set, show potential local affiliations
+- 01 if personal location is set, show potential local affiliations
 - 02 refactor the buttons for chosing a search location so that the actions are clear assignee-group:ui
 - 24 compelling UI for credential presentations
  - discover who in my network has activity on a project
@@ -94,7 +100,7 @@ tasks :
 - .3 check that Android shows "back" buttons on screens without bottom tray
 - .1 Make give description text box into something that expands as they type?
 - .2 Show a warning if both giver and recipient are the same (but still allow?)
- 01 Would it look better to shrink the buttons on many pages so they don't expand to the width of the screen? assignee-group:ui
+- .5 Shrink the buttons on project pages so they don't expand to the width of the screen assignee-group:ui
 - .5 Display a more appealing confirmation on the map when erasing the marker
 - .5 remove references to localStorage for projectId (now that it's pulling from the path)
 - switch some checks for activeDid to check for isRegistered
@@ -121,7 +127,7 @@ tasks :
  - 08 convert to cleaner implementation (maybe Drie -- https://github.com/janvorisek/drie)
 - .5 show seed phrase in a QR code for transfer to another device
- .5 on DiscoverView, switch to a filter UI (eg. just from friend
+- .5 on DiscoverView, switch to a filter UI (eg. just from friend)
 - .5 don't show "Offer" on project screen if they aren't registered
 - 01 especially for iOS, check for new version & update, eg. https://stackoverflow.com/questions/52221805/any-way-yet-to-auto-update-or-just-clear-the-cache-on-a-pwa-on-ios
@@ -142,7 +148,6 @@ tasks :
    - for subtasks: fulfills (is it really the same?), feeds, contributes to, supplies, boosts, advances
    - for blocking: blocks, precedes, comes before, is sought by -- vs follows, seeks, builds on ("contributes to" isn't specific enough, "succeeds" has different, possibly confusing meaning)
 - .5 fit as many icons as possible on home & project view screens but only going halfway down the page assignee-group:ui
 - .5 Replace Gifted/Give in ContactsView with GiftedDialog
 - Stats :
--- a/public/index.html
+++ b/public/index.html
@@ -1,17 +0,0 @@
 <!DOCTYPE html>
 <html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
 </html>
--- a/src/App.vue
+++ b/src/App.vue
@@ -191,7 +191,7 @@
            >
              <div class="w-full px-6 py-6 text-slate-900 text-center">
                <p v-if="serviceWorkerReady" class="text-lg mb-4">
-                  Would you like to <b>turn on</b> notifications for this app?
+                  Would you like to be notified of new activity once a day?
                </p>
                <p v-else class="text-lg mb-4">
                  Waiting for system initialization, which may take up to 10
@@ -199,22 +199,42 @@
                  <fa icon="spinner" spin />
                </p>
-                <button
+                <div v-if="serviceWorkerReady">
-                  v-if="serviceWorkerReady"
+                  <span class="flex flex-row justify-center">
-                  class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
+                    <span class="mt-2">Yes, tell me at: </span>
-                  @click="
+                    <input
-                    close(notification.id);
+                      type="number"
-                    turnOnNotifications();
+                      class="rounded-l border border-r-0 border-slate-400 ml-2 mt-2 px-2 py-2 text-center w-20"
-                  "
+                      v-model="hourInput"
-                >
+                    />
-                  Turn on Notifications
+                    <span
-                </button>
+                      class="rounded-r border border-slate-400 bg-slate-200 text-center text-blue-500 mt-2 px-2 py-2 w-20"
                      @click="hourAm = !hourAm"
                    >
                      <span v-if="hourAm"> AM <fa icon="chevron-down" /> </span>
                      <span v-else> PM <fa icon="chevron-up" /> </span>
                    </span>
                  </span>
                  <button
                    class="block w-full text-center text-md font-bold uppercase bg-blue-600 text-white mt-2 px-2 py-2 rounded-md"
                    @click="
                      () => {
                        if (checkHour()) {
                          close(notification.id);
                          turnOnNotifications();
                        }
                      }
                    "
                  >
                    Turn on Daily Message
                  </button>
                </div>
                <button
                  @click="close(notification.id)"
-                  class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
+                  class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white mt-4 px-2 py-2 rounded-md"
                >
-                  Maybe Later
+                  No, Not Now
                </button>
              </div>
            </div>
@@ -297,8 +317,11 @@
 <style></style>
 <script lang="ts">
 import { Vue, Component } from "vue-facing-decorator";
 import axios from "axios";
 import { Vue, Component } from "vue-facing-decorator";
 import * as libsUtil from "@/libs/util";
 interface ServiceWorkerMessage {
  type: string;
  data: string;
@@ -322,6 +345,10 @@ interface VapidResponse {
  };
 }
 interface PushSubscriptionWithTime extends PushSubscriptionJSON {
  notifyTime: { utcHour: number };
 }
 import { DEFAULT_PUSH_SERVER, NotificationIface } from "@/constants/app";
 import { db } from "@/db/index";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
@@ -332,7 +359,9 @@ export default class App extends Vue {
  $notify!: (notification: NotificationIface, timeout?: number) => void;
  b64 = "";
-  serviceWorkerReady = false;
+  hourAm = true;
  hourInput = "8";
  serviceWorkerReady = true;
  async mounted() {
    try {
@@ -343,25 +372,29 @@ export default class App extends Vue {
        pushUrl = settings.webPushServer;
      }
-      await axios
+      if (pushUrl.startsWith("http://localhost")) {
-        .get(pushUrl + "/web-push/vapid")
+        console.log("Not checking for VAPID in this local environment.");
-        .then((response: VapidResponse) => {
+      } else {
-          this.b64 = response.data?.vapidKey || "";
+        await axios
-          console.log("Got vapid key:", this.b64);
+          .get(pushUrl + "/web-push/vapid")
-          navigator.serviceWorker.addEventListener("controllerchange", () => {
+          .then((response: VapidResponse) => {
-            console.log("New service worker is now controlling the page");
+            this.b64 = response.data?.vapidKey || "";
            console.log("Got vapid key:", this.b64);
            navigator.serviceWorker.addEventListener("controllerchange", () => {
              console.log("New service worker is now controlling the page");
            });
          });
-        });
+        if (!this.b64) {
-      if (!this.b64) {
+          this.$notify(
-        this.$notify(
+            {
-          {
+              group: "alert",
-            group: "alert",
+              type: "danger",
-            type: "danger",
+              title: "Error Setting Notifications",
-            title: "Error Setting Notifications",
+              text: "Could not set notifications.",
-            text: "Could not set notifications.",
+            },
-          },
+            -1,
-          -1,
+          );
-        );
+        }
      }
    } catch (error) {
      if (window.location.host.startsWith("localhost")) {
@@ -461,6 +494,48 @@ export default class App extends Vue {
    });
  }
  // this allows us to show an error without closing the dialog
  checkHour() {
    if (!libsUtil.isNumeric(this.hourInput)) {
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Not a Number",
          text: "The time must be an hour number.",
        },
        5000,
      );
      return false;
    }
    const hourNum = libsUtil.numberOrZero(this.hourInput);
    if (!Number.isInteger(hourNum)) {
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Not a Whole Number",
          text: "The time must be a whole hour number.",
        },
        5000,
      );
      return false;
    }
    if (hourNum < 1 || 12 < hourNum) {
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Not a Whole Number",
          text: "The time must be an hour between 1 and 12.",
        },
        5000,
      );
      return false;
    }
    return true;
  }
  public async turnOnNotifications() {
    return this.askPermission()
      .then((permission) => {
@@ -486,13 +561,25 @@ export default class App extends Vue {
                },
                -1,
              );
-              this.sendSubscriptionToServer(subscription);
+              // we already checked that this is a valid hour number
-              return subscription;
+              const rawHourNum = libsUtil.numberOrZero(this.hourInput);
              const adjHourNum = rawHourNum + (this.hourAm ? 0 : 12);
              const hourNum = adjHourNum % 24;
              const utcHour =
                hourNum + Math.round(new Date().getTimezoneOffset() / 60);
              const finalUtcHour = (utcHour + (utcHour < 0 ? 24 : 0)) % 24;
              const subscriptionWithTime: PushSubscriptionWithTime = {
                notifyTime: { utcHour: finalUtcHour },
                ...subscription.toJSON(),
              };
              await this.sendSubscriptionToServer(subscriptionWithTime);
              return subscriptionWithTime;
            } else {
              throw new Error("Subscription object is not available.");
            }
          })
-          .then(async (subscription) => {
+          .then(async (subscription: PushSubscriptionWithTime) => {
            console.log(
              "Subscription data sent to server and all finished successfully.",
            );
@@ -583,7 +670,7 @@ export default class App extends Vue {
  }
  private sendSubscriptionToServer(
-    subscription: PushSubscription,
+    subscription: PushSubscriptionWithTime,
  ): Promise<void> {
    console.log("About to send subscription...", subscription);
    return fetch("/web-push/subscribe", {
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -1,9 +1,8 @@
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@layer base {
    html {
        font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif !important;
--- a/src/components/FeedFilters.vue
+++ b/src/components/FeedFilters.vue
@@ -0,0 +1,219 @@
 <template>
  <div v-if="visible" id="dialogFeedFilters" class="dialog-overlay">
    <div class="dialog">
      <h1 class="text-xl font-bold text-center mb-4">Feed Filters</h1>
      <p class="mb-4 font-bold">Show only activities that…</p>
      <div class="grid grid-cols-1 gap-2">
        <div
          class="flex items-center justify-between cursor-pointer"
          @click="toggleHasVisibleDid()"
        >
          <!-- label -->
          <div>Include someone visible to me</div>
          <!-- toggle -->
          <div class="relative ml-2">
            <!-- input -->
            <input
              type="checkbox"
              v-model="hasVisibleDid"
              name="toggleFilterFromMyContacts"
              class="sr-only"
            />
            <!-- line -->
            <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
            <!-- dot -->
            <div
              class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
            ></div>
          </div>
        </div>
        <em>or</em>
        <div
          class="flex items-center justify-between cursor-pointer"
          @click="
            hasSearchBox
              ? toggleNearby()
              : $router.push({ name: 'search-area' })
          "
        >
          <!-- label -->
          <div>Are nearby</div>
          <!-- toggle -->
          <div v-if="hasSearchBox" class="relative ml-2">
            <!-- input -->
            <input
              type="checkbox"
              v-model="isNearby"
              name="toggleFilterNearby"
              class="sr-only"
            />
            <!-- line -->
            <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
            <!-- dot -->
            <div
              class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
            ></div>
          </div>
          <div v-else class="relative ml-2">
            <button class="ml-2 px-4 py-2 rounded-md bg-blue-200 text-blue-500">
              Select Location
            </button>
          </div>
        </div>
      </div>
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-2 mt-4">
        <button
          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
          @click="setAll()"
        >
          Set All
        </button>
        <button
          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
          @click="clearAll()"
        >
          Clear All
        </button>
        <button
          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
          @click="done()"
        >
          Done
        </button>
      </div>
    </div>
  </div>
 </template>
 <script lang="ts">
 import { Vue, Component } from "vue-facing-decorator";
 import {
  LMap,
  LMarker,
  LRectangle,
  LTileLayer,
 } from "@vue-leaflet/vue-leaflet";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { db } from "@/db/index";
@Component({
  components: {
    LRectangle,
    LMap,
    LMarker,
    LTileLayer,
  },
 })
 export default class FeedFilters extends Vue {
  onCloseIfChanged = () => {};
  hasSearchBox = false;
  hasVisibleDid = false;
  isNearby = false;
  settingChanged = false;
  visible = false;
  async open(onCloseIfChanged: () => void) {
    this.onCloseIfChanged = onCloseIfChanged;
    await db.open();
    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
    this.hasVisibleDid = !!settings?.filterFeedByVisible;
    this.isNearby = !!settings?.filterFeedByNearby;
    if (settings?.searchBoxes && settings.searchBoxes.length > 0) {
      this.hasSearchBox = true;
    }
    this.settingChanged = false;
    this.visible = true;
  }
  toggleHasVisibleDid() {
    this.settingChanged = true;
    this.hasVisibleDid = !this.hasVisibleDid;
    db.settings.update(MASTER_SETTINGS_KEY, {
      filterFeedByVisible: this.hasVisibleDid,
    });
  }
  toggleNearby() {
    this.settingChanged = true;
    this.isNearby = !this.isNearby;
    db.settings.update(MASTER_SETTINGS_KEY, {
      filterFeedByNearby: this.isNearby,
    });
  }
  async clearAll() {
    if (this.hasVisibleDid || this.isNearby) {
      this.settingChanged = true;
    }
    db.settings.update(MASTER_SETTINGS_KEY, {
      filterFeedByNearby: false,
      filterFeedByVisible: false,
    });
    this.hasVisibleDid = false;
    this.isNearby = false;
  }
  async setAll() {
    if (!this.hasVisibleDid || !this.isNearby) {
      this.settingChanged = true;
    }
    db.settings.update(MASTER_SETTINGS_KEY, {
      filterFeedByNearby: true,
      filterFeedByVisible: true,
    });
    this.hasVisibleDid = true;
    this.isNearby = true;
  }
  close() {
    if (this.settingChanged) {
      this.onCloseIfChanged();
    }
    this.visible = false;
  }
  done() {
    this.close();
  }
 }
 </script>
 <style>
 .dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
 }
 #dialogFeedFilters.dialog-overlay {
  z-index: 99999;
  overflow: scroll;
 }
 .dialog {
  background-color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  width: 100%;
  max-width: 500px;
 }
 </style>
--- a/src/constants/app.ts
+++ b/src/constants/app.ts
@@ -20,11 +20,11 @@ export enum AppString {
 }
 export const DEFAULT_ENDORSER_API_SERVER =
-  process.env.VUE_APP_DEFAULT_ENDORSER_API_SERVER ||
+  import.meta.env.VITE_DEFAULT_ENDORSER_API_SERVER ||
  AppString.TEST_ENDORSER_API_SERVER;
 export const DEFAULT_IMAGE_API_SERVER =
-  process.env.VUE_APP_DEFAULT_IMAGE_API_SERVER ||
+  import.meta.env.VITE_DEFAULT_IMAGE_API_SERVER ||
  AppString.TEST_IMAGE_API_SERVER;
 export const DEFAULT_PUSH_SERVER =
--- a/src/db/tables/settings.ts
+++ b/src/db/tables/settings.ts
@@ -16,6 +16,10 @@ export type Settings = {
  activeDid?: string; // Active Decentralized ID
  apiServer?: string; // API server URL
  filterFeedByNearby?: boolean; // filter by nearby
  filterFeedByVisible?: boolean; // filter by visible users ie. anyone not hidden
  firstName?: string; // User's first name
  isRegistered?: boolean;
  lastName?: string; // deprecated - put all names in firstName
@@ -38,6 +42,10 @@ export type Settings = {
  webPushServer?: string; // Web Push server URL
 };
 export function isAnyFeedFilterOn(settings: Settings): boolean {
  return !!(settings.filterFeedByNearby || settings.filterFeedByVisible);
 }
 /**
 * Schema for the Settings table in the database.
 */
--- a/src/libs/crypto/index.ts
+++ b/src/libs/crypto/index.ts
@@ -113,7 +113,7 @@ export const sign = async (privateKeyHex: string) => {
 *  The SimpleSigner returns a configured function for signing data.
 *
 *  @example
- *  const signer = SimpleSigner(process.env.PRIVATE_KEY)
+ *  const signer = SimpleSigner(import.meta.env.PRIVATE_KEY)
 *  signer(data, (err, signature) => {
 *    ...
 *  })
--- a/src/libs/endorserServer.ts
+++ b/src/libs/endorserServer.ts
@@ -1,9 +1,11 @@
 import { Axios, AxiosResponse, RawAxiosRequestHeaders } from "axios";
 import * as didJwt from "did-jwt";
 import { LRUCache } from "lru-cache";
 import * as R from "ramda";
 import { IIdentifier } from "@veramo/core";
-import { accessToken, SimpleSigner } from "@/libs/crypto";
+
 import * as didJwt from "did-jwt";
 import { Axios, AxiosResponse } from "axios";
 import { Contact } from "@/db/tables/contacts";
 import { accessToken, SimpleSigner } from "@/libs/crypto";
 export const SCHEMA_ORG_CONTEXT = "https://schema.org";
 // the object in RegisterAction claims
@@ -49,7 +51,7 @@ export interface GenericVerifiableCredential {
  [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
 }
-export interface GenericServerRecord extends GenericVerifiableCredential {
+export interface GenericCredWrapper extends GenericVerifiableCredential {
  handleId?: string;
  id: string;
  issuedAt: string;
@@ -58,7 +60,7 @@ export interface GenericServerRecord extends GenericVerifiableCredential {
  claim: Record<string, any>;
  claimType?: string;
 }
-export const BLANK_GENERIC_SERVER_RECORD: GenericServerRecord = {
+export const BLANK_GENERIC_SERVER_RECORD: GenericCredWrapper = {
  "@context": SCHEMA_ORG_CONTEXT,
  "@type": "",
  claim: {},
@@ -68,7 +70,7 @@ export const BLANK_GENERIC_SERVER_RECORD: GenericServerRecord = {
 };
 // a summary record; the VC is found the fullClaim field
-export interface GiveServerRecord {
+export interface GiveSummaryRecord {
  agentDid: string;
  amount: number;
  amountConfirmed: number;
@@ -83,7 +85,7 @@ export interface GiveServerRecord {
 }
 // a summary record; the VC is found the fullClaim field
-export interface OfferServerRecord {
+export interface OfferSummaryRecord {
  amount: number;
  amountGiven: number;
  amountGivenConfirmed: number;
@@ -101,7 +103,7 @@ export interface OfferServerRecord {
 }
 // a summary record; the VC is not currently part of this record
-export interface PlanServerRecord {
+export interface PlanSummaryRecord {
  agentDid?: string; // optional, if the issuer wants someone else to manage as well
  description: string;
  endTime?: string;
@@ -110,6 +112,7 @@ export interface PlanServerRecord {
  issuerDid: string;
  locLat?: number;
  locLon?: number;
  name?: string;
  startTime?: string;
  url?: string;
 }
@@ -256,6 +259,10 @@ export type CreateAndSubmitClaimResult = SuccessResult | ErrorResult;
 // See https://github.com/trentlarson/endorser-ch/blob/0cb626f803028e7d9c67f095858a9fc8542e3dbd/server/api/services/util.js#L6
 const HIDDEN_DID = "did:none:HIDDEN";
 const planCache: LRUCache<string, PlanSummaryRecord> = new LRUCache({
  max: 500,
 });
 export function isDid(did: string) {
  return did.startsWith("did:");
 }
@@ -269,7 +276,7 @@ export function isEmptyOrHiddenDid(did?: string) {
 }
 /**
- * @return true for any nested string where func(input) === true
+ * @return true for any string within this primitive/object/array where func(input) === true
 *
 * Similar logic is found in endorser-mobile.
 */
@@ -304,6 +311,12 @@ export function containsHiddenDid(obj: any) {
  return testRecursivelyOnStrings(isHiddenDid, obj);
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const containsNonHiddenDid = (obj: any) => {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  return testRecursivelyOnStrings((s: any) => isDid(s) && !isHiddenDid(s), obj);
 };
 export function stripEndorserPrefix(claimId: string) {
  if (claimId && claimId.startsWith(ENDORSER_CH_HANDLE_PREFIX)) {
    return claimId.substring(ENDORSER_CH_HANDLE_PREFIX.length);
@@ -403,8 +416,11 @@ export function didInfoForContact(
    return myId
      ? { displayName: "You (Alt ID)", known: true }
      : isHiddenDid(did)
-        ? { displayName: "Someone Outside Your Network", known: false }
+        ? { displayName: "Someone Totally Outside Your View", known: false }
-        : { displayName: "Someone Outside Contacts", known: false };
+        : {
            displayName: "Someone Visible But Outside Your Contact List",
            known: false,
          };
  }
 }
@@ -423,6 +439,71 @@ export function didInfo(
  return didInfoForContact(did, activeDid, contact, allMyDids).displayName;
 }
 async function getHeaders(identity: IIdentifier | null) {
  const headers: RawAxiosRequestHeaders = {
    "Content-Type": "application/json",
  };
  if (identity) {
    const token = await accessToken(identity);
    headers["Authorization"] = "Bearer " + token;
  }
  return headers;
 }
 /**
 * @param handleId nullable -- which means that "undefined" will be returned
 * @param identity nullable -- which means no private info will be returned
 * @param axios
 * @param apiServer
 */
 export async function getPlanFromCache(
  handleId: string | null,
  identity: IIdentifier | null,
  axios: Axios,
  apiServer: string,
 ) {
  if (!handleId) {
    return undefined;
  }
  let cred = planCache.get(handleId);
  if (!cred) {
    const url =
      apiServer +
      "/api/v2/report/plans?handleId=" +
      encodeURIComponent(handleId);
    const headers = await getHeaders(identity);
    try {
      const resp = await axios.get(url, { headers });
      if (resp.status === 200 && resp.data?.data?.length > 0) {
        cred = resp.data.data[0];
        planCache.set(handleId, cred);
      } else {
        console.log(
          "Failed to load plan with handle",
          handleId,
          " Got data:",
          resp.data,
        );
      }
    } catch (error) {
      console.log(
        "Failed to load plan with handle",
        handleId,
        " Got error:",
        error,
      );
    }
  }
  return cred;
 }
 export async function setPlanInCache(
  handleId: string,
  planSummary: PlanSummaryRecord,
 ) {
  planCache.set(handleId, planSummary);
 }
 /**
 * For result, see https://api.endorser.ch/api-docs/#/claims/post_api_v2_claim
 *
@@ -475,7 +556,7 @@ export async function createAndSubmitGive(
    vcClaim.image = imageUrl;
  }
  return createAndSubmitClaim(
-    vcClaim as GenericServerRecord,
+    vcClaim as GenericCredWrapper,
    identity,
    apiServer,
    axios,
@@ -524,7 +605,7 @@ export async function createAndSubmitOffer(
    };
  }
  return createAndSubmitClaim(
-    vcClaim as GenericServerRecord,
+    vcClaim as GenericCredWrapper,
    identity,
    apiServer,
    axios,
@@ -695,7 +776,7 @@ const claimSummary = (claim: Record<string, any>) => {
 similar code is also contained in endorser-mobile
 **/
 export const claimSpecialDescription = (
-  record: GenericServerRecord,
+  record: GenericCredWrapper,
  activeDid: string,
  identifiers: Array<string>,
  contacts: Array<Contact>,
@@ -789,12 +870,12 @@ export const claimSpecialDescription = (
      "...]"
    );
  } else {
-    return issuer + " declared " + claimSummary(claim as GenericServerRecord);
+    return issuer + " declared " + claimSummary(claim as GenericCredWrapper);
  }
 };
 export const BVC_MEETUPS_PROJECT_CLAIM_ID =
-  process.env.VUE_APP_BVC_MEETUPS_PROJECT_CLAIM_ID ||
+  import.meta.env.VITE_BVC_MEETUPS_PROJECT_CLAIM_ID ||
  "https://endorser.ch/entity/01HNTZYJJXTGT0EZS3VEJGX7AK"; // this won't resolve as a URL on production; it's a URN only found in the test system
 export const bvcMeetingJoinClaim = (did: string, startTime: string) => {
--- a/src/libs/util.ts
+++ b/src/libs/util.ts
@@ -9,12 +9,9 @@ import { accountsDB, db } from "@/db/index";
 import { Account } from "@/db/tables/accounts";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { deriveAddress, generateSeed, newIdentifier } from "@/libs/crypto";
-import { GenericServerRecord, containsHiddenDid } from "@/libs/endorserServer";
+import { GenericCredWrapper, containsHiddenDid } from "@/libs/endorserServer";
 import * as serverUtil from "@/libs/endorserServer";
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
 export const PRIVACY_MESSAGE =
  "The data you send be visible to the world -- except: your IDs and the IDs of anyone you tag will stay private, only visible to those you allow.";
@@ -56,9 +53,13 @@ export function iconForUnitCode(unitCode: string) {
 }
 // from https://stackoverflow.com/a/175787/845494
 // ... though it appears even this isn't precisely right so keep doing "|| 0" or something in sensitive places
 //
 export function isNumeric(str: string): boolean {
-  return !isNaN(+str);
+  // This ignore commentary is because typescript complains when you pass a string to isNaN.
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  return !isNaN(str) && !isNaN(parseFloat(str));
 }
 export function numberOrZero(str: string): number {
@@ -69,7 +70,7 @@ export const isGlobalUri = (uri: string) => {
  return uri && uri.match(new RegExp(/^[A-Za-z][A-Za-z0-9+.-]+:/));
 };
-export const giveIsConfirmable = (veriClaim: GenericServerRecord) => {
+export const giveIsConfirmable = (veriClaim: GenericCredWrapper) => {
  return veriClaim.claimType === "GiveAction";
 };
@@ -85,7 +86,7 @@ export const doCopyTwoSecRedo = (text: string, fn: () => void) => {
 * @param veriClaim is expected to have fields: claim, claimType, and issuer
 */
 export const isGiveRecordTheUserCanConfirm = (
-  veriClaim: GenericServerRecord,
+  veriClaim: GenericCredWrapper,
  activeDid: string,
  confirmerIdList: string[] = [],
 ) => {
@@ -101,9 +102,9 @@ export const isGiveRecordTheUserCanConfirm = (
 * @returns the DID of the person who offered, or undefined if hidden
 * @param veriClaim is expected to have fields: claim and issuer
 */
-export const offerGiverDid: (
+export const offerGiverDid: (arg0: GenericCredWrapper) => string | undefined = (
-  arg0: GenericServerRecord,
+  veriClaim,
-) => string | undefined = (veriClaim) => {
+) => {
  let giver;
  if (
    veriClaim.claim.offeredBy?.identifier &&
@@ -120,7 +121,7 @@ export const offerGiverDid: (
 * @returns true if the user can fulfill the offer
 * @param veriClaim is expected to have fields: claim, claimType, and issuer
 */
-export const canFulfillOffer = (veriClaim: GenericServerRecord) => {
+export const canFulfillOffer = (veriClaim: GenericCredWrapper) => {
  return !!(veriClaim.claimType === "Offer" && offerGiverDid(veriClaim));
 };
@@ -237,7 +238,7 @@ export const generateSaveAndActivateIdentity = async (): Promise<string> => {
 };
 export const sendTestThroughPushServer = async (
-  subscription: PushSubscription,
+  subscriptionJSON: PushSubscriptionJSON,
  skipFilter: boolean,
 ): Promise<AxiosResponse> => {
  await db.open();
@@ -252,28 +253,11 @@ export const sendTestThroughPushServer = async (
  // Use something other than "Daily Update" https://gitea.anomalistdesign.com/trent_larson/py-push-server/src/commit/3c0e196c11bc98060ec5934e99e7dbd591b5da4d/app.py#L213
  const DIRECT_PUSH_TITLE = "DIRECT_NOTIFICATION";
  const auth = Buffer.from(subscription.getKey("auth"));
  const authB64 = auth
    .toString("base64")
    .replace(/\+/g, "-")
    .replace(/\//g, "_")
    .replace(/=+$/, "");
  const p256dh = Buffer.from(subscription.getKey("p256dh"));
  const p256dhB64 = p256dh
    .toString("base64")
    .replace(/\+/g, "-")
    .replace(/\//g, "_")
    .replace(/=+$/, "");
  const newPayload = {
-    endpoint: subscription.endpoint,
+    // eslint-disable-next-line prettier/prettier
-    keys: {
+    message: `Test, where you will see this message ${ skipFilter ? "un" : "" }filtered.`,
      auth: authB64,
      p256dh: p256dhB64,
    },
    message: `Test, where you will see this message ${
      skipFilter ? "un" : ""
    }filtered.`,
    title: skipFilter ? DIRECT_PUSH_TITLE : "Your Web Push",
    ...subscriptionJSON,
  };
  console.log("Sending a test web push message:", newPayload);
  const payloadStr = JSON.stringify(newPayload);
--- a/src/main.ts
+++ b/src/main.ts
@@ -20,8 +20,10 @@ import {
  faCalendar,
  faCamera,
  faCheck,
  faChevronDown,
  faChevronLeft,
  faChevronRight,
  faChevronUp,
  faCircle,
  faCircleCheck,
  faCircleInfo,
@@ -81,8 +83,10 @@ library.add(
  faCalendar,
  faCamera,
  faCheck,
  faChevronDown,
  faChevronLeft,
  faChevronRight,
  faChevronUp,
  faCircle,
  faCircleCheck,
  faCircleInfo,
--- a/src/registerServiceWorker.ts
+++ b/src/registerServiceWorker.ts
@@ -2,7 +2,7 @@
 import { register } from "register-service-worker";
-if (process.env.NODE_ENV === "production") {
+if (import.meta.env.NODE_ENV === "production") {
  register("/sw_scripts-combined.js", {
    ready() {
      console.log(
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -31,229 +31,159 @@ const routes: Array<RouteRecordRaw> = [
  {
    path: "/account",
    name: "account",
-    component: () =>
+    component: () => import("../views/AccountViewView.vue"),
      import(/* webpackChunkName: "account" */ "../views/AccountViewView.vue"),
  },
  {
    path: "/claim/:id?",
    name: "claim",
-    component: () =>
+    component: () => import("../views/ClaimView.vue"),
      import(/* webpackChunkName: "claim" */ "../views/ClaimView.vue"),
  },
  {
    path: "/confirm-contact",
    name: "confirm-contact",
-    component: () =>
+    component: () => import("../views/ConfirmContactView.vue"),
      import(
        /* webpackChunkName: "confirm-contact" */ "../views/ConfirmContactView.vue"
      ),
  },
  {
    path: "/contact-amounts",
    name: "contact-amounts",
-    component: () =>
+    component: () => import("../views/ContactAmountsView.vue"),
      import(
        /* webpackChunkName: "contact-amounts" */ "../views/ContactAmountsView.vue"
      ),
  },
  {
    path: "/contact-gives",
    name: "contact-gives",
-    component: () =>
+    component: () => import("../views/ContactGiftingView.vue"),
      import(
        /* webpackChunkName: "contact-gives" */ "../views/ContactGiftingView.vue"
      ),
  },
  {
    path: "/contact-qr",
    name: "contact-qr",
-    component: () =>
+    component: () => import("../views/ContactQRScanShowView.vue"),
      import(
        /* webpackChunkName: "contact-qr" */ "../views/ContactQRScanShowView.vue"
      ),
  },
  {
    path: "/contacts",
    name: "contacts",
-    component: () =>
+    component: () => import("../views/ContactsView.vue"),
      import(/* webpackChunkName: "contacts" */ "../views/ContactsView.vue"),
  },
  {
    path: "/discover",
    name: "discover",
-    component: () =>
+    component: () => import("../views/DiscoverView.vue"),
      import(/* webpackChunkName: "discover" */ "../views/DiscoverView.vue"),
  },
  {
    path: "/gifted-details",
    name: "gifted-details",
-    component: () =>
+    component: () => import("../views/GiftedDetails.vue"),
      import(
        /* webpackChunkName: "gifted-details" */ "../views/GiftedDetails.vue"
      ),
  },
  {
    path: "/help",
    name: "help",
-    component: () =>
+    component: () => import("../views/HelpView.vue"),
      import(/* webpackChunkName: "help" */ "../views/HelpView.vue"),
  },
  {
    path: "/help-notifications",
    name: "help-notifications",
-    component: () =>
+    component: () => import("../views/HelpNotificationsView.vue"),
      import(
        /* webpackChunkName: "help-notifications" */ "../views/HelpNotificationsView.vue"
      ),
  },
  {
    path: "/help-onboarding",
    name: "help-onboarding",
-    component: () =>
+    component: () => import("../views/HelpOnboardingView.vue"),
      import(
        /* webpackChunkName: "help-onboarding" */ "../views/HelpOnboardingView.vue"
      ),
  },
  {
    path: "/",
    name: "home",
-    component: () =>
+    component: () => import("../views/HomeView.vue"),
      import(/* webpackChunkName: "home" */ "../views/HomeView.vue"),
  },
  {
    path: "/identity-switcher",
    name: "identity-switcher",
-    component: () =>
+    component: () => import("../views/IdentitySwitcherView.vue"),
      import(
        /* webpackChunkName: "identity-switcher" */ "../views/IdentitySwitcherView.vue"
      ),
  },
  {
    path: "/import-account",
    name: "import-account",
-    component: () =>
+    component: () => import("../views/ImportAccountView.vue"),
      import(
        /* webpackChunkName: "import-account" */ "../views/ImportAccountView.vue"
      ),
  },
  {
    path: "/import-derive",
    name: "import-derive",
-    component: () =>
+    component: () => import("../views/ImportDerivedAccountView.vue"),
      import(
        /* webpackChunkName: "import-derive" */ "../views/ImportDerivedAccountView.vue"
      ),
  },
  {
    path: "/new-edit-account",
    name: "new-edit-account",
-    component: () =>
+    component: () => import("../views/NewEditAccountView.vue"),
      import(
        /* webpackChunkName: "new-edit-account" */ "../views/NewEditAccountView.vue"
      ),
  },
  {
    path: "/new-edit-project",
    name: "new-edit-project",
-    component: () =>
+    component: () => import("../views/NewEditProjectView.vue"),
      import(
        /* webpackChunkName: "new-edit-project" */ "../views/NewEditProjectView.vue"
      ),
  },
  {
    path: "/new-identifier",
    name: "new-identifier",
-    component: () =>
+    component: () => import("../views/NewIdentifierView.vue"),
      import(
        /* webpackChunkName: "new-identifier" */ "../views/NewIdentifierView.vue"
      ),
  },
  {
    path: "/project/:id?",
    name: "project",
-    component: () =>
+    component: () => import("../views/ProjectViewView.vue"),
      import(/* webpackChunkName: "project" */ "../views/ProjectViewView.vue"),
  },
  {
    path: "/projects",
    name: "projects",
-    component: () =>
+    component: () => import("../views/ProjectsView.vue"),
      import(/* webpackChunkName: "projects" */ "../views/ProjectsView.vue"),
    beforeEnter: enterOrStart,
  },
  {
    path: "/quick-action-bvc",
    name: "quick-action-bvc",
-    component: () =>
+    component: () => import("../views/QuickActionBvcView.vue"),
      import(
        /* webpackChunkName: "quick-action-bvc" */ "../views/QuickActionBvcView.vue"
      ),
  },
  {
    path: "/quick-action-bvc-begin",
    name: "quick-action-bvc-begin",
-    component: () =>
+    component: () => import("../views/QuickActionBvcBeginView.vue"),
      import(
        /* webpackChunkName: "quick-action-bvc-begin" */ "../views/QuickActionBvcBeginView.vue"
      ),
  },
  {
    path: "/quick-action-bvc-end",
    name: "quick-action-bvc-end",
-    component: () =>
+    component: () => import("../views/QuickActionBvcEndView.vue"),
      import(
        /* webpackChunkName: "quick-action-bvc-end" */ "../views/QuickActionBvcEndView.vue"
      ),
  },
  {
    path: "/scan-contact",
    name: "scan-contact",
-    component: () =>
+    component: () => import("../views/ContactScanView.vue"),
      import(
        /* webpackChunkName: "scan-contact" */ "../views/ContactScanView.vue"
      ),
  },
  {
    path: "/search-area",
    name: "search-area",
-    component: () =>
+    component: () => import("../views/SearchAreaView.vue"),
      import(
        /* webpackChunkName: "search-area" */ "../views/SearchAreaView.vue"
      ),
  },
  {
    path: "/seed-backup",
    name: "seed-backup",
-    component: () =>
+    component: () => import("../views/SeedBackupView.vue"),
      import(
        /* webpackChunkName: "seed-backup" */ "../views/SeedBackupView.vue"
      ),
  },
  {
    path: "/start",
    name: "start",
-    component: () =>
+    component: () => import("../views/StartView.vue"),
      import(/* webpackChunkName: "start" */ "../views/StartView.vue"),
  },
  {
    path: "/statistics",
    name: "statistics",
-    component: () =>
+    component: () => import("../views/StatisticsView.vue"),
      import(
        /* webpackChunkName: "statistics" */ "../views/StatisticsView.vue"
      ),
  },
  {
    path: "/test",
    name: "test",
-    component: () =>
+    component: () => import("../views/TestView.vue"),
      import(/* webpackChunkName: "test" */ "../views/TestView.vue"),
  },
 ];
 /** @type {*} */
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
+  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
 });
--- a/src/util.d.ts
+++ b/src/util.d.ts
@@ -1,4 +1,5 @@
 // from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/node/util.d.ts
 /* eslint-disable */
 /**
 * The `node:util` module supports the needs of Node.js internal APIs. Many of the
 * utilities are useful for application and module developers as well. To access
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -112,6 +112,8 @@
    </div>
    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8">
      <!-- label -->
      <div class="mb-2 font-bold">Settings</div>
      <div
        v-if="!notificationMaybeChanged"
        class="flex items-center justify-between cursor-pointer"
@@ -140,16 +142,38 @@
        Notification status may have changed. Refresh this page to see the
        latest setting.
      </div>
-      <router-link class="px-4 text-sm text-blue-500" to="/help-notifications">
+      <router-link class="pl-4 text-sm text-blue-500" to="/help-notifications">
        Troubleshoot your notification setup.
      </router-link>
      <router-link
        :to="{ name: 'search-area' }"
        v-if="activeDid"
        class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-2 mt-6"
      >
        Set Search Area…
        <!-- If already set, change button label to "Change Search Area" -->
      </router-link>
      <div class="text-slate-500 text-sm font-bold mt-6 mb-2">
        Topics of Interest
      </div>
      <textarea
        class="block w-full rounded border border-slate-400 px-3 py-2"
        rows="3"
        value="longing, rusted, seventeen, daybreak, furnace, nine, benign, homecoming, one, freight car"
      >
      </textarea>
      <div class="text-slate-500 text-sm mt-2 mb-2">
        Separate topics with a comma.
      </div>
    </div>
    <div
      v-if="activeDid"
      class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
    >
-      <div class="mb-2">Usage Limits</div>
+      <div class="mb-2 font-bold">Usage Limits</div>
      <!-- show spinner if loading limits -->
      <div v-if="loadingLimits" class="text-center">
        Checking&hellip; <fa icon="spinner" class="fa-spin"></fa>
@@ -200,7 +224,7 @@
    </div>
    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8">
-      <div>Data Export</div>
+      <div class="mb-2 font-bold">Data Export</div>
      <router-link
        :to="{ name: 'seed-backup' }"
        v-if="activeDid"
@@ -211,7 +235,7 @@
      <button
        v-bind:class="computedStartDownloadLinkClassNames()"
-        class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-6"
+        class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
        @click="exportDatabase()"
      >
        Download Settings & Contacts
@@ -221,7 +245,7 @@
      <a
        ref="downloadLink"
        v-bind:class="computedDownloadLinkClassNames()"
-        class="block w-full text-center text-md uppercase bg-gradient-to-b from-green-500 to-green-800 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
+        class="block w-full text-center text-md uppercase bg-gradient-to-b from-green-500 to-green-800 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-6"
      >
        If no download happened yet, click again here to download now.
      </a>
@@ -539,9 +563,7 @@ import {
  EndorserRateLimits,
  ImageRateLimits,
 } from "@/libs/endorserServer";
-
+import { Buffer } from "buffer/";
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
 interface IAccount {
  did: string;
@@ -952,13 +974,13 @@ export default class AccountViewView extends Vue {
  public computedStartDownloadLinkClassNames() {
    return {
-      invisible: this.downloadUrl,
+      hidden: this.downloadUrl,
    };
  }
  public computedDownloadLinkClassNames() {
    return {
-      invisible: !this.downloadUrl,
+      hidden: !this.downloadUrl,
    };
  }
@@ -1146,9 +1168,9 @@ export default class AccountViewView extends Vue {
      this.limitsMessage =
        (data?.error?.message as string) || "Bad server response.";
      console.error(
-        "Got bad response retrieving limits, which usually means user isn't registered:",
+        "Got bad response retrieving limits, which usually means user isn't registered.",
        error,
      );
      //console.error(error);
    } else {
      this.limitsMessage = "Got an error retrieving limits.";
      console.error("Got some error retrieving limits:", error);
--- a/src/views/ContactAmountsView.vue
+++ b/src/views/ContactAmountsView.vue
@@ -119,7 +119,7 @@ import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { accessToken, SimpleSigner } from "@/libs/crypto";
 import {
  AgreeVerifiableCredential,
-  GiveServerRecord,
+  GiveSummaryRecord,
  GiveVerifiableCredential,
  SCHEMA_ORG_CONTEXT,
 } from "@/libs/endorserServer";
@@ -131,7 +131,7 @@ export default class ContactAmountssView extends Vue {
  activeDid = "";
  apiServer = "";
  contact: Contact | null = null;
-  giveRecords: Array<GiveServerRecord> = [];
+  giveRecords: Array<GiveSummaryRecord> = [];
  numAccounts = 0;
  async beforeCreate() {
@@ -197,7 +197,7 @@ export default class ContactAmountssView extends Vue {
  async loadGives(activeDid: string, contact: Contact) {
    try {
      const identity = await this.getIdentity(this.activeDid);
-      let result: Array<GiveServerRecord> = [];
+      let result: Array<GiveSummaryRecord> = [];
      const url =
        this.apiServer +
        "/api/v2/report/gives?agentDid=" +
@@ -252,7 +252,7 @@ export default class ContactAmountssView extends Vue {
        );
      }
-      const sortedResult: Array<GiveServerRecord> = R.sort(
+      const sortedResult: Array<GiveSummaryRecord> = R.sort(
        (a, b) =>
          new Date(b.issuedAt).getTime() - new Date(a.issuedAt).getTime(),
        result,
@@ -271,7 +271,7 @@ export default class ContactAmountssView extends Vue {
    }
  }
-  async confirm(record: GiveServerRecord) {
+  async confirm(record: GiveSummaryRecord) {
    // Make claim
    // I use clone here because otherwise it gets a Proxy object.
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
--- a/src/views/ContactQRScanShowView.vue
+++ b/src/views/ContactQRScanShowView.vue
@@ -88,9 +88,7 @@ import {
  CONTACT_URL_PREFIX,
  ENDORSER_JWT_URL_LOCATION,
 } from "@/libs/endorserServer";
-
+import { Buffer } from "buffer/";
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
@Component({
  components: {
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -303,7 +303,7 @@ import {
 import {
  CONTACT_CSV_HEADER,
  CONTACT_URL_PREFIX,
-  GiveServerRecord,
+  GiveSummaryRecord,
  GiveVerifiableCredential,
  isDid,
  RegisterVerifiableCredential,
@@ -314,8 +314,7 @@ import QuickNav from "@/components/QuickNav.vue";
 import EntityIcon from "@/components/EntityIcon.vue";
 import { Account } from "@/db/tables/accounts";
-// eslint-disable-next-line @typescript-eslint/no-var-requires
+import { Buffer } from "buffer/";
 const Buffer = require("buffer/").Buffer;
@Component({
  components: { QuickNav, EntityIcon },
@@ -410,7 +409,7 @@ export default class ContactsView extends Vue {
    }
    const handleResponse = (
-      resp: { status: number; data: { data: GiveServerRecord[] } },
+      resp: { status: number; data: { data: GiveSummaryRecord[] } },
      descriptions: Record<string, string>,
      confirmed: Record<string, number>,
      unconfirmed: Record<string, number>,
--- a/src/views/HelpNotificationsView.vue
+++ b/src/views/HelpNotificationsView.vue
@@ -301,12 +301,13 @@ import { sendTestThroughPushServer } from "@/libs/util";
 export default class HelpNotificationsView extends Vue {
  $notify!: (notification: NotificationIface, timeout?: number) => void;
-  subscription: PushSubscription | null = null;
+  subscriptionJSON?: PushSubscriptionJSON;
  async mounted() {
    try {
      const registration = await navigator.serviceWorker.ready;
-      this.subscription = await registration.pushManager.getSubscription();
+      const fullSub = await registration.pushManager.getSubscription();
      this.subscriptionJSON = fullSub?.toJSON();
    } catch (error) {
      console.error("Mount error:", error);
    }
@@ -315,13 +316,13 @@ export default class HelpNotificationsView extends Vue {
  alertWebPushSubscription() {
    console.log(
      "Web push subscription:",
-      JSON.parse(JSON.stringify(this.subscription)), // gives more info than plain console logging
+      JSON.parse(JSON.stringify(this.subscriptionJSON)), // gives more info than plain console logging
    );
-    alert(JSON.stringify(this.subscription));
+    alert(JSON.stringify(this.subscriptionJSON));
  }
  async sendTestWebPushMessage(skipFilter: boolean = false) {
-    if (!this.subscription) {
+    if (!this.subscriptionJSON) {
      this.$notify(
        {
          group: "alert",
@@ -336,7 +337,7 @@ export default class HelpNotificationsView extends Vue {
    }
    try {
-      await sendTestThroughPushServer(this.subscription, skipFilter);
+      await sendTestThroughPushServer(this.subscriptionJSON, skipFilter);
      this.$notify(
        {
--- a/src/views/HelpView.vue
+++ b/src/views/HelpView.vue
@@ -382,6 +382,6 @@ export default class Help extends Vue {
  $notify!: (notification: NotificationIface, timeout?: number) => void;
  package = Package;
-  commitHash = process.env.VUE_APP_GIT_HASH;
+  commitHash = import.meta.env.VITE_GIT_HASH;
 }
 </script>
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -174,10 +174,29 @@
      showGivenToUser="true"
    />
    <GiftedPrompts ref="giftedPrompts" />
    <FeedFilters ref="feedFilters" />
    <!-- Results List -->
    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
-      <h2 class="text-xl font-bold mb-4">Latest Activity</h2>
+      <div class="flex items-center mb-4">
        <h2 class="text-xl font-bold">Latest Activity</h2>
        <button @click="openFeedFilters()" class="block text-center ml-auto">
          <span class="text-sm uppercase text-white">
            <span
              v-if="resultsAreFiltered()"
              class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-1.5 rounded-md"
            >
              Filtered
            </span>
            <span
              v-else
              class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-1.5 rounded-md"
            >
              Unfiltered
            </span>
          </span>
        </button>
      </div>
      <InfiniteScroll @reached-bottom="loadMoreGives">
        <ul class="border-t border-slate-300">
          <li
@@ -193,20 +212,20 @@
            </div>
            <div class="grid grid-cols-12">
-              <span class="col-span-11 justify-self-start">
+              <span class="col-span-1 justify-self-start">
                <span>
                  <fa
                    v-if="record.giver.known || record.receiver.known"
                    icon="circle-user"
-                    class="col-span-1 pt-1 pl-0 pr-3 text-slate-500"
+                    class="pt-1 text-slate-500"
                  />
                  <fa
                    v-else
                    icon="gift"
                    class="col-span-1 pt-1 pl-3 pr-0 text-slate-500"
                  />
                  <fa v-else icon="gift" class="pt-1 pl-3 text-slate-500" />
                </span>
              </span>
              <span class="col-span-10 justify-self-stretch">
                <span class="pl-2">
                  {{ giveDescription(record) }}
                </span>
                {{ giveDescription(record) }}
                <a @click="onClickLoadClaim(record.jwtId)">
                  <fa
                    icon="file-lines"
@@ -214,16 +233,15 @@
                  ></fa>
                </a>
              </span>
-              <span class="col-span-1 justify-self-end shrink">
+              <span class="col-span-1 justify-self-end">
                <router-link
                  v-if="record.fulfillsPlanHandleId"
                  :to="
                    '/project/' +
                    encodeURIComponent(record.fulfillsPlanHandleId)
                  "
                  class="justify-end"
                >
-                  <fa icon="hammer" class="ml-4 pl-2 text-blue-500"></fa>
+                  <fa icon="hammer" class="text-blue-500"></fa>
                </router-link>
              </span>
            </div>
@@ -240,11 +258,17 @@
          <fa icon="spinner" class="fa-spin-pulse"></fa> Loading&hellip;
        </p>
      </div>
      <div v-if="!isFeedLoading && feedData.length === 0">
        <p class="text-slate-500 text-center italic mt-4 mb-4">
          No claims match your filters.
        </p>
      </div>
    </div>
  </section>
 </template>
 <script lang="ts">
 import * as R from "ramda";
 import { UAParser } from "ua-parser-js";
 import { IIdentifier } from "@veramo/core";
 import { Component, Vue } from "vue-facing-decorator";
@@ -252,6 +276,7 @@ import { Component, Vue } from "vue-facing-decorator";
 import EntityIcon from "@/components/EntityIcon.vue";
 import GiftedDialog from "@/components/GiftedDialog.vue";
 import GiftedPrompts from "@/components/GiftedPrompts.vue";
 import FeedFilters from "@/components/FeedFilters.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
@@ -259,22 +284,30 @@ import { NotificationIface } from "@/constants/app";
 import { db, accountsDB } from "@/db/index";
 import { Account } from "@/db/tables/accounts";
 import { Contact } from "@/db/tables/contacts";
-import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
+import {
  BoundingBox,
  isAnyFeedFilterOn,
  MASTER_SETTINGS_KEY,
  Settings,
 } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
 import {
  contactForDid,
  containsNonHiddenDid,
  didInfoForContact,
  getPlanFromCache,
  GiverInputInfo,
-  GiveServerRecord,
+  GiveSummaryRecord,
 } from "@/libs/endorserServer";
 import { generateSaveAndActivateIdentity } from "@/libs/util";
-interface GiveRecordWithContactInfo extends GiveServerRecord {
+interface GiveRecordWithContactInfo extends GiveSummaryRecord {
  giver: {
    displayName: string;
    known: boolean;
  };
  image: string;
  recipientProjectName: string | undefined;
  receiver: {
    displayName: string;
    known: boolean;
@@ -285,6 +318,7 @@ interface GiveRecordWithContactInfo extends GiveServerRecord {
  components: {
    GiftedDialog,
    GiftedPrompts,
    FeedFilters,
    QuickNav,
    EntityIcon,
    InfiniteScroll,
@@ -301,9 +335,16 @@ export default class HomeView extends Vue {
  feedData: GiveRecordWithContactInfo[] = [];
  feedPreviousOldestId?: string;
  feedLastViewedClaimId?: string;
  isAnyFeedFilterOn: boolean;
  isCreatingIdentifier = false;
  isFeedFilteredByVisible = false;
  isFeedFilteredByNearby = false;
  isFeedLoading = true;
  isRegistered = false;
  searchBoxes: Array<{
    name: string;
    bbox: BoundingBox;
  }> = [];
  showShortcutBvc = false;
  userAgentInfo = new UAParser(); // see https://docs.uaparser.js.org/v2/api/ua-parser-js/get-os.html
@@ -326,7 +367,7 @@ export default class HomeView extends Vue {
    return headers;
  }
-  async created() {
+  async mounted() {
    try {
      await accountsDB.open();
      const allAccounts = await accountsDB.accounts.toArray();
@@ -338,9 +379,14 @@ export default class HomeView extends Vue {
      this.activeDid = settings?.activeDid || "";
      this.allContacts = await db.contacts.toArray();
      this.feedLastViewedClaimId = settings?.lastViewedClaimId;
      this.isFeedFilteredByVisible = !!settings?.filterFeedByVisible;
      this.isFeedFilteredByNearby = !!settings?.filterFeedByNearby;
      this.isRegistered = !!settings?.isRegistered;
      this.searchBoxes = settings?.searchBoxes || [];
      this.showShortcutBvc = !!settings?.showShortcutBvc;
      this.isAnyFeedFilterOn = isAnyFeedFilterOn(settings);
      if (this.allMyDids.length === 0) {
        this.isCreatingIdentifier = true;
        this.activeDid = await generateSaveAndActivateIdentity();
@@ -369,6 +415,10 @@ export default class HomeView extends Vue {
    }
  }
  resultsAreFiltered() {
    return this.isFeedFilteredByVisible || this.isFeedFilteredByNearby;
  }
  notificationsSupported() {
    return "Notification" in window;
  }
@@ -378,27 +428,34 @@ export default class HomeView extends Vue {
      "Content-Type": "application/json",
    };
    const identity = await this.getIdentity(this.activeDid);
    if (this.activeDid) {
-      await accountsDB.open();
+      if (identity) {
-      const allAccounts = await accountsDB.accounts.toArray();
+        headers["Authorization"] = "Bearer " + (await accessToken(identity));
-      const account = allAccounts.find(
+      } else {
        (acc) => acc.did === this.activeDid,
      ) as Account;
      const identity = JSON.parse(account?.identity || "null");
      if (!identity) {
        throw new Error(
          "An ID is chosen but there are no keys for it so it cannot be used to talk with the service. Switch your ID.",
        );
      }
      headers["Authorization"] = "Bearer " + (await accessToken(identity));
    } else {
      // it's OK without auth... we just won't get any identifiers
    }
    return headers;
  }
  // only called when a setting was changed
  async reloadFeedOnChange() {
    await db.open();
    const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
    this.isFeedFilteredByVisible = !!settings?.filterFeedByVisible;
    this.isFeedFilteredByNearby = !!settings?.filterFeedByNearby;
    this.isAnyFeedFilterOn = isAnyFeedFilterOn(settings);
    this.feedData = [];
    this.feedPreviousOldestId = undefined;
    this.updateAllFeed();
  }
  /**
   * Data loader used by infinite scroller
   * @param payload is the flag from the InfiniteScroll indicating if it should load
@@ -409,14 +466,30 @@ export default class HomeView extends Vue {
    }
  }
  latLongInAnySearchBox(lat: number, long: number) {
    for (const boxInfo of this.searchBoxes) {
      if (
        boxInfo.bbox.westLong <= long &&
        long <= boxInfo.bbox.eastLong &&
        boxInfo.bbox.minLat <= lat &&
        lat <= boxInfo.bbox.maxLat
      ) {
        return true;
      }
    }
  }
  public async updateAllFeed() {
    this.isFeedLoading = true;
    let endOfResults = true;
    await this.retrieveGives(this.apiServer, this.feedPreviousOldestId)
      .then(async (results) => {
        if (results.data.length > 0) {
          endOfResults = false;
          // include the descriptions of the giver and receiver
-          const newFeedData: GiveRecordWithContactInfo = results.data.map(
+          const identity = await this.getIdentity(this.activeDid);
-            (record: GiveServerRecord) => {
+          const newFeedData: Array<Promise<GiveRecordWithContactInfo>> =
            results.data.map(async (record: GiveSummaryRecord) => {
              // similar code is in endorser-mobile utility.ts
              // claim.claim happen for some claims wrapped in a Verifiable Credential
              // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -427,6 +500,36 @@ export default class HomeView extends Vue {
              // recipient.did is for legacy data, before March 2023
              const recipientDid =
                claim.recipient?.identifier || (claim.recipient as any)?.did; // eslint-disable-line @typescript-eslint/no-explicit-any
              const plan = await getPlanFromCache(
                record.fulfillsPlanHandleId,
                identity,
                this.axios,
                this.apiServer,
              );
              // check if the record should be filtered out
              let anyMatch = false;
              if (
                this.isFeedFilteredByVisible &&
                containsNonHiddenDid(record)
              ) {
                // has a visible DID so it's a keeper
                anyMatch = true;
              }
              if (!anyMatch && this.isFeedFilteredByNearby) {
                // check if the associated project has a location inside user's search box
                if (record.fulfillsPlanHandleId) {
                  if (plan?.locLat && plan?.locLon) {
                    if (this.latLongInAnySearchBox(plan.locLat, plan.locLon)) {
                      anyMatch = true;
                    }
                  }
                }
              }
              if (this.isAnyFeedFilterOn && !anyMatch) {
                return null;
              }
              return {
                ...record,
                giver: didInfoForContact(
@@ -436,6 +539,7 @@ export default class HomeView extends Vue {
                  this.allMyDids,
                ),
                image: claim.image,
                recipientProjectName: plan?.name,
                receiver: didInfoForContact(
                  recipientDid,
                  this.activeDid,
@@ -443,9 +547,11 @@ export default class HomeView extends Vue {
                  this.allMyDids,
                ),
              };
-            },
+            });
-          );
+          const allNewFeedData: GiveRecordWithContactInfo[] =
-          this.feedData = this.feedData.concat(newFeedData);
+            await Promise.all(newFeedData);
          const filteredFeedData = allNewFeedData.filter(R.isNotNil);
          this.feedData = this.feedData.concat(filteredFeedData);
          this.feedPreviousOldestId =
            results.data[results.data.length - 1].jwtId;
          // The following update is only done on the first load.
@@ -472,6 +578,10 @@ export default class HomeView extends Vue {
          -1,
        );
      });
    if (this.feedData.length === 0 && !endOfResults) {
      // repeat until there's at least some data
      this.updateAllFeed();
    }
    this.isFeedLoading = false;
  }
@@ -538,12 +648,28 @@ export default class HomeView extends Vue {
      return `${giverInfo.displayName} gave to ${recipientInfo.displayName}: ${gaveAmount}`;
    } else if (giverInfo.known) {
      // giver is named but recipient is not
      // show the project name if to one
      if (giveRecord.recipientProjectName) {
        // retrieve the project name
        return `${giverInfo.displayName} gave: ${gaveAmount} (to the project ${giveRecord.recipientProjectName})`;
      }
      // it's not to a project
      return `${giverInfo.displayName} gave: ${gaveAmount} (to ${recipientInfo.displayName})`;
    } else if (recipientInfo.known) {
      // recipient is named but giver is not
      return `${recipientInfo.displayName} received: ${gaveAmount} (from ${giverInfo.displayName})`;
    } else {
      // neither giver nor recipient are named
      // show the project name if to one
      if (giveRecord.recipientProjectName) {
        // retrieve the project name
        return `${gaveAmount} (to the project ${giveRecord.recipientProjectName})`;
      }
      // it's not to a project
      let peopleInfo;
      if (giverInfo.displayName === recipientInfo.displayName) {
        peopleInfo = `between two who are ${giverInfo.displayName}`;
@@ -576,5 +702,9 @@ export default class HomeView extends Vue {
  openGiftedPrompts() {
    (this.$refs.giftedPrompts as GiftedPrompts).open();
  }
  openFeedFilters() {
    (this.$refs.feedFilters as FeedFilters).open(this.reloadFeedOnChange);
  }
 }
 </script>
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -362,11 +362,11 @@ import { accessToken } from "@/libs/crypto";
 import * as libsUtil from "@/libs/util";
 import {
  BLANK_GENERIC_SERVER_RECORD,
-  GenericServerRecord,
+  GenericCredWrapper,
  GiverInputInfo,
-  GiveServerRecord,
+  GiveSummaryRecord,
-  OfferServerRecord,
+  OfferSummaryRecord,
-  PlanServerRecord,
+  PlanSummaryRecord,
 } from "@/libs/endorserServer";
 import * as serverUtil from "@/libs/endorserServer";
@@ -390,14 +390,14 @@ export default class ProjectViewView extends Vue {
  apiServer = "";
  description = "";
  expanded = false;
-  fulfilledByThis: PlanServerRecord | null = null;
+  fulfilledByThis: PlanSummaryRecord | null = null;
-  fulfillersToThis: Array<PlanServerRecord> = [];
+  fulfillersToThis: Array<PlanSummaryRecord> = [];
-  givesToThis: Array<GiveServerRecord> = [];
+  givesToThis: Array<GiveSummaryRecord> = [];
  issuer = "";
  latitude = 0;
  longitude = 0;
  name = "";
-  offersToThis: Array<OfferServerRecord> = [];
+  offersToThis: Array<OfferSummaryRecord> = [];
  projectId = localStorage.getItem("projectId") || ""; // handle ID
  showDidCopy = false;
  timeSince = "";
@@ -720,8 +720,8 @@ export default class ProjectViewView extends Vue {
    this.$router.push(route);
  }
-  checkIsFulfillable(offer: OfferServerRecord) {
+  checkIsFulfillable(offer: OfferSummaryRecord) {
-    const offerRecord: GenericServerRecord = {
+    const offerRecord: GenericCredWrapper = {
      ...BLANK_GENERIC_SERVER_RECORD,
      claim: offer.fullClaim,
      claimType: "Offer",
@@ -730,8 +730,8 @@ export default class ProjectViewView extends Vue {
    return libsUtil.canFulfillOffer(offerRecord);
  }
-  onClickFulfillGiveToOffer(offer: OfferServerRecord) {
+  onClickFulfillGiveToOffer(offer: OfferSummaryRecord) {
-    const offerRecord: GenericServerRecord = {
+    const offerRecord: GenericCredWrapper = {
      ...BLANK_GENERIC_SERVER_RECORD,
      claim: offer.fullClaim,
      issuer: offer.offeredByDid,
@@ -770,8 +770,8 @@ export default class ProjectViewView extends Vue {
    }
  }
-  checkIsConfirmable(give: GiveServerRecord) {
+  checkIsConfirmable(give: GiveSummaryRecord) {
-    const giveDetails: GenericServerRecord = {
+    const giveDetails: GenericCredWrapper = {
      ...BLANK_GENERIC_SERVER_RECORD,
      claim: give.fullClaim,
      claimType: "GiveAction",
@@ -781,7 +781,7 @@ export default class ProjectViewView extends Vue {
  }
  // similar code is found in ClaimView
-  async confirmClaim(give: GiveServerRecord) {
+  async confirmClaim(give: GiveSummaryRecord) {
    if (confirm("Do you personally confirm that this is true?")) {
      // similar logic is found in endorser-mobile
      const goodClaim = serverUtil.removeSchemaContext(
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -223,7 +223,7 @@ import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import ProjectIcon from "@/components/ProjectIcon.vue";
 import TopMessage from "@/components/TopMessage.vue";
-import { OfferServerRecord, PlanData } from "@/libs/endorserServer";
+import { OfferSummaryRecord, PlanData } from "@/libs/endorserServer";
 import EntityIcon from "@/components/EntityIcon.vue";
@Component({
@@ -237,7 +237,7 @@ export default class ProjectsView extends Vue {
  currentIid: IIdentifier;
  isLoading = false;
  numAccounts = 0;
-  offers: OfferServerRecord[] = [];
+  offers: OfferSummaryRecord[] = [];
  showOffers = true;
  showProjects = false;
--- a/src/views/QuickActionBvcEndView.vue
+++ b/src/views/QuickActionBvcEndView.vue
@@ -146,7 +146,7 @@ import {
  createAndSubmitConfirmation,
  createAndSubmitGive,
  ErrorResult,
-  GenericServerRecord,
+  GenericCredWrapper,
  GenericVerifiableCredential,
 } from "@/libs/endorserServer";
 import * as libsUtil from "@/libs/util";
@@ -166,7 +166,7 @@ export default class QuickActionBvcBeginView extends Vue {
  allMyDids: Array<string> = [];
  apiServer = "";
  claimCountWithHidden = 0;
-  claimsToConfirm: GenericServerRecord[] = [];
+  claimsToConfirm: GenericCredWrapper[] = [];
  claimsToConfirmSelected: string[] = [];
  description = "breakfast";
  loadingConfirms = true;
@@ -228,7 +228,7 @@ export default class QuickActionBvcBeginView extends Vue {
      }
      await response.json().then((data) => {
        const dataByOthers = R.reject(
-          (claim: GenericServerRecord) => claim.issuer === this.activeDid,
+          (claim: GenericCredWrapper) => claim.issuer === this.activeDid,
          data,
        );
        const dataByOthersWithoutHidden = R.reject(
--- a/src/views/SearchAreaView.vue
+++ b/src/views/SearchAreaView.vue
@@ -209,9 +209,9 @@ export default class DiscoverView extends Vue {
            group: "alert",
            type: "success",
            title: "Saved",
-            text: "That has been saved in your preferences.",
+            text: "That has been saved in your preferences. You can now filter by it on your home screen feed.",
          },
-          -1,
+          7000,
        );
        this.$router.back();
      } catch (err) {
@@ -247,6 +247,7 @@ export default class DiscoverView extends Vue {
      await db.open();
      db.settings.update(MASTER_SETTINGS_KEY, {
        searchBoxes: [],
        filterFeedByNearby: false,
      });
      this.searchBox = null;
      this.localCenterLat = 0;
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,47 +1,35 @@
 {
-    "compilerOptions": {
+	"compilerOptions": {
-	"allowJs": true,
+		"target": "ES2020", // Latest ECMAScript features that are widely supported by modern browsers
-	"resolveJsonModule": true,
+		"module": "ESNext", // Use ES modules
-	"target": "esnext",
+		"strict": true, // Enable all strict type checking options
-	"module": "esnext",
+		"jsx": "preserve", // Preserves JSX to be transformed by Babel or another transpiler
-	"strict": true,
+		"moduleResolution": "node", // Use Node.js style module resolution
-	"strictPropertyInitialization": false,
+		"experimentalDecorators": true,
-	"jsx": "preserve",
+		"esModuleInterop": true, // Enables compatibility with CommonJS modules for default imports
-	"moduleResolution": "node",
+		"allowSyntheticDefaultImports": true, // Allow default imports from modules with no default export
-	"experimentalDecorators": true,
+		"forceConsistentCasingInFileNames": true, // Disallow inconsistently-cased references to the same file
-	"skipLibCheck": true,
+		"useDefineForClassFields": true,
-	"esModuleInterop": true,
+		"sourceMap": true,
-	"allowSyntheticDefaultImports": true,
+		"baseUrl": "./src", // Base directory to resolve non-relative module names
-	"forceConsistentCasingInFileNames": true,
+		"paths": {
-	"useDefineForClassFields": true,
+			"@/components/*": ["components/*"],
-	"sourceMap": true,
+			"@/views/*": ["views/*"],
-	"baseUrl": "./src",
+			"@/db/*": ["db/*"],
-	"types": [
+			"@/libs/*": ["libs/*"],
-	    "webpack-env"
+			"@/constants/*": ["constants/*"],
-	],
+			"@/store/*": ["store/*"]
-	"paths": {
+		},
-	    "@/components/*": ["components/*"],
+		"lib": ["ES2020", "dom", "dom.iterable"], // Include typings for ES2020 and DOM APIs
 	    "@/views/*": ["views/*"],
 	    "@/db/*": ["db/*"],
 	    "@/libs/*": ["libs/*"],
 	    "@/constants/*": ["constants/*"],
 	    "@/store/*": ["store/*"],
 	},
-	"lib": [
+	"include": [
-	    "esnext",
+		"src/**/*.ts",
-	    "dom",
+		"src/**/*.tsx",
-	    "dom.iterable",
+		"src/**/*.vue",
-	    "scripthost"
+		"tests/**/*.ts",
 		"tests/**/*.tsx"
 	],
 	"exclude": [
 		"node_modules"
 	]
    },
    "include": [
 	"src/**/*.ts",
 	"src/**/*.tsx",
 	"src/**/*.vue",
 	"tests/**/*.ts",
 	"tests/**/*.tsx"
    ],
    "exclude": [
 	"node_modules"
    ]
 }
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -0,0 +1,18 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import * as path from "path";
 // https://vitejs.dev/config/
 export default defineConfig({
  server: {
    port: 8080
  },
  plugins: [ vue() ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      buffer: path.resolve(__dirname, 'node_modules', 'buffer'),
      'dexie-export-import/dist/import': 'dexie-export-import/dist/import/index.js',
    },
  },
 });
--- a/vue.config.js
+++ b/vue.config.js
@@ -2,9 +2,9 @@ const { defineConfig } = require("@vue/cli-service");
 const { gitDescribeSync } = require("git-describe");
 const { exec } = require("child_process");
-process.env.VUE_APP_GIT_HASH = gitDescribeSync().hash;
+import.meta.env.VITE_GIT_HASH = gitDescribeSync().hash;
 const TIME_SAFARI_APP_TITLE =
-  process.env.TIME_SAFARI_APP_TITLE || require("./package.json").name;
+  import.meta.env.VITE_TIME_SAFARI_APP_TITLE || require("./package.json").name;
 module.exports = defineConfig({
  transpileDependencies: true,
Author	SHA1	Message	Date
jsnbuchanan	333ac773f6	Merge pull request 'A couple small fixes, plus a merge from master' (#1 ) from trentlarson/crowd-funder-from-jason:feat/vitejs-trent into feat/vitejs Reviewed-on: jsnbuchanan/crowd-funder-for-time-pwa#1	2024-04-07 13:52:43 -04:00
Trent Larson	1459719a47	remove a lingering debug console.log	2024-04-07 11:39:13 -06:00
Trent Larson	5994365a6c	fix title of the test app	2024-04-07 11:32:53 -06:00
Trent Larson	28f72640d7	add linting before any build	2024-04-07 11:22:20 -06:00
Trent Larson	ab81648aca	fix linting	2024-04-07 11:02:54 -06:00
Trent Larson	5828a290c7	Merge remote-tracking branch 'original-origin/master' into feat/vitejs-trent	2024-04-07 09:41:14 -06:00
Trent Larson	78fab735e6	avoid a huge error message in a likely-well-known scenario	2024-04-07 09:24:55 -06:00
Trent Larson	2ae165d56f	reorder home page vapid check to avoid an error on localhost	2024-04-07 09:16:42 -06:00
Trent Larson	0fbd1ad51a	add missing Dexie import (which causes failure upon download click)	2024-04-07 09:13:32 -06:00
Trent Larson	d49bf61524	on home page, change the filtered button color	2024-04-06 17:58:10 -06:00
trentlarson	1a80bbb714	Merge pull request 'ui-additions-2024-03' (#113 ) from ui-additions-2024-03 into master Reviewed-on: #113	2024-04-06 19:46:16 -04:00
Trent Larson	5a2a8659f7	Merge branch 'master' into ui-additions-2024-03	2024-04-06 17:45:32 -06:00
Trent Larson	0632fb9b39	show in description when recipient is a project (not just Anonymous)	2024-04-06 17:39:40 -06:00
Trent Larson	640d273646	filter by selections (now all working), add cache for plans	2024-04-06 14:01:18 -06:00
trentlarson	8f4289c14d	Merge pull request 'send a time for notifications to the push server' (#112 ) from notify-time into master Reviewed-on: #112	2024-04-03 22:04:36 -04:00
trentlarson	7f56c90d97	Merge pull request 'ui-fixes-2024-03' (#111 ) from ui-fixes-2024-03 into master Reviewed-on: #111	2024-04-03 22:04:02 -04:00
Trent Larson	8e1daf7015	feed filter: save the changed values to the DB, go to map if no location chosen, reload if necessary	2024-04-03 19:54:01 -06:00
Jose Olarte III	e90a0be6d9	Names and variables for filter toggles	2024-04-03 15:51:23 +08:00
Trent Larson	489bb76a60	adjust more code to the PushSubscriptionJSON	2024-04-02 19:32:41 -06:00
Trent Larson	2ca33bb9eb	adjust the notification-subscription objects to try and send correct info	2024-04-02 19:18:31 -06:00
Trent Larson	121181c6a1	add adjustment to UTC hour for notification time	2024-04-02 18:38:44 -06:00
Trent Larson	e4cf79b558	update tasks	2024-04-01 19:06:18 -06:00
Trent Larson	7692cc2b35	add logic to send a time for notifications	2024-04-01 19:04:54 -06:00
Jose Olarte III	0b4f2484f7	Additions to Account View	2024-03-29 21:41:14 +08:00
Jose Olarte III	cfd53bc186	Removed one more	2024-03-29 15:55:16 +08:00
Jose Olarte III	7f66addfe3	Filter options reduced for release	2024-03-29 15:53:46 +08:00
Jose Olarte III	4635c1ac48	Feed filters dialog	2024-03-27 19:57:31 +08:00
Jose Olarte III	55da3d0b1c	Map fix #2	2024-03-26 21:38:21 +08:00
Jose Olarte III	dce4d3cc72	Button width changes For buttons that are next to each other	2024-03-26 19:55:16 +08:00
Jose Olarte III	e028197a2a	Optimized grid space for wider screens	2024-03-26 17:12:55 +08:00
Jose Olarte III	0dab475d8b	Fixed map z-index	2024-03-26 16:54:43 +08:00
Jose Olarte III	4e227fc07a	Added close icon to gifted prompts dialog	2024-03-26 16:02:24 +08:00
Trent Larson	2dfc8fedaa	refactor tasks	2024-03-25 19:03:01 -06:00
Jason Buchanan	035f2a5b04	docs: adding do for updated development server run command - `npm run dev`	2024-03-25 08:15:04 -06:00
Jason Buchanan	09dccc34d6	fix: buffer typescript error in util.ts when parsing ArrayBuffer	2024-03-25 08:10:38 -06:00
Trent Larson	b28104af5b	bump version and add -beta	2024-03-24 19:04:24 -06:00
Trent Larson	3a07e31d63	bump to version 0.3.6	2024-03-24 18:28:42 -06:00
Trent Larson	35455e6648	fix check for more camera-device options	2024-03-24 18:27:06 -06:00
Trent Larson	0e2c5af16e	add onboarding help instructions as separate page	2024-03-24 17:01:53 -06:00
trentlarson	1fc5b0ea2b	Merge pull request 'add button during photo to switch to mirror mode' (#109 ) from photo-reverse into master Reviewed-on: #109	2024-03-24 18:59:50 -04:00
Jason Buchanan	ca240ab795	fix: es modules syntax for buffer deps instead of commonjs require	2024-03-24 13:05:22 -06:00
Jason Buchanan	01b5ca6ec8	chore: update vitejs config to deploy on the same default port as the @vue/cli-service This port is 8080. This is done to not break existing tooling and devops code.	2024-03-24 12:05:09 -06:00
Jason Buchanan	6f49260c1e	fix: AccountViewView.vue template not resolving dep for dexie-export-import/dist/import Previous error: Error: The following dependencies are imported but could not be resolved: dexie-export-import/dist/import (imported by /Users/jason/dev/src/trent/crowd-funder-for-time-pwa/src/views/AccountViewView.vue?id=0) Are they installed? at file:///Users/jason/dev/src/trent/crowd-funder-for-time-pwa/node_modules/vite/dist/node/chunks/dep-DJaaTb_D.js:52506:23 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async file:///Users/jason/dev/src/trent/crowd-funder-for-time-pwa/node_modules/vite/dist/node/chunks/dep-DJaaTb_D.js:51972:38	2024-03-24 11:51:58 -06:00
Jason Buchanan	38f44771e9	Initial stab at vitejs update	2024-03-24 11:18:29 -06:00
Trent Larson	be2154f847	change icon for detail view (from circle-info to file-lines)	2024-03-23 19:07:53 -06:00
Trent Larson	4ad4cab25e	add blurb explaining what data is shared with the world	2024-03-23 18:45:26 -06:00
Trent Larson	e020caaa50	show warnings before dismissing prompt, and add to tasks and help	2024-03-23 17:35:58 -06:00
Trent Larson	40d12b1f9c	add button on photo to switch to mirror mode	2024-03-23 16:31:23 -06:00
Trent Larson	28754bdfb1	bump version to 0.3.5	2024-03-23 02:41:25 -06:00
Trent Larson	2b8f9579f1	fix so that project agent & location removals get saved	2024-03-23 02:31:44 -06:00
Trent Larson	6dc0c2cd58	add a camera-switch button	2024-03-23 01:32:55 -06:00
trentlarson	cc6d0958dc	Merge pull request 'fix: npm audit fix to resolve vulnerabilities 1 low, 3 moderate, 1 high' (#108 ) from jsnbuchanan/crowd-funder-for-time-pwa:master into master Reviewed-on: #108	2024-03-22 12:01:21 -04:00
Jason Buchanan	7ce00b86e8	deps: npm audit fix to resolve vulnerabilities 1 low, 3 moderate, 1 high There are still 9 moderate severity vulnerabilities, but I will work on those independentally because they may involve updating to library version that have breaking changes.	2024-03-22 09:29:42 -06:00