Follow Button

The Follow Button component allows users to manage their social connection with another user. It displays the current relationship status between the lookupAddress and the connectedAddress and provides actions to change this state.

Add to your project

Follow button will work with the Transaction Modal component to handle the transaction flow, therefore you need to add the Transaction Modal component to your project. Make sure to add the Transaction Provider to your project as well. For all the other providers take a look at the setup documentation.

import { TransactionProvider, TransactionModal } from 'ethereum-identity-kit'
 
export default function App() {
  return (
    // Other Providers
    <TransactionProvider>
      <TransactionModal />
    </TransactionProvider>
  )
}

Add Follow Button component

Add the follow button wherever you wish, give it the lookupAddress and connectedAddress props, and you are good to go.

import FollowButton from 'ethereum-identity-kit'
 
export default function YourComponent() {
  return (
    <FollowButton
      lookupAddress="0x123..."
      connectedAddress="0xabc..."
      onDisconnectedClick={() => alert('Please connect your wallet')}
    />
  )
}

Try it out! - https://playground.ethidentitykit.com/?path=/story/organisms-follow-button-transaction-modal--follow-button-single-tx

Follow button for vitalik.eth - 0xd8da6bf26964af9d7eed9e03e53415d37aa96045

Parameters

Parameter	Description	Required	Default Value
`lookupAddress`	The address of the user to follow or unfollow.	Yes	-
`connectedAddress`	The address of the currently connected user.	No	-
`selectedList`	The EFP list number to manage follow state for. (defaults to connectedAddress)	No	-
`disabled`	Disables the button if set to true.	No	false
`onDisconnectedClick`	Function to call when the button is clicked and the user is not connected.	No	-
`sounds`	Object containing sound files to play on button actions.	No	-
`customClassName`	Custom CSS class names to apply to the button. (overwrites the default styles)	No	-
`customLoader`	Custom loader component to display while loading.	No	-
`props`	Additional HTML button element props.	No	-

Styling

The component uses predefined styles from FOLLOW_BUTTON_STYLES and can be further customized using the className prop. The button’s appearance changes based on its state (e.g., pending, disabled).

Sound Effects

You can provide sound effects for different button states by passing a sounds object. Each key in the object corresponds to a button state, and the value is the path to the sound file.

<FollowButton
  lookupAddress="0x123..."
  connectedAddress="0xabc..."
  sounds={{
    follow: '/sounds/follow.mp3',
    unfollow: '/sounds/unfollow.mp3',
    ...
  }}
/>

Custom Loader

If you want to use a custom loader while the button is in a loading state, pass a React component to the customLoader prop.

Notes

Ensure that the lookupAddress and connectedAddress are valid Ethereum addresses.
The onDisconnectedClick function is optional but recommended to handle cases where the user is not connected.
The sounds prop is optional and can enhance user experience with auditory feedback.

Common Followers Transaction Modal