Blinks

/**
 * Important: This component must be wrapped with <WalletProvider />
 * and <WalletModalProvider /> in your application.
 */

import "@dialectlabs/blinks/index.css";

import {
  Blink,
  useBlink,
  useBlinksRegistryInterval,
} from "@dialectlabs/blinks";
import { useBlinkSolanaWalletAdapter } from "@dialectlabs/blinks/hooks/solana";

const App = () => {
  // URL of your endpoint (blink provider)
  const blinkApiUrl = "...";

  // Initiates adapter
  const { adapter } = useBlinkSolanaWalletAdapter(
    "<YOUR_RPC_URL_OR_CONNECTION>"
  );

  // Fetches the blink from the provided URL
  const { blink, isLoading } = useBlink({ url: blinkApiUrl });

  if (isLoading) return null;

  return <Blink blink={blink} adapter={adapter} />;
};

import { useBlink, type BlinkAdapter } from "@dialectlabs/blinks";
import { Blink } from "@dialectlabs/blinks-react-native";
import { PublicKey } from "@solana/web3.js";
import type React from "react";

function getWalletAdapter(): BlinkAdapter {
  return {
    connect: async (_context) => {
      console.log("connect");
      return PublicKey.default.toString();
    },
    signTransaction: async (_tx, _context) => {
      console.log("signTransaction");
      return {
        signature: "signature",
      };
    },
    confirmTransaction: async (_signature, _context) => {
      console.log("confirmTransaction");
    },
  };
}

export const BlinkInTheWalletIntegrationExample: React.FC<{
  url: string; // could be blink api or website url
}> = ({ url }) => {
  const adapter = getWalletAdapter();
  const { blink } = useBlink({ url });

  if (!blink) {
    // return placeholder component
  }
  const blinkUrl = new URL(url);
  return (
    <Blink
      theme={{
        "--blink-button": "#1D9BF0",
        "--blink-border-radius-rounded-button": 9999,
        // and any other custom styles
      }}
      blink={blink}
      adapter={adapter}
      websiteUrl={blinkUrl.href}
      websiteText={blinkUrl.hostname}
    />
  );
};