How to use variables from outside of a react component

Question

I have an async function outside of my react component which retrieves 2 token balances from 2 addresses. I want to render out the balances of the 2 addresses, in the commented out HTML lines. Specifically linkBalance and balance. The useContext hook I think maybe I could solve my problem using context but I'm not sure.

import { ethers } from 'ethers'
const { ethereum } = window


const provider = new ethers.providers.Web3Provider(window.ethereum);
const linkAddress = '0xa36085F69e2889c224210F603D836748e7dC0088'
const linkABI = require('../constants/erc20.json')
const linkContract = new ethers.Contract(linkAddress, linkABI, provider);

(async() => {
    const accounts = await ethereum.request({ method: 'eth_accounts' })
    const account = accounts[0]
    const balance = await provider.getBalance(account)
    console.log(ethers.utils.formatUnits(balance, 18))
    const linkBalance = await linkContract.balanceOf(contractAddress)
    console.log(ethers.utils.formatUnits(linkBalance, 18))
})()


const Main = () => {

    const { connectWallet, currentAccount } = useContext(PackPlayersContext)

    return(
        <>
            <div>
                {currentAccount && (<p>Current Address: {currentAccount}</p>)}
                {!currentAccount && (
                    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onClick={connectWallet}>Connect Wallet</button>
                )}

                <input className="shadow appearance-none border rounded w-half py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Price"/>
                <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mb-4 mt-4">Buy Pack</button>

            {/* 
            <div>
                <p>Current link balance of contract: {linkBalance}</p>
                <p>Your KETH balance: {balance}</p>
            </div>
            */}
            </div>
        </>
    )
}
export default Main

Answer 1

I have returned victorious.

I create a separate file to place my async function, and use it as a context provider, in that context provider I updated a state which holds my token balances. I then passed in as context to my html.

Here is the context file

import React, { useState, useEffect} from 'react'
import { contractAddress } from '../constants/constants'
import { ethers } from 'ethers'
const { ethereum } = window

export const BalancesContext = React.createContext()

const provider = new ethers.providers.Web3Provider(window.ethereum);
const linkAddress = '0xa36085F69e2889c224210F603D836748e7dC0088'
const linkABI = require('../constants/erc20.json')
const linkContract = new ethers.Contract(linkAddress, linkABI, provider);


export const BalancesProvider = ({ children }) => {
    const[currentLinkBalance, setCurrentLinkBalance] = useState()
    const[currentKethBalance, setCurrentKethBalance] = useState()

    const getBalances = async () => {
        const accounts = await ethereum.request({ method: 'eth_accounts' })
        const account = accounts[0]
        const balance = await provider.getBalance(account)
        console.log(ethers.utils.formatUnits(balance, 18))
        setCurrentKethBalance(ethers.utils.formatUnits(balance, 18))
        const linkBalance = await linkContract.balanceOf(contractAddress)
        console.log(ethers.utils.formatUnits(linkBalance, 18))
        setCurrentLinkBalance(ethers.utils.formatUnits(linkBalance, 18))
    }

    useEffect(() => {
        getBalances()
    }, [])

    return (
        <BalancesContext.Provider value ={{ currentLinkBalance, currentKethBalance }}>
            {children}
        </BalancesContext.Provider>
    )
}

And here is the new Main component

import { PackPlayersContext } from "../context/PackPlayersContext"
import React, { useContext, useState } from 'react'
import { BalancesContext } from "../context/BalancesContext"

const Main = () => {
    const { connectWallet, currentAccount } = useContext(PackPlayersContext)
    const { currentLinkBalance, currentKethBalance } = useContext(BalancesContext)

    return(
        <>
            <div>
                {currentAccount && (<p>Current Address: {currentAccount}</p>)}
                {!currentAccount && (
                    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onClick={connectWallet}>Connect Wallet</button>
                )}

                <input className="shadow appearance-none border rounded w-half py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Price"/>
                <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mb-4 mt-4">Buy Pack</button>
            <div>
                <p>Current link balance of contract: {currentLinkBalance}</p>
                <p>Your KETH balance: {currentKethBalance}</p>
            </div>
            </div>
        </>
    )
}
export default Main

Thank you all for your help and suggestions. Lastly, I'm new to react and js so I honestly have no idea if this was a stupid way to do it but it works correctly. But, I'm always open to learning best practices so please comment if anything is done wrong or stupidly.