> ## 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}
const modal = createAppKit({
  adapters: [wagmiAdapter],
  networks: [mainnet, arbitrum],
  projectId,
});

modal.open();

modal.close();
```

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

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

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

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

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

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

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

// to open wallet send interface
modal.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}
modal.adapter?.connectionControllerClient?.disconnect();
```

## WalletInfo

Metadata information from the connected wallet

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

modal.subscribeWalletInfo(handler);

//or

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

## Get Disabled Networks

Returns an array of CAIP networks that are disabled in the current configuration. This is useful for understanding which networks are not available for user selection.

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

const disabledNetworks = modal.getDisabledCaipNetworks();
console.log('Disabled networks:', disabledNetworks);
```

## Provider Access

Access wallet providers for direct blockchain interactions across different namespaces.

### subscribeProviders

Subscribe to provider state changes and access wallet providers for different blockchain namespaces.

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

const unsubscribe = modal.subscribeProviders((state) => {
  const eip155Provider = state["eip155"];
  const solanaProvider = state["solana"];
  const bitcoinProvider = state["bip122"];
  
  console.log("Providers updated:", { eip155Provider, solanaProvider, bitcoinProvider });
});

const providers = modal.getProviders();
const eip155Provider = providers["eip155"];
```

### Examples by Namespace

<Tabs>
  <Tab title="EVM (eip155)">
    ```ts theme={null}
    import { BrowserProvider, Contract, parseEther } from "ethers";

    const provider = await modal.subscribeProviders((state) => {
      return state["eip155"];
    });

    if (!provider) throw Error("No EVM provider found");

    const ethersProvider = new BrowserProvider(provider);
    const signer = await ethersProvider.getSigner();
    ```
  </Tab>

  <Tab title="Solana">
    ```ts theme={null}
    const provider = await modal.subscribeProviders((state) => {
      return state["solana"];
    });

    if (!provider) throw Error("No Solana provider found");

    const signature = await provider.signMessage(new TextEncoder().encode("Hello"));
    ```
  </Tab>

  <Tab title="Bitcoin (bip122)">
    ```ts theme={null}
    const provider = await modal.subscribeProviders((state) => {
      return state["bip122"];
    });

    if (!provider) throw Error("No Bitcoin provider found");

    const signature = await provider.signMessage("Hello from AppKit");
    ```
  </Tab>
</Tabs>

## Ethereum Library

<Tabs>
  <Tab title="Wagmi">
    You can use [Wagmi actions](https://wagmi.sh/core/actions/getAccount) to sign messages, interact with smart contracts, and much more.

    ### getAccount

    Action for accessing account data and connection status.

    ```tsx theme={null}
    import { getAccount } from "@wagmi/core";
    import { wagmiConfig } from "./main";

    const account = getAccount(wagmiConfig);
    ```

    ### signMessage

    Action for signing messages with connected account.

    ```ts theme={null}
    import { signMessage } from "@wagmi/core";
    import { wagmiConfig } from "./main";

    await signMessage(wagmiConfig, { message: "hello world" });
    ```

    <Card title="Learn More" href="https://wagmi.sh/core/actions/readContract" />
  </Tab>

  <Tab title="Ethers">
    You can use the following methods to get data and subscribe to changes:

    ### getAddress

    ```ts theme={null}
    const address = modal.getAddress();
    ```

    ### getError

    ```ts theme={null}
    const error = modal.getError();
    ```

    ### getChainId

    ```ts theme={null}
    const chainId = modal.getChainId();
    ```

    ### switchNetwork

    ```ts theme={null}
    import { createAppKit } from "@reown/appkit";
    import { mainnet, arbitrum, polygon } from "@reown/appkit/networks";

    const modal = createAppKit({
      adapters: [wagmiAdapter],
      projectId,
      networks: [mainnet, arbitrum],
      metadata: metadata,
      features: {
        analytics: true,
      },
    });

    modal.switchNetwork(polygon);
    ```

    ### getIsConnected

    ```ts theme={null}
    const isConnected = modal.getIsConnected();
    ```

    ### getWalletProvider

    The wallet provider.

    ```ts theme={null}
    const walletProvider = modal.getWalletProvider();
    ```

    ### getWalletProviderType

    ```ts theme={null}
    const walletProviderType = modal.getWalletProviderType();
    ```

    ### subscribeProvider

    ```ts theme={null}
    function handleChange({
      provider,
      providerType,
      address,
      error,
      chainId,
      isConnected,
    }) {
      //...
    }

    modal.subscribeProvider(handleChange);
    ```

    <Card title="Learn More" href="https://docs.ethers.org/v6/getting-started/#starting-blockchain" />
  </Tab>
</Tabs>

## Modal State

Get the current value of the modal's state

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

const { open, selectedNetworkId } = modal.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 modal = createAppKit({ wagmiConfig, projectId });

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

## ThemeMode

Set the `themeMode` after creating the modal

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

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

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

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

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

## Wallet Buttons

Using wallet buttons ([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 feature allows to customize dApps, enabling users to connect their wallets effortlessly, all without the need for the traditional modal.

Follow these steps to use the component:

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 it in your Javascript dApp:

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

#### 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>
```

<Note>
  Make sure to call `createAppKitWalletButton` after `createAppKit`.
</Note>

#### Options for wallet property.

Change the string parameter `name` from `appKitWalletButton.connect(name)` in order to open a different wallet.

| 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                 |

#### Enhanced Multichain Examples

The wallet button now supports enhanced multichain functionality with improved namespace targeting:

```javascript theme={null}
<script type="module">
  import { createAppKitWalletButton } from '@reown/appkit-wallet-button';
  
  const wallets = [
    { wallet: 'metamask', namespace: 'eip155', label: 'MetaMask EVM' },
    { wallet: 'metamask', namespace: 'solana', label: 'MetaMask Solana' },
    { wallet: 'phantom', namespace: 'bip122', label: 'Phantom Bitcoin' }
  ];

  wallets.forEach(({ wallet, namespace, label }) => {
    const walletButton = createAppKitWalletButton({ namespace });
    
    walletButton.subscribeIsReady(({ isReady }) => {
      if (!isReady) return;

      const button = document.querySelector(`[data-wallet="${wallet}-${namespace}"]`);
      if (button) {
        button.disabled = false;
        button.textContent = `Connect ${label}`;
        button.onclick = () => walletButton.connect(wallet);
      }
    });
  });
</script>

<button data-wallet="metamask-eip155" disabled>Loading...</button>
<button data-wallet="metamask-solana" disabled>Loading...</button>
<button data-wallet="phantom-bip122" disabled>Loading...</button>
```

## themeVariables

Set the `themeVariables` after creating the modal

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

modal.setThemeVariables({ ... })
```

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

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

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

## Subscribe to theme changes

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

## Track modal events

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