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

Was this helpful?