Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/coinbase/onchainkit
React components and TypeScript utilities for top-tier onchain apps.
https://github.com/coinbase/onchainkit
Last synced: 28 days ago
JSON representation
React components and TypeScript utilities for top-tier onchain apps.
- Host: GitHub
- URL: https://github.com/coinbase/onchainkit
- Owner: coinbase
- License: mit
- Created: 2023-12-11T23:36:10.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-04-12T21:39:39.000Z (3 months ago)
- Last Synced: 2024-04-13T20:49:12.593Z (3 months ago)
- Language: TypeScript
- Homepage: https://onchainkit.xyz
- Size: 22.3 MB
- Stars: 325
- Watchers: 11
- Forks: 46
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Lists
- awesome-web3 - OnchainKit - Collection of tools to build world-class onchain apps with CSS, React, and Typescript. (Software Development / JavaScript)
- awesome-frames - Onchainkit: Deploy onchain
README
# OnchainKit
React components and TypeScript utilities to help you build top-tier onchain apps.
## Documentation
For documentation and guides, visit [onchainkit.xyz](https://onchainkit.xyz/).
## Quickstart
To integrate OnchainKit into your project, begin by installing the necessary packages.
```bash
# Yarn: Add library
yarn add @coinbase/onchainkit [email protected]
# or
# Use NPM
npm install @coinbase/onchainkit [email protected]
# Use PNPM
pnpm add @coinbase/onchainkit [email protected]
```
## Components
#### Display ENS [avatars](https://onchainkit.xyz/identity/avatar), Attestation [badges](https://onchainkit.xyz/identity/badge), and ENS [names](https://onchainkit.xyz/identity/name).
```tsx
const EAS_SCHEMA_ID = '0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9';
const ACCOUNT_ADDRESS = '0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9';
;
```
#### Convert your web page into a [Frame](https://onchainkit.xyz/frame/frame-metadata)
```tsx
import { FrameMetadata } from '@coinbase/onchainkit/frame';
export default function HomePage() {
return (
...
...
);
}
```
#### Create or connect your wallet with [Connect Account](https://onchainkit.xyz/wallet/connect-account), powered by [Smart Wallet](https://www.smartwallet.dev/why).
```tsx
{(() => {
if (status === 'disconnected') {
return ; // [!code focus]
}
return (
disconnect()}>
);
})()}
```
#### Search [Tokens](https://onchainkit.xyz/token/types#token) using [getTokens](https://onchainkit.xyz/token/get-tokens) and display them with [TokenSearch](https://onchainkit.xyz/token/token-search), [TokenChip](https://onchainkit.xyz/token/token-chip), and [TokenRow](https://onchainkit.xyz/token/token-row)
```tsx
const [filteredTokens, setFilteredTokens] = useState([]);
const handleChange = useCallback((value) => {
async function getData(value) {
const tokens: Token[] = await getTokens({ search: value }); // [!code focus]
setFilteredTokens(filteredTokens);
}
getData(value);
}, []);
...
// [!code focus]
{filteredTokens.length > 0 && (
{filteredTokens.map((token) => (
// [!code focus]
))}
)}
{filteredTokens.length > 0 ? (
Tokens
{filteredTokens.map((token) => (
// [!code focus]
))}
) : (
No tokens found
)}
```
## Utilities
If you're seeking basic TypeScript utilities, we have plenty of ready-to-use options available.
##### Frames
- [getFrameHtmlResponse](https://onchainkit.xyz/frame/get-frame-html-response)
- [getFrameMessage](https://onchainkit.xyz/frame/get-frame-message)
- [getFrameMetadata](https://onchainkit.xyz/frame/get-frame-metadata)
##### Identity
- [getAvatar](https://onchainkit.xyz/identity/get-avatar)
- [getAttestations](https://onchainkit.xyz/identity/get-attestations)
- [getName](https://onchainkit.xyz/identity/get-name)
- [useName](https://onchainkit.xyz/identity/use-name)
- [useAvatar](https://onchainkit.xyz/identity/use-avatar)
##### Swap
Coming soon
##### Token
- [formatAmount](https://onchainkit.xyz/token/format-amount)
- [getTokens](https://onchainkit.xyz/identity/get-tokens)
##### Wallet
Coming soon
##### Farcaster
- [getFarcasterUserAddress](https://onchainkit.xyz/farcaster/get-farcaster-user-address)
##### XMTP
- [getXmtpFrameMessage](https://onchainkit.xyz/xmtp/get-xmtp-frame-message)
- [isXmtpFrameRequest](https://onchainkit.xyz/xmtp/is-xmtp-frame-request)
## Design
All our component designs are open-sourced. You can access the [Figma file](https://www.figma.com/community/file/1370194397345450683) to use them for your onchain project.
Figma - How to use
Figma - Components
## Community ☁️ 🌁 ☁️
Check out the following places for more OnchainKit-related content:
- Follow [@zizzamia](https://github.com/zizzamia) ([X](https://twitter.com/zizzamia), [Warpcast](https://warpcast.com/zizzamia)) for project updates
- Join the discussions on our [OnchainKit warpcast channel](https://warpcast.com/~/channel/onchainkit)
## Authors
- [@zizzamia](https://github.com/zizzamia) ([X](https://twitter.com/hey_shells), [Warpcast](https://warpcast.com/zizzamia)), Eng Lead
- [@0xchiaroscuro](https://github.com/0xchiaroscuro) ([X](https://twitter.com/chiaroscuro), [Warpcast](https://warpcast.com/chiaroscuro)), Design Lead
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details