@p.network/react-web3-settings

react-web3-settings

react-web3-settings is a handy React component that provides an easy-to-use interface for managing your Web3 settings such as Node RPC, Etherscan API key, Alchemy API key, and more. It was developed to streamline the setup process for developers working with blockchain integrations in React applications.

Features

• Easy setup for Node RPC
• Add or update Etherscan API key
• Add or update Alchemy API key
• Additional custom configuration settings can be added as needed
• Settings may be grouped in sections and subsections
• Sleek and minimal UI

Installation

Install the package in your React project using npm:

npm install react-web3-settings

Or if you prefer using yarn:

yarn add react-web3-settings

Usage

import { Web3SettingsProvider, Web3SettingsButton, useWeb3Settings, getWeb3Settings } from 'react-web3-settings';

<Web3SettingsProvider
  settings={{
    // a normal setting
    alchemyApiKey: {
      label: "Alchemy API Key",
      value: "api key here",
    },
    etherscanApiKey: {
      label: "Etherscan API Key",
      value: "api key here",
    },
    bnbChainRpc: {
      label: "BNB Chain RPC",
      value: "rpc here",
    },
    // this is a section
    polygonSection: {
      label: "Polygon Settings",
      settings: {
        // settings within the section (put them in the settings array)
        rpc: {
          label: "RPC Endpoint",
          value: "rpc here",
        },
        key: {
          label: "Key",
          value: "key here",
        },
      },
    },
  }}
>
  <App />
</Web3SettingsProvider>;
...


const settings = useWeb3Settings()
or
const settings = getWeb3Settings()

const polygonKey = settings.polygonSection.key // access a setting in a section
const bnbRpc = settings.bnbChainRpc

Props

The following props can be used to customize the Web3SettingsProvider component:

• settings (Settings): An object with initial configuration.
• drawerDirection ('right' | 'left' | 'top' | 'bottom'): Direction from which the settings drawer will open.
• drawerStyle (object): Style object for the drawer.
• title (string): Title text for the settings drawer.
• titleStyle (object): Style object for the title text.
• headerStyle (object): Style object for the drawer header.
• bodyStyle (object): Style object for the drawer body.
• buttonSaveText (string): Text for the save button.
• buttonSaveStyle (object): Style object for the save button.
• buttonResetText (string): Text for the reset button.
• buttonResetStyle (object): Style object for the reset button.
• settingRowStyle (object): Style object for the setting rows.
• labelStyle (object): Style object for the setting labels.
• inputStyle (object): Style object for the setting input fields.

Contributing

We welcome contributions to improve this library. Please see our contributing guidelines before starting.

License

react-web3-settings is MIT Licensed.