storage: using newer more correct scheme for storage and adding one time wipe

pkg/grid/.env

@@ -0,0 +1,2 @@
+# Change manually to clear local storage once
+VITE_LAST_WIPE=2021-10-20

pkg/grid/.gitignore

@@ -5,5 +5,4 @@ dist-ssr
 *.local
 stats.html
 .eslintcache
-.vercel
-.env
+.vercel

pkg/grid/package.json

@@ -52,7 +52,7 @@
     "@types/react-router-dom": "^5.1.8",
     "@typescript-eslint/eslint-plugin": "^4.26.1",
     "@typescript-eslint/parser": "^4.26.1",
-    "@urbit/vite-plugin-urbit": "^0.6.0",
+    "@urbit/vite-plugin-urbit": "^0.7.1",
     "@vitejs/plugin-react-refresh": "^1.3.1",
     "autoprefixer": "^10.3.7",
     "eslint": "^7.28.0",

pkg/grid/src/nav/search/Home.tsx

@@ -11,7 +11,12 @@ import { AppLink } from '../../components/AppLink';
 import { ShipName } from '../../components/ShipName';
 import { ProviderLink } from '../../components/ProviderLink';
 import useDocketState, { ChargesWithDesks, useCharges } from '../../state/docket';
-import { getAppHref } from '../../state/util';
+import {
+  clearStorageMigration,
+  createStorageKey,
+  getAppHref,
+  storageVersion
+} from '../../state/util';
 import useContactState from '../../state/contact';
 
 export interface RecentsStore {
@@ -61,8 +66,9 @@ export const useRecentsStore = create<RecentsStore>(
     }),
     {
       whitelist: ['recentApps', 'recentDevs'],
-      name: `${window.ship}-recents-store`,
-      version: import.meta.env.VITE_SHORTHASH as any
+      name: createStorageKey('recents-store'),
+      version: storageVersion,
+      migrate: clearStorageMigration
     }
   )
 );

pkg/grid/src/state/base.ts

@@ -7,7 +7,7 @@ import { persist } from 'zustand/middleware';
 import Urbit, { SubscriptionRequestInterface } from '@urbit/http-api';
 import { Poke } from '@urbit/api';
 import api from './api';
-import { createStorageKey, useMockData } from './util';
+import { clearStorageMigration, createStorageKey, storageVersion, useMockData } from './util';
 
 setAutoFreeze(false);
 enablePatches();
@@ -150,7 +150,8 @@ export const createState = <T extends Record<string, unknown>>(
       {
         blacklist,
         name: stateStorageKey(name),
-        version: parseInt(import.meta.env.VITE_STORAGE_VERSION, 10)
+        version: storageVersion,
+        migrate: clearStorageMigration
       }
     )
   );

pkg/grid/src/state/local.ts

@@ -1,6 +1,7 @@
 import create from 'zustand';
 import { persist } from 'zustand/middleware';
 import produce from 'immer';
+import { clearStorageMigration, createStorageKey, storageVersion } from './util';
 
 interface LocalState {
   protocolHandling: boolean;
@@ -16,7 +17,9 @@ export const useLocalState = create<LocalState>(
       protocolHandling: false
     }),
     {
-      name: 'grid-local'
+      name: createStorageKey('local'),
+      version: storageVersion,
+      migrate: clearStorageMigration
     }
   )
 );

pkg/grid/src/state/util.ts

@@ -52,5 +52,12 @@ export function getDarkColor(color: string): string {
 }
 
 export function createStorageKey(name: string): string {
-  return `${window.ship}-${window.desk}-${name}`;
+  return `~${window.ship}/${window.desk}/${name}`;
 }
+
+// for purging storage with version updates
+export function clearStorageMigration<T>() {
+  return {} as T;
+}
+
+export const storageVersion = parseInt(import.meta.env.VITE_STORAGE_VERSION, 10);

pkg/grid/src/storage-wipe.ts

@@ -3,6 +3,9 @@ import { createStorageKey } from './state/util';
 const key = createStorageKey(`storage-wipe-${import.meta.env.VITE_LAST_WIPE}`);
 const wiped = localStorage.getItem(key);
 
+// Loaded before everything, this clears local storage just once.
+// Change VITE_LAST_WIPE in .env to date of wipe
+
 if (!wiped) {
   localStorage.clear();
   localStorage.setItem(key, 'true');

pkg/grid/vite.config.ts

@@ -30,6 +30,8 @@ export default ({ mode }) => {
             }
           },
     plugins:
-      mode === 'mock' ? [] : [urbitPlugin({ base: 'grid', target: SHIP_URL }), reactRefresh()]
+      mode === 'mock'
+        ? []
+        : [urbitPlugin({ base: 'grid', target: SHIP_URL, secure: false }), reactRefresh()]
   });
 };