Configuration

To get started with Flexy, you need to provide an essential prop which handles all operations within the widget and can be configured as follows:

prop	walletClientOrSigner
type	WalletClient | JsonRpcSigner

This prop allows the widget interact with the blockchain and request for signatures from the connected user. Depending on your implementation, you may pass in either:

• WalletClient: For projects using Viem

• JsonRpcSigner: For projects using Ethers JS

Most often than not, you'll be using a javascript library/toolkit to setup an ethereum connection on the browser. Here's how to setup Flexy using the popular ones:

Using Wagmi

import '@flexy.tech/widget/style.css'
import { Flexy } from "@flexy.tech/widget";

import { useWalletClient } from 'wagmi'

export const YourApp = () => {
  const { data } = useWalletClient()

  return (
    <Flexy
      walletClientOrSigner={data}
    />
  );
};

Using @web3-react

import '@flexy.tech/widget/style.css'
import { Flexy } from "@flexy.tech/widget";

import { useWeb3React } from '@web3-react/core'

export const YourApp = () => {
  const { provider } = useWeb3React()

  return (
    <Flexy
      walletClientOrSigner={provider.getSigner()}
    />
  );
};

No Third Party Toolkit?

While this is most often not the case, you may have setup your ethereum connection using only viem or ethers and no third party libraries. Here's how to setup Flexy in this case:

Using Viem

import "@flexy.tech/widget/style.css";
import { Flexy } from "@flexy.tech/widget";

import { useEffect, useState } from "react";
import { WalletClient, createWalletClient, custom } from 'viem'

export const YourApp = () => {
  const [walletClient, setWalletClient] = useState<WalletClient>();
  
  useEffect(() => {
    if (window.ethereum) {
      const newWalletClient = createWalletClient({
        transport: custom(window.ethereum),
      })

      setWalletClient(newWalletClient)
    }
  }, [])

  return (
    <Flexy
      walletClientOrSigner={walletClient}
    />
  );
};

Using Ethers

import "@flexy.tech/widget/style.css";
import { Flexy } from "@flexy.tech/widget";

import { useEffect, useState } from "react";
import { BrowserProvider, JsonRpcSigner } from "ethers";

export const YourApp = () => {
  const [signer, setSigner] = useState<JsonRpcSigner>();
  
  useEffect(() => {
    if (window.ethereum) {
      const provider = new BrowserProvider(window.ethereum)

      const init = async () => {
        const newSigner = await provider?.getSigner();
        setSigner(newSigner);
      };

      init();
    }
  }, []);

  return (
    <Flexy
      walletClientOrSigner={signer}
    />
  );
};