Small sample on how to connect Dynamic embedded wallet with Coinflow Withdraw component

coinflow-dynamic-wallet.tsx

"use client";

import { type CoinflowEnvs, CoinflowWithdraw, type SolanaWallet } from "@coinflowlabs/react";
import { type Connection, PublicKey, type Transaction, type VersionedTransaction } from "@solana/web3.js";
import { useEffect, useMemo, useState } from "react";

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

// types
export type Status = "idle" | "loading" | "success" | "error";

export function CoinflowWithdrawDialog(): JSX.Element {
  // react hooks
  const [status, setStatus] = useState<Status>("idle");
  const [connection, setConnection] = useState<Connection | null>(null);

  // dynamic hooks
  const { primaryWallet } = useDynamicContext();

  // effects
  useEffect(
    function getConnection() {
      async function getConnectionFromPrimaryWallet() {
        try {
          setStatus("loading");

          if (!primaryWallet) {
            throw new Error("No wallet found");
          }

          if (!isSolanaWallet(primaryWallet)) {
            throw new Error("This wallet is not a Solana wallet");
          }

          const connection = await primaryWallet.getConnection();

          setConnection(connection);
          setStatus("success");
        } catch (error) {
          setStatus("error");
          // YOUR ERROR HANDLING LOGIC
        }
      }

      getConnectionFromPrimaryWallet();
    },
    [primaryWallet],
  );

  // memos
  const coinflowWallet = useMemo(() => {
    if (!primaryWallet) {
      return null;
    }

    if (!isSolanaWallet(primaryWallet)) {
      throw new Error("This wallet is not a Solana wallet");
    }

    const publicKey = new PublicKey(primaryWallet.address);

    return {
      publicKey,
      signMessage: async (message: Uint8Array): Promise<Uint8Array | undefined> => {
        try {
          const decoder = new TextDecoder();
          const decodedMessage = decoder.decode(message);

          const signedMessage = await primaryWallet.signMessage(decodedMessage);

          if (!signedMessage) {
            throw new Error("No signed message found");
          }

          const uint8Array = Uint8Array.from(atob(signedMessage), (c) => c.charCodeAt(0));

          return uint8Array;
        } catch (error) {
          // YOUR ERROR HANDLING LOGIC
        }
      },
      signTransaction: async (transaction: VersionedTransaction): Promise<VersionedTransaction | undefined> => {
        try {
          const newSigner = await primaryWallet.getSigner();

          if (transaction.message) {
            // @ts-ignore
            const message = await primaryWallet.signMessage(transaction.message);

            if (message) {
              const encoder = new TextEncoder();
              const uint8Array = encoder.encode(message);

              transaction.addSignature(publicKey, uint8Array);
            }
          }

          const signedTransaction = await newSigner.signTransaction(transaction);

          return signedTransaction;
        } catch (error) {
          // YOUR ERROR HANDLING LOGIC
        }
      },
      sendTransaction: async (transaction: Transaction): Promise<string | undefined> => {
        try {
          if (!connection) {
            throw new Error("No connection found");
          }

          const signer = await primaryWallet.getSigner();
          const signedTransaction = await signer.signTransaction(transaction);

          const serializedTransaction = signedTransaction.serialize();
          const signature = await connection.sendRawTransaction(serializedTransaction, {
            skipPreflight: true,
          });

          return signature;
        } catch (error) {
          // YOUR ERROR HANDLING LOGIC
        }
      },
    } as unknown as SolanaWallet;
  }, [primaryWallet, connection]);

  // early return
  if (status === "error" || !coinflowWallet || !connection) {
    return <p>Something went wrong</p>;
  }

  // constants
  const coinflowEnv = (process.env.NODE_ENV === "production" ? "prod" : "sandbox") as CoinflowEnvs;

  return (
    <CoinflowWithdraw
      env={coinflowEnv}
      blockchain="solana"
      merchantId="YOUR_MERCHANT_ID"
      email="YOUR_EMAIL@PROVIDER.COM"
      wallet={coinflowWallet}
      connection={connection}
    />
  );
}