# HOT Kit

### 1. Multi-chain connector

HOT Kit lets users connect their own wallets to your site or log in via Google. It's great for onboarding web2 users into your app. With WalletConnect support, any mobile wallet can be connected effortlessly.

<figure><img src="https://1023621469-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6qPgkLHuzrk0tpUKK1f3%2Fuploads%2FzMP3X4ue7533arDqgISE%2Fimage.png?alt=media&#x26;token=eb0def64-94b9-4515-88f7-e923fc4e7856" alt=""><figcaption></figcaption></figure>

* **NEAR Connector**\
  WC, HOT Wallet, Meteor, Intear, MyNearWallet, etc
* **EVM Connector** \
  WC, HOT Wallet, MetaMask and all browser wallets
* **Solana Connector** \
  WC, Hot Wallet, Phantom and all browser wallets
* **TON Connector** \
  HOT Wallet, TonKeeper and all web/mobile wallets
* **Stellar Connector**\
  HOT Wallet, Freighter
* **TRON Connector**\
  TronLink (WC soon)
* **Cosmos Connector**\
  WC, Keplr, Leap&#x20;
* **Connect via Google (experimental)**\
  Users receive addresses for all networks mentioned above via their Google account. The user's Google Wallet operates through HOT MPC and will be accessible after authorization at <https://app.hot-labs.org>.<br>

```typescript
import { HotConnector } from "@hot-labs/kit";
import { defaultConnectors } from "@hot-labs/kit/defaults";
import google from "@hot-labs/kit/hot-wallet";
import cosmos from "@hot-labs/kit/cosmos";

export const kit = new HotConnector({
  apiKey: "Get on https://pay.hot-labs.org/admin/api-keys for free",
  connectors:  [...defaultConnectors, cosmos(), google()],
  walletConnect: { // Get from dashboard.reown.com
    projectId: "3cbf324S21f18648ed6153e2c324l2cf",
    metadata: {
      name: "App",
      description: "Awesome App",
      url: "https://app.com",
      icons: ["https://app.com/logo.png"],
    },
  },
});
```

### 2. User portfolio

Users can view their token balances in connected wallets, and these balances are also available for you in the code.

<figure><img src="https://1023621469-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6qPgkLHuzrk0tpUKK1f3%2Fuploads%2FNipIUEBl2pSMCFJ8m2hw%2Fimage.png?alt=media&#x26;token=7456f3a9-2608-46e3-a726-f42f6d997275" alt=""><figcaption></figcaption></figure>

```typescript
kit.openProfile() // to open popup with profile

// Get balances
kit.walletsTokens.forEach(({ wallet, token, balance }) => {
   console.log(wallet.address, `${token.float(balance)} ${token.symbol}`)
})

// Refresh balances
const evmWallet = kit.evm // if connected or null
await kit.fetchTokens(evmWallet)

```

### 3. Exchange tokens

<figure><img src="https://1023621469-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6qPgkLHuzrk0tpUKK1f3%2Fuploads%2F9K6t7u5C5zBcWKvNRWLz%2Fimage.png?alt=media&#x26;token=bd12b6ec-d576-4013-8319-8f6767482b1c" alt=""><figcaption></figcaption></figure>

```typescript
kit.openBridge() // to open popup with bridge

// Or use manual
const review = await kit.exchange.reviewSwap({ .. }) // get qoute
await kit.exchange.makeSwap(review) // do it!
```