NEOPIN Docs
  • NEOPIN Introduction
    • Vision
    • Permissioned DeFi Protocol
  • ✅GET STARTED
    • Download App
    • Create Wallet
    • Sign in (Import Wallet)
    • App settings
    • NEOPIN Wallet
  • 📈EARN WITH NEOPIN
    • Index
      • How it works
      • Backtest
      • RWA Project Index (RPI)
        • [RPI] Rebalancing History
          • [RPI] 28.08.2024 Rebalance
          • [RPI] 02.01.2025 Rebalance
          • [RPI] 27.03.2025 Rebalance
          • [RPI] 14.04.2025 Rebalance
      • Ethereum Family Index (EFI)
        • [EFI] Rebalancing History
          • [EFI] 09.09.2024 Rebalance
          • [EFI] 02.01.2025 Rebalance
          • [EFI] 27.03.2025 Rebalance
      • AI Titans Index (ATI)
        • [ATI] Rebalancing History
          • [ATI] 09.09.2024 Rebalance
          • [ATI] 02.01.2025 Rebalance
          • [ATI] 27.03.2025 Rebalance
      • [App] Index Guide
      • [Web] Index Guide
    • Derivatives
      • RWA
        • [App] NEOPIN BDLP Guide
        • [Web] NEOPIN BDLP Guide
      • Yield Aggregator
        • [App] NEOPIN SDLP Guide
        • [Web] NEOPIN SDLP Guide
    • Pool
      • [App] Pool Guide
      • [Web] Pool Guide
      • Impermanent Loss
    • Swap
      • [App] Swap Guide
      • [Web] Swap Guide
      • Automated Market Maker
    • Stake
      • [App] Stake Guide
      • [Web] Stake Guide
    • Liquid Stake
      • Why is my 1 npETH less than 1 ETH?
      • Unstake with npToken
      • [APP] Liquid Stake Guide
      • [WEB] Liquid Stake Guide
    • Bridge
      • [App] Bridge Guide
      • [Web] Bridge Guide
  • 🔷MEMBERSHIP
    • NEOPIN Club Membership: Current
      • How it works
      • Membership Points
      • Weighted Point Multiplier for Each Product
      • Participant Distribution Across Tiers
      • NEOPIN Club Membership Benefits
    • The First Season: 2023
      • Introduction
      • How It Works
      • How To Earn Points
        • Weighted Point Multiplier for Each Product
      • Leaderboard
      • Participant Distribution Across Tiers
      • Gift Box & Opening
      • Transition to NEOPIN Club Membership (S1 SBT)
  • 📣Referral
    • NEOPIN Referral Program
      • How it works
      • How To Earn Points
      • Leaderbord
  • 🗳️Governance Vote
    • Introduction
    • NEOPIN Governance Vote
    • Klaytn Governance Vote
    • [Deprecated] Finschia Governance Vote
    • [App] Governance Voting Guide
    • [Web] Governance Voting Guide
  • ↗️Kaia Migration
    • (EN) Klaytn x Finschia Merger to Kaia
      • Guide for FNSA holder
        • [Mobile] Guide to convert FNSA to KAIA
        • [Web] Guide to convert FNSA to KAIA
      • Guide for nFNSA holders
        • [App] Guide to convert nFNSA to KAIA
        • [Web] Guide to convert nFNSA to KAIA
      • Guide to Stake KAIA
  • 📊TOKENOMICS
    • NEOPIN Economy
      • NPT Tokenomics
      • Automated Reallocation Mechanism (AutoRM)
      • Issuance and Allocation
  • 🎉EVENT
    • [Closed] NEOPIN DeFi Carnival
  • 🗓️ROADMAP
    • #2023
    • #2024
  • 📃DLT Framework
    • NEOPIN Protocol DLT Framework
  • 💻DEVELOPERS
    • WalletConnect 2.0
      • Namespaces
      • Mobile Linking
      • Methods
        • EVM Methods
        • Cosmos Methods
    • Deprecated
      • (Deprecated) NEOPIN Connect 1.0
        • DApp
          • Android
            • Installation
            • Usage
            • Functions
            • SDK Components
            • Reference
            • Version History
          • iOS
            • Installation
            • Usage
            • Functions
            • SDK Components
            • Reference
            • Version History
          • Web
            • Installation
            • Usage
              • web3-react
              • Neopin Connect Modal
            • Reference
            • Related Package
            • Sample DApp Page
          • Unity
            • Installation
            • Usage
            • SDK Components
            • Reference
            • Version History
        • Wallets
          • Android
            • Installation
            • Usage
              • Connect
              • Approve
              • Transaction
          • iOS
            • Installation
        • JSON-RPC API Methods
        • Error Code
        • Technical Specification
  • 🔗LINKS
    • Website
    • NEOPIN Web
    • Android App Download
    • iOS App Download
    • Community Links
    • Contact us
Powered by GitBook
On this page
  • Install
  • usage
  • useWeb3React
  1. DEVELOPERS
  2. Deprecated
  3. (Deprecated) NEOPIN Connect 1.0
  4. DApp
  5. Web
  6. Usage

web3-react

How to use web3-react

The following information is deprecated and may limit its use. Please refer to the WalletConnect 2.0 tab for the latest version of NEOPIN wallet integration: WalletConnect 2.0

  • You can easily get the desired value by using the wrapped 'web3-react'.

Install

npm i nptconnect-web3react-walletconnect-connector

or

yarn add nptconnect-web3react-walletconnect-connector

usage

You can export the connector and use without using nptconnect-client or nptconnect-core(Called from inside).

import { WalletConnectConnector } from 'nptconnect-web3react-walletconnect-connector';
const POLLING_INTERVAL = 12000; 

export const connector = new WalletConnectConnector({
  rpc: { [chainId]: rpcUrl },
  chainId,
  qrcode: true,
  pollingInterval: POLLING_INTERVAL, // optional
  },
} as any);

The necessary information can be checked and used through the useWeb3React method as shown below.

import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core';
...
...
const { chainId, activate, deactivate, setError, account, active } = useWeb3React();

useWeb3React

In order to connect the Wallet to the DApp, a connector matching the Wallet must be passed to the activate function.

activate: (connector: AbstractConnector, onError?: (error: Error) => void, throwErrors?: boolean) => Promise<void>;
setError: (error: Error) => void;
deactivate: () => void; //Function to disconnect DApp Wallet

connector?: AbstractConnector; //Connector value of the Wallet currently connected to DApp
library?: T; //Provide Web3 provider
chainId?: number; //chainId of account connected to DApp
account?: null | string;  //Account address connected to DApp. When attached to the Bridge Server: string, Default: null
active: boolean; //Check if the DApp user is logged in. When connecting with a Bridge Server: true, Default: false
error?: Error; 
PreviousUsageNextNeopin Connect Modal

Last updated 1 year ago

💻