Skip to main content

Installation

image

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>