> For the complete documentation index, see [llms.txt](https://docs.adena.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.adena.app/integrations/use-adena-wallet-sdk/javascript.md).

# JavaScript

## Use Adena Wallet SDK with JavaScript

The Adena Wallet SDK provides the necessary tools to integrate the Adena Wallet into JavaScript-based applications, enabling interactions with both the Adena Wallet and TM2 Wallet for signing transactions, managing accounts, and more.

For full documentation and source code, visit the [Adena Wallet SDK Repository](https://github.com/onbloc/adena-wallet-sdk)

### Install the SDK

To add the Adena Wallet SDK to your project, you can use either npm or yarn.

**Using npm:**

```bash
npm install @adena-wallet/sdk
```

**Using yarn:**

```bash
yarn add @adena-wallet/sdk
```

### Quick Start

Get started with the Adena Wallet SDK by following this simple guide.

#### Import the SDK

Start by importing the SDK into your project.

```javascript
import { AdenaSDK } from '@adena-wallet/sdk';

const adenaSDK = AdenaSDK.createAdenaWallet();
```

If you're using the wallet from tm2-js-client, you can create as follows:

```typescript
import { AdenaSDK } from '@adena-wallet/sdk';
import { Wallet } from '@gnolang/tm2-js-client';

const wallet = await Wallet.createRandom();
const adenaSDK = AdenaSDK.createGnoWallet(wallet);
```

#### Connect to a Wallet

Connect to a user's wallet to begin interacting with it.

```javascript
adenaSDK.connectWallet().then(() => {
  console.log('Wallet connected successfully.');
}).catch((error) => {
  console.log('Failed to connect:', error);
});
```

#### Fetch Account Details

Once the wallet is connected, you can retrieve user account details.

```javascript
adenaSDK.getAccount().then((account) => {
  console.log('Account details:', account);
}).catch((error) => {
  console.log('Failed to fetch account details:', error);
});
```

### Advanced Features

The Adena Wallet SDK supports a wide range of functionalities beyond connecting wallets and fetching account details. Here are some additional key features you can implement.

#### `connectWallet`

Connects to a wallet via the SDK.

**Example:**

```
adenaSDK.connectWallet().then(() => {
  console.log('Wallet connected');
});
```

#### `disconnectWallet`

Disconnects from a wallet via the SDK.

**Example:**

```
adenaSDK.disconnectWallet();
```

#### `getConnectionState`

Retrieves the current connection state of a wallet.

**Example:**

```
const state = adenaSDK.getConnectionState();
console.log('Connection state:', state);
```

#### `onConnectionChange`

Sets up a listener for connection state changes.

**Example:**

```
adenaSDK.onConnectionChange({
  callback: (event) => {
    console.log('Connection event:', event);
  },
});
```

#### `offConnectionChange`

Removes a previously set connection state change listener.

**Example:**

```
const listener = (event) => {
  console.log('Connection event:', event);
};

adenaSDK.onConnectionChange({ callback: listener });

// Later, remove the listener
adenaSDK.offConnectionChange({ callback: listener });
```

#### `isConnected`

Checks if a wallet is currently connected.

**Example:**

```
adenaSDK.isConnected().then((response) => {
  console.log('Is connected:', response.status);
});
```

#### `getAccount`

Retrieves account information from the connected wallet.

**Example:**

```
adenaSDK.getAccount().then((account) => {
  console.log('Account:', account);
});
```

#### `getNetwork`

Retrieves network information from the connected wallet.

**Example:**

```
adenaSDK.getNetwork().then((network) => {
  console.log('Network:', network);
});
```

#### `switchNetwork`

Switches the wallet to a different network.

**Example:**

```
adenaSDK.switchNetwork({ chainId: 'new-chain-id' }).then(() => {
  console.log('Network switched');
});
```

#### `addNetwork`

Adds a new network to the wallet.

**Example:**

```
adenaSDK.addNetwork({
  chainId: 'new-chain-id',
  chainName: 'New Network',
  rpcUrl: 'New Chain RPC URL',
}).then(() => {
  console.log('Network added');
});
```

#### `signTransaction`

Signs a transaction with the connected wallet.

**Example:**

```
const transactionRequest = {
  tx: TransactionBuilder.create()
      .messages(
        // transaction meesages...
        // use methods: 'makeAddPackageMessage', 'makeMsgCallMessage', 'makeMsgSendMessage', 'makeMsgRunMessage'
      )
      .build(),
  broadcastType: BroadcastType.SYNC,
)};

adenaSDK.signTransaction(transactionRequest).then((response) => {
  console.log('Signed transaction:', response.encodedTransaction);
});
```

#### `broadcastTransaction`

Broadcasts a signed transaction to the network.

**Example:**

```
const transactionRequest = {
  tx: TransactionBuilder.create()
      .messages(
        // transaction meesages...
        // use methods: 'makeAddPackageMessage', 'makeMsgCallMessage', 'makeMsgSendMessage', 'makeMsgRunMessage'
      )
      .build(),
  broadcastType: BroadcastType.SYNC,
)};

adenaSDK.broadcastTransaction(transactionRequest).then((response) => {
  console.log('Broadcast response:', response);
});
```

#### `onChangeAccount`

Sets up a listener for account changes.

**Example:**

```
adenaSDK.onChangeAccount({
  callback: (account) => {
    console.log('Account changed:', account);
  },
});
```

#### `onChangeNetwork`

Sets up a listener for network changes.

**Example:**

```
adenaSDK.onChangeNetwork({
  callback: (network) => {
    console.log('Network changed:', network);
  },
});
```

### Create a Transaction

You can use a helper module called `TransactionBuilder` to generate encoded transaction data.

#### Transaction message generation functions

#### `makeMsgSendMessage`

Generates a `MsgSend` of the bank transaction message.

**Example:**

```
const tx = TransactionBuilder.create()
  .messages(
    makeMsgSendMessage({
      from_address: 'address',
      to_address: 'address',
      amount: '1ugnot',
    }),
    // You can add multiple messages
  )
  .memo('memo')
  .build();
```

#### `makeAddPackageMessage`

Generate a `AddPackage` of the VM transaction message.

**Example:**

```
const tx = TransactionBuilder.create()
  .messages(
    makeAddPackageMessage({
      creator: 'g1jg8mtutu9khhfwc4nxmuhcpftf0pajdhfvsqf5',
      deposit: '1ugnot',
      package: {
        name: "hello", // package name
        path: "gno.land/r/g1jg8mtutu9khhfwc4nxmuhcpftf0pajdhfvsqf5/hello", // package path (cannot be a duplicate from existing paths on Gnoland)
        files: [ // a list of files to deploy
          {
            name: "hello.gno", // file name
            body: "package hello\n\nfunc Hello() string {\n\treturn \"Hello() called\"\n}\n\nfunc Render() string {\n\treturn \"Render() called\"\n}", //file contents
          }
        ]
      }
    }),
    // You can add multiple messages
  )
  .memo('memo')
  .build();
```

#### `makeMsgCallMessage`

Generate a `MsgCall` of the VM transaction message.

**Example:**

```
const tx = TransactionBuilder.create()
  .messages(
    makeMsgCallMessage({
      caller: "g1jg8mtutu9khhfwc4nxmuhcpftf0pajdhfvsqf5", // your address
      send: "",
      pkg_path: "gno.land/r/demo/foo20", // Gnoland package path
      func: "Transfer", // Function name
      args: [ // Arguments
        "g1ffzxha57dh0qgv9ma5v393ur0zexfvp6lsjpae",
        "1"
      ]
    }),
    // You can add multiple messages
  )
  .memo('memo')
  .build();
```

#### `makeMsgRunMessage`

Generates a `MsgRun` of the vm transaction message.

**Example:**

```
const tx = TransactionBuilder.create()
  .messages(
    makeMsgRunMessage({
      caller: "g1jg8mtutu9khhfwc4nxmuhcpftf0pajdhfvsqf5", // your address
      send: "",
      package: {
        files: [
          {
            name: "main.gno",
            // MsgRun runs the main function.
            body: 'package main\n\nfunc main() {\n\tprintln("HELLO WORLD")\n}',
          },
        ],
        name: "main",
        path: "",
      },
    }),
    // You can add multiple messages
  )
  .memo('memo')
  .build();
```

### Error Handling and Debugging

Use `console.error` to capture detailed logs for any issues encountered during interactions with the SDK. Ensure you handle promise rejections to avoid unexpected application crashes.

For example:

```typescript
adenaSDK.connectWallet()
  .then(() => {
    // Proceed with further operations
  })
  .catch((error) => {
    // Log detailed error
    console.error('Error during wallet connection:', error);
    // Handle errors gracefully, such as showing user-friendly messages in the UI
  });
```