feat: update create frontend page to use smart contract portal (#38)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Documentation**
- Updated references from Polygon Mumbai testnet to Polygon Amoy
testnet.
	- Changed installation instructions from Node.js to Bun.
- Modified file paths and configurations for ERC-20 token contract
deployment.
- Adjusted environment variables and project IDs for WalletConnect and
Smart Contract Portal Middleware.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: janb87

docs/developer-guides/connect-frontend.md

@@ -5,7 +5,7 @@ sidebar_position: 2
 keywords: [frontend, nextjs, web3auth, polygon, erc20]
 ---
 
-This guide will show you how to build a full stack application using SettleMint, Polygon, wagmi and, Next Js. If this is your first time using SettleMint, we recommend the Hello World Guide.
+This guide will show you how to build a full stack application using SettleMint, Polygon, wagmi and NextJS. If this is your first time using SettleMint, we recommend the Hello World Guide.
 
 In this guide, you will learn how to connect a custom front end to your blockchain application using:
 
@@ -14,11 +14,11 @@ In this guide, you will learn how to connect a custom front end to your blockcha
 - [Web3Auth](https://web3auth.io/) to make the transfer and receive the tokens
   polygon
   To complete this guide, please have the following installed:
-- [Node JS](https://nodejs.org/en)
+- [Bun](https://bun.sh/docs/installation)
 - [The Metamask Wallet Extension](https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn)
 - A code editor (ex:[VSCode](https://code.visualstudio.com)).
 
-At the end of this guide, you will have deployed an ERC-20 token smart contract to the Polygon Mumbai Testnet and connected a front end to interact with this smart contract. The front end will allow us to send tokens that we created to any wallet address.
+At the end of this guide, you will have deployed an ERC-20 token smart contract to the Polygon Amoy Testnet and connected a front end to interact with this smart contract. The front end will allow us to send tokens that we created to any wallet address.
 
 ## Part 1: The Blockchain Application
 
@@ -34,7 +34,7 @@ For this guide, we will name this application `TokenSender`.
 
 After creating an application, we need to create a Blockchain Network and Node to deploy to. This is done by clicking on the `Add a blockchain network` from the Application Dashboard.
 
-We will deploy our smart contract to the Polygon Mumbai Testnet like the image below:
+We will deploy our smart contract to the Polygon Amoy Testnet like the image below:
 
 ![Choose A Network](../../static/img/developer-guides/choose-network.png)
 
@@ -49,7 +49,7 @@ It is now time to choose a deployment plan. Here is the configuration most suita
 
 ### Creating a Private Key
 
-To deploy our smart contract and send tokens, we need funds to cover the transfer cost. To do this we will create a Private Key and then receive MATIC tokens, the native token of the Mumbai testnet, from the faucet. Faucets allow us to get free test tokens to spend on a testnet.
+To deploy our smart contract and send tokens, we need funds to cover the transfer cost. To do this we will create a Private Key and then receive MATIC tokens, the native token of the Amoy testnet, from the faucet. Faucets allow us to get free test tokens to spend on a testnet.
 
 To make a Private Key, click on the `Private Key` link on the right side of the dashboard. Once there, select `Create a Private Key`.
 
@@ -87,43 +87,35 @@ Once that is deployed, we can go to the IDE and start editing our contract.
 
 ![Open IDE](../../static/img/developer-guides/open-ide.png)
 
-You can find the ERC20 contract on the left in the Explorer under `contracts/GenericToken.sol`
+You can find the ERC20 contract on the left in the Explorer under `contracts/GenericERC20.sol`
 
 We don't need to change anything in this contract's code. The current default is to deploy a token called `GenericToken` with a symbol `GT`.
 
-To change this to something less generic, we can go to the `Deploy` folder and open the `00_deploy_generic_token.ts` file. From there we can edit the below code block that starts on line 13:
+To change this to something less generic, we can go to the `gnition/modules` folder and open the `main.ts` file. From there we can edit the below code block that starts on line 4:
 
 **Before:**
 
 ```typescript
-await deploy('GenericToken', {
-  from: deployer,
-  args: ['GenericToken', 'GT'],
-  log: true,
-});
+const counter = m.contract("GenericERC20", ["GenericERC20", "GT"]);
 ```
 
 By editing this code block, you can create your token name and symbol:
 
 **After:**
 
 ```typescript
-await deploy('GenericToken', {
-  from: deployer,
-  args: ['DocumentationToken', 'WRITE'],
-  log: true,
-});
+const counter = m.contract("GenericERC20", ["DocumentationToken", "WRITE"]);
 ```
 
 ### Compile and Deploy the Contract
 
-After making the changes, we can compile our contract code. This is done by selecting the `Task Manager` option on the right side.
+After making the changes, we can compile our contract code. This is done by selecting the `Task Manager` option on the left side.
 
 ![Deploy Contract](../../static/img/developer-guides/deploy-contract.png)
 
-1. Select the `Task Manager` on the right
-2. Compile the contract by selecting `hardhat/compile`
-3. Deploy the contract by selecting `npm/smartcontract:deploy`
+1. Select the `Task Manager` on the left
+2. Compile the contract by selecting `Hardhat - Build`
+3. Deploy the contract by selecting `Hardhat - Deploy to platform network`
 
 If the deployment was successful, you will see a `deployed at 0x4251501F80cE773b594C0B6CEf1289b97b0`
 
@@ -142,44 +134,19 @@ In addition to using NextJS, this template uses the:
 - `wagmi` - to interact with the contract
 - `web3auth` - to create a modal for connecting a wallet
 - `tailwind` - for styling and design
+- `connectkit` - connecting a wallet to your dApp
 
-You can get all of these packages by running `npm install` in your terminal after cloning the repo.
+You can get all of these packages by running `bun install` in your terminal after cloning the repo.
 
 After that is completed, open the folder in your favorite code editor.
 
-### Adding the ABI and Address
+### Adding the ABI
 
 The first thing we will do is add the ABI and address of our deployed contract. This allows our front end to know where to read and write data to it. This information can be found in the SettleMint IDE where you deployed your contract.
 
-Go to the `Deployments` folder in the file explorer and the `GenericToken.json` file. Copy both the `address` and `abi` and paste it into the `contractData/data.js` file inside the template.
-
-```javascript
-export const contractData = {
-  "address": "0x...",
-  "abi": [...]
-```
-
-### Adding the RPC Provider
-
-Now we will add the RPC Provider URL that will allow us to connect to the Polygon Mumbai network.
-
-To get this URL go back to the SettleMint platform and select the `Blochain Nodes` option on the right. From there, select your deployed node `TokenSender` and choose the `Connect` tab.
-
-Here you will find your `JSON-RPC` URL. Copy that URL and go to the `src/pages/_app.tsx` file.
-
-Around line 21 you will find this code block:
+Go to the `ignition/deployments/chain-46622/artifacts` folder in the file explorer and copy the `GenericERC20Module#GenericERC20.json` file to the `contractData` directory.
 
-```javascript
-[
-  jsonRpcProvider({
-    rpc: () => ({
-      http: `[INSERT RPC URL HERE]`,
-    }),
-  }),
-];
-```
-
-Add your `JSON-RPC` url between the dashes.
+![Copy ABI](../../static/img/developer-guides/copy-abi.png)
 
 ### Adding the API Key
 
@@ -189,53 +156,79 @@ This is done by navigating to your profile in the top right next to the grid ico
 
 ![API Keys](../../static/img/developer-guides/api-keys.png)
 
-From there, select the `Generate new API Key`. You can now create an API key name, expiration, and access. For this guide, selecting `All blockchain nodes in all organizations` will work.
+From there, select the `Generate new API Key`. You can now create an API key name, expiration, and access. For this guide, selecting `All blockchain nodes in all organizations` and `All middlewares in all organizations` will work.
 
-You will now see your API key that was generated only once. Copy this and add it to the end of the `JSON-RPC` that you copied in the previous step. The format should be: `JSON-RPC URL/API-KEY`
+You will now see your API key that was generated only once. Copy this and add it as the `BTP_TOKEN` variable value in the `.env` file.
 
 ### Configuring web3auth
 
 To use web3auth, you will need to make an account a project. To set up an account and a project, follow [this guide](https://web3auth.io/docs/dashboard-setup).
 
-After creating an account, you can navigate to the `Projects` tab on the right and click on `Add Project`. From there you will see that the project has been created and you can access the Project Details page.
+After creating an account, you can create a new project. From there you will see that the project has been created and you can access the Project Details page.
 
-On that page, you will find the `Client ID` like below:
+On that page, you will find the `Project ID` like below:
 
-![Client ID](../../static/img/developer-guides/client-id.png)
+![Project ID](../../static/img/developer-guides/project-id.png)
 
-Copy your ID and paste it into the `clientID` of the `webAuthInstance` configuration found around line 31:
+Copy your Project ID and add it as the `NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID` variable value in the `.env` file.
 
-```javascript
-const web3AuthInstance = new Web3Auth({
-    clientId: "[INSERT ClientId]"
+### Adding environment variables
 
-```
+Open the `.env` file and add the remaining environment variables `BLOCKCHAIN_NODE`, `NEXT_PUBLIC_CONTRACT_ADDRESS` and `PORTAL_URL`.
 
-We will also need to add the `rpcTarget` to the `web3AuthInstance`. This is found in a few lines below under the `clientId`.
+```.env
+# Base url of the application, used for SSR
+NEXT_PUBLIC_SERVER_URL=http://localhost:3000
 
-The `rpcTarget` is the same `JSON-RPC URL/API Key` that you pasted in a previous step.
+# API token
+BTP_TOKEN=sm_pat_...
+
+# Web3Modal - WalletConnect
+NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=...
+
+# Wagmi
+# To get this URL go to the SettleMint platform and select the `Blockhain Nodes` option on the right.
+# From there, select your deployed node and choose the `Connect` tab.
+# Here you will find your `JSON-RPC` URL.
+BLOCKCHAIN_NODE=https://blockchain-node.settlemint.com/
+
+# Contracts
+# To get this open the IDE of the deployed Smart Contract Set on the SettleMint platform.
+# Open the `ignition/deployments/chain-46622/deployed_addresses.json` json file and copy the address.
+NEXT_PUBLIC_CONTRACT_ADDRESS=0x...
+
+# Portal
+# To get this URL go to the SettleMint platform and select the `Middlewares` option on the right.
+# From there, select your deployed smart contract portal middleware and choose the `Connect` tab.
+# Copy the base url (without the `/graphql` or `/rest` part).
+PORTAL_URL=https://smart-contract-portal-middleware.settlemint.com
+```
 
 ## Part 3: Running the Application
 
 Now it's time to see what we have made. To get your application running, run the following command in your terminal:
 
 ```bash
-npm run dev
+bun dev
 ```
 
 This will start your application locally on `localhost:3000`. Go to that address and you will now see the frontend using NextJS:
 ![Front-End](../../static/img/developer-guides/front-end.png)
 
-Using `wagmi` enables us to read different functions and values from our smart contract. In this template, we are reading the `symbol` function to display which token is connected to this smart contract.
+Using the `Smart Contract Portal Middleware` enables us to read different functions and values from our smart contract. In this template, we are reading the `symbol` function to display which token is connected to this smart contract.
 
-This is done in this code block in `index.tsx`
+This is done in this code block in `page.tsx`
 
 ```javascript
-const { data } = useContractRead({
-  address: contractData.address,
-  abi: contractData.abi,
-  functionName: 'symbol',
-  watch: true,
+const { data } = useSuspenseQuery({
+  queryKey: ["symbol"],
+  queryFn: async () => {
+    const response = await portal.GET("/api/generic-erc-20/{address}/symbol", {
+      params: { path: { address } },
+      parseAs: "text",
+    });
+    return response.data;
+  },
 });
 ```