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

# Setup Web3 Libraries

> Configure Ethers.js, Viem, or Wagmi to work with Para's secure wallet infrastructure

export const Link = ({href, label, newTab = false}) => {
  const [isHovered, setIsHovered] = useState(false);
  return <a href={href} target={newTab ? '_blank' : '_self'} rel={newTab ? 'noopener noreferrer' : undefined} className="not-prose inline-block relative text-black font-semibold cursor-pointer border-b-0 no-underline" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      {label}
      <span className={`absolute left-0 bottom-0 w-full rounded-sm bg-gradient-to-r from-orange-600 to-purple-600 transition-all duration-300 ${isHovered ? 'h-0.5' : 'h-px'}`} />
    </a>;
};

Learn how to set up popular Web3 libraries with Para. Choose your library below.

## Prerequisites

Before setting up Web3 libraries, you need an authenticated Para session.

<Card title="Setup Para Instance" description="Configure ParaProvider and authenticate users before using Web3 libraries" imgUrl="/images/v3/developer-portal-open-graph.png" href="/v3/react/setup/nextjs" horizontal />

<Info>
  Sepolia examples need testnet ETH before sending transactions or writing contracts. Get `requestFaucetAsync` from `useRequestFaucet()` and call `requestFaucetAsync({ chain: "ETHEREUM_SEPOLIA" })` after the user has an EVM wallet. If `chain` is omitted, the faucet defaults to `ETHEREUM_SEPOLIA`. See [Fund Testnet Wallet](/v3/react/guides/web3-operations/evm/fund-testnet-wallet) for the full example.
</Info>

<Tabs>
  <Tab title="Ethers.js">
    ## Install

    ```bash theme={null}
    npm install @getpara/react-sdk ethers
    ```

    <Info>
      `@getpara/react-sdk` bundles `@getpara/ethers-v6-integration` — no separate integration package install needed.
    </Info>

    ## Usage

    <Tabs>
      <Tab title="Hook (React)">
        Use the <Link label="useParaEthersSigner" href="/v3/react/guides/hooks/use-para-ethers-signer" /> hook to create an ethers signer for your user's Para embedded wallet or external wallet. For convenience, the <Link label="useParaEthersSignMessage" href="/v3/react/guides/hooks/use-para-ethers-sign-message" /> and <Link label="useParaEthersSendTransaction" href="/v3/react/guides/hooks/use-para-ethers-send-transaction" /> hooks wrap common signer methods in a React Query mutation.

        ```tsx theme={null}
        import { useParaEthersSigner, useParaEthersSignMessage } from "@getpara/react-sdk";
        import { JsonRpcProvider } from "ethers";

        const provider = new JsonRpcProvider("https://ethereum-sepolia-rpc.publicnode.com");

        function SignWithEthers() {
          const { ethersSigner, isLoading } = useParaEthersSigner({ provider });
          const { signMessageAsync, isPending } = useParaEthersSignMessage(ethersSigner);

          const handleSign = async () => {
            const signature = await signMessageAsync("Hello from Para!");
            console.log("Signature:", signature);
          };

          if (isLoading) return <p>Loading...</p>;
          return (
            <button onClick={handleSign} disabled={isPending}>
              {isPending ? "Signing..." : "Sign Message"}
            </button>
          );
        }
        ```

        ### Wallet Resolution

        When no `address` or `walletId` is passed, the hook resolves the wallet in this order:

        1. **Selected wallet** — if the user selected an EVM wallet in the UI. If there is only one EVM wallet in the session, it is already selected by default
        2. **First EVM wallet** — the first available EVM wallet on the account

        To target a specific wallet, pass `address` or `walletId`:

        ```tsx theme={null}
        const { ethersSigner } = useParaEthersSigner({
          provider,
          address: "0x1234...",  // or walletId: "uuid-..."
        });
        ```
      </Tab>

      <Tab title="Direct (Non-React)">
        Use `createParaEthersSigner` to create a signer directly.

        ```typescript theme={null}
        import { createParaEthersSigner } from "@getpara/ethers-v6-integration";
        import { ethers } from "ethers";
        import Para from "@getpara/web-sdk";

        const para = new Para("YOUR_API_KEY");
        const provider = new ethers.JsonRpcProvider("https://ethereum-sepolia-rpc.publicnode.com");

        // Authenticate first...

        const signer = createParaEthersSigner({ para, provider });
        const signature = await signer.signMessage("Hello from Para!");
        ```

        ### Wallet Resolution

        When no `address` or `walletId` is passed, the factory picks the first available EVM wallet.

        To target a specific wallet:

        ```typescript theme={null}
        const signer = createParaEthersSigner({
          para,
          provider,
          address: "0x1234...",  // looks up by address
          // or walletId: "uuid-...",  // looks up by ID
        });
        ```
      </Tab>
    </Tabs>
  </Tab>

  <Tab title="Viem">
    ## Install

    ```bash theme={null}
    npm install @getpara/react-sdk viem
    ```

    <Info>
      `@getpara/react-sdk` bundles `@getpara/viem-v2-integration` — no separate integration package install needed.
    </Info>

    ## Usage

    <Tabs>
      <Tab title="Hook (React)">
        Use the <Link label="useParaViemClient" href="/v3/react/guides/hooks/use-para-viem-client" /> hook to create a viem `WalletClient` for your user's Para embedded wallet or external wallet. For convenience, the <Link label="useParaViemSignMessage" href="/v3/react/guides/hooks/use-para-viem-sign-message" />, <Link label="useParaViemSendTransaction" href="/v3/react/guides/hooks/use-para-viem-send-transaction" />, <Link label="useParaViemSignTypedData" href="/v3/react/guides/hooks/use-para-viem-sign-typed-data" />, and <Link label="useParaViemWriteContract" href="/v3/react/guides/hooks/use-para-viem-write-contract" /> hooks wrap common client methods in a React Query mutation.

        ```tsx theme={null}
        import { useParaViemClient, useParaViemSignMessage } from "@getpara/react-sdk";
        import { createPublicClient, http } from "viem";
        import { sepolia } from "viem/chains";

        const publicClient = createPublicClient({
          chain: sepolia,
          transport: http("https://ethereum-sepolia-rpc.publicnode.com"),
        });

        function SignWithViem() {
          const { viemClient, isLoading } = useParaViemClient({
            walletClientConfig: {
              chain: sepolia,
              transport: http("https://ethereum-sepolia-rpc.publicnode.com"),
            },
          });

          const { signMessageAsync, isPending } = useParaViemSignMessage(viemClient);

          const handleSign = async () => {
            const signature = await signMessageAsync({ message: "Hello from Para!" });
            console.log("Signature:", signature);
          };

          if (isLoading) return <p>Loading...</p>;
          return (
            <button onClick={handleSign} disabled={isPending}>
              {isPending ? "Signing..." : "Sign Message"}
            </button>
          );
        }
        ```

        ### Wallet Resolution

        When no `address` or `walletId` is passed, the hook resolves the wallet in this order:

        1. **Selected wallet** — if the user selected an EVM wallet in the UI. If there is only one EVM wallet in the session, it is already selected by default
        2. **First EVM wallet** — the first available EVM wallet on the account

        To target a specific wallet:

        ```tsx theme={null}
        const { viemClient } = useParaViemClient({
          address: "0x1234...",  // or walletId: "uuid-..."
          walletClientConfig: { chain: sepolia, transport: http() },
        });
        ```
      </Tab>

      <Tab title="Direct (Non-React)">
        Use `createParaViemAccount` and `createParaViemClient` to create a wallet client directly.

        ```typescript theme={null}
        import { createParaViemAccount, createParaViemClient } from "@getpara/viem-v2-integration";
        import { createPublicClient, http } from "viem";
        import { sepolia } from "viem/chains";
        import Para from "@getpara/web-sdk";

        const para = new Para("YOUR_API_KEY");

        // Authenticate first...

        const account = createParaViemAccount({ para });
        const walletClient = createParaViemClient({ para, walletClientConfig: {
          account,
          chain: sepolia,
          transport: http("https://ethereum-sepolia-rpc.publicnode.com"),
        }});

        const signature = await walletClient.signMessage({ message: "Hello from Para!" });
        ```

        ### Wallet Resolution

        When no `address` or `walletId` is passed, the factory picks the first available EVM wallet.

        To target a specific wallet:

        ```typescript theme={null}
        const account = createParaViemAccount({
          para,
          address: "0x1234...",  // looks up by address
          // or walletId: "uuid-...",  // looks up by ID
        });
        ```
      </Tab>
    </Tabs>
  </Tab>

  <Tab title="Wagmi">
    ## Install

    ```bash theme={null}
    npm install @getpara/react-sdk
    ```

    <Note>
      **ParaProvider already includes Wagmi under the hood.** No additional packages needed. If you've set up ParaProvider as shown in the <Link label="Next.js setup guide" href="/v3/react/setup/nextjs" />, you can use Wagmi hooks directly.
    </Note>

    ## Usage

    ```tsx theme={null}
    import { useAccount, useBalance, useSendTransaction, useSignMessage } from "@getpara/react-sdk/wagmi";

    function MyComponent() {
      const { address, isConnected } = useAccount();
      const { data: balance } = useBalance({ address });
      const { signMessageAsync } = useSignMessage();
      const { sendTransaction } = useSendTransaction();

      if (!isConnected) return <p>Not connected</p>;

      return (
        <div>
          <p>Address: {address}</p>
          <p>Balance: {balance?.formatted}</p>
          <button onClick={() => signMessageAsync({ message: "Hello" })}>
            Sign Message
          </button>
        </div>
      );
    }
    ```

    ### Wallet Resolution

    Wagmi uses its own connector system. When using ParaProvider, the Para connector is the active connector and signing goes through Para's MPC. External wallets connected via wagmi (e.g. MetaMask) use their own signing providers.

    <Info>
      For advanced users integrating Para with existing Wagmi setups that manage external wallets, see the <Link label="Wagmi Connector Guide" href="/v3/react/guides/wagmi-connector" />.
    </Info>
  </Tab>
</Tabs>

## Next Steps

<CardGroup cols={3}>
  <Card title="Configure RPC" description="Set up custom RPC endpoints for different networks" href="/v3/react/guides/web3-operations/evm/configure-rpc" icon="globe" />

  <Card title="Send Tokens" description="Transfer ETH and ERC-20 tokens programmatically" href="/v3/react/guides/web3-operations/evm/send-tokens" icon="paper-plane" />

  <Card title="Sign Messages" description="Sign messages for authentication or verification" href="/v3/react/guides/web3-operations/evm/sign-messages" icon="signature" />
</CardGroup>