📀 Add own local storage implementation (#848)

* Add own implementation

* Create local-storage-implementation.md

* Fix lint

* Update packages/core/src/constants/type/Config.ts

Co-authored-by: Przemyslaw Rzad <przemyslaw.rzad@trusttoken.com>

* Add localStorageObject

* Add local storage improvement

* Update packages/core/src/constants/type/Config.ts

Co-authored-by: Przemyslaw Rzad <przemyslaw.rzad@trusttoken.com>

* Remove neccessary localStorageItem

* Add own implementation

* Fix lint

* Create local-storage-implementation.md

* Update packages/core/src/constants/type/Config.ts

Co-authored-by: Przemyslaw Rzad <przemyslaw.rzad@trusttoken.com>

* Add localStorageObject

* Add local storage improvement

* Update packages/core/src/constants/type/Config.ts

Co-authored-by: Przemyslaw Rzad <przemyslaw.rzad@trusttoken.com>

* Remove neccessary localStorageItem

* Some changes

* Some changes

* Linting

* Remove unnecessary if statement

* Some changes

* Update packages/core/src/hooks/useLocalStorage.ts

* Remove unnecessary if statement

* Add custom localStorage

* Remove unnecessary if statement

* Refactor LocalStorage class

Co-authored-by: mj426382 <mateusz.jandula@trusttoken.com>
Co-authored-by: Przemyslaw Rzad <przemyslaw.rzad@trusttoken.com>
Co-authored-by: Jakub Sieczczyński <j.sieczczynski@gmail.com>

.changeset/local-storage-implementation.md

@@ -0,0 +1,5 @@
+---
+"@usedapp/core": patch
+---
+
+📀 Add own local storage implementation

packages/core/src/constants/type/Config.ts

@@ -93,6 +93,10 @@ export type FullConfig = {
    * Refresh standard calls each time the n-th block is mined.
    */
   refresh?: number | 'never' | 'everyBlock'
+  /**
+   * Optional Local storage override for use in environments like React Native
+   */
+  localStorageOverride?: WindowLocalStorage['localStorage']
 }
 
 /* eslint-disable @typescript-eslint/ban-types  */

packages/core/src/helpers/LocalStorage.ts

@@ -0,0 +1,33 @@
+export default class LocalStorage {
+  private data: { [key: string]: string } = {}
+  length = 0
+
+  clear() {
+    this.data = {}
+    this.length = 0
+  }
+
+  getItem(key: string): string | null {
+    const item: any = this.data[key]
+    return item || null
+  }
+
+  key(index: number): string | null {
+    const keys = Object.keys(this.data)
+    return keys[index] || null
+  }
+
+  removeItem(key: string): void {
+    if (this.data[key]) {
+      delete this.data[key]
+      this.length--
+    }
+  }
+
+  setItem(key: string, value: string): void {
+    if (!this.data[key]) {
+      this.length++
+    }
+    this.data[key] = value
+  }
+}

packages/core/src/hooks/useLocalStorage.ts

@@ -1,11 +1,9 @@
 import { useEffect, useState } from 'react'
+import LocalStorage from '../helpers/LocalStorage'
+import { useConfig } from './useConfig'
 
-function getItem(key: string) {
-  if (typeof window === 'undefined') {
-    return null
-  }
-
-  const item = window.localStorage.getItem(key)
+function getItem(key: string, storage: WindowLocalStorage['localStorage']) {
+  const item = storage.getItem(key)
   if (item !== null) {
     try {
       return JSON.parse(item)
@@ -15,12 +13,12 @@ function getItem(key: string) {
   }
 }
 
-function setItem(key: string, value: any) {
+function setItem(key: string, value: any, storage: WindowLocalStorage['localStorage']) {
   if (value === undefined) {
-    window.localStorage.removeItem(key)
+    storage.removeItem(key)
   } else {
     const toStore = JSON.stringify(value)
-    window.localStorage.setItem(key, toStore)
+    storage.setItem(key, toStore)
     return JSON.parse(toStore)
   }
 }
@@ -29,17 +27,21 @@ function setItem(key: string, value: any) {
  * @internal Intended for internal use - use it on your own risk
  */
 export function useLocalStorage(key: string) {
-  const [value, setValue] = useState(() => getItem(key))
+  const {
+    localStorageOverride = typeof window !== 'undefined' ? window.localStorage : new LocalStorage(),
+  } = useConfig()
+
+  const [value, setValue] = useState(() => getItem(key, localStorageOverride))
 
   useEffect(() => {
-    setValue(getItem(key))
+    setValue(getItem(key, localStorageOverride))
   }, [key])
 
   useEffect(() => {
-    setItem(key, value)
+    setItem(key, value, localStorageOverride)
   }, [value])
 
-  // As value updating relies on useEffect, it takes mutliple rerenders to fully update the value.
-  // The third elemnt in the return array allows to get the immediate value stored in the localStorage.
-  return [value, setValue, () => getItem(key)] as const
+  // As value updating relies on useEffect, it takes multiple rerenders to fully update the value.
+  // The third element in the return array allows to get the immediate value stored in the localStorage.
+  return [value, setValue, () => getItem(key, localStorageOverride)] as const
 }