Merge pull request #1385 from Phala-Network/jssdk-format

JSSDK: formatting, linters, tests

Author: Leechael

.github/workflows/test-jssdk.yml

@@ -0,0 +1,34 @@
+name: CI for JS-SDK
+
+on:
+  push:
+    branches: [ master ]
+    paths:
+      - frontend/packages/sdk/**
+  pull_request:
+    paths:
+      - frontend/packages/sdk/**
+
+jobs:
+  test-jssdk:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./frontend/packages/sdk
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '18'
+          cache: yarn
+          cache-dependency-path: ./frontend/packages/sdk/yarn.lock
+      - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
+      - run: yarn install --frozen-lockfile --check-files
+      - name: Prettier
+        run: yarn prettier:ci
+      - name: Lint
+        run: yarn eslint:ci
+      - name: Type
+        run: yarn pretest
+      - name: Test
+        run: yarn test:ci

frontend/packages/sdk/.eslintignore

@@ -1,4 +1,5 @@
-**/proto/*
+proto/*
+**/*.d.ts
 dist
 esm
 protoWrapper.js

frontend/packages/sdk/.eslintrc

@@ -1,17 +1,120 @@
 {
   "env": {
-    "es2021": true,
     "browser": true,
-    "node": true
+    "shared-node-browser": true,
+    "node": true,
+    "es6": true
   },
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended"
+    "prettier",
+    "plugin:prettier/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings"
+  ],
+  "plugins": [
+    "@typescript-eslint",
+    "react",
+    "prettier",
+    "react-hooks",
+    "import",
+    "vitest"
   ],
   "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaversion": 2018,
+    "sourcetype": "module",
+    "ecmafeatures": {
+      "jsx": true
+    }
+  },
   "rules": {
-    "no-console": "error",
-    "@typescript-eslint/no-explicit-any": 0
-  }
+    "eqeqeq": "error",
+    "no-var": "error",
+    "prefer-const": "error",
+    "curly": ["warn", "multi-line", "consistent"],
+    "no-console": "off",
+    "import/no-unresolved": ["error", { "commonjs": true, "amd": true }],
+    "import/export": "error",
+    "import/no-duplicates": ["error"],
+    "@typescript-eslint/ban-ts-comment": "off",
+    "no-async-promise-executor": "off",
+    "no-prototype-builtins": "off",
+    "no-constant-condition": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
+    ],
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "vitest/consistent-test-it": [
+      "error",
+      { "fn": "it", "withinDescribe": "it" }
+    ],
+    "import/namespace": "off",
+    "import/named": "off",
+    "import/order": [
+      "error",
+      {
+        "alphabetize": { "order": "asc", "caseInsensitive": true },
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index",
+          "object"
+        ],
+        "newlines-between": "never",
+        "pathGroups": [
+          {
+            "pattern": "react",
+            "group": "builtin",
+            "position": "before"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["builtin"]
+      }
+    ],
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
+    "sort-imports": [
+      "error",
+      {
+        "ignoreDeclarationSort": true
+      }
+    ]
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    },
+    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
+    "import/parsers": {
+      "@typescript-eslint/parser": [".js", ".jsx", ".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "alias": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
+  "overrides": [
+    {
+      "files": ["tests/**/*.ts", "tests/**/*.tsx"],
+      "rules": {
+        "import/extensions": ["error", "never"]
+      }
+    },
+    {
+      "files": ["./*.js"],
+      "rules": {
+        "@typescript-eslint/no-var-requires": "off"
+      }
+    }
+  ]
 }

frontend/packages/sdk/.gitignore

@@ -1,4 +1,5 @@
 proto
+!/src/pruntime/proto/*
 node_modules
 dist
 !dist/.gitignore

frontend/packages/sdk/README.md

@@ -15,24 +15,28 @@ yarn add @phala/sdk
 You need create the `apiPromise` instance first, also the `OnChainRegistry` instance for the next:
 
 ```js
-import { ApiPromise, WsProvider, Keyring } from '@polkadot/api';
-import { options, OnChainRegistry, signCertificate, PinkContractPromise } from '@phala/sdk';
+import { ApiPromise, WsProvider, Keyring } from '@polkadot/api'
+import { options, OnChainRegistry, signCertificate, PinkContractPromise } from '@phala/sdk'
 
 const RPC_MAINNET_URL = 'wss://api.phala.network/ws'
 const RPC_TESTNET_URL = 'wss://poc5.phala.network/ws'
 
 async function main() {
-    const api = await ApiPromise.create(options({
-        provider: new WsProvider(RPC_TESTNET_URL),
-        noInitWarn: true,
-    }))
-    const phatRegistry = await OnChainRegistry.create(api)
+  const api = await ApiPromise.create(
+    options({
+      provider: new WsProvider(RPC_TESTNET_URL),
+      noInitWarn: true,
+    })
+  )
+  const phatRegistry = await OnChainRegistry.create(api)
 }
 
-main().then(() => process.exit(0)).catch(err => {
-  console.error(err)
-  process.exit(1)
-})
+main()
+  .then(() => process.exit(0))
+  .catch((err) => {
+    console.error(err)
+    process.exit(1)
+  })
 ```
 
 You might already upload and instantiate your Phat Contract, and you need prepare 3 things before go next:
@@ -47,38 +51,38 @@ You might already upload and instantiate your Phat Contract, and you need prepar
 We continue with `//Alice` in follow up code snippets, so all 3 things can be ready like:
 
 ```javascript
-const keyring = new Keyring({ type: 'sr25519' });
-const pair = keyring.addFromUri('//Alice');
-const contractId = '';
-const abi = JSON.parse(fs.readFileSync('./your_local_path/target/ink/metadata.json', 'utf-8'));
+const keyring = new Keyring({ type: 'sr25519' })
+const pair = keyring.addFromUri('//Alice')
+const contractId = ''
+const abi = JSON.parse(fs.readFileSync('./your_local_path/target/ink/metadata.json', 'utf-8'))
 ```
 
 Now let's initializing the `PinkContractPromise` instance first.
 
 ```javascript
-const contractKey = await phatRegistry.getContractKeyOrFail(contractId);
-const contract = new PinkContractPromise(api, phatRegistry, abi, contractId, contractKey);
+const contractKey = await phatRegistry.getContractKeyOrFail(contractId)
+const contract = new PinkContractPromise(api, phatRegistry, abi, contractId, contractKey)
 ```
 
 In the original version of polkadot.js, `tx` refer to the `write` operation and `query` refer to the `read` operation. But in Phat Contract, they got different concepts. **`tx` means on-chain operations, `query` means off-chain operations**. We recommended you put your computation logic in off-chain codes as much as possible.
 
 We also need sign a certificate when using Phat Contract. Unlike signing for a transaction, the certificate is reusable. We recommended you cache it for a period of time.
 
 ```javascript
-const cert = await signCertificate({ pair });
+const cert = await signCertificate({ pair })
 ```
 
 For off-chain computations (or `query` calls), we don't need set `gasLimit` and `storageDepositLimit` like what we did in the original polkadot contract, we use `cert` instead:
 
 ```javascript
 // (We perform the send from an account, here using Alice's address)
-const { gasRequired, storageDeposit, result, output } = await contract.query.methodName(pair.address, { cert });
+const { gasRequired, storageDeposit, result, output } = await contract.query.methodName(pair.address, { cert })
 ```
 
 For on-chain computations (or `tx` calls), you need estimate gas fee first. It's same as the original polkadot.js API Contract:
 
 ```javascript
-const incValue = 1;
+const incValue = 1
 
 const { gasRequired, storageDeposit } = await contract.query.inc(pair.address, { cert }, incValue)
 const options = {
@@ -90,7 +94,6 @@ await contract.tx.inc(options, incValue).signAndSend(pair, { nonce: -1 })
 
 And that is basic workaround with Phat Contract, it may cover almost all of your use scenarios.
 
-
 ## Adavantage Topics
 
 ### Sign Certificate with Browser Wallet Extensions
@@ -102,17 +105,17 @@ We have two ways interact with extensions.
 First one is the documented in the [polkadot{js} extension documentation](https://polkadot.js.org/docs/extension/cookbook):
 
 ```javascript
-import { web3Accounts, web3Enable, web3FromSource } from '@polkadot/extension-dapp';
+import { web3Accounts, web3Enable, web3FromSource } from '@polkadot/extension-dapp'
 
 // this call fires up the authorization popup
-const extensions = await web3Enable('My cool Phat Contract dApp');
+const extensions = await web3Enable('My cool Phat Contract dApp')
 
-const availableAccounts = await web3Accounts();
-const account = availableAccounts[0]; // assume you choice the first visible account.
-const injector = await web3FromSource(account.meta.source);
-const signer = injector.signer;
+const availableAccounts = await web3Accounts()
+const account = availableAccounts[0] // assume you choice the first visible account.
+const injector = await web3FromSource(account.meta.source)
+const signer = injector.signer
 
-const cert = await signCertificate({ signer, account });
+const cert = await signCertificate({ signer, account })
 ```
 
 The second one is less document but more progressive one. You can access the `window.injectedWeb3` object and inspect which Wallet Extension has been installed, let the user pick the one already in used, and interact with it directly.
@@ -121,15 +124,15 @@ The second one is less document but more progressive one. You can access the `wi
 // polkadot-js: the original polkadot-js extension
 // talisman: the Talisman extension
 // subwallet-js: the SubWallet extension
-const provider = 'polkadot-js';
+const provider = 'polkadot-js'
 
-const injector = window.injectedWeb3[provider];
-const extension = await injector.enable('My cool Phat Contract dApp');
-const accounts = await extension.accounts.get(true);
-const account = availableAccounts[0]; // assume you choice the first visible account.
-const signer = extension.signer;
+const injector = window.injectedWeb3[provider]
+const extension = await injector.enable('My cool Phat Contract dApp')
+const accounts = await extension.accounts.get(true)
+const account = availableAccounts[0] // assume you choice the first visible account.
+const signer = extension.signer
 
-const cert = await signCertificate({ signer, account });
+const cert = await signCertificate({ signer, account })
 ```
 
 ### Fetch Logs
@@ -163,7 +166,6 @@ Let said we have 70 records in logserver:
 
 You can check out a simple example (here)[https://github.com/Leechael/phat-contract-cli-upload/blob/main/tail.js]
 
-
 ### Retrieving Contract Information
 
 We divide into multiple scenarios.
@@ -173,7 +175,7 @@ We divide into multiple scenarios.
 You can fetch it from on-chain storage:
 
 ```javascript
-const contractKey = await this.api.query.phalaRegistry.contractKeys(contractId);
+const contractKey = await this.api.query.phalaRegistry.contractKeys(contractId)
 ```
 
 We also provides it with `OnChainRegistry`:
@@ -204,22 +206,18 @@ const { output } = await systemContract.query['system::codeExists']<Bool>(accoun
 const hasExists = output && output.isOk && output.asOk.isTrue
 ```
 
-
 ### Upload & Instantiate Contracts
 
 TODO
 
-
 ### Use specified Cluster & Worker
 
 TODO
 
-
 ### Cluster tokenomics & staking for computations
 
 TODO
 
-
 ## Experimental Features
 
 Some experimental features may change in the future, we will prefix the function name with `unstable_`.
@@ -238,7 +236,7 @@ import { privateKeyToAccount } from 'viem/accounts'
 import { etherAddressToCompactPubkey, unstable_signEip712Certificate } from '@phala/sdk'
 
 const account = privateKeyToAccount('<YOUR_PRIVATE_KEY>')
-const client = createTestClient({ account, chain: mainnet, mode: 'anvil', transport: http(), })
+const client = createTestClient({ account, chain: mainnet, mode: 'anvil', transport: http() })
 const compactPubkey = await etherAddressToCompactPubkey(client, account)
 const cert = await unstable_signEip712Certificate({ client, account, compactPubkey })
 // init & create your own PinkContractPromise instance.