Settings.tsx

└── src
    └── contexts
        ├── Settings.tsx

The Settings context provides components (and other contexts) with access to the main blockchain settings required by Taquito and Beacon:

• endpoint URL used by Taquito's constructor
• network type used by beacon constructor

Code

import { NetworkType } from "@airgap/beacon-sdk";
import constate from "constate";
import { useState } from 'react';

export const [
  SettingsProvider,
  useAppName,
  useEndpoint,
  useNetwork,
  useContractAddress
] = constate(
  () => {
    const [settingState] = useState({
      app_name        : 'My DApp',
      endpoint        : 'https://ghostnet.ecadinfra.com',
      network         :  NetworkType.GHOSTNET,
      contract        : 'KT1...',
    });
    return settingState;
  },
  v => v.app_name,
  v => v.endpoint,
  v => v.network,
  v => v.contract
);

Usage

When a component needs a settings, it imports the hook and calls it to retrieve the value:

import { useAppName, useEndpoint, useNetwork } from '../store/Settings'

const network = useNetwork()
const endpoint = useEndpoint()
const name = useAppName()

See the Beacon.tsx constate hook for an example.