Astrone Docs

# Create A Simple Dapp

Tip

We will be building this app (opens new window)

# Project Setup

Before you set up make sure you've visited and gone through our Getting Started Guide

Make sure you have:

  1. The Astrone Extension downloaded.
  2. Node.js Downloaded and Installed (opens new window)
  3. Clone/Download the Project Files from GitHub.
  4. Your favorite Text Editor or IDE installed. I personally like Visual Studio Code (opens new window)

# Open Project Folder

Open the project folder. Navigate to start->index.html, and look at the comment stating part 1. This is the UI for the Simple Dapp with all of the layout and buttons that will help us learn the basics of connecting to our Astrone extension. We will be using/building off of this entire section for the first part of the tutorial.

# Install Dependencies

Open a terminal and make sure your terminal is inside the base directory of the start/ folder. Inside the folder, the files should look like this:

.
├─ index.html
├─ contract.js
├─ astrone.css
├─ package.json
└─ README.md

You'll have some more files but that's nothing to worry about!

Open your terminal and navigate into the start folder. In this folder run:

yarn install

This will install all the necessary dependencies we'll need for our project. This will have created a node_modules/ folder where all the dependencies are stored.

Next run:

yarn run serve

Navigate to http://localhost:9011 (opens new window)

# Basic Action(Part 1)

Now let's navigate into the contract.js file inside your start folder.

Your file should look something like this.

const forwarderOrigin = 'http://localhost:9010';
const initialize = () => {
  //You will start here
};
window.addEventListener('DOMContentLoaded', initialize);

As soon as the content in the DOM is loaded we are calling our initialize function. Now before we start writing any code let's look at our task list for the first part of this app.

What we'll cover in part one:

  • Connecting to the Astrone Wallet
  • See our eth_accounts result
  • Display our network number
  • Display our ChainId
  • Display our Accounts

# Connecting to the Astrone Wallet

The first thing we need to do in our Dapp is to connect to our Astrone Wallet.

  1. We need to create a function to see if the Astrone Chrome extension is installed
  2. If Astrone is not installed we:
    1. Change our connectButton to Click here to install Astrone
    2. When clicking that button it should take us to a page that will allow us to install the extension
    3. Disable the button
  3. If Astrone is installed we:
    1. Change our connectButton to Connect
    2. When clicking that button it should allow us to connect to our Astrone wallet
    3. Disable the button

Let's get to it!!

# Astrone Extension Check

In our code we need to connect to our button from our index.html

const initialize = () => {
  //Basic Actions Section
  const onboardButton = document.getElementById('connectButton');
};

Next we create a check function called isAstroneInstalled to see if the Astrone extension is installed

const initialize = () => {
  //Basic Actions Section
  const onboardButton = document.getElementById('connectButton');
  //Created check function to see if the Astrone extension is installed
  const isAstroneInstalled = () => {
    //Have to check the astrone binding on the window object to see if it's installed
    const {astrone} = window;
    return Boolean(astrone && astrone.isAstrone);
  };
};

Next we need to create a AstroneClientCheck function to see if we need to change the button text based on if the Astrone Extension is installed or not.

const initialize = () => {
  //Basic Actions Section
  const onboardButton = document.getElementById('connectButton');
  //Created check function to see if the Astrone extension is installed
  const isAstroneInstalled = () => {
    //Have to check the ethereum binding on the window object to see if it's installed
    const { astrone } = window;
    return Boolean(astrone && astrone.isAstrone);
  };
  //------Inserted Code------\\
  const AstroneClientCheck = () => {
    //Now we check to see if Astrone is installed
    const isInstalled = isAstroneInstalled();
    if (!isInstalled) {
      //If it isn't installed we ask the user to click to install it
      onboardButton.innerText = 'Click here to install Astrone';
    } else {
      //If it is installed we change our button text
      onboardButton.innerText = 'Connect';
    }
  }
  AstroneClientCheck();
  //------/Inserted Code------\\
};

# Astrone "Not Installed" Dapp Flow

In our code block where Astrone isn't installed and we ask the user to 'Click here to install Astrone!', we need to ensure that if our button is clicked we:

  1. Redirect the user to the proper page to install the extension
  2. Disable the button
const AstroneClientCheck = () => {
  //Now we check to see if Metmask is installed
  if (!isAstroneInstalled()) {
    //If it isn't installed we ask the user to click to install it
    onboardButton.innerText = 'Click here to install Astrone!';
    //When the button is clicked we call this function
    onboardButton.onclick = onClickInstall;
    //The button is now disabled
    onboardButton.disabled = true;
  } else {
    //If it is installed we change our button text
    onboardButton.innerText = 'Connect';
  }
};
AstroneClientCheck();

We've created a function that will be called when we click the button and disable it. Let's dive into the onClickInstall function and create the logic inside of it.

Inside this function we want to:

  1. Change the text of the button to Onboarding in progress
  2. Disable the button
  3. Start the onboarding process

Above your AstroneClientCheck function write/insert this code.

//This will start the onboarding proccess
const onClickInstall = () => {
    onboardButton.innerText = 'Onboarding in progress';
    onboardButton.disabled = true;
    //On this object we have startOnboarding which will start the onboarding process for our end user
    window.open(forwarderOrigin)
  };

GREAT! Now if our end user doesn't have the Astrone Extension they can install it. When they refresh the page the astrone window object will be there and we can get on to connecting their Astrone wallet to our Dapp!

# Astrone "Installed" Dapp Flow

Next we need to revisit our AstroneClientCheck function and create similar functionality that we did in our " Astrone Not Installed" block in our "Astrone Is Installed" block of code.

const AstroneClientCheck = () => {
    //Now we check to see if Astrone is installed
    const isInstalled = isAstroneInstalled();
    if (!isInstalled) {
      //If it isn't installed we ask the user to click to install it
      onboardButton.innerText = 'Click here to install Astrone';
       //When the button is clicked we call this function
      onboardButton.onclick = onClickInstall;
    } else {
      //If it is installed we change our button text
      onboardButton.innerText = 'Connect';
      //When the button is clicked we call this function to connect the users Astrone Wallet
      onboardButton.onclick = onClickConnect;
      //The button is now enabled
      onboardButton.disabled = false;
    }
  }
AstroneClientCheck();

Now we've created a function that will be called whenever we click the button to trigger a connection to our wallet, disabling the button. Next, let's dive into the onClickConnect function and build the logic we need inside of it.

Inside this function we want to:

  1. Create an async function that will try to call the 'eth_accounts' RPC method
  2. Catch any errors and log them to the console

Under your onClickInstall function write/insert this code.

const onClickConnect = async () => {
    try {
      // Will open the Astrone UI
      // You should disable this button while the request is pending!
      await astrone.request({ method: 'eth_accounts' });
    } catch (error) {
      console.error(error);
    }
  }

Great! Now once you click the button the Astrone Extension will pop up and connect your wallet.

# Get Network

After this what we'd like to do next is whenever we press the eth_getNetwork button we'd like to get current network of extension and display it. Replace the existing const onboardButton at the top of the initialize() function with the following three buttons:

//Basic Actions Section
const getNetworkButton = document.getElementById('getNetwork');
const networkResult = document.getElementById('network');
const chainIdResult = document.getElementById('chainId');

Now that we've grabbed our eth_getNetwork button and our paragraph field to display it in we now have to grab the data.

Under our AstroneClientCheck() function let's write/insert the code below.

  getNetworkButton.addEventListener('click', async () => {
    //we use eth_getNetwork to get current network of extension
    const network = await astrone.request({ method: 'eth_getNetwork' });
    networkResult.innerHTML = network?.name;
    chainIdResult.innerHTML = network?.chainId;
  });

Let's go ahead and press the "Connect" button again, and confirm the "Connect With Astrone" prompt and "Connect". Now we can click the "ETH_ACCOUNTS" button again and we should see our Astrone account public address.

CONGRATULATIONS!

We have just completed building out our Basic Actions functionality. You know how to Connect to Astrone, see your connected apps and remove them, as well as retrieve accounts.

Now on to our next step, showing our statuses.

Preview of the completed code up until this point of the tutorial:

const forwarderOrigin = 'https://www.google.com/'
const initialize = () => {
  //You will start here 
  //Basic Actions Section
  const onboardButton = document.getElementById('connectButton');
  const getAccountsResult = document.getElementById('getAccountsResult');
  const accountResult = document.getElementById('accounts');
  const getNetworkButton = document.getElementById('getNetwork');
  const networkResult = document.getElementById('network');
  const chainIdResult = document.getElementById('chainId');
  //Created check function to see if the Astrone extension is installed
  const isAstroneInstalled = () => {
    //Have to check the astrone binding on the window object to see if it's installed
    const {astrone} = window;
    return Boolean(astrone && astrone.isAstrone);
  };
  const onClickInstall = () => {
    onboardButton.innerText = 'Onboarding in progress';
    onboardButton.disabled = true;
     //On this object we have startOnboarding which will start the onboarding process for our end user
    window.open(forwarderOrigin)
  };
  const onClickConnect = async () => {
    try {
      // Will open the Astrone UI
      // You should disable this button while the request is pending!
      const account = await astrone.request({ method: 'eth_accounts' });
      console.log('account: ', account);
      getAccountsResult.innerHTML = account?.account || 'Not able to get account';
      accountResult.innerHTML = account?.account || 'Not able to get account';
    } catch (error) {
      console.error(error);
    }
  }
  //------Inserted Code------\\
  const AstroneClientCheck = () => {
    //Now we check to see if Astrone is installed
    const isInstalled = isAstroneInstalled();
    if (!isInstalled) {
      //If it isn't installed we ask the user to click to install it
      onboardButton.innerText = 'Click here to install Astrone';
       //When the button is clicked we call this function
      onboardButton.onclick = onClickInstall;
    } else {
      //If it is installed we change our button text
      onboardButton.innerText = 'Connect';
      //When the button is clicked we call this function to connect the users Astrone Wallet
      onboardButton.onclick = onClickConnect;
      //The button is now enabled
      onboardButton.disabled = false;
    }
  }
  getNetworkButton.addEventListener('click', async () => {
    //we use eth_getNetwork to get current network of extension
    const network = await astrone.request({ method: 'eth_getNetwork' });
    console.log('network: ', network);
    networkResult.innerHTML = network?.name;
    chainIdResult.innerHTML = network?.chainId;
  });
  AstroneClientCheck();
  //------/Inserted Code------\\
}
window.addEventListener('DOMContentLoaded', initialize)

← Contributors →