Configure Portkey Provider & Write Connect Wallet Function

In this step, we will be configuring our Portkey provider such that users are able to connect their Portkey wallets to our application and interact with our deployed voting smart contract!

To begin, head over to src/useDAOSmartContract.ts file.

In this file, we will be creating a component that first initializes the Portkey wallet provider and next fetches our deployed voting smart contract.

This will allow our frontend components to reference and interact with the deployed smart contract to perform actions such as Join DAO, Create Proposals and more!

Now that you have a better understanding of how this file works, proceed to head over to the comment //Step A - Setup Portkey Wallet Provider and overwrite the existing useEffect hook with the following code snippet.

//Step A - Setup Portkey Wallet Provider
useEffect(() => {
  (async () => {
    if (!provider) return null;

    try {
      // 1. get the sidechain tDVW using provider.getChain
      const chain = await provider?.getChain("tDVW");
      if (!chain) throw new Error("No chain");

      //Address of DAO Smart Contract
      //Replace with Address of Deployed Smart Contract
      const address = "2GkJoDicXLqo7cR9YhjCEnCXQt8KUFUTPfCkeJEaAxGFYQo2tb";

      // 2. get the DAO contract
      const daoContract = chain?.getContract(address);
      setSmartContract(daoContract);
    } catch (error) {
      console.log(error, "====error");
    }
  })();
}, [provider]);

tip

ℹ️ Note: You are to replace the address placeholder with your deployed voting contract address from "Deploy Voting dApp Smart Contract"!

Next, head over to the src/HomeDAO.tsx file.

The HomeDAO.tsx file is the Landing page of our Voting dApp application which allows users to interact with your deployed smart contract where users are able to join the DAO, view the list of proposals and vote on proposals!

Before a user is able to interact with the smart contract, we will need to write the Connect wallet function!

Proceed to head over to the //Step B - Connect Portkey Wallet comment and overwrite the existing connect function with the following code snippet.

const connect = async () => {
  //Step B - Connect Portkey Wallet
  const accounts = await provider?.request({
    method: MethodsBase.REQUEST_ACCOUNTS,
  });
  const account = accounts?.tDVW?.[0];
  setCurrentWalletAddress(account);
  setIsConnected(true);
  alert("Successfully connected");
};

In this code snippet, we will fetch our Portkey wallet account using the provider and update the wallet address state variable! We have also configured an alert that prompts to the user that their wallet is successfully connected!

With the Connect wallet function defined, we are now ready to write the remaining functions in the upcoming steps!