support Arbitrum Nova

package.json

@@ -29,9 +29,9 @@
     "@vue/cli-plugin-eslint": "~4.5.7",
     "@vue/cli-service": "~4.5.7",
     "babel-eslint": "^10.1.0",
-    "ethfs-uploader": "^1.0.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "ethfs-uploader": "^1.1.8",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

src/App.vue

@@ -1,7 +1,10 @@
 <template>
   <div>
-    <w3q-tip v-if="!isMobile" style="width: 100vw" bgColor="#52DEFF" fontColor="#ffffff" fontSize="15px"/>
-    <w3q-tip v-else style="width: 100vw" bgColor="#52DEFF" fontColor="#ffffff" fontSize="12px"/>
+    <w3q-tip v-if="!isMobile" style="width: 100vw"
+             bgColor="#52DEFF" fontColor="#ffffff" fontSize="15px"
+             textContent="The webpage is generated by EVM on Arbitrum Nova"/>
+    <w3q-tip v-else style="width: 100vw" bgColor="#52DEFF" fontColor="#ffffff"
+             fontSize="12px" textContent="The webpage is generated by EVM on Arbitrum Nova"/>
 
     <div id="app">
       <el-container>

src/components/Wallet.vue

@@ -10,8 +10,6 @@
     <div v-else class="user">
       <div class="account">
         {{ this.accountShort }}
-        &nbsp;|&nbsp;
-        {{ this.networkId === 3334 ? "Galileo Testnet": "Mainnet" }}
       </div>
       <div class="favorite" @click.stop="goProfile"/>
     </div>
@@ -28,10 +26,12 @@ export class UnsupportedChainIdError extends Error {
   }
 }
 
-const chain = 3334;
+const chain = 421613;
 const chainID = `0x${chain.toString(16)}`;
-const nodes = ['https://galileo.web3q.io:8545']
-const explorers = [`https://explorer.galileo.web3q.io/`];
+// const nodes = ['https://nova.arbitrum.io/rpc']
+// const explorers = ['https://nova.arbiscan.io/'];
+const nodes = ['https://goerli-rollup.arbitrum.io/rpc/']
+const explorers = ['https://goerli-rollup-explorer.arbitrum.io/'];
 
 export default {
   name: "Wallet",
@@ -62,7 +62,7 @@ export default {
     ...mapActions(["setChainConfig", "setAccount"]),
     connectWallet() {
       if (!window.ethereum) {
-        this.$message.error('Can\'t setup the Web3Q network on metamask because window.ethereum is undefined');
+        this.$message.error('Can\'t setup the Arbitrum Nova network on metamask because window.ethereum is undefined');
         return;
       }
       this.login();
@@ -138,10 +138,10 @@ export default {
             params: [
               {
                 chainId: chainID,
-                chainName: 'Web3Q Galileo',
+                chainName: 'Arbitrum Nova',
                 nativeCurrency: {
-                  name: 'W3Q',
-                  symbol: 'W3Q',
+                  name: 'ETH',
+                  symbol: 'ETH',
                   decimals: 18,
                 },
                 rpcUrls: nodes,
@@ -160,7 +160,7 @@ export default {
           return false
         }
       } else {
-        this.$message.error('Can\'t setup the Web3Q network on metamask because window.ethereum is undefined');
+        this.$message.error('Can\'t setup the Arbitrum Nova network on metamask because window.ethereum is undefined');
         return false
       }
     },

src/components/w3q-deployer.vue

@@ -120,8 +120,8 @@ export default {
     },
     normalizeFiles (rawFile) {
       let chunkSize = 1;
-      if (rawFile.size > 475 * 1024) {
-        chunkSize = Math.ceil(rawFile.size / (475 * 1024));
+      if (rawFile.size > 24 * 1024 - 326) {
+        chunkSize = Math.ceil(rawFile.size / (24 * 1024 - 326));
       }
       const file = {
         name: rawFile.name,

src/page/Home.vue

@@ -2,7 +2,7 @@
   <div class="home">
     <img class="home-logo" src="../assets/home.png"/>
     <p class="title">
-      The File Hosting Service on Web3Q
+      The File Hosting Service on Arbitrum Nova
     </p>
     <w3q-deployer multiple :fileContract="contract" style="width: 500px"/>
   </div>

src/page/Profile.vue

@@ -329,6 +329,13 @@ export default {
   width: 190px;
   text-align: left;
 }
+a {
+  color: #2dce89;
+}
+a:hover {
+  color: #2dce8990;
+}
+
 .go-upload-list-item-delete {
   font-size: 20px;
   width: 30px;

src/store/state.js

@@ -1,8 +1,9 @@
-export const chains = [{
-  chainID: '0x14d',
-  FileBoxController:'0xCD469d20bc4da5F97DC350FDB02D6370559C9511',
+export const chains = [
+{
+  chainID: '0x66eed', // arb-gorli
+  FileBoxController:'0x50391dAD45F1974B0C4904d7388Fda37086c50E4',
 },
 {
-  chainID: '0xd06',
-  FileBoxController:'0x731Cd5311e9bAd1E99e7F1081A91a38c02b5F47d',
+  chainID: '0xa4ba', // nova
+  FileBoxController: '0x731Cd5311e9bAd1E99e7F1081A91a38c02b5F47d',
 }];

src/utils/profile.js

@@ -1,20 +1,26 @@
-import { FileContract } from "./request";
+import {ethers} from "ethers";
+import { FileContract, getGateway } from "./request";
+
+const hexToString = (h) => ethers.utils.toUtf8String(h);
 
 // contract
 export const getUploadByAddress = async (controller, address) => {
     const fileContract = FileContract(controller);
-    const result = await fileContract.getAuthorFiles(address);
+    const [chainId, fileFD, result] = await Promise.all([
+        window.ethereum.request({method: "eth_chainId"}),
+        fileContract.fileFD(),
+        fileContract.getAuthorFiles(address),
+    ]);
     const files = [];
     const times = result[0];
     const names = result[1];
     const types = result[2];
-    const urls = result[3];
-    for (let i = 0; i < urls.length; i++) {
+    for (let i = 0; i < names.length; i++) {
         const file = {
             time: new Date(parseInt(times[i], 10) * 1000),
             name: names[i],
             type: types[i],
-            url: urls[i],
+            url: getGateway(chainId, fileFD) + address + "/" + hexToString(names[i]),
             showProgress: false
         };
         files.push(file);

src/utils/request.js

@@ -8,7 +8,8 @@ const FileContractInfo = {
     "function removes(bytes[] memory names) public",
     "function countChunks(bytes memory name) external view returns (uint256)",
     "function getChunkHash(bytes memory name, uint256 chunkId) public view returns (bytes32)",
-    "function getAuthorFiles(address author) public view returns (uint256[] memory times,bytes[] memory names,bytes[] memory types,string[] memory urls)"
+    "function getAuthorFiles(address author) public view returns (uint256[] memory times,bytes[] memory names,bytes[] memory types)",
+    "function fileFD() public view returns (address)"
   ],
 };
 
@@ -20,6 +21,19 @@ export const FileContract = (address) => {
   return contract.connect(provider.getSigner());
 };
 
+export const getGateway = (chainId, fileFD) => {
+  // https://0xdc245a328fda8205846fad9e6421a27f7b07a912.arb-goerli.w3link.io/
+  switch (chainId) {
+    case "0xd06":
+      return "https://file.w3q.w3q-g.w3link.io/";
+    case "0x66eed":
+      return "https://" + fileFD + ".arb-goerli.w3link.io/";
+    case "0xa4ba":
+      return "https://" + fileFD + ".arb-nova.w3link.io/";
+  }
+  return "";
+}
+
 const readFile = (file) => {
   return new Promise((resolve) => {
     const reader = new FileReader();
@@ -90,12 +104,11 @@ const request = async ({
   const hexName = stringToHex(name);
   const hexType = stringToHex(rawFile.type);
   // Data need to be sliced if file > 475K
-  let fileSize = rawFile.size;
+  const fileSize = rawFile.size;
   let chunks = [];
-  if (fileSize > 475 * 1024) {
-    const chunkSize = Math.ceil(fileSize / (475 * 1024));
+  if (fileSize > 24 * 1024 - 326) {
+    const chunkSize = Math.ceil(fileSize / (24 * 1024 - 326));
     chunks = bufferChunk(content, chunkSize);
-    fileSize = fileSize / chunkSize;
   } else {
     chunks.push(content);
   }
@@ -110,10 +123,6 @@ const request = async ({
   let uploadState = true;
   for (const index in chunks) {
     const chunk = chunks[index];
-    let cost = 0;
-    if (fileSize > 24 * 1024 - 326) {
-      cost = Math.floor((fileSize + 326) / 1024 / 24);
-    }
     const hexData = '0x' + chunk.toString('hex');
     const localHash = '0x' + sha3(chunk);
     const hash = await fileContract.getChunkHash(hexName, index);
@@ -125,9 +134,7 @@ const request = async ({
 
     try {
       // file is remove or change
-      const tx = await fileContract.writeChunk(hexName, hexType, index, hexData, {
-        value: ethers.utils.parseEther(cost.toString())
-      });
+      const tx = await fileContract.writeChunk(hexName, hexType, index, hexData);
       console.log(`Transaction Id: ${tx.hash}`);
       const receipt = await tx.wait();
       if (!receipt.status) {
@@ -141,7 +148,11 @@ const request = async ({
     }
   }
   if (uploadState) {
-    const url = "https://galileo.web3q.io/file.w3q/" + account + "/" + name;
+    const [chainId, fileFD] = await Promise.all([
+      window.ethereum.request({method: "eth_chainId"}),
+      fileContract.fileFD(),
+    ]);
+    const url = getGateway(chainId, fileFD) + account + "/" + name;
     onSuccess({ path: url});
   } else {
     onError(new Error('upload request failed!'));

yarn.lock

@@ -4377,10 +4377,10 @@ ethers@^5.5.4:
     "@ethersproject/web" "5.5.1"
     "@ethersproject/wordlists" "5.5.0"
 
-ethfs-uploader@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmmirror.com/ethfs-uploader/-/ethfs-uploader-1.0.0.tgz#82a743cf37d207f1c29ab9f42b3fd8ef3de885ed"
-  integrity sha512-8zSkuAM8YLmr9wf6ApNtN8SUCcJVYOUE3fU829rxy+r8ndLK3t6U7bfR7cZwMm5NbV1ONv2MjIlbHyy7AIWOhg==
+ethfs-uploader@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.npmjs.org/ethfs-uploader/-/ethfs-uploader-1.1.8.tgz#d2c5491964b763958ac34367cc6883d3c8b040e7"
+  integrity sha512-YF+8pr1D74FT0YUni2oxckKXneURD1JPmfvLPEYjjVyu1tbuO6jDu2T2nwbqmtWk8iWYy28TV/Gy6jso87aTiw==
   dependencies:
     colors-cli "^1.0.28"
     eth-ens-namehash "^2.0.8"