# Usage

{% hint style="danger" %}
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](https://docs.neopin.io/developers/walletconnect-2.0 "mention")
{% endhint %}

## Initiate Connection

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

```javascript
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.

```javascript
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.

```javascript
...
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.

```javascript
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).

```javascript
// 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)

```javascript
// 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);
  });
```