Frontend: Store local data for different rounds separately

Issue #144
clrfund · Oct 18, 2020 · 1cb4f7d · 1cb4f7d
1 parent 4e1620e
commit 1cb4f7d
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 15 deletions.
diff --git a/vue-app/src/api/storage.ts b/vue-app/src/api/storage.ts
@@ -1,35 +1,37 @@
 import { sha256, encrypt, decrypt } from '@/utils/crypto'
-import { factory } from './core'
 
 function getFullStorageKey(
   accountId: string,
+  storageId: string,
   storageKey: string,
 ): string {
-  const factoryAddress = factory.address.toLowerCase()
+  storageId = storageId.toLowerCase()
   accountId = accountId.toLowerCase()
-  return sha256(`clrfund-${factoryAddress}-${accountId}-${storageKey}`)
+  return sha256(`clrfund-${storageId}-${accountId}-${storageKey}`)
 }
 
 function setItem(
   accountId: string,
   encryptionKey: string,
+  storageId: string,
   storageKey: string,
   value: string,
 ): void {
   const encryptedValue = encrypt(value, encryptionKey)
   window.localStorage.setItem(
-    getFullStorageKey(accountId, storageKey),
+    getFullStorageKey(accountId, storageId, storageKey),
     encryptedValue,
   )
 }
 
 function getItem(
   accountId: string,
   encryptionKey: string,
+  storageId: string,
   storageKey: string,
 ): string | null {
   const encryptedValue = window.localStorage.getItem(
-    getFullStorageKey(accountId, storageKey),
+    getFullStorageKey(accountId, storageId, storageKey),
   )
   const value = encryptedValue ? decrypt(encryptedValue, encryptionKey) : null
   return value

diff --git a/vue-app/src/components/Cart.vue b/vue-app/src/components/Cart.vue
@@ -73,10 +73,14 @@ import {
 const CART_STORAGE_KEY = 'cart'
 const CONTRIBUTOR_INFO_STORAGE_KEY = 'contributor-info'
 
-function loadContributorInfo(user: User): Contributor | null {
+function loadContributorInfo(
+  fundingRoundAddress: string,
+  user: User,
+): Contributor | null {
   const serializedData = storage.getItem(
     user.walletAddress,
     user.encryptionKey,
+    fundingRoundAddress,
     CONTRIBUTOR_INFO_STORAGE_KEY,
   )
   if (serializedData) {
@@ -91,14 +95,16 @@ function loadContributorInfo(user: User): Contributor | null {
 @Component({
   watch: {
     cart(items: CartItem[]) {
-      // Save cart to local storage on changes
       const currentUser = this.$store.state.currentUser
-      if (!currentUser) {
+      const currentRound = this.$store.state.currentRound
+      if (!currentUser || !currentRound) {
         return
       }
+      // Save cart to local storage on changes
       storage.setItem(
         currentUser.walletAddress,
         currentUser.encryptionKey,
+        currentRound.fundingRoundAddress,
         CART_STORAGE_KEY,
         JSON.stringify(items),
       )
@@ -108,16 +114,26 @@ function loadContributorInfo(user: User): Contributor | null {
 export default class Cart extends Vue {
 
   mounted() {
-    // Restore cart from local storage
+    // Reload cart when wallet account or round changes
     this.$store.watch(
-      (state) => state.currentUser?.walletAddress,
+      (state) => {
+        return (
+          state.currentUser?.walletAddress +
+          state.currentRound?.fundingRoundAddress
+        )
+      },
       this.refreshCart,
     )
     this.refreshCart()
 
-    // Restore contributor info from local storage
+    // Reload contributor info if wallet account of round changes
     this.$store.watch(
-      (state) => state.currentUser?.walletAddress,
+      (state) => {
+        return (
+          state.currentUser?.walletAddress +
+          state.currentRound?.fundingRoundAddress
+        )
+      },
       this.refreshContributor,
     )
     this.refreshContributor()
@@ -137,10 +153,15 @@ export default class Cart extends Vue {
       })
       return
     }
+    const currentRound = this.$store.state.currentRound
+    if (!currentRound) {
+      return
+    }
     // Load cart from local storage
     const serializedCart = storage.getItem(
       currentUser.walletAddress,
       currentUser.encryptionKey,
+      currentRound.fundingRoundAddress,
       CART_STORAGE_KEY,
     )
     if (serializedCart) {
@@ -157,8 +178,15 @@ export default class Cart extends Vue {
       this.$store.commit(SET_CONTRIBUTOR, null)
       return
     }
+    const currentRound = this.$store.state.currentRound
+    if (!currentRound) {
+      return
+    }
     // Load contributor info from local storage
-    const contributor = loadContributorInfo(currentUser)
+    const contributor = loadContributorInfo(
+      currentRound.fundingRoundAddress,
+      currentUser,
+    )
     if (contributor) {
       this.$store.commit(SET_CONTRIBUTOR, contributor)
     }

diff --git a/vue-app/src/components/ContributionModal.vue b/vue-app/src/components/ContributionModal.vue
@@ -51,14 +51,19 @@ import { FundingRound, ERC20, MACI } from '@/api/abi'
 
 const CONTRIBUTOR_INFO_STORAGE_KEY = 'contributor-info'
 
-function saveContributorInfo(user: User, contributor: Contributor) {
+function saveContributorInfo(
+  fundingRoundAddress: string,
+  user: User,
+  contributor: Contributor,
+) {
   const serializedData = JSON.stringify({
     privateKey: contributor.keypair.privKey.serialize(),
     stateIndex: contributor.stateIndex,
   })
   storage.setItem(
     user.walletAddress,
     user.encryptionKey,
+    fundingRoundAddress,
     CONTRIBUTOR_INFO_STORAGE_KEY,
     serializedData,
   )
@@ -125,7 +130,11 @@ export default class ContributionModal extends Vue {
       stateIndex: stateIndex.toNumber(),
     }
     // Save contributor info to storage
-    saveContributorInfo(this.$store.state.currentUser, contributor)
+    saveContributorInfo(
+      fundingRoundAddress,
+      this.$store.state.currentUser,
+      contributor,
+    )
     // Set contribution and update round info
     this.$store.commit(SET_CONTRIBUTOR, contributor)
     this.$store.commit(SET_CURRENT_USER, {