react-web3-storage 1.0.1

package/config.js

@@ -0,0 +1,39 @@
+import { bsc } from '@reown/appkit/networks'
+import networkTest from './src/network-test'
+
+const blockChainsData = [
+  {
+    network: networkTest,
+    name: 'unknown',
+    token: '0x5FbDB2315678afecb367f032d93F642f64180aa3',
+    receiver: '0xcbEAF3BDe82155F56486Fb5a1072cb8baAf547cc',
+    publicRpc: 'http://192.168.50.246:8545'
+  }
+]
+  .filter(({ name }) => name === 'unknown' ? process.env.NODE_ENV === 'development' : true)
+  .filter(({ token, receiver }) => token && receiver)
+
+const config = {
+  networks: blockChainsData.map(({ network }) => network),
+  blockChainsData,
+  metadata: {
+    name: 'React Web3 Storage',
+    description: 'Example DApp with React Web3 Storage',
+    url: 'https://prohetamine.github.io/react-web3-storage/',
+    icons: ['https://prohetamine.github.io/react-web3-storage/icon.svg']
+  },
+  projectId: '1febfd92481d4ea997711d2ac4a363c0',
+  address: blockChainsData.reduce((ctx, { name, token, receiver }) => {
+    ctx[name] = {
+      token,
+      receiver
+    }
+    return ctx
+  }, {}),
+  ABI: {
+    token: [{"inputs":[{"internalType":"string","name":"_name","type":"string"},{"internalType":"string","name":"_symbol","type":"string"},{"internalType":"uint256","name":"_initialSupply","type":"uint256"}],"stateMutability":"nonpayable","type":"constructor"},{"inputs":[{"internalType":"address","name":"spender","type":"address"},{"internalType":"uint256","name":"allowance","type":"uint256"},{"internalType":"uint256","name":"needed","type":"uint256"}],"name":"ERC20InsufficientAllowance","type":"error"},{"inputs":[{"internalType":"address","name":"sender","type":"address"},{"internalType":"uint256","name":"balance","type":"uint256"},{"internalType":"uint256","name":"needed","type":"uint256"}],"name":"ERC20InsufficientBalance","type":"error"},{"inputs":[{"internalType":"address","name":"approver","type":"address"}],"name":"ERC20InvalidApprover","type":"error"},{"inputs":[{"internalType":"address","name":"receiver","type":"address"}],"name":"ERC20InvalidReceiver","type":"error"},{"inputs":[{"internalType":"address","name":"sender","type":"address"}],"name":"ERC20InvalidSender","type":"error"},{"inputs":[{"internalType":"address","name":"spender","type":"address"}],"name":"ERC20InvalidSpender","type":"error"},{"inputs":[{"internalType":"address","name":"owner","type":"address"}],"name":"OwnableInvalidOwner","type":"error"},{"inputs":[{"internalType":"address","name":"account","type":"address"}],"name":"OwnableUnauthorizedAccount","type":"error"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"owner","type":"address"},{"indexed":true,"internalType":"address","name":"spender","type":"address"},{"indexed":false,"internalType":"uint256","name":"value","type":"uint256"}],"name":"Approval","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"previousOwner","type":"address"},{"indexed":true,"internalType":"address","name":"newOwner","type":"address"}],"name":"OwnershipTransferred","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"address","name":"from","type":"address"},{"indexed":true,"internalType":"address","name":"to","type":"address"},{"indexed":false,"internalType":"uint256","name":"value","type":"uint256"}],"name":"Transfer","type":"event"},{"inputs":[],"name":"_owner","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"owner","type":"address"},{"internalType":"address","name":"spender","type":"address"}],"name":"allowance","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"spender","type":"address"},{"internalType":"uint256","name":"value","type":"uint256"}],"name":"approve","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"account","type":"address"}],"name":"balanceOf","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"decimals","outputs":[{"internalType":"uint8","name":"","type":"uint8"}],"stateMutability":"pure","type":"function"},{"inputs":[],"name":"name","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"owner","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"renounceOwnership","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[],"name":"symbol","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"totalSupply","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"to","type":"address"},{"internalType":"uint256","name":"value","type":"uint256"}],"name":"transfer","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"from","type":"address"},{"internalType":"address","name":"to","type":"address"},{"internalType":"uint256","name":"value","type":"uint256"}],"name":"transferFrom","outputs":[{"internalType":"bool","name":"","type":"bool"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"newOwner","type":"address"}],"name":"transferOwnership","outputs":[],"stateMutability":"nonpayable","type":"function"}],
+    receiver: [{"inputs":[{"internalType":"address","name":"_allowedToken","type":"address"},{"internalType":"uint256","name":"_priceRatio","type":"uint256"}],"stateMutability":"nonpayable","type":"constructor"},{"inputs":[{"internalType":"uint256","name":"value","type":"uint256"},{"internalType":"uint256","name":"length","type":"uint256"}],"name":"StringsInsufficientHexLength","type":"error"},{"inputs":[{"internalType":"uint256","name":"_priceRatio","type":"uint256"},{"internalType":"string","name":"text","type":"string"}],"name":"mathPrice","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"pure","type":"function"},{"inputs":[{"internalType":"string","name":"id","type":"string"}],"name":"privateRead","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"token","type":"address"},{"internalType":"uint256","name":"amount","type":"uint256"},{"internalType":"string","name":"id","type":"string"},{"internalType":"string","name":"text","type":"string"}],"name":"privateWrite","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"string","name":"id","type":"string"},{"internalType":"address","name":"_address","type":"address"}],"name":"publicRead","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"token","type":"address"},{"internalType":"uint256","name":"amount","type":"uint256"},{"internalType":"string","name":"id","type":"string"},{"internalType":"string","name":"text","type":"string"}],"name":"publicWrite","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"string","name":"id","type":"string"},{"internalType":"string","name":"index","type":"string"}],"name":"tableRowRead","outputs":[{"internalType":"string","name":"","type":"string"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"address","name":"token","type":"address"},{"internalType":"uint256","name":"amount","type":"uint256"},{"internalType":"string","name":"id","type":"string"},{"internalType":"string","name":"index","type":"string"},{"internalType":"string","name":"text","type":"string"}],"name":"tableRowUpdate","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"token","type":"address"},{"internalType":"uint256","name":"amount","type":"uint256"},{"internalType":"string","name":"id","type":"string"},{"internalType":"string","name":"text","type":"string"}],"name":"tableRowWrite","outputs":[],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"string","name":"id","type":"string"}],"name":"tableRowsCount","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"}]
+  }
+}
+
+export default config

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "react-web3-storage",
+  "version": "1.0.1",
+  "description": "Simple web3 storage for react dapp",
+  "main": "src/index.js",
+  "author": "Stas Prohetamine",
+  "license": "ISC",
+  "dependencies": {
+    "promise-queue": "^2.2.5",
+    "sleep-promise": "^9.1.0"
+  },
+  "peerDependencies": {
+    "@reown/appkit": "^1.8.16",
+    "@reown/appkit-adapter-ethers": "^1.8.16",
+    "ethers": "^6.16.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.5.1",
+    "@reown/appkit": "^1.8.16",
+    "@reown/appkit-adapter-ethers": "^1.8.16",
+    "ethers": "^6.16.0"
+  }
+}

package/readme.md

@@ -0,0 +1,22 @@
+const [state, setState, updateState] = Web3.usePrivateStorage("id", "default value") // записывает сам и читает сам по своему адресу
+[address+_+id] = string
+- - - - - - 
+const [state, setState, updateState] = Web3.useStorage("id", "default value") // записывает сам
+const [state] = Web3.useReadStorage("id", "address") // Читать могут все по его адресу (без указания адреса читается по адресу запросившего)
+[address+_+id] = string
+- - - - - - 
+const [items, addItem, updateItem] = Web3.useTableStorage("id", 0, 10, true) // Писать могут все (1, 2, аргуменьы начала чтения и конца, можно не указывать, 3 учитывать ли удаленные) пустая строка считается удалением, addItem вернет index созданной записи, редактировать может автор
+[index+_+id] = { string, address }
+
+[{
+    index: '1234',
+    address: '0x0000...',
+    text: 'lol',
+    hasEdit: false
+}, {
+    index: '1234',
+    address: '0x0000...',
+    text: 'lol',
+    hasEdit: true
+}]
+- - - - - - 

package/src/index.js

@@ -0,0 +1,15 @@
+import Provider from './provider.js'
+import usePrivateStorage from './use-private-storage.js'
+import useStorage from './use-storage.js'
+import useReadStorage from './use-read-storage.js'
+import useTableStorage from './use-table-storage.js'
+import useApp from './use-app.js'
+
+export { 
+    Provider,
+    usePrivateStorage,
+    useStorage,
+    useReadStorage,
+    useTableStorage,
+    useApp 
+}

package/src/network-test.js

@@ -0,0 +1,14 @@
+import { defineChain } from '@reown/appkit/networks'
+
+const networkTest = defineChain({
+  id: 31337,
+  chainNamespace: "eip155",
+  name: "networkTest",
+  rpcUrls: {
+    default: {
+      http: ["http://192.168.50.246:8545"],
+    }
+  }
+})
+
+export default networkTest

package/src/provider.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { createAppKit, AppKitProvider } from '@reown/appkit/react'
+import { EthersAdapter } from '@reown/appkit-adapter-ethers'
+
+import config from '../config.js'
+
+    createAppKit({
+      projectId: config.projectId,
+      adapters: [new EthersAdapter()],
+      networks: config.networks,
+      metadata: config.metadata
+    })
+  
+
+const Provider = ({ children, config }) => {
+  return AppKitProvider({ children, ...config })
+}
+
+export default Provider

package/src/use-app.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { useAppKit, useAppKitAccount } from '@reown/appkit/react'
+
+const useApp = () => {
+    const { open } = useAppKit()
+        , { address, isConnected } = useAppKitAccount({ namespace: 'eip155' })
+    
+    return [isConnected, open, address]
+}
+
+export default useApp

package/src/use-private-storage.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import { useAppKit, useAppKitAccount, useAppKitProvider } from '@reown/appkit/react'
+import { BrowserProvider, Contract } from 'ethers'
+import config from '../config.js'
+import { useEffect, useState } from 'react'
+import Queue from 'promise-queue'
+
+if (!window.GOBAL_PROMISE_QUEUE_WEB3_STORAGE) {
+    window.GOBAL_PROMISE_QUEUE_WEB3_STORAGE = new Queue(1, Infinity)
+}
+
+const usePrivateStorage = (_id, value = '') => {
+    const { open } = useAppKit()
+        , { address, isConnected } = useAppKitAccount({ namespace: 'eip155' })
+        , { walletProvider } = useAppKitProvider('eip155')
+
+    const [data, setData] = useState(value)
+    const [outcome, setOutcome] = useState({
+        type: 'connect',
+        msg: null
+    })
+
+    let id = `${location.host}-${_id}`
+
+    const createSignerPrivate = async () => {
+        try { 
+            if (!walletProvider || !address) {
+                open()
+                return
+            }
+            const provider = new BrowserProvider(walletProvider)
+            const network = await provider.getNetwork()
+            const signer = await provider.getSigner()
+            return [signer, network.name]
+        } catch (err) {
+            setOutcome({ type: 'error', msg: err })
+        }
+    }
+
+    const updateState = async (_state = false) => {
+        try {
+            setOutcome({ type: 'upload', msg: null })
+            const [signer, network] = await createSignerPrivate()
+            const _address = config.address[network]
+
+            const token = new Contract(_address.token, config.ABI.token, signer)
+                , receiver = new Contract(_address.receiver, config.ABI.receiver, signer)
+
+            const allowance = await token.allowance(address, _address.receiver)
+            const amount = 1
+
+            if (allowance < amount) {
+                const approveTx = await token.approve(_address.receiver, amount)
+                await approveTx.wait()
+            }
+            
+            const calcTx = await receiver.privateWrite(_address.token, amount, id, _state || data)
+            const { status } = await calcTx.wait()
+            if (status === 1) {
+                setOutcome({ type: 'uploaded', msg: null })
+                await read()
+            } else {
+                setOutcome({ type: 'error', msg: null })
+            }
+        } catch (err) {
+            setOutcome({ type: 'error', msg: err })
+        }
+    }
+
+    const _read = async () => {
+        try {
+            const [signer, network] = await createSignerPrivate()
+            const _address = config.address[network]
+            
+            const receiver = new Contract(_address.receiver, config.ABI.receiver, signer)
+            const text = await receiver.privateRead(id)
+            setData(text.toString())
+            return true
+        } catch (err) {
+            setOutcome({ type: 'error', msg: err })
+        }
+    }
+
+    const read = async () => {
+        setOutcome({ type: 'load', msg: null })
+        if (await _read()) {
+            setOutcome({ type: 'loaded', msg: null })
+        }
+    }
+
+    useEffect(() => {
+        if (isConnected) {
+            setOutcome({ type: 'connected', msg: null })
+            const timeId = setTimeout(() => 
+                window.GOBAL_PROMISE_QUEUE_WEB3_STORAGE.add(read)
+            , 1000)
+
+            return () => clearTimeout(timeId)
+        }
+    }, [isConnected])
+
+    return [data, setData, updateState, outcome]
+}
+
+export default usePrivateStorage

package/src/use-read-storage.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { useAppKit, useAppKitAccount, useAppKitProvider } from '@reown/appkit/react'
+import { BrowserProvider, Contract, Wallet, JsonRpcProvider } from 'ethers'
+import config from '../config.js'
+import { useEffect, useState } from 'react'
+import Queue from 'promise-queue'
+
+if (!window.GOBAL_PROMISE_QUEUE_WEB3_STORAGE) {
+    window.GOBAL_PROMISE_QUEUE_WEB3_STORAGE = new Queue(1, Infinity)
+}
+
+const useReadStorage = (_id, _address, value = '') => {
+    const { open } = useAppKit()
+        , { address, isConnected } = useAppKitAccount({ namespace: 'eip155' })
+        , { walletProvider } = useAppKitProvider('eip155')
+
+    const [data, setData] = useState(value)
+    const [outcome, setOutcome] = useState({
+        type: 'load',
+        msg: null
+    })
+
+    let id = `${location.host}-${_id}`
+
+    const createSignerPrivate = async () => {
+        try { 
+            if (!walletProvider || !address) {
+                open()
+                return
+            }
+            const provider = new BrowserProvider(walletProvider)
+            const network = await provider.getNetwork()
+            const signer = await provider.getSigner()
+            return [signer, network.name]
+        } catch (err) {
+            setOutcome({ type: 'error', msg: err })
+        }
+    }
+
+    const _read = async addr => {
+        try {
+            const [signer, network] = await createSignerPrivate()
+            const _address = config.address[network]
+            
+            const receiver = new Contract(_address.receiver, config.ABI.receiver, signer)
+            const text = await receiver.publicRead(id, addr || address)
+            setData(text.toString())
+            return true
+        } catch (err) {
+            setOutcome({ type: 'error', msg: err })
+        }
+    }
+
+    const _readPublic = async addr => {
+        try {
+            if (addr) {
+                const _wallet = Wallet.createRandom();
+                const { receiver: receiverAddress, publicRpc } = config.blockChainsData[0]
+
+                const provider = new JsonRpcProvider(publicRpc);
+                const wallet = new Wallet(_wallet.privateKey, provider);
+
+                const receiver = new Contract(receiverAddress, config.ABI.receiver, wallet)
+                const text = await receiver.publicRead(id, addr || address)
+                setData(text.toString())
+                return true
+            }
+            setOutcome({ type: 'error', msg: null })
+        } catch (err) {
+            setOutcome({ type: 'error', msg: err })
+        }
+    }
+
+    const read = async () => {
+        setOutcome({ type: 'load', msg: null })
+        if (isConnected) {
+            if (await _read(_address)) {
+                setOutcome({ type: 'loaded', msg: null })
+            }
+        } else {
+            if (await _readPublic(_address)) {
+                setOutcome({ type: 'loaded', msg: null })
+            }
+        }
+    }
+
+    useEffect(() => {
+        const timeId = setTimeout(() => 
+            window.GOBAL_PROMISE_QUEUE_WEB3_STORAGE.add(read)
+        , 1000)
+
+        return () => clearTimeout(timeId)
+    }, [isConnected, _address])
+
+    return [data, outcome]
+}
+
+export default useReadStorage

package/src/use-storage.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import { useAppKit, useAppKitAccount, useAppKitProvider } from '@reown/appkit/react'
+import { BrowserProvider, Contract } from 'ethers'
+import config from '../config.js'
+import { useEffect, useState } from 'react'
+import Queue from 'promise-queue'
+
+if (!window.GOBAL_PROMISE_QUEUE_WEB3_STORAGE) {
+    window.GOBAL_PROMISE_QUEUE_WEB3_STORAGE = new Queue(1, Infinity)
+}
+
+const useStorage = (_id, value = '') => {
+    const { open } = useAppKit()
+        , { address, isConnected } = useAppKitAccount({ namespace: 'eip155' })
+        , { walletProvider } = useAppKitProvider('eip155')
+
+    const [data, setData] = useState(value)
+    const [outcome, setOutcome] = useState({
+        type: 'connect',
+        msg: null
+    })
+
+    let id = `${location.host}-${_id}`
+
+    const createSignerPrivate = async () => {
+        try { 
+            if (!walletProvider || !address) {
+                open()
+                return
+            }
+            const provider = new BrowserProvider(walletProvider)
+            const network = await provider.getNetwork()
+            const signer = await provider.getSigner()
+            return [signer, network.name]
+        } catch (err) {
+            setOutcome({ type: 'error', msg: err })
+        }
+    }
+
+    const updateState = async (_data = false) => {
+        try {
+            setOutcome({ type: 'upload', msg: null })
+            const [signer, network] = await createSignerPrivate()
+            const _address = config.address[network]
+
+            const token = new Contract(_address.token, config.ABI.token, signer)
+                , receiver = new Contract(_address.receiver, config.ABI.receiver, signer)
+
+            const allowance = await token.allowance(address, _address.receiver)
+            const amount = 1
+
+            if (allowance < amount) {
+                const approveTx = await token.approve(_address.receiver, amount)
+                await approveTx.wait()
+            }
+            
+            const calcTx = await receiver.publicWrite(_address.token, amount, id, _data || data)
+            const { status } = await calcTx.wait()
+            if (status === 1) {
+                setOutcome({ type: 'uploaded', msg: null })
+                window.GOBAL_PROMISE_QUEUE_WEB3_STORAGE.add(read)
+            } else {
+                setOutcome({ type: 'error', msg: null })
+            }
+        } catch (err) {
+            setOutcome({ type: 'error', msg: err })
+        }
+    }
+
+    const _read = async () => {
+        try {
+            const [signer, network] = await createSignerPrivate()
+            const _address = config.address[network]
+            
+            const receiver = new Contract(_address.receiver, config.ABI.receiver, signer)
+            const text = await receiver.publicRead(id, address)
+            setData(text.toString())
+            return true
+        } catch (err) {
+            setOutcome({ type: 'error', msg: err })
+        }
+    }
+
+    const read = async () => {
+        setOutcome({ type: 'load', msg: null })
+        if (await _read()) {
+            setOutcome({ type: 'loaded', msg: null })
+        }
+    }
+
+    useEffect(() => {
+        if (isConnected) {
+            setOutcome({ type: 'connected', msg: null })
+            const timeId = setTimeout(() =>
+                window.GOBAL_PROMISE_QUEUE_WEB3_STORAGE.add(read)
+            , 1000)
+
+            return () => clearTimeout(timeId)
+        }
+    }, [isConnected])
+
+    return [data, setData, updateState, outcome]
+}
+
+export default useStorage

package/src/use-table-storage.js

@@ -0,0 +1,248 @@
+import React from 'react';
+import { useAppKit, useAppKitAccount, useAppKitProvider } from '@reown/appkit/react'
+import { BrowserProvider, Contract, Wallet, JsonRpcProvider } from 'ethers'
+import config from '../config.js'
+import { useEffect, useState } from 'react'
+import sleep from 'sleep-promise'
+import Queue from 'promise-queue'
+
+if (!window.GOBAL_PROMISE_QUEUE_WEB3_STORAGE) {
+    window.GOBAL_PROMISE_QUEUE_WEB3_STORAGE = new Queue(1, Infinity)
+}
+
+const useTableStorage = (_id, _address) => {
+    const { open } = useAppKit()
+        , { address, isConnected } = useAppKitAccount({ namespace: 'eip155' })
+        , { walletProvider } = useAppKitProvider('eip155')
+
+    const [isFullLoad, setFullLoad] = useState(false)
+    const [updateItemIndex, setUpdateItemIndex] = useState(0)
+    const [lastIndex, setLastIndex] = useState(0)
+    const [items, setItems] = useState([])
+    const [outcome, setOutcome] = useState({
+        type: 'load',
+        msg: null
+    })
+
+    let id = `${location.host}-${_id}`
+
+    const createSignerPrivate = async () => {
+        if (!walletProvider || !address) {
+            open()
+            return
+        }
+        const provider = new BrowserProvider(walletProvider)
+        const network = await provider.getNetwork()
+        const signer = await provider.getSigner()
+        return [signer, network.name]
+    }
+
+    const addItem = async text => {
+        try {
+            setOutcome({ type: 'upload', msg: null })
+            const [signer, network] = await createSignerPrivate()
+            const _address = config.address[network]
+
+            const token = new Contract(_address.token, config.ABI.token, signer)
+                , receiver = new Contract(_address.receiver, config.ABI.receiver, signer)
+
+            const allowance = await token.allowance(address, _address.receiver)
+            const amount = 1
+
+            if (allowance < amount) {
+                const approveTx = await token.approve(_address.receiver, amount)
+                await approveTx.wait()
+            }
+            
+            const calcTx = await receiver.tableRowWrite(_address.token, amount, id, text)
+            const { status } = await calcTx.wait()
+            if (status === 1) {
+                setOutcome({ type: 'uploaded', msg: null })
+                await readRowsCount()
+            } else {
+                setOutcome({ type: 'error', msg: null })
+            }
+        } catch (err) {
+            setOutcome({ type: 'error', msg: err })
+        }
+    }
+
+    const updateItem = async (index, text) => {
+        try {
+            setOutcome({ type: 'upload', msg: null })
+            const [signer, network] = await createSignerPrivate()
+            const _address = config.address[network]
+
+            const token = new Contract(_address.token, config.ABI.token, signer)
+                , receiver = new Contract(_address.receiver, config.ABI.receiver, signer)
+
+            const allowance = await token.allowance(address, _address.receiver)
+            const amount = 1
+
+            if (allowance < amount) {
+                const approveTx = await token.approve(_address.receiver, amount)
+                await approveTx.wait()
+            }
+            
+            const calcTx = await receiver.tableRowUpdate(_address.token, amount, id, index, text)
+            const { status } = await calcTx.wait()
+            if (status === 1) {
+                setOutcome({ type: 'uploaded', msg: null })
+                window.GOBAL_PROMISE_QUEUE_WEB3_STORAGE.add(readRowsCount)
+                setUpdateItemIndex(index)
+            } else {
+                setOutcome({ type: 'error', msg: null })
+            }
+        } catch (err) {
+            setOutcome({ type: 'error', msg: err })
+        }
+    }
+    
+    const _readRowsCount = async () => {
+        try {
+            const [signer, network] = await createSignerPrivate()
+            const _address = config.address[network]
+            
+            const receiver = new Contract(_address.receiver, config.ABI.receiver, signer)
+            const text = await receiver.tableRowsCount(id)
+            setLastIndex(parseInt(text.toString()))
+            return true
+        } catch (err) {}
+    }
+
+    const _readRowsCountPublic = async () => {
+        try {
+            const _wallet = Wallet.createRandom();
+            const { receiver: receiverAddress, publicRpc } = config.blockChainsData[0]
+
+            const provider = new JsonRpcProvider(publicRpc);
+            const wallet = new Wallet(_wallet.privateKey, provider);
+
+            const receiver = new Contract(receiverAddress, config.ABI.receiver, wallet)
+            const text = await receiver.tableRowsCount(id)
+            setLastIndex(parseInt(text.toString()))
+            return true
+        } catch (err) {}
+    }
+
+    const readRowsCount = async () => {
+        if (isConnected) {
+            await _readRowsCount()
+        } else {
+            await _readRowsCountPublic()
+        }
+    }
+
+    const _tableRowRead = async x => {
+        for (let r = 0; r < 100; r++) {
+            try {
+                const [signer, network] = await createSignerPrivate()
+                const _address = config.address[network]
+                const receiver = new Contract(_address.receiver, config.ABI.receiver, signer)
+                const text = await receiver.tableRowRead(id, x.toString())
+
+                let item = null 
+                
+                try {
+                    item = JSON.parse(text.toString())
+                } catch (e) {}
+
+                if (item) {
+                    setItems(items => [...items.filter(_item => _item.index !== item.index), { ...item, isDelete: item.text === '', hasEdit: address.toLowerCase() === item.address }].sort((a, b) => a.index - b.index))
+                    await sleep(1)
+                }
+                return
+            } catch (e) {}
+        }
+    }
+
+    const _publicTableRowRead = async x => {
+        for (let r = 0; r < 100; r++) {
+            try {
+                const _wallet = Wallet.createRandom();
+                const { receiver: receiverAddress, publicRpc } = config.blockChainsData[0]
+
+                const provider = new JsonRpcProvider(publicRpc);
+                const wallet = new Wallet(_wallet.privateKey, provider);
+
+                const receiver = new Contract(receiverAddress, config.ABI.receiver, wallet)
+                const text = await receiver.tableRowRead(id, x.toString())
+
+                let item = null 
+                
+                try {
+                    item = JSON.parse(text.toString())
+                } catch (e) {}
+
+                if (item) {
+                    setItems(items => [...items.filter(_item => _item.index !== item.index), { ...item, isDelete: item.text === '', hasEdit: false }].sort((a, b) => a.index - b.index))
+                    await sleep(1)
+                }
+                return
+            } catch (e) {}
+        }
+    }
+
+    const tableRowRead = async x => {
+        if (isConnected) {
+            await _tableRowRead(x)
+        } else {
+            await _publicTableRowRead(x)
+        }
+    }
+
+    useEffect(() => {
+        const timeId = setInterval(() => 
+            window.GOBAL_PROMISE_QUEUE_WEB3_STORAGE.add(readRowsCount)
+        , 1000)
+        return () => clearTimeout(timeId)
+    }, [isConnected])
+
+    useEffect(() => {
+      if (lastIndex !== 0) {
+        const timeId = setTimeout(async () => {
+            const loadCount = isFullLoad ? lastIndex - 5 : -1
+
+            window.GOBAL_PROMISE_QUEUE_WEB3_STORAGE.add(() => tableRowRead(updateItemIndex))
+
+            for (let x = lastIndex; x > loadCount; x--) {
+                window.GOBAL_PROMISE_QUEUE_WEB3_STORAGE.add(() => tableRowRead(x))
+                await sleep(1)
+            }
+        }, 1000)
+
+        const intervalId = setInterval(() => {
+            if (isFullLoad && window.GOBAL_PROMISE_QUEUE_WEB3_STORAGE.queue.length === 0) {
+                const randomItemIndex = parseInt(lastIndex * Math.random())
+                window.GOBAL_PROMISE_QUEUE_WEB3_STORAGE.add(() => tableRowRead(randomItemIndex))
+            }
+        }, 5000)
+
+        return () => {
+            clearTimeout(timeId)
+            clearInterval(intervalId)
+        }
+      }
+    }, [isConnected, id, lastIndex, updateItemIndex, address, isFullLoad])
+
+    useEffect(() => {
+        if (items.length === lastIndex && lastIndex !== 0) {
+            setOutcome({ type: 'loaded', msg: null })
+            setFullLoad(true)
+        }
+    }, [items])
+
+    useEffect(() => {
+        const timeId = setTimeout(() => {
+            if (lastIndex === 0) {
+                setOutcome({ type: 'loaded', msg: null })
+            }
+        }, 5000)
+
+        return () => clearTimeout(timeId)
+    }, [lastIndex, updateItemIndex])
+
+    return [items, addItem, updateItem, outcome]
+}
+
+export default useTableStorage

package/src/web3-storage.sol

@@ -0,0 +1,198 @@
+// SPDX-License-Identifier: MIT
+pragma solidity ^0.8.20;
+import "@openzeppelin/contracts/utils/Strings.sol";
+
+interface IERC20 {
+    function transferFrom(address from, address to, uint256 amount) external returns (bool);
+}
+
+contract Fun {
+    using Strings for address;
+    using Strings for uint256;
+
+    function makeAddressString(address user, string memory id) internal pure returns (string memory) {
+        return string(
+            abi.encodePacked(
+                user.toHexString(),
+                "_",
+                id
+            )
+        );
+    }
+
+    function makeString(string memory index, string memory id) internal pure returns (string memory) {
+        return string(
+            abi.encodePacked(
+                index,
+                "_",
+                id
+            )
+        );
+    }
+
+    function toJson(address user, string memory index, string memory text) internal pure returns (string memory) {
+        return string(
+            abi.encodePacked(
+                '{',
+                    "\"index\":\"",index,"\",",
+                    "\"address\":\"",user.toHexString(),"\",",
+                    "\"text\":\"",text,"\"",
+                '}'
+            )
+        );
+    }
+
+    function uintToString(uint256 value) internal pure returns (string memory) {
+        return value.toString();
+    }
+
+    function mathPrice(uint256 _priceRatio, string memory text) public pure returns (uint256) {
+        uint256 length = bytes(text).length;
+        uint256 units = (length + 9) / 10;
+        return _priceRatio * units;
+    }
+}
+
+contract Storage is Fun {
+    address internal owner;
+    address internal allowedToken;
+    uint256 internal priceRatio = 0;
+
+    mapping(string => string) internal privateFields;
+    mapping(string => string) internal publicFields;
+    mapping(string => string) internal tableFields;
+    mapping(string => uint256) internal tableIndexs;
+
+    constructor(address _allowedToken, uint256 _priceRatio) {
+        owner = msg.sender;
+        allowedToken = _allowedToken;
+        priceRatio = _priceRatio; // default 0
+    }
+
+    function tableRowWrite(
+        address token, 
+        uint256 amount,
+        string memory id,
+        string memory text
+    ) public {
+        require(bytes(text).length <= 10000, "text value too much");
+
+        uint256 price = mathPrice(priceRatio, text);
+
+        if (priceRatio > 0) {
+            require(amount == price, "You can't pay with a larger amount");
+            require(token == allowedToken, "Accepts payment in official token only");
+        }
+        
+        string memory index = uintToString(tableIndexs[id]);
+        tableFields[makeString(index, id)] = toJson(msg.sender, index, text);
+        tableIndexs[id] += 1;
+
+        if (priceRatio == 0) return;
+
+        IERC20(token).transferFrom(
+            msg.sender,
+            owner,
+            amount
+        );
+    }
+
+    function tableRowUpdate(
+        address token, 
+        uint256 amount,
+        string memory id,
+        string memory index,
+        string memory text
+    ) public {
+        require(bytes(text).length <= 10000, "text value too much");
+
+        uint256 price = mathPrice(priceRatio, text);
+
+        if (priceRatio > 0) {
+            require(amount == price, "You can't pay with a larger amount");
+            require(token == allowedToken, "Accepts payment in official token only");
+        }
+        
+        tableFields[makeString(index, id)] = toJson(msg.sender, index, text);
+
+        if (priceRatio == 0) return;
+
+        IERC20(token).transferFrom(
+            msg.sender,
+            owner,
+            amount
+        );
+    }
+
+    function privateWrite(
+        address token, 
+        uint256 amount,
+        string memory id,
+        string memory text
+    ) public {
+        require(bytes(text).length <= 10000, "text value too much");
+
+        uint256 price = mathPrice(priceRatio, text);
+
+        if (priceRatio > 0) {
+            require(amount == price, "You can't pay with a larger amount");
+            require(token == allowedToken, "Accepts payment in official token only");
+        }
+        
+        privateFields[makeAddressString(msg.sender, id)] = text;
+
+        if (priceRatio == 0) return;
+
+        IERC20(token).transferFrom(
+            msg.sender,
+            owner,
+            amount
+        );
+    }
+
+    function publicWrite(
+        address token, 
+        uint256 amount,
+        string memory id,
+        string memory text
+    ) public {
+        require(bytes(text).length <= 10000, "text value too much");
+
+        uint256 price = mathPrice(priceRatio, text);
+
+        if (priceRatio > 0) {
+            require(amount == price, "You can't pay with a larger amount");
+            require(token == allowedToken, "Accepts payment in official token only");
+        }
+        
+        publicFields[makeAddressString(msg.sender, id)] = text;
+
+        if (priceRatio == 0) return;
+
+        IERC20(token).transferFrom(
+            msg.sender,
+            owner,
+            amount
+        );
+    }
+
+    function tableRowRead(string memory id, string memory index) view public returns (string memory) {
+        return tableFields[makeString(index, id)];
+    }
+
+    function tableRowsCount(string memory id) view public returns (uint256) {
+        return tableIndexs[id];
+    }
+
+    function privateRead(string memory id) view public returns (string memory) {
+        return privateFields[makeAddressString(msg.sender, id)];
+    }
+
+    function publicRead(string memory id, address _address) view public returns (string memory) {
+        address sender = msg.sender;
+        if (_address != address(0)) {
+            sender = _address;
+        }
+        return publicFields[makeAddressString(sender, id)];
+    }
+}