👋 Hello! This app is a demo app to show how Polygon, Fauna, and React can work together to help safeguard your dApp data. This example uses the concept of Allowlisting to demonstrate this functionality in a dApp.
View the flow of the app in the diagram below:
This is what the app looks like in action:
Visit here for the tutorial on Polygon's docs that this repo is linked to.
To start, clone this repository locally onto your machine or download it as a .ZIP file.
Once you have the repository on your machine, follow the steps below to get started:
- Set up your
.env
files - you will need a.env
file in the root directory (to be used by the backend/Polygon configurations) and a.env
file in theclient
directory (to be used for Fauna configurations in the frontend). - For the root directory
.env
file, you'll need aMNEMONIC
environment variable - this is going to be your Secret Key phrase from your Metamask wallet. - For the
.env
file in theclient
directory, you'll need aREACT_APP_FAUNADB_SECRET
- to get this, you'll need to create a database in Fauna, and then generate a Secret Key from that. When you create your database, make sure your configuration looks similar to this (you can choose whatever name you'd like):
Once your .env
is set up, install dependencies. You'll need to do the following:
- In the root directory, run
npm install
(installs general product dependencies) - In the
client
directory, runnpm install
(installs React project dependencies)
Once you have the dependencies installed, we'll need to migrate our smart contracts to get them set up on our machine.
- In the root directory, run
npm run migrate
to deploy the smart contracts.
- Make sure your
MNEMONIC
environment variable is defined in a.env
file in your root directory. - If you are running into continuous errors and you’ve checked the above, try other RPC URLs in place of the
[matic-mubai.chainstacklabs.com](http://matic-mubai.chainstacklabs.com)
URL intruffle-config.js
. A list of additional URLs for the Mumbai-Testnet can be found on this page under the “Mumbai-Testnet” section.
To run your application, cd into client
and run npm run start
.
Until you swap out Fauna dependencies, your form will not submit properly to the database.
For this tutorial, you'll need a Collection created. This should be made inside the database you created to generate your Fauna Secret Key for the .env
file. Your Collection should look like this (although you can name it something different):
Once you make a Collection, you'll need an Index. This will query the documents (entries) in your collection for a matching UUID. You're free to use whatever name you'd like for your Index, but the general config for your Index should look like this:
In fauna.js
, you'll need to:
- In the function
addDocuments
, update the"allowlist_members"
string in the query to the name of your newly created Collection. - In the function
findUUID
, update the"allowlist_members_by_uuid"
string in the query to the name of your newly created Index.
Included in this repository is a script to decode transaction input data, which can be used to find the uuid
s stored in the blockchain for transactions from this application. With a uuid
, you can search for the corresponding data record in Fauna to reveal the actual information (first name, last name, wallet address).
The script is located in client/scripts/decode-transaction.js
. In the file, you will need to set testData
equal to the transaction input data hash you'd like to decode. To run the script, you can run this command from the client
folder:
node scripts/decode-transaction.js
This script can be repurposed to also read transaction data not related to the Allowlist
smart contract it's currently referencing. You will need to replace the testABI
variable value with the new contract ABI to be able to read from a different smart contract.