> ## Documentation Index
> Fetch the complete documentation index at: https://docs.reown.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Actions

Actions are functions that will help you control the modal, subscribe to wallet events and interact with them and smart contracts.

## Open and close the modal

```ts theme={null}
import { createAppKit } from '@reown/appkit'
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
import { arbitrum, mainnet } from '@reown/appkit/networks'

const wagmiAdapter = new WagmiAdapter({
  networks: [mainnet, arbitrum],
  projectId
})

const appKit = createAppKit({
  adapters: [wagmiAdapter],
  networks: [mainnet, arbitrum],
  projectId,
});

appKit.open();

appKit.close();
```

You can also select the modal's view when calling the `open` function

```ts theme={null}
appKit.open({ view: "Account" });

// to connect and show multi wallets view
appKit.open({ view: "Connect" });

// to connect and show only solana wallets
appKit.open({ view: "Connect", namespace: "solana" });

// to connect and show only bitcoin wallets
appKit.open({ view: "Connect", namespace: "bip122" });

// to connect and show only ethereum wallets
appKit.open({ view: "Connect", namespace: "eip155" });

// to open swap with arguments
appKit.open({
  view: 'Swap',
  arguments: {
    amount: '321.123',
    fromToken: 'USDC',
    toToken: 'ETH'
  }
})

// to open wallet send interface
appKit.open({ view: 'WalletSend' })
```

List of views you can select

| Variable          | Description                                                                                                                                               |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `Connect`         | Principal view of the modal - default view when disconnected. A `namespace` can be selected to connect to a specific network (solana, bip122, or eip155). |
| `Account`         | User profile - default view when connected.                                                                                                               |
| `AllWallets`      | Shows the list of all available wallets.                                                                                                                  |
| `Networks`        | List of available networks - you can select and target a specific network before connecting.                                                              |
| `WhatIsANetwork`  | "What is a network" onboarding view.                                                                                                                      |
| `WhatIsAWallet`   | "What is a wallet" onboarding view.                                                                                                                       |
| `OnRampProviders` | On-Ramp main view.                                                                                                                                        |
| `WalletSend`      | Token sending interface that allows users to send tokens to another address.                                                                              |
| `Swap`            | Swap main view.                                                                                                                                           |
| `ProfileWallets`  | View for managing connected wallets in the user profile.                                                                                                  |

## Disconnect

```ts theme={null}
appKit.adapter?.connectionControllerClient?.disconnect();
```

## WalletInfo

Metadata information from the connected wallet

```ts theme={null}
function handler({ name, icon }) {
  console.log(name, icon);
}

appKit.subscribeWalletInfo(handler);

//or

const { name, icon } = appKit.getWalletInfo();
```

## Svelte Store Integration

You can use Svelte stores to manage AppKit state across your application:

```ts theme={null}
// lib/stores/appkit.ts
import { writable } from 'svelte/store';
import { browser } from '$app/environment';

let appKit: ReturnType<typeof createAppKit> | undefined = undefined;

if (browser) {
  // Initialize AppKit only in browser environment
  appKit = createAppKit({
    adapters: [wagmiAdapter],
    networks: [mainnet, arbitrum],
    projectId,
  });
}

export const appKitStore = writable(appKit);
```

## Wallet Buttons

<Frame>
  <img src="https://mintcdn.com/reown-5552f0bb/EKbxEvu_zecC7Jp2/images/assets/walletButtons.jpg?fit=max&auto=format&n=EKbxEvu_zecC7Jp2&q=85&s=4311e99e62b86393bba087f4d750f58f" width="1416" height="356" data-path="images/assets/walletButtons.jpg" />
</Frame>

Using the wallet button functions ([Demo in our Lab](https://appkit-lab.reown.com/appkit/?name=wagmi)), you can directly connect to more than 40 of the top wallets globally, WalletConnect QR, and all the social logins.
This allows to customize dApps, enabling users to connect their wallets effortlessly, all without the need to open the traditional modal.

Follow these steps to use wallet buttons:

1. Install the package:

<CodeGroup>
  ```bash npm theme={null}
  npm install @reown/appkit-wallet-button
  ```

  ```bash Yarn theme={null}
  yarn add @reown/appkit-wallet-button
  ```

  ```bash Bun theme={null}
  bun a @reown/appkit-wallet-button
  ```

  ```bash pnpm theme={null}
  pnpm add @reown/appkit-wallet-button
  ```
</CodeGroup>

2. Import and use in your Svelte project:

```html theme={null}
<script type="module">
  import { createAppKitWalletButton } from '@reown/appkit-wallet-button';
  const wb = createAppKitWalletButton();

  function connectWallet(id) {
    if (wb.isReady()) {
      wb.connect(id);
    }
  }

  // Attach it to the global scope so it can be called from inline HTML
  window.connectWallet = connectWallet;
</script>

<button onclick="connectWallet('walletConnect')">Open QR modal</button>
<button onclick="connectWallet('metamask')">Connect to MetaMask</button>
<button onclick="connectWallet('google')">Connect to Google</button>
```

<Note>
  Make sure to call wallet button methods after `createAppKit` has been initialized.
</Note>

### Multichain Support

You can specify a blockchain namespace to target specific chains:

```javascript theme={null}
<script type="module">
  import { createAppKitWalletButton } from '@reown/appkit-wallet-button';
  
  // Create wallet buttons for different namespaces
  const evmWalletButton = createAppKitWalletButton({ namespace: 'eip155' });
  const solanaWalletButton = createAppKitWalletButton({ namespace: 'solana' });
  const bitcoinWalletButton = createAppKitWalletButton({ namespace: 'bip122' });

  function connectEVMWallet(id) {
    if (evmWalletButton.isReady()) {
      evmWalletButton.connect(id);
    }
  }

  function connectSolanaWallet(id) {
    if (solanaWalletButton.isReady()) {
      solanaWalletButton.connect(id);
    }
  }

  function connectBitcoinWallet(id) {
    if (bitcoinWalletButton.isReady()) {
      bitcoinWalletButton.connect(id);
    }
  }

  // Attach to global scope
  window.connectEVMWallet = connectEVMWallet;
  window.connectSolanaWallet = connectSolanaWallet;
  window.connectBitcoinWallet = connectBitcoinWallet;
</script>

<!-- Connect to Ethereum/EVM chains -->
<button onclick="connectEVMWallet('metamask')">Connect MetaMask (EVM)</button>

<!-- Connect to Solana -->
<button onclick="connectSolanaWallet('phantom')">Connect Phantom (Solana)</button>

<!-- Connect to Bitcoin -->
<button onclick="connectBitcoinWallet('leather')">Connect Leather (Bitcoin)</button>
```

#### Options for wallet property

| Type          | Options                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| QR Code       | `walletConnect`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| Wallets       | `metamask`, `trust`, `coinbase`, `rainbow`, `jupiter`, `solflare`, `coin98`, `magic-eden`, `backpack`, `frontier`, `xverse`, `okx`, `bitget`, `leather`, `binance`, `uniswap`, `safepal`, `bybit`, `phantom`, `ledger`, `timeless-x`, `safe`, `zerion`, `oneinch`, `crypto-com`, `imtoken`, `kraken`, `ronin`, `robinhood`, `exodus`, `argent`, `tokenpocket`, `haha`, `ambire-wallet`, `bitpay`, `blade-wallet`, `brave`, `coinstats`, `kresus-superapp`, `plena-app`, `status`, `tomo-wallet`, `valora`, and `zengo-wallet` |
| Social logins | `google`, `github`, `apple`, `facebook`, `x`, `discord`, and `farcaster`                                                                                                                                                                                                                                                                                                                                                                                                                                                      |

#### Options for namespace property

| Value    | Description                        |
| -------- | ---------------------------------- |
| `eip155` | Ethereum and EVM-compatible chains |
| `solana` | Solana blockchain                  |
| `bip122` | Bitcoin blockchain                 |

## Ethereum Library

<Tabs>
  <Tab title="Wagmi">
    You can use [Wagmi actions](https://wagmi.sh/core/api/actions/readContract) to interact with wallets and smart contracts:

    ```ts theme={null}
    import { readContract } from '@wagmi/core'
    import { USDTAbi } from '../abi/USDTAbi'

    const USDTAddress = '0x...'

    const data = readContract(wagmiConfig, {
      address: USDTAddress,
      abi: USDTAbi,
      functionName: 'totalSupply',
      args: []
    })
    ```

    Read more about Wagmi actions for smart contract interaction [here](https://wagmi.sh/core/actions/readContract).
  </Tab>

  <Tab title="Ethers">
    [Ethers](https://docs.ethers.org/v6/) can help us interact with wallets and smart contracts:

    ```ts theme={null}
    import { BrowserProvider, Contract, parseEther } from 'ethers'

    const provider = await appKit.subscribeProviders((state) => {
      return state['eip155']
    })

    const addressFrom = await appKit.subscribeAccount((state) => {
      return state
    })

    if (!provider) throw Error('No provider found')
    if (!addressFrom) throw Error('No address found')

    function sendTransaction() {
      const tx = {
        from: addressFrom,
        to: '0x...', // any address
        value: parseEther('0.0001')
      }
      const ethersProvider = new BrowserProvider(provider)
      const signer = await ethersProvider.getSigner()
      const tx = await signer.sendTransaction(tx)
      console.log('transaction:', tx)
    }
    ```
  </Tab>
</Tabs>

## Modal State

Get the current value of the modal's state

```ts theme={null}
const appKit = createAppKit({
  adapters: [wagmiAdapter],
  networks: [mainnet, arbitrum],
  projectId,
});

const { open, selectedNetworkId } = appKit.getState();
```

The modal state is an object of two properties:

| Property            | Description                                                           | Type      |
| ------------------- | --------------------------------------------------------------------- | --------- |
| `open`              | Open state will be true when the modal is open and false when closed. | `boolean` |
| `selectedNetworkId` | The current chain id selected by the user.                            | `number`  |

You can also subscribe to the modal's state changes.

```ts theme={null}
const appKit = createAppKit({ wagmiConfig, projectId });

appKit.subscribeState((newState) => console.log(newState));
```

## ThemeMode

Set the `themeMode` after creating the modal

```ts theme={null}
const appKit = createAppKit({ wagmiConfig, projectId });

appKit.setThemeMode("dark");
```

Get the current `themeMode` value by calling the `getThemeMode` function

```ts theme={null}
const appKit = createAppKit({ wagmiConfig, projectId });

const themeMode = appKit.getThemeMode();
```

## themeVariables

Set the `themeVariables` after creating the modal

```ts theme={null}
const appKit = createAppKit({ wagmiConfig, projectId })

appKit.setThemeVariables({ ... })
```

Get the current `themeVariables` value by calling the `getThemeVariables` function

```ts theme={null}
const appKit = createAppKit({ wagmiConfig, projectId });

const themeMode = appKit.getThemeVariables();
```

## Subscribe to theme changes

```ts theme={null}
const unsubscribe = appKit.subscribeTheme((newTheme) => console.log(newTheme));
```

## Track modal events

```ts theme={null}
appKit.getEvent(); // get last event
appKit.subscribeEvents((event) => console.log(event)); // subscribe to events
```