Learn how to store and share confidential documents on the EVM using Secret Network.
Introduction
In this tutorial you will learn how to implement the @secret-network/share-document SDK to store, view, and share confidential documents on the EVM using Secret Network as a confidential storage layer.
By using our SDK, you will have the possibility to:
Store a new document
See the contents of this document
Grant/Revoke access to the document to another wallet address
When using our SDK, your EVM wallet address is linked to a Secret Network wallet address that enables you/your users to retrieve confidential documents.
Note that when you want to share a document with another wallet address, you need to provide the Secret Network address of the person you want to share it with.
During the install process, wagmi will ask you to select a framework and a variant. To follow along with this tutorial, select React for framework, and Next for variant. Once you have installed your wagmi project, cd into your project:
cd <your project name>
Install the dependencies & the sdk:
npmi@secret-network/share-document
This tutorial will teach you how to use the SDK on Polygon Mainnet. Update your wagmi.ts file for Polygon Mainnet configuration like so:
If you want to deploy your own EVM contract on a different chain rather than using the deployed contract on Polygon, you can do so by deploying the contract here. Make sure that you deploy your contract to an Axelar GMP compatible chain ⚠️
Create a .env file with the following content since we are interacting with the Polygon Mainnet contract:
ENVIRONMENT= "mainnet"
ENVIRONMENT can use the following variables depending on which dev environment you are using:
"mainnet" | "testnet" | "local"
Storage API Keys
Next, navigate to Pinata and generate a new API key + JWT token to use for storing documents. Make sure you save the credentials in a safe place because we will use them shortly :D
We are using Pinata as our storage solution for this tutorial, but you can use any of the storage options provided in the SDK, or even build your own!
React Imports & State Variables
Navigate to /src/page.tsx.
To see a barebones implementation of all of the React logic, view the completed repo here. Simply clone it to your machine and run npm run devto run it locally.
Configure your React imports + state viarables like so:
// Download fileconstdownloadFile=async (fileId:string) => {if (!client) {console.error('Client is not initialized');return; }try {constuint8Array=awaitclient.viewDocument().download(fileId);// Convert Uint8Array to Blobconstblob=newBlob([uint8Array], { type:'application/octet-stream' });// Create a link elementconstlink=document.createElement('a');link.href =URL.createObjectURL(blob);link.download ='downloaded_file'; // Set the desired file name here// Append the link to the bodydocument.body.appendChild(link);// Programmatically click the link to trigger the downloadlink.click();// Remove the link from the documentdocument.body.removeChild(link);console.log('File downloaded successfully'); } catch (error) {console.error('Error downloading file:', error); } };
Share a File
// Share fileconstshareFile=async (fileId:string, secretAddress:string) => {if (!client) {console.error('Client is not initialized');return; }try {constshareDocument=client.shareDocument(fileId);// Get existing file access// const fileAccess = await shareDocument.getFileAccess();// console.log('Existing file access:', fileAccess);// Share viewing access to a fileconstaddViewingRes=awaitshareDocument.addViewing([secretAddress]);console.log('Viewing access added:', addViewingRes);// Delete viewing access to a file// const deleteViewingRes = await shareDocument.deleteViewing([secretAddress]);// console.log('Viewing access deleted:', deleteViewingRes);// Transfer the ownership// const changeOwnerRes = await shareDocument.changeOwner(secretAddress);// console.log('Ownership transferred:', changeOwnerRes);// All in one share operationconstshareRes=awaitshareDocument.share({// changeOwner: secretAddress, addViewing: [secretAddress],// deleteViewing: [secretAddress], });console.log('All-in-one share operation completed:', shareRes); } catch (error) {console.error('Error sharing file:', error); } };
You also have the ability to get existing file access, delete viewing access, and transfer file ownership. See the commented out code above for examples.
Summary
This documentation provides a step-by-step guide on how to implement the @secret-network/share-document SDK to securely store, view, and share confidential documents on the EVM using Secret Network as a confidential storage layer. You learned how to create a new wagmi project, configure it for Polygon Mainnet, and integrate the Secret Network SDK. By following this guide, you can now store documents, view their content, and manage access permissions all on the EVM chain of your choosing.
Special Thanks
Special thanks to the FiftyWei team for building out this SDK as part of the Secret Network Q1 2024 grants cohort :D