-
Notifications
You must be signed in to change notification settings - Fork 233
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: added more info around Badge (#289)
- Loading branch information
Showing
24 changed files
with
282 additions
and
167 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,51 @@ | ||
| import { Name } from '@coinbase/onchainkit/identity'; | ||
| import App from './App'; | ||
|
|
||
| # `<Name />` | ||
|
|
||
| The `Name` component is used to display ENS names associated with Ethereum addresses. | ||
| When an ENS name is not available, it defaults to showing a truncated version of the address. | ||
|
|
||
| ## Usage | ||
|
|
||
| ```tsx | ||
| Address with an ENS: | ||
|
|
||
| :::code-group | ||
|
|
||
| ```tsx [code] | ||
| import { Name } from '@coinbase/onchainkit/identity'; | ||
| <Name address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1" sliced={false} />; // [!code focus] | ||
| ``` | ||
|
|
||
| <Name address="0x1234567890abcdef1234567890abcdef12345678" sliced={false} />; // [!code focus] | ||
| ```html [return html] | ||
| <span>zizzamia.eth</span> | ||
| ``` | ||
|
|
||
| ## Props | ||
| ::: | ||
|
|
||
| <App> | ||
| <Name address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1" /> | ||
| </App> | ||
|
|
||
| Address without an ENS avatar, and it defaults to his sliced address: | ||
|
|
||
| :::code-group | ||
|
|
||
| ```ts | ||
| type UseName = { | ||
| // Ethereum address to be resolved from ENS. | ||
| address: Address; | ||
| // Optional CSS class for custom styling. | ||
| className?: string; | ||
| // Determines if the address should be sliced when no ENS name is available. | ||
| sliced?: boolean; | ||
| // Additional HTML attributes for the span element. | ||
| props?: React.HTMLAttributes<HTMLSpanElement>; | ||
| }; | ||
| ```tsx [code] | ||
| import { Name } from '@coinbase/onchainkit/identity'; | ||
| <Name address="0x1234567890abcdef1234567890abcdef12345678" />; // [!code focus] | ||
| ``` | ||
|
|
||
| ```html [return html] | ||
| <span>0x123...5678</span> | ||
| ``` | ||
|
|
||
| ::: | ||
|
|
||
| <App> | ||
| <Name address="0x1234567890abcdef1234567890abcdef12345678" /> | ||
| </App> | ||
|
|
||
| ## Props | ||
|
|
||
| [`NameReact`](/identity/types#NameReact) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| /** | ||
| * @jest-environment jsdom | ||
| */ | ||
| import React from 'react'; | ||
| import { render, screen, waitFor } from '@testing-library/react'; | ||
| import '@testing-library/jest-dom'; | ||
|
|
||
| import { EASSchemaUid } from './identity/types'; | ||
| import { OnchainKitProvider } from './OnchainKitProvider'; | ||
| import { useOnchainKit } from './useOnchainKit'; | ||
|
|
||
| const TestComponent = () => { | ||
| const { identity } = useOnchainKit(); | ||
| return <div>{identity.eas.schemaId}</div>; | ||
| }; | ||
|
|
||
| describe('OnchainKitProvider', () => { | ||
| it('provides the context value correctly', async () => { | ||
| const schemaId: EASSchemaUid = `0x${'1'.repeat(64)}`; | ||
|
|
||
| render( | ||
| <OnchainKitProvider identity={{ easConfig: { schemaId } }}> | ||
| <TestComponent /> | ||
| </OnchainKitProvider>, | ||
| ); | ||
|
|
||
| await waitFor(() => { | ||
| expect(screen.getByText(schemaId)).toBeInTheDocument(); | ||
| }); | ||
| }); | ||
|
|
||
| it('throws an error if schemaId does not meet the required length', () => { | ||
| expect(() => | ||
| render( | ||
| <OnchainKitProvider identity={{ easConfig: { schemaId: '0x123' } }}> | ||
| <TestComponent /> | ||
| </OnchainKitProvider>, | ||
| ), | ||
| ).toThrow('EAS schemaId must be 64 characters prefixed with "0x"'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { ReactNode, createContext, useMemo } from 'react'; | ||
| import { Chain } from 'viem'; | ||
| import { base } from 'viem/chains'; | ||
|
|
||
| import { EASSchemaUid } from './identity/types'; | ||
| import { checkHashLength } from './utils/checkHashLength'; | ||
|
|
||
| type OnchainKitContextType = { | ||
| identity: { | ||
| eas: { | ||
| schemaId: EASSchemaUid; | ||
| chain: Chain; | ||
| }; | ||
| }; | ||
| }; | ||
|
|
||
| export const OnchainKitContext = createContext<OnchainKitContextType | null>(null); | ||
|
|
||
| type OnchainKitProviderProps = { | ||
| identity: { | ||
| easConfig: { | ||
| schemaId: EASSchemaUid; | ||
| chain?: Chain; | ||
| }; | ||
| }; | ||
| children: ReactNode; | ||
| }; | ||
|
|
||
| export function OnchainKitProvider({ identity: { easConfig }, children }: OnchainKitProviderProps) { | ||
| if (!checkHashLength(easConfig.schemaId, 64)) { | ||
| throw Error('EAS schemaId must be 64 characters prefixed with "0x"'); | ||
| } | ||
| const value = useMemo(() => { | ||
| const { schemaId, chain = base } = easConfig; | ||
| return { | ||
| identity: { | ||
| eas: { | ||
| schemaId, | ||
| chain, | ||
| }, | ||
| }, | ||
| }; | ||
| }, [easConfig]); | ||
| return <OnchainKitContext.Provider value={value}>{children}</OnchainKitContext.Provider>; | ||
| } |
Oops, something went wrong.