Installation

Installation

We will go through the developer flow for the installation and usage of page core sdk.

Installation Steps

Open your terminal and navigate to your project directory. Then run one of the following commands:

• Using npm:

npm install --save @primuslabs/zktls-page-core-sdk

• Using yarn:

yarn add --save @primuslabs/zktls-page-core-sdk

Importing the SDK

After installation, you can import the SDK in your JavaScript or TypeScript files. Here's how:

import { PrimusPageCoreTLS } from "@primuslabs/zktls-page-core-sdk"

Project Config

The Primus Page Core SDK algorithm must be run in a separate js tag and must support SharedArrayBuffer, so the following configuration is required.

vite.config.js

When the page is compiled, copy the 4 files directly to the extension build directory. vite.config.js needs to add the following configuration. You can refer to demo vite.config.js.

export default defineConfig({
  plugins: [
    react(),
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/@primuslabs/zktls-page-core-sdk/dist/algorithm/client_plugin.wasm',
          dest: './'
        },
        {
          src: 'node_modules/@primuslabs/zktls-page-core-sdk/dist/algorithm/client_plugin.worker.js',
          dest: './'
        },
        {
          src: 'node_modules/@primuslabs/zktls-page-core-sdk/dist/algorithm/client_plugin.js',
          dest: './'
        },
        {
          src: 'node_modules/@primuslabs/zktls-page-core-sdk/dist/algorithm/primus_zk.js',
          dest: './'
        }
      ]
    })
  ],
  server: {
    headers: { // to support SharedArrayBuffer
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp'
    }
  },
  optimizeDeps: {
    esbuildOptions: {
        // Enable esbuild polyfill plugins
        plugins: [
            NodeModulesPolyfillPlugin()
        ]
    },
    include: ['react', 'react-dom'],
    force: true,
  },
})

Index html

You need to import two js files in your index html.

<html>
  ......
  <script src="primus_zk.js"></script>
  <script src="client_plugin.js"></script>
  ......
</html>