# ethidentitykit.com llms-full.txt > Ethereum Identity Kit facilitates the integration of Ethereum identity features into applications via a React component library, providing developers with tools and documentation for user profile management and on-chain transactions. > Updated at: 22:35 05/28/25 # useFollowButton The `useFollowButton` hook manages the state and actions for a follow button component. It determines the current follow state between a `lookupAddress` and a `connectedAddress`, and provides functions to handle follow, unfollow, block, and mute actions. ### Add to your project ```tsx copy import { useFollowButton } from 'ethereum-identity-kit' export default function FollowButtonComponent() { const { buttonText, buttonState, handleAction, isLoading, disableHover, setDisableHover } = useFollowButton({ lookupAddress: '0x1234...abcd', connectedAddress: '0xabcd...1234', }) // Create your own loading states if (isLoading) return
| Download |
| Light | Logo |
| Download |
| Dark | Logo |
| Download |
| Dark | Logo with Text |
| Download |
## Powered By Badges
If you're integrating Ethereum Identity Kit into your application, you can showcase this using our "Powered By" badges. These badges come in different styles to match your application's design.
| Mode | Type | Preview | Download |
| ----- | ------------------ | --------------------------------------------------------------------------- | ---------------------------------------------------------------- |
| Light | Logo with Text |
| Download |
| Light | Rounded Inner Text |
| Download |
| Light | Rounded Outer Text |
| Download |
| Dark | Logo with Text |
| Download |
| Dark | Rounded Inner Text |
| Download |
| Dark | Rounded Outer Text |
| Download |
---
# List Operations
The list operations module provides utility functions for creating list operations in the EFP (Ethereum Follow Protocol) system.
## Functions
### listOpAddListRecord
Creates a list operation to add a new record to a list.
```tsx
const op = listOpAddListRecord('0x...')
```
#### Parameters
| Parameter | Type | Description |
| --------- | ------- | --------------------------------------- |
| `address` | Address | The Ethereum address to add to the list |
#### Return Value
Returns a `ListOpType` object:
```tsx
{
version: 1,
opcode: Opcode.FOLLOW,
data: address
}
```
### listOpRemoveListRecord
Creates a list operation to remove a record from a list.
```tsx
const op = listOpRemoveListRecord('0x...')
```
#### Parameters
| Parameter | Type | Description |
| --------- | ------- | -------------------------------------------- |
| `address` | Address | The Ethereum address to remove from the list |
#### Return Value
Returns a `ListOpType` object:
```tsx
{
version: 1,
opcode: Opcode.UNFOLLOW,
data: address
}
```
### listOpAddTag
Creates a list operation to add a tag to a list record.
```tsx
const op = listOpAddTag('0x...', 'friend')
```
#### Parameters
| Parameter | Type | Description |
| --------- | ------- | --------------------------- |
| `address` | Address | The Ethereum address to tag |
| `tag` | string | The tag to add |
#### Return Value
Returns a `ListOpType` object:
```tsx
{
version: 1,
opcode: Opcode.TAG,
data: `${address}${toHex(tag).slice(2)}`
}
```
### listOpRemoveTag
Creates a list operation to remove a tag from a list record.
```tsx
const op = listOpRemoveTag('0x...', 'friend')
```
#### Parameters
| Parameter | Type | Description |
| --------- | ------- | ------------------------------------------- |
| `address` | Address | The Ethereum address to remove the tag from |
| `tag` | string | The tag to remove |
#### Return Value
Returns a `ListOpType` object:
```tsx
{
version: 1,
opcode: Opcode.UNTAG,
data: `${address}${toHex(tag).slice(2)}`
}
```
## What are list operations?
List operations are a way to manage lists on the EFP (Ethereum Follow Protocol). They are used to add, remove, and tag records in a list.
- [EFP Docs - List Operations](https://docs.efp.app/design/list-ops/)
---
# Transactions
The transactions module provides utility functions for handling EFP (Ethereum Follow Protocol) list operations and transactions.
## Functions
### formatListOpsTransaction
Formats a list operations transaction with the provided parameters. Use this only if you are trying to execute EFP transactions yourself. If you are using [TransactionProvider](/docs/components/transaction-provider) with [useTransaction](/docs/hooks/use-transaction), and are using the [addlistopstransaction](/docs/hooks/useTransactions#addlistopstransaction) function, you don't need to use it.
```tsx
const transaction = formatListOpsTransaction({
nonce: 1n,
chainId: 1,
listOps: [{ opcode: 1, data: '0x...' }],
connectedAddress: '0x...',
isMintingNewList: false,
})
```
#### Parameters
| Parameter | Type | Description |
| ------------------ | ------------ | -------------------------------------- |
| `nonce` | bigint | The nonce for the transaction |
| `chainId` | number | The chain ID to use |
| `listOps` | ListOpType[] | Array of list operations to perform |
| `connectedAddress` | Address | The connected wallet address |
| `isMintingNewList` | boolean | Whether this is for minting a new list |
### getListOpData
Generates list operation data from an address and optional tag.
```tsx
const data = getListOpData('0x...', 'tag')
```
#### Parameters
| Parameter | Type | Description |
| --------- | ------- | ----------------------- |
| `address` | Address | The Ethereum address |
| `tag` | string | Optional tag to include |
### getListOpsFromTransaction
Extracts list operations from a transaction.
```tsx
const listOps = getListOpsFromTransaction(transaction)
```
#### Parameters
| Parameter | Type | Description |
| ------------- | --------------- | ------------------------------------------ |
| `transaction` | TransactionType | The transaction to extract operations from |
### getMintTxNonce
Extracts the nonce from a mint transaction.
```tsx
const nonce = getMintTxNonce(transaction)
```
### getMintTxChainId
Extracts the chain ID from a mint transaction.
```tsx
const chainId = getMintTxChainId(transaction)
```
### getMintTxRecordsAddress
Extracts the records address from a mint transaction.
```tsx
const recordsAddress = getMintTxRecordsAddress(transaction)
```
### getPendingTxAddresses
Gets all addresses from pending list update transactions.
```tsx
const addresses = getPendingTxAddresses(transactions)
```
### extractAddressAndTag
Extracts address and tag from list operation data.
```tsx
const { address, tag } = extractAddressAndTag(data)
```
### getPendingTxListOps
Gets all list operations from pending transactions.
```tsx
const listOps = getPendingTxListOps(transactions)
```
### getPendingTxAddressesAndTags
Gets all addresses and tags from pending transactions.
```tsx
const addressesAndTags = getPendingTxAddressesAndTags(transactions)
```
### prepareMintTransaction
Prepares a mint transaction with the given parameters.
```tsx
const mintTx = prepareMintTransaction(mintNonce, chainId)
```
#### Parameters
| Parameter | Type | Description |
| ----------- | ------ | ---------------------------------- |
| `mintNonce` | bigint | The nonce for the mint transaction |
| `chainId` | number | Optional chain ID to use |
### transformTxsForLocalStorage
Transforms transactions for local storage by converting bigint values to strings.
```tsx
const transformedTxs = transformTxsForLocalStorage(transactions)
```
#### Parameters
| Parameter | Type | Description |
| --------- | ----------------- | ---------------------------------- |
| `txs` | TransactionType[] | Array of transactions to transform |
---
# Validity
The validity module provides utility functions for validating various types of data in the application.
## Functions
### isLinkValid
Checks if a given link is a valid http or https link, or is pulling from public or assets folders. This is used to filter out ipfs or invalid links and fall back to the [ENS Metadata Service](https://support.ens.domains/en/articles/8228750-the-ens-metadata-service) (if there is an ENS name).
```tsx
const isValid = isLinkValid('https://example.com') // true
const isValid = isLinkValid('invalid-link') // false
```
#### Parameters
| Parameter | Type | Description |
| --------- | ------ | -------------------- |
| `link` | string | The link to validate |
#### Return Value
Returns `true` if the link contains one of the following prefixes:
- `https://`
- `http://`
- `public/`
- `/assets`
Returns `false` if the link is undefined or doesn't contain any of the valid prefixes.
### isValidEnsName
Validates if a given string is a valid [ENS (Ethereum Name Service)](https://ens.domains/) name.
```tsx
const isValid = isValidEnsName('vitalik.eth') // true
const isValid = isValidEnsName('invalid-ens') // false
```
#### Parameters
| Parameter | Type | Description |
| --------- | ------ | ------------------------ |
| `name` | string | The ENS name to validate |
#### Return Value
Returns `true` if the name is a valid ENS name, `false` otherwise. Uses the `normalize` function from `viem/ens` for validation.
---
# List Storage Location
The list storage location module provides functionality to retrieve the storage location of an EFP list from the list registry contract.
## Functions
### getListStorageLocation
Retrieves the chain ID and storage slot for a given list number from the EFP List Registry contract.
```tsx
const { chainId, slot } = await getListStorageLocation('1')
```
#### Parameters
| Parameter | Type | Description |
| --------- | ------ | ----------------------------------------------- |
| `list` | string | The list number to get the storage location for |
#### Return Value
Returns an object containing:
- `chainId`: number - The chain ID where the list is stored
- `slot`: bigint - The storage slot where the list data is stored
#### Example
```tsx
const location = await getListStorageLocation('1')
console.log(location)
// {
// chainId: 1,
// slot: 123456789n
// }
```
#### Technical Details
The function:
1. Creates a public client for the default chain
2. Gets the list registry contract instance
3. Calls `getListStorageLocation` on the contract with the list number
4. Extracts the chain ID and slot from the returned storage location
5. Returns the parsed data
For more information about list storage locations, see the [EFP documentation](https://docs.efp.app/design/list-storage-location/).
## What is a list storage location?
A list storage location is a unique identifier for a list on a specific chain. It is a combination of a chain ID and a storage slot. The chain ID is the ID of the chain where the list is stored, and the storage slot is the slot where the list data is stored.
- [EFP Docs - List Storage Location](https://docs.efp.app/design/list-storage-location/)
---
# Formatters
The formatters module provides utility functions for formatting various types of data in the application.
## Functions
### formatNumber
Formats a number to include separators ("," for thousands, "." for decimals)
```tsx
const formattedNumber = formatNumber(1234.56) // "1,234.56" (en-US)
```
#### Parameters
| Parameter | Type | Description |
| --------- | ------ | -------------------- |
| `number` | number | The number to format |
### formatFollowersYouKnowText
Formats the text shown in the common followers component next to the avatars.
```tsx
const text = formatFollowersYouKnowText(3) // "1 other you know follows them"
```
#### Parameters
| Parameter | Type | Description |
| -------------- | ------ | ------------------------------ |
| `resultLength` | number | The number of common followers |
#### Return Values
| Result Length | Return Value |
| ------------- | --------------------------------- |
| 0 | "No common followers" |
| 1 | " follows them" |
| 2 | " follow them" |
| 3 | "1 other you know follows them" |
| >3 | "{n} others you know follow them" |
### formatQueryParams
Formats query parameters for API calls.
```tsx
const queryString = formatQueryParams({
address: '0x...',
tags: ['tag1', 'tag2'],
limit: 10,
}) // "address=0x...&tags=tag1,tag2&limit=10"
```
#### Parameters
| Parameter | Type | Description |
| --------- | ----------------------------------------------------------------- | ---------------------------------- |
| `inputs` | Record