Custom Trigger Button

In cases where the built in trigger button isn't exactly what you need, you can use the low-level Flexy.Custom to create your own custom trigger button. This component renders a function, which provides what you need to re-implement the built-in button.

A sample re-implementation is demonstrated below:

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

import { useWalletClient } from 'wagmi'

export const YourApp = () => {
  const { data } = useWalletClient()
  
  return (
    <Flexy.CustomRender
      walletClientOrSigner={data}
    >
      {({ openFlexyModal }) => (
        <button onClick={openFlexyModal}>
          Fund me!
        </button>
      )}
    </Flexy.CustomRender>
  );
};

In the custom trigger button sample above, we made use of wagmi. The configuration for other web3 libraries as documented earlier remains unchanged even while using Flexy.CustomRender.

Last updated