> ## 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-native/quickstart" 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-native/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-native-wallet @getpara/ethers-v6-integration ethers
    ```

    <Info>
      `@getpara/ethers-v6-integration` is a separate package — install it alongside `@getpara/react-native-wallet`.
    </Info>

    ## Usage

    <Tabs>
      <Tab title="Hook (React)">
        Use the <Link label="useParaEthersSigner" href="/v3/react-native/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-native/guides/hooks/use-para-ethers-sign-message" /> and <Link label="useParaEthersSendTransaction" href="/v3/react-native/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-native-wallet/evm/ethers";
        import { JsonRpcProvider } from "ethers";
        import { Text, TouchableOpacity } from "react-native";

        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 <Text>Loading...</Text>;
          return (
            <TouchableOpacity disabled={isPending} onPress={handleSign}>
              <Text>{isPending ? "Signing..." : "Sign Message"}</Text>
            </TouchableOpacity>
          );
        }
        ```

        ### 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/core-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-native-wallet @getpara/viem-v2-integration viem
    ```

    <Info>
      `@getpara/viem-v2-integration` is included as a dependency of `@getpara/react-native-wallet`, but you should install it explicitly to ensure version alignment.
    </Info>

    ## Usage

    <Tabs>
      <Tab title="Hook (React)">
        Use the <Link label="useParaViemClient" href="/v3/react-native/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-native/guides/hooks/use-para-viem-sign-message" />, <Link label="useParaViemSendTransaction" href="/v3/react-native/guides/hooks/use-para-viem-send-transaction" />, <Link label="useParaViemSignTypedData" href="/v3/react-native/guides/hooks/use-para-viem-sign-typed-data" />, and <Link label="useParaViemWriteContract" href="/v3/react-native/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-native-wallet/evm/viem";
        import { createPublicClient, http } from "viem";
        import { sepolia } from "viem/chains";
        import { Text, TouchableOpacity } from "react-native";

        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 <Text>Loading...</Text>;
          return (
            <TouchableOpacity disabled={isPending} onPress={handleSign}>
              <Text>{isPending ? "Signing..." : "Sign Message"}</Text>
            </TouchableOpacity>
          );
        }
        ```

        ### 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/core-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>
</Tabs>

## Next Steps

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

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

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