The Lit JavaScript SDK provides developers with a framework for implementing Lit functionality into their own applications. Find installation instructions in the docs to get started with the Lit SDK based on your use case: https://developer.litprotocol.com/SDK/Explanation/installation
This new V2 SDK is written in Typescript and is a complete rewrite of the old SDK. It is much more modular and easier to use, and has a much smaller bundle size.
yarn add @lit-protocol/lit-node-client
<script src="https://cdn.jsdelivr.net/npm/@lit-protocol/lit-node-client-vanilla/lit-node-client.js"></script>
<script>
const authSig = LitJsSdk_litNodeClient.checkAndSignAuthMessage({chain: 'ethereum'});
</script>
Individual packages are below so that you can import the minimum required packages for your use case.
Package | Category | Version | Download |
---|---|---|---|
@lit-protocol/lit-node-client | 2.1.36 | npm Vanilla JS (UMD) |
|
@lit-protocol/access-control-conditions | 2.1.36 | npm Vanilla JS (UMD) |
|
@lit-protocol/bls-sdk | 2.1.36 | npm Vanilla JS (UMD) |
|
@lit-protocol/constants | 2.1.36 | npm Vanilla JS (UMD) |
|
@lit-protocol/contracts-sdk | 2.1.36 | npm Vanilla JS (UMD) |
|
@lit-protocol/crypto | 2.1.36 | npm Vanilla JS (UMD) |
|
@lit-protocol/ecdsa-sdk | 2.1.36 | npm Vanilla JS (UMD) |
|
@lit-protocol/encryption | 2.1.36 | npm Vanilla JS (UMD) |
|
@lit-protocol/lit-third-party-libs | 2.1.36 | npm Vanilla JS (UMD) |
|
@lit-protocol/misc | 2.1.36 | npm Vanilla JS (UMD) |
|
@lit-protocol/nacl | 2.1.36 | npm Vanilla JS (UMD) |
|
@lit-protocol/uint8arrays | 2.1.36 | npm Vanilla JS (UMD) |
|
@lit-protocol/auth-browser | 2.1.36 | npm Vanilla JS (UMD) |
|
@lit-protocol/misc-browser | 2.1.36 | npm Vanilla JS (UMD) |
App | Link |
---|---|
Simple Encrypt Decrypt | https://demo.encrypt-decrypt.react.litprotocol.com/ |
Contracts SDK | https://demo.contracts-sdk.react.litprotocol.com/ |
(Test) Html | http://test.lit-js-sdk-v2.html.litprotocol.com/ |
(Test) React | http://test.lit-js-sdk-v2.react.litprotocol.com/ |
NOTE: For (Test) apps, all packages and functions can be called inside the browser console. eg.
window.LitJsSdk_[package_name].[function_name]
Nx Console
Download: https://nx.dev/core-features/integrate-with-editorsRestore Terminal
Download: https://marketplace.visualstudio.com/items?itemName=EthanSK.restore-terminals See Video
"restoreTerminals.terminals": [
{See [Video](https://streamable.com/e/5g52m4)
"splitTerminals": [
// {
// "name": "nx graph",
// "commands": ["yarn graph"]
// },
{
"name": "nodejs",
"commands": ["yarn nx run nodejs:serve"]
},
{
"name": "html",
"commands": ["yarn nx run html:serve"]
},
{
"name": "react",
"commands": ["yarn nx run react:serve"]
},
{
"name": "custom",
"commands": ["clear"]
}
]
}
]
yarn tools
// this will open
// html: http://localhost:4002
// react: http://localhost:4003
// nodejs: in this terminal
yarn tools --dev --apps
// usually i will open another temrinal to watch the package
// i'm developing
yarn tools --watch --target <package-name>
By default, NX provides a command to generate a library
nx generate @nrwl/js:library
. However, it doesn't have an esbuild built-in so that we've created a custom tool that modify the build commands.
yarn tool:genLib <package-name>
yarn tools --create --react contracts-sdk --demo
yarn tool:delete (--package OR --app) <project-name>
yarn build
// or
yarn tools --build
// build in order specified in lit-build.config.js
yarn tools --build --packages --async
yarn nx run <project-name>:build
// or
yarn tools --build --target <project-name>
// or targeted env
yarn nx run <project-name>:_buildTsc
yarn nx run <project-name>:_buildWeb
// watch all packages change
yarn tools --watch
// watch a target package
yarn tools --watch <package-name>
// watch a target package with all its monorepo dependencies
yarn tools --watch <package-name>--deps
During development you may wish to build your code changes in packages/
in a client application to test the correctness of the functionality.
If you would like to establish a dependency between packages within this monorepo and an external client application that consumes these packages,
- Run
npm link
at the root of the specific package you are making code changes in. - Run
yarn build:target <package>
to build that specific package. - In the client application, run
npm link <package> --force
to ensure that thepackage.json
of the client application is updated with afile:
link to the dependency. This effectively creates a symlink in thenode_modules
of the client application to the local dependency in this repository.
Having done this setup, this is what the development cycle looks like moving forward:
- Make code change
- Rebuild specific package
- Rebuild client application.
yarn tools --publish
yarn tools --clone <project-name> <clone-project-name> <(?) --publish> <(?) --remove-after>
// eg
yarn tools --clone lit-node-client @litprotocol/dev --publish --remove-after
yarn tool:buildHtml
There are currently three environments can be tested on, each of which can be generated from a custom command, which would automatically import all the libraries in ./packages/*
. The UI of HTML & React are visually identical but they are using different libraries.
Environment | Generate Command | Test Location |
---|---|---|
HTML | yarn tool:genHtml |
http://localhost:4002 |
React | yarn tool:genReact |
http://localhost:4003 |
NodeJs | yarn tool:genNodejs |
yarn nx run nodejs:serve |
Note: Personally I like to use the "Restore Terminal" VSCode plugin to automatically open all these environments. See Video
yarn test:packages
// watch mode
yarn test:watch
Since both HTML & React UIs are identical, we can run the same test suite against two different environments of libraries. This is done by setting the PORT
number before Cypress launch.
HTML
// E2E HTML
yarn tools --test --e2e html
React
// E2E React
yarn tools --test --e2e react
yarn graph
Web bundling using esbuild
Itβs currently using a custom plugin @websaam/nx-esbuild which is a fork from @wanews/nx-esbuild
"_buildWeb": {
"executor": "@websaam/nx-esbuild:package",
"options": {
"banner": {
"js": "import { createRequire } from 'module';const require = createRequire(import.meta.url);"
},
"globalName": "LitJsSdk_CoreBrowser",
"outfile":"dist/packages/core-browser-vanilla/core-browser.js",
"entryPoints": ["./packages/core-browser/src/index.ts"],
"define": { "global": "window" },
"plugins":[
{
"package": "esbuild-node-builtins",
"function": "nodeBuiltIns"
}
]
}
}
Reference Error: crypto is not defined
import crypto, { createHash } from 'crypto';
Object.defineProperty(globalThis, 'crypto', {
value: {
getRandomValues: (arr: any) => crypto.randomBytes(arr.length),
subtle: {
digest: (algorithm: string, data: Uint8Array) => {
return new Promise((resolve, reject) =>
resolve(
createHash(algorithm.toLowerCase().replace('-', ''))
.update(data)
.digest()
)
);
},
},
},
});
error Command failed with exit code 13.
Make sure your node version is above v16.16.0