frontend/packages/client/src/contexts/Web3.js
// provider Component that wraps the entire app and provides context variables
provider Component that wraps the entire app and provides context variables
provider Component that wraps the entire app and provides context variables
function Web3Provider({ children, network = "testnet", ...props }) {
  const [transactionInProgress, setTransactionInProgress] = useState(false);
  const [transactionStatus, setTransactionStatus] = useState(null);
  const [transactionError, setTransactionError] = useState("");
  const [txId, setTxId] = useState(null);
  const [extraConfig, setExtraConfig] = useState({ forceLedger: false });
  const executeTransaction = async (cadence, args, options = {}) => {
    setTransactionInProgress(true);
    setTransactionStatus(-1);
    const transactionId = await fcl
      .mutate({
        cadence,
        args,
        payer: fcl.authz,
        proposer: fcl.authz,
        authorizations: [fcl.authz],
        limit: options.limit || 50,
      })
      .catch((e) => {
        setTransactionInProgress(false);
        setTransactionStatus(500);
        setTransactionError(String(e));
      });
    if (transactionId) {
      setTxId(transactionId);
      fcl
        .tx(transactionId)
        .subscribe((res) => setTransactionStatus(res.status));
    }
  };
  const logOut = async () => {
    await fcl.unauthenticate();
  };
  useEffect(() => {
    const { accessApi, walletDiscovery } = networks[network];
    fcl
      .config({
        "0xFUNGIBLETOKENADDRESS":
          network === "testnet" ? "0x9a0766d93b6608b7" : "0xf233dcee88fe0abe",
      })
      .put("accessNode.api", accessApi) 
      .put("discovery.wallet", walletDiscovery); 
    try {
      const contracts = require("../contracts.json");
      Object.keys(contracts).forEach((contract) => {
        fcl.config().put(contract, contracts[contract]);
      });
    } catch (e) {}
  }, [network]);
  const setWebContextConfig = useCallback((config) => {
    setExtraConfig(config);
  }, []);
  const { user, isLedger } = useFclUser(fcl, extraConfig.forceLedger);
  if (!global.window) {
    return null;
  }
  const providerProps = {
    executeTransaction,
    setWebContextConfig,
    transaction: {
      id: txId,
      inProgress: transactionInProgress,
      status: transactionStatus,
      errorMessage: transactionError,
    },
    injectedProvider: fcl,
    user,
    address: user.addr,
    isLedger,
    network,
    logOut,
    ...props,
  };
  return (
    <Web3Context.Provider value={providerProps}>
      {children}
    </Web3Context.Provider>
  );
}
function Web3Provider ( { children , network = "testnet" , ... props } ) { const [ transactionInProgress , setTransactionInProgress ] = useState ( false ) ; const [ transactionStatus , setTransactionStatus ] = useState ( null ) ; const [ transactionError , setTransactionError ] = useState ( "" ) ; const [ txId , setTxId ] = useState ( null ) ; const [ extraConfig , setExtraConfig ] = useState ( { forceLedger : false } ) ; const executeTransaction = async ( cadence , args , options = { } ) => { setTransactionInProgress ( true ) ; setTransactionStatus ( - 1 ) ; const transactionId = await fcl . mutate ( { cadence , args , payer : fcl . authz , proposer : fcl . authz , authorizations : [ fcl . authz ] , limit : options . limit || 50 , } ) . catch ( ( e ) => { setTransactionInProgress ( false ) ; setTransactionStatus ( 500 ) ; setTransactionError ( String ( e ) ) ; } ) ; if ( transactionId ) { setTxId ( transactionId ) ; fcl . tx ( transactionId ) . subscribe ( ( res ) => setTransactionStatus ( res . status ) ) ; } } ; const logOut = async ( ) => { await fcl . unauthenticate ( ) ; } ; useEffect ( ( ) => { const { accessApi , walletDiscovery } = networks [ network ] ; fcl . config ( { "0xFUNGIBLETOKENADDRESS" : network === "testnet" ? "0x9a0766d93b6608b7" : "0xf233dcee88fe0abe" , } ) . put ( "accessNode.api" , accessApi ) . put ( "discovery.wallet" , walletDiscovery ) ; try { const contracts = require ( "../contracts.json" ) ; Object . keys ( contracts ) . forEach ( ( contract ) => { fcl . config ( ) . put ( contract , contracts [ contract ] ) ; } ) ; } catch ( e ) { } } , [ network ] ) ; const setWebContextConfig = useCallback ( ( config ) => { setExtraConfig ( config ) ; } , [ ] ) ; const { user , isLedger } = useFclUser ( fcl , extraConfig . forceLedger ) ; if ( ! global . window ) { return null ; } const providerProps = { executeTransaction , setWebContextConfig , transaction : { id : txId , inProgress : transactionInProgress , status : transactionStatus , errorMessage : transactionError , } , injectedProvider : fcl , user , address : user . addr , isLedger , network , logOut , ... props , } ; return ( < Web3Context . Provider value = { providerProps } > { children } < / Web3Context . Provider > ) ; }
provider Component that wraps the entire app and provides context variables
provider Component that wraps the entire app and provides context variables
// connect to Flow // use Blocto wallet // for Nextjs Builds, return null until "window" is available // use props as a way to pass configuration values