Wallets and embedded wallets

# EVM (wagmi v2 / viem v2)
npm install @layerhop/wagmi @layerhop/sdk wagmi viem @tanstack/react-query
# Solana
npm install @layerhop/solana @layerhop/sdk @solana/web3.js

import { LayerHopProvider, useExecuteQuote, useLayerHopQuote, useOrderStatus } from "@layerhop/wagmi";
import { useAccount } from "wagmi";

// Inside <WagmiProvider> + <QueryClientProvider> + <LayerHopProvider options={{ integrator: "myapp" }}>
function Swap() {
  const { address } = useAccount();
  const quote = useLayerHopQuote(address && {
    srcChain: "base", srcToken: "USDC", amount: "25000000",
    dstChain: "arbitrum", dstToken: "ETH", sender: address, recipient: address,
  });
  const exec = useExecuteQuote();
  const best = quote.data?.best;
  const order = useOrderStatus(best?.provider, exec.hash);
  return (
    <button disabled={!best || exec.isPending} onClick={() => best && exec.execute({ quote: best })}>
      {exec.isPending ? exec.status : exec.mode === "batch" ? "Sent in one confirmation" : "Swap"}
    </button>
  );
}

import { executeQuote } from "@layerhop/wagmi/actions";
import { LayerHop } from "@layerhop/sdk";

const lh = new LayerHop({ apiKey: process.env.LAYERHOP_API_KEY });
const { best } = await lh.quote(params);
const sent = await executeQuote(wagmiConfig, { quote: best, client: lh });
await sent.wait(); // true once confirmed

import { useAppKitProvider } from "@reown/appkit/react";
import type { Provider } from "@reown/appkit-adapter-solana/react";
import { executeSolanaQuote, fromInjectedProvider } from "@layerhop/solana";

const { walletProvider } = useAppKitProvider<Provider>("solana");
await executeSolanaQuote(fromInjectedProvider(walletProvider), { quote: best, client: lh, connection });

import { createConfig, http } from "wagmi";
import { base } from "wagmi/chains";
import { coinbaseWallet } from "wagmi/connectors";

export const wagmiConfig = createConfig({
  chains: [base],
  connectors: [coinbaseWallet({ appName: "My App", preference: "smartWalletOnly" })],
  transports: { [base.id]: http() },
});
// then: useExecuteQuote() / executeQuote(wagmiConfig, { quote })

import { PrivyProvider } from "@privy-io/react-auth";
import { createConfig, WagmiProvider } from "@privy-io/wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { http } from "wagmi";
import { base } from "viem/chains";
import { LayerHopProvider } from "@layerhop/wagmi";

const wagmiConfig = createConfig({ chains: [base], transports: { [base.id]: http() } });
const queryClient = new QueryClient();

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <PrivyProvider appId="your-privy-app-id">
      <QueryClientProvider client={queryClient}>
        <WagmiProvider config={wagmiConfig}>
          <LayerHopProvider options={{ integrator: "myapp" }}>{children}</LayerHopProvider>
        </WagmiProvider>
      </QueryClientProvider>
    </PrivyProvider>
  );
}

import { useSignAndSendTransaction, useSignTransaction, useWallets } from "@privy-io/react-auth/solana";
import { VersionedTransaction } from "@solana/web3.js";
import { bytesToBase58, executeSolanaQuote, type SolanaSigner } from "@layerhop/solana";

const { wallets } = useWallets();
const { signTransaction } = useSignTransaction();
const { signAndSendTransaction } = useSignAndSendTransaction();
const wallet = wallets[0]!;
const signer: SolanaSigner = {
  signTransaction: async (tx) =>
    VersionedTransaction.deserialize((await signTransaction({ transaction: tx.serialize(), wallet })).signedTransaction),
  signAndSendTransaction: async (tx) =>
    bytesToBase58((await signAndSendTransaction({ transaction: tx.serialize(), wallet })).signature),
};
await executeSolanaQuote(signer, { quote: best, client: lh, connection });

import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core";
import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
import { SolanaWalletConnectors } from "@dynamic-labs/solana";
import { DynamicWagmiConnector } from "@dynamic-labs/wagmi-connector";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { createConfig, http, WagmiProvider } from "wagmi";
import { base } from "viem/chains";

const wagmiConfig = createConfig({ chains: [base], multiInjectedProviderDiscovery: false, transports: { [base.id]: http() } });
const queryClient = new QueryClient();

<DynamicContextProvider settings={{ environmentId: "ENV_ID", walletConnectors: [EthereumWalletConnectors, SolanaWalletConnectors] }}>
  <WagmiProvider config={wagmiConfig}>
    <QueryClientProvider client={queryClient}>
      <DynamicWagmiConnector>{/* your app: useExecuteQuote() */}</DynamicWagmiConnector>
    </QueryClientProvider>
  </WagmiProvider>
</DynamicContextProvider>;

import { useDynamicContext } from "@dynamic-labs/sdk-react-core";
import { isSolanaWallet } from "@dynamic-labs/solana";
import { executeSolanaQuote, fromInjectedProvider } from "@layerhop/solana";

const { primaryWallet } = useDynamicContext();
if (primaryWallet && isSolanaWallet(primaryWallet)) {
  const signer = await primaryWallet.getSigner();
  await executeSolanaQuote(fromInjectedProvider(signer), { quote: best, client: lh, connection });
}

import { viemAdapter } from "thirdweb/adapters/viem";
import { base } from "thirdweb/chains";
import { useActiveWallet } from "thirdweb/react";
import { executeQuoteWithWalletClient } from "@layerhop/wagmi/actions";

const wallet = useActiveWallet();
// `client` is your thirdweb client (createThirdwebClient)
const walletClient = viemAdapter.wallet.toViem({ client, chain: base, wallet: wallet! });
await executeQuoteWithWalletClient(walletClient, { quote: best, client: lh });

import { useConnection, useWallet } from "@solana/wallet-adapter-react";
import { executeSolanaQuote, fromWalletAdapter } from "@layerhop/solana";

const wallet = useWallet();
const { connection } = useConnection();
const sent = await executeSolanaQuote(fromWalletAdapter(wallet), { quote: best, client: lh, connection });
await sent.wait();