SDK Widget Hello World

npm install @halliday-sdk/payments

import { useEffect } from "react";
import { createRoot } from "react-dom/client";
import { WagmiProvider, useAccount, useDisconnect, useWalletClient } from "wagmi";
import { mainnet, base } from "wagmi/chains";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { RainbowKitProvider, getDefaultConfig, useConnectModal, useAccountModal } from "@rainbow-me/rainbowkit";
import "@rainbow-me/rainbowkit/styles.css";
import { HallidayPaymentsProvider, useHallidayPayments } from "@halliday-sdk/payments/react";
import { connectWalletClient } from "@halliday-sdk/payments/viem";

const wagmiConfig = getDefaultConfig({
  appName: "My App",
  projectId: PROJECT_ID,
  chains: [ mainnet, base ],
});

const queryClient = new QueryClient();

function App() {
  const { openDeposit, updateWallets, isReady } = useHallidayPayments();
  const { address } = useAccount();
  const { data: walletClient } = useWalletClient({ assertChainId: false });
  const { openConnectModal } = useConnectModal();
  const { openAccountModal } = useAccountModal();
  const { disconnect } = useDisconnect();

  const owner = connectWalletClient(() => walletClient);
  const enabled = isReady && !!walletClient;

  useEffect(() => {
    updateWallets({
      owner,
      deposit: { funders: [], destinationAddress: address },
    });
  }, [enabled, walletClient, address]);

  return (
    <div>
      <button onClick={address ? (openAccountModal ?? (() => disconnect())) : openConnectModal}>
        {address ? "Disconnect" : "Connect wallet"}
      </button>
      <button disabled={!enabled} onClick={openDeposit}>
        Deposit with Halliday
      </button>
    </div>
  );
}

createRoot(document.getElementById("root")).render(
  <WagmiProvider config={ wagmiConfig }>
    <QueryClientProvider client={ queryClient }>
      <RainbowKitProvider>
        <HallidayPaymentsProvider
          apiKey="HALLIDAY_API_KEY"
          deposit={{ outputs: [ "base:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913" ] }}>
          <App />
        </HallidayPaymentsProvider>
      </RainbowKitProvider>
    </QueryClientProvider>
  </WagmiProvider>
);