Alchemy: Build a dApp That Provides Real-Time Ethereum Transaction Notifications

Learn how to build a dApp that provides real-time Ethereum transaction notifications.
What is a dApp?
Decentralized applications, known as dApps, are open-source applications developed using cryptocurrency and smart contracts, then deployed on a blockchain network.
In this tutorial, we’ll launch an example dApp built with Heroku on the Ethereum Testnet Rinkeby. Then, we’ll register our Rinkeby wallet address to opt-in to receiving transaction notifications, then we’ll send a transaction to test our app.
Read below to learn how to build a dApp that provides real-time Ethereum transaction notifications.
Prerequisites:
​Install Node.js and npm.
A cryptowallet, such as MetaMask.
Configure your cryptowallet to use the Ethereum Göerli Network. 
​Download and install Heroku-CLI.
​Sign up for a free Filebase account. 
Have your Filebase Access and Secret Keys. Learn how to view your access keys here.
Create a Filebase Bucket. Learn how to create a bucket here.
1. First, download and install S3FS-FUSE on your local environment.
This tool is available on a Linux or macOS system.
2. Set up an Access Key file for use with S3FS-FUSE.
Set up a credentials file for S3FS at ${HOME}/.passwd-s3fs. You will need to save your Filebase Access and Secret keys to this file and give it owner permissions. You can do so with the following commands:
echo ACCESS_KEY_ID:SECRET_ACCESS_KEY > ${HOME}/.passwd-s3fs
chmod 600 ${HOME}/.passwd-s3fs
ACCESS_KEY_ID is your Filebase Access key, and SECRET_ACCESS_KEY is your Filebase Secret key. For more information on Filebase access keys, see here.
3. Mount your bucket.
You can mount a Filebase IPFS bucket with the command:
s3fs mybucket /path/to/mountpoint -o passwd_file=${HOME}/.passwd-s3fs -o url=https://s3.filebase.com
mybucket: name of your Filebase bucket
/path/to/mountpoint
4. Now, navigate into the mounted Filebase bucket.
Create a new folder for your project:
mkdir notifyTutorial
5. Navigate into your new project directory and clone the git repository for this example:
cd notifyTutorial
git clone https://github.com/alchemyplatform/Alchemy-Notify-Tutorial
cd Alchemy-Notify-Tutorial
6. Run the following command to login to your Heroku account.
If you don’t have an account, sign up for one here.
heroku login
7. After you’re logged in, initiate Heroku with the following command:
heroku create
Take note of the URL that is returned to the screen. It will be in the format:
https://salty-ridge-48849.herokuapp.com/
8. Login to the Alchemy dashboard. Select ‘Notify’ from the top menu navigation bar.
9. Select ‘Address Activity’:
10. Enter the following configuration options:
Chain: Ethereum
Network: Göerli
Webhook URL: Your Heroku URL from Step 7.
Ethereum Address: Your Ethereum Rinkeby Wallet Address
Then select ‘Create Webhook’.
11. Your webhook will be listed in the Notify dashboard.
Copy the webhook ID, we’ll use this in the next step.
12. Next, open the server.js file in your working directory. Replace the following lines:
In line 37, replace “webhook-id” with your webhook ID.
const body = { webhook_id: “webhook-id”, addresses_to_add: [new_address], addresses_to_remove: [] };
In line 43, replace “Alchemy-auth-key” with your Alchemy authentication token. You can view this token by selecting the ‘Auth Token’ button in the upper right corner of the dashboard.
headers: { 'X-Alchemy-Token': “Alchemy-auth-key”}
13. Deploy your changes to Heroku:
git add .
git commit -m "added Alchemy keys"
git push heroku master
14. Now, navigate to your Heroku app URL.
This is the URL that is in the format https://salty-ridge-48849.herokuapp.com/
Your app will look like this:
15. Click the ‘Enable Ethereum’ to connect to your Metamask wallet.
Authorize the connection through the Metamask extension.
Your account address will be listed.
16. Then, select ‘Enable Notifications on this address’.
A prompt will confirm that notifications are enabled for your connected wallet address.
17. Next, let’s test our app. Head to the Göerli Faucet and send yourself some test ETH.
18. Once transferred, your dApp will display the details of the transaction!
If you have any questions, please join our Discord server, or send us an email at [email protected]​
Alchemy
Alchemy: Create a Full-Stack dApp
Last modified 9mo ago