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
  • Initiate Connection
  • Get Account / Get ChainId
  • PeerMeta (Client Meta Data)
  • Send Transaction (eth_sendTransaction)
  • Sign Transaction (eth_signTransaction)
  1. DEVELOPERS
  2. Deprecated
  3. (Deprecated) NEOPIN Connect 1.0
  4. DApp
  5. Web

Usage

How to use NEOPIN Connect Web

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

Initiate Connection

Create a connector by putting the wallet connect bridge URL as 'bridge' props and attach an event to the connector.

import NeopinConnect from "nptconnect-client";
import QRCodeModal from "nptconnect-qrcode-modal";


// Create a connector object.
const connector = new NeopinConnect({
  bridge: "https://bridge.walletconnect.org", // Required
  qrcodeModal: QRCodeModal 
});

// Session created after connection. > Open the QRCodeModal passed to the connector param.
if (!connector.connected) {
  connector.createSession();
}

const { accounts, chainId } = await connector.connect();

After a connection is established (asynchronous), events are registered in the connector.

connector.on("session_update", (error, payload) => {
  if (error) {
    throw error;
  }

  // Get updated accounts and chainId
  const { accounts, chainId } = payload.params[0];
});

connector.on("disconnect", (error, payload) => {
  if (error) {
    throw error;
  }

  // Delete connector
});

Get Account / Get ChainId

Accounts and chainID in the connector drop their values when they connect to the bridge server.

...
const {accounts, chainId} = connector ;
// accounts is array
const address = accounts[0];
console.log(chainId)
...

PeerMeta (Client Meta Data)

You can customize PeerMeta (ClientMeta) data. The appID of PeerMeta data is issued when registering an affiliate, and the issued appID value must be used.

const clientMeta = {
  description: string;
  url: string;
  icons: string[];
  name: string;
  appId?: string;
}


// When creating a connector object, pass it as clientMeta param
const connector = new NeopinConnect({
  bridge: "https://bridge.walletconnect.org", // Required
  qrcodeModal: QRCodeModal,
  clientMeta  // IClientMeta
});



// Type information of ClientMeta of nptconnect-types
export interface IClientMeta {
  description: string;
  url: string;
  icons: string[];
  name: string;
  appId?: string;
}

Send Transaction (eth_sendTransaction)

This is a method that creates and sends a transaction. This is a method that can be executed when there is a value in the accounts of the connector (when a connection is established).

// to, nonce, gasPrice, gas, value, data are random data.
// Each must be modified to suit its purpose.

const tx = {
  from: "0xbc28Ea04101F03aA7a94C1379bc3AB32E65e62d3", // Required
  to: "0x89D24A7b4cCB1b6fAA2625Fe562bDd9A23260359", // Required (for non contract deployments)
  data: "0x", // Required
  chainId: "8217", // Required
  gasPrice: "0x02540be400", // Optional
  gasLimit: "0x9c40", // Optional
  value: "0x00", // Optional
  nonce: "0x0114", // Optional
};

// Send transaction
connector
  .sendTransaction(tx)
  .then(result => {
    // Returns transaction id (hash)
    console.log(result);
  })
  .catch(error => {
    // Error returned when rejected
    console.error(error);
  });

Sign Transaction (eth_signTransaction)

// Draft transaction
const tx = {
  from: "0xbc28Ea04101F03aA7a94C1379bc3AB32E65e62d3", // Required
  to: "0x89D24A7b4cCB1b6fAA2625Fe562bDd9A23260359", // Required (for non contract deployments)
  data: "0x", // Required
  gasPrice: "0x02540be400", // Optional
  gasLimit: "0x9c40", // Optional
  value: "0x00", // Optional
  nonce: "0x0114", // Optional
};

// Sign transaction
connector
  .signTransaction(tx)
  .then(result => {
    // Returns signed transaction
    console.log(result);
  })
  .catch(error => {
    // Error returned when rejected
    console.error(error);
  });
PreviousInstallationNextweb3-react

Last updated 1 year ago

💻