Zap Data Wallet

Important

⚠️ When running the extension against a notary server, please ensure that the server's version is the same as the version of this extension

Content

Zap is a extension that currently uses TLSN (see documentation to attest web2 data. TLS requests from Prover to Server can be witnessed by the Notary, and then can be transformed in signed proofs, which can be sent to webpages and used as attestations.

Zap has two types of proofs and exploration market to use them:

• Dynamic proofs: Generated by the SidePanel, these can be called by API from other webpages and attest specific data (like a google account ownership or a revolut transaction data)
• Static proofs: Auto generated by the Popup extension, these can be created by manual option in the extension and stored to use then, earning Zap points (like social account ownership)
• Exploration market: Solutions provided by Zap team which request data proofs generated by our extension.

The folder structure of Zap:

extension/
├── src/
│   ├── assets/
│   ├── components/
│   ├── entries/
│   │   ├── Background/                  # The extension itself, page routes are located here
│   │   │   ├── cache.ts                 # Responsible for separate requests by tab
│   │   │   ├── db.ts                    # Index storage responsible to store larger data like the requests and history
│   │   │   ├── handlers.ts              # Aggregate the cache in a defined structure to add requests log in the database
│   │   │   ├── index.ts                 # Calls the rpc and other listeners
│   │   │   ├── mutex.tsx                
│   │   │   └── rpc.tsx                  # Most important file: RPC with all actions that can be executed in the background
│   │   ├── Content/                     # Content is used when webpages interact with our extension
│   │   │   ├── content.ts               # Separated bundle responsible for the ZAP Class Provider API
│   │   │   ├── index.tsx                # RPC Server that sends the actions to the Background execute
│   │   │   └── rpc.tsx                  # RPC Client and types defined here
│   │   ├── Popup/                       # The extension itself, page routes are located here
│   │   └── SidePanel/                   # Responsible for dynamic proofs
│   ├── pages/
│   ├── reducers/                        # [React Redux](https://react-redux.js.org/)
│   │   ├── authSlice.tsx                # Manage Auth state of extension
│   │   ├── history.tsx                  # Manage history (proofs) states and actions
│   │   ├── index.tsx                    
│   │   └── requests.tsx                 # Manage requests (TLS) states and actions               
│   ├── utils/
│   │   ├── constants.tsx                # Notary proxy and API defined here    
│   │   └── storage.tsx                  # Local storage, getters and setters defined here with keys to access data    
│   ├── firebaseConfig.ts                # Firebase config for google authentication
│   └── manifest.json                    # Manifest version 3 
├── utils/
│   ├── env.js 
│   └── build.js                         # Set development or production state
├── .gitignore
├── package.json
└── README.md

Flow Chart

MPC:

TLS Proxy:

Integrating:

1. Starting Zap class provider:

const client = await zap.connect();

2. Calling dynanmic proving:

const response = await (client as any).runDynamicProof("spotify");

See content script for detailed API functions.

Installing and Running using MPC

There are 3 code components:

• Local Extension: Responsible for the client
• Local Notary Server: Responsible for the local notarization with less latency
• Local Websocket: Responsible for the proxy between server and client

Extension Procedures:

1. Check if your Node.js version is >= 18.
2. Clone this repository.
3. Run npm install to install the dependencies.
4. Run npm start, it will generate a build folder.
5. Load your extension on Chrome following:
   1. Access chrome://extensions/
   2. Check Developer mode
   3. Click on Load unpacked extension
   4. Select the build folder.
6. Now use Zap.

Local Notary Procedures:

1. Fork this repository: Notary Server
2. Run git checkout v0.1.0-alpha.5 to adjust the server version (⚠️ Important!!)
3. Disable tls in the config/config.yaml file (write false instead true - line 18)
4. Run cargo run --release in the root folder
5. See the logs.

Local Websocket Procedures:

1. Fork this repository: Local Proxy
2. Run ./docker/build.sh to build image using Docker
3. Choose a host to perform a proxy:
   1. Example: Notarize api.x.com
   2. Certify if the host is present on the whitelist domains of TLSN
   3. Run docker run -it --rm -p 55688:80 novnc/websockify 80 api.x.com:443
4. Use it

Installing and Running using TLS Proxy

There are 2 code components:

• Local Extension: Responsible for the client
• Local Zap Websocket: Responsible for handling the request with the server

Extension Procedures:

1. Check if your Node.js version is >= 18.
2. Clone this repository.
3. Run npm install to install the dependencies.
4. Run npm start, it will generate a build folder.
5. Load your extension on Chrome following:
   1. Access chrome://extensions/
   2. Check Developer mode
   3. Click on Load unpacked extension
   4. Select the build folder.
6. Now use Zap.

Websocket Procedures:

Important

⚠️ Current version is not safe for private data

1. Fork or clone this repository: Local Websocket
2. Go in the javascript implementation in ./js/proxy.
3. Run node proxy.js.
4. Now use Zap.

PS.: Current implementation is not using ZK and it's not secure

Packing

After the development, run the command

$ NODE_ENV=production npm run build

Now, the content of build folder will be the extension ready to be submitted to the Chrome Web Store.

Just take a look at the official guide to more infos about publishing.

Resources: