From aba47aa5115612463a1046553a0e40d2eb02197a Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Fri, 26 Jul 2024 16:49:05 -0700 Subject: [PATCH 01/22] Save progress --- .changeset/mighty-rockets-drive.md | 5 +++++ site/docs/pages/wallet/types.mdx | 8 ++++++++ site/docs/pages/wallet/wallet.mdx | 10 ++++++++++ 3 files changed, 23 insertions(+) create mode 100644 .changeset/mighty-rockets-drive.md diff --git a/.changeset/mighty-rockets-drive.md b/.changeset/mighty-rockets-drive.md new file mode 100644 index 0000000000..b49a1155ea --- /dev/null +++ b/.changeset/mighty-rockets-drive.md @@ -0,0 +1,5 @@ +--- +"@coinbase/onchainkit": patch +--- + +-**docs**: Implement WalletDropdownBaseName Sub-Component. By @cpcramer #916 diff --git a/site/docs/pages/wallet/types.mdx b/site/docs/pages/wallet/types.mdx index f60599d3bd..b8a617f0a8 100644 --- a/site/docs/pages/wallet/types.mdx +++ b/site/docs/pages/wallet/types.mdx @@ -56,6 +56,14 @@ type WalletReact = { }; ``` +## `WalletDropdownBaseNameReact` + +```ts +type WalletDropdownBaseNameReact = { + className?: string; // Optional className override for the element +}; +``` + ## `WalletDropdownReact` ```ts diff --git a/site/docs/pages/wallet/wallet.mdx b/site/docs/pages/wallet/wallet.mdx index 4677509bea..3baacd135e 100644 --- a/site/docs/pages/wallet/wallet.mdx +++ b/site/docs/pages/wallet/wallet.mdx @@ -8,6 +8,7 @@ import { Wallet, WalletDropdown, WalletDropdownLink, + WalletDropdownBaseName, WalletDropdownDisconnect, } from '@coinbase/onchainkit/wallet'; import { @@ -32,6 +33,7 @@ import { // [!code focus] ConnectWallet, // [!code focus] Wallet, // [!code focus] WalletDropdown, // [!code focus] + WalletDropdownBaseName, // [!code focus] WalletDropdownLink, // [!code focus] WalletDropdownDisconnect, // [!code focus] } from '@coinbase/onchainkit/wallet'; // [!code focus] @@ -59,6 +61,7 @@ export function WalletComponents() {
+ // [!code focus] // [!code focus] Wallet // [!code focus] // [!code focus] @@ -83,6 +86,7 @@ export function WalletComponents() {
+ Wallet @@ -113,6 +117,7 @@ You can override component styles using `className`.
+ + + + ` - Handles the wallet connection process. Place child components inside to customize the connect button appearance. - `` - Contains additional wallet information and options. Place inside the `` component. - `` - Displays user identity information. Place inside `` for a complete profile view. +- `` - Displays the user's base name within the dropdown. - `` - Creates a custom link within the dropdown. Use the `icon` prop to add an icon, and `href` to specify the destination. - `` - Provides a disconnect option within the dropdown. @@ -374,5 +383,6 @@ The Wallet component automatically handles the wallet connection state and updat - [`WalletReact`](/wallet/types#walletreact) - [`ConnectWalletReact`](/wallet/types#connectwalletreact) - [`WalletDropdownReact`](/wallet/types#walletdropdownreact) +- [`WalletDropdownBaseNameReact`](/wallet/types#walletdropdownbasenamereact) - [`WalletDropdownDisconnectReact`](/wallet/types#walletdropdowndisconnectreact) - [`WalletDropdownLinkReact`](/wallet/types#walletdropdownlinkreact) From eb8ed1baf379603c348da140c1e72b49f3bfd5d5 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Tue, 30 Jul 2024 16:31:03 -0700 Subject: [PATCH 02/22] Remove changeset from docs only change --- .changeset/mighty-rockets-drive.md | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 .changeset/mighty-rockets-drive.md diff --git a/.changeset/mighty-rockets-drive.md b/.changeset/mighty-rockets-drive.md deleted file mode 100644 index b49a1155ea..0000000000 --- a/.changeset/mighty-rockets-drive.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@coinbase/onchainkit": patch ---- - --**docs**: Implement WalletDropdownBaseName Sub-Component. By @cpcramer #916 From acb0e5cc8cd151cf00b3106f9065d5971248190b Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Tue, 30 Jul 2024 16:41:46 -0700 Subject: [PATCH 03/22] Add Base Name --- site/docs/pages/index.mdx | 3 +++ site/package.json | 2 +- site/yarn.lock | 10 +++++----- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/site/docs/pages/index.mdx b/site/docs/pages/index.mdx index d5e0966eab..0d4923ed1a 100644 --- a/site/docs/pages/index.mdx +++ b/site/docs/pages/index.mdx @@ -16,6 +16,7 @@ import { ConnectWallet, Wallet, WalletDropdown, + WalletDropdownBaseName, WalletDropdownLink, WalletDropdownDisconnect, } from '@coinbase/onchainkit/wallet'; @@ -194,6 +195,7 @@ bun add @coinbase/onchainkit
+ // [!code focus] Wallet // [!code focus] // [!code focus] @@ -218,6 +220,7 @@ bun add @coinbase/onchainkit
+ Wallet diff --git a/site/package.json b/site/package.json index 4f04f91aca..1238850570 100644 --- a/site/package.json +++ b/site/package.json @@ -8,7 +8,7 @@ "preview": "vocs preview" }, "dependencies": { - "@coinbase/onchainkit": "0.28.7", + "@coinbase/onchainkit": "0.26.14", "@types/react": "latest", "@vercel/edge": "^1.1.1", "permissionless": "^0.1.29", diff --git a/site/yarn.lock b/site/yarn.lock index b279945c26..a9dcd7974d 100644 --- a/site/yarn.lock +++ b/site/yarn.lock @@ -479,9 +479,9 @@ __metadata: languageName: node linkType: hard -"@coinbase/onchainkit@npm:0.28.7": - version: 0.28.7 - resolution: "@coinbase/onchainkit@npm:0.28.7" +"@coinbase/onchainkit@npm:0.26.14": + version: 0.26.14 + resolution: "@coinbase/onchainkit@npm:0.26.14" dependencies: "@rainbow-me/rainbowkit": "npm:^2.1.3" "@tanstack/react-query": "npm:^5" @@ -496,7 +496,7 @@ __metadata: "@xmtp/frames-validator": ^0.6.0 react: ^18 react-dom: ^18 - checksum: fb6e3e6671054f923ad118a05a766b0e732d8083bf87b51bc34b1f5e949111866188f0d04a00bbbce9128e187c211494026c14740a7f69322d6bd17a08c44f64 + checksum: f877c575bf4e83182c909a85ad55101b5539b51e1150e8c2905151409b5b52242a23dc12a147621e5705c1df5a94b453e2c592bb3abbbcbdc0eb08df65a916b2 languageName: node linkType: hard @@ -7836,7 +7836,7 @@ __metadata: version: 0.0.0-use.local resolution: "onchainkit@workspace:." dependencies: - "@coinbase/onchainkit": "npm:0.28.7" + "@coinbase/onchainkit": "npm:0.26.14" "@types/react": "npm:latest" "@vercel/edge": "npm:^1.1.1" permissionless: "npm:^0.1.29" From 9bf8e1adbd8221c804144834778f97223225b43e Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 12 Aug 2024 13:37:47 -0700 Subject: [PATCH 04/22] Remove package changes --- site/package.json | 2 +- site/yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/site/package.json b/site/package.json index 1238850570..4f04f91aca 100644 --- a/site/package.json +++ b/site/package.json @@ -8,7 +8,7 @@ "preview": "vocs preview" }, "dependencies": { - "@coinbase/onchainkit": "0.26.14", + "@coinbase/onchainkit": "0.28.7", "@types/react": "latest", "@vercel/edge": "^1.1.1", "permissionless": "^0.1.29", diff --git a/site/yarn.lock b/site/yarn.lock index a9dcd7974d..b279945c26 100644 --- a/site/yarn.lock +++ b/site/yarn.lock @@ -479,9 +479,9 @@ __metadata: languageName: node linkType: hard -"@coinbase/onchainkit@npm:0.26.14": - version: 0.26.14 - resolution: "@coinbase/onchainkit@npm:0.26.14" +"@coinbase/onchainkit@npm:0.28.7": + version: 0.28.7 + resolution: "@coinbase/onchainkit@npm:0.28.7" dependencies: "@rainbow-me/rainbowkit": "npm:^2.1.3" "@tanstack/react-query": "npm:^5" @@ -496,7 +496,7 @@ __metadata: "@xmtp/frames-validator": ^0.6.0 react: ^18 react-dom: ^18 - checksum: f877c575bf4e83182c909a85ad55101b5539b51e1150e8c2905151409b5b52242a23dc12a147621e5705c1df5a94b453e2c592bb3abbbcbdc0eb08df65a916b2 + checksum: fb6e3e6671054f923ad118a05a766b0e732d8083bf87b51bc34b1f5e949111866188f0d04a00bbbce9128e187c211494026c14740a7f69322d6bd17a08c44f64 languageName: node linkType: hard @@ -7836,7 +7836,7 @@ __metadata: version: 0.0.0-use.local resolution: "onchainkit@workspace:." dependencies: - "@coinbase/onchainkit": "npm:0.26.14" + "@coinbase/onchainkit": "npm:0.28.7" "@types/react": "npm:latest" "@vercel/edge": "npm:^1.1.1" permissionless: "npm:^0.1.29" From 4cae14083a0e32746cba447dc4aa66f14af786b6 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 12 Aug 2024 14:00:44 -0700 Subject: [PATCH 05/22] Add new baseName svg --- src/internal/svg/baseNameSvg.tsx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/internal/svg/baseNameSvg.tsx b/src/internal/svg/baseNameSvg.tsx index 0d5318cbfe..a1414db679 100644 --- a/src/internal/svg/baseNameSvg.tsx +++ b/src/internal/svg/baseNameSvg.tsx @@ -1,4 +1,4 @@ -import { fill } from '../../styles/theme'; +import { fill } from "../../styles/theme"; export const baseNameSvg = ( - - + + + ); From fbb04e17d01eef20e972d822c4651ae41c6c4d06 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 12 Aug 2024 14:39:10 -0700 Subject: [PATCH 06/22] Basenames to docs --- site/docs/components/App.tsx | 8 ++--- site/docs/pages/identity/avatar.mdx | 17 +++++++++- site/docs/pages/identity/get-avatar.mdx | 8 ++++- site/docs/pages/identity/get-name.mdx | 20 +++++++++++ site/docs/pages/identity/name.mdx | 15 ++++++++- site/docs/pages/wallet/wallet.mdx | 44 ++++++++++++++++++++++--- src/internal/svg/baseNameSvg.tsx | 2 +- 7 files changed, 102 insertions(+), 12 deletions(-) diff --git a/site/docs/components/App.tsx b/site/docs/components/App.tsx index 98788e6536..a87fb60f95 100644 --- a/site/docs/components/App.tsx +++ b/site/docs/components/App.tsx @@ -1,14 +1,14 @@ 'use client'; -import { OnchainKitProvider } from '@coinbase/onchainkit'; -// import { OnchainKitProvider } from '../pages/src/OnchainKitProvider'; +// import { OnchainKitProvider } from '@coinbase/onchainkit'; +import { OnchainKitProvider } from '../pages/src/OnchainKitProvider'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import type { ReactNode } from 'react'; import { http, WagmiProvider, createConfig } from 'wagmi'; import { base, baseSepolia } from 'wagmi/chains'; import { coinbaseWallet } from 'wagmi/connectors'; -import '@coinbase/onchainkit/styles.css'; -// import '../../../src/styles.css'; +// import '@coinbase/onchainkit/styles.css'; +import '../../../src/styles.css'; const queryClient = new QueryClient(); diff --git a/site/docs/pages/identity/avatar.mdx b/site/docs/pages/identity/avatar.mdx index b7bac979e6..532c50beef 100644 --- a/site/docs/pages/identity/avatar.mdx +++ b/site/docs/pages/identity/avatar.mdx @@ -1,5 +1,6 @@ -import { Avatar, Badge, Identity } from '@coinbase/onchainkit/identity'; +import { Avatar, Badge, Identity } from '../src/identity'; import App from '../../components/App'; +import { base } from 'viem/chains'; # `` @@ -30,6 +31,20 @@ import { Avatar } from '@coinbase/onchainkit/identity'; + +Address with a Basename avatar: + +```tsx +import { Avatar } from '@coinbase/onchainkit/identity'; +import { base } from 'viem/chains'; // [!code focus] + + // [!code focus] +``` + + + + + Override styles via `className` prop: ```tsx diff --git a/site/docs/pages/identity/get-avatar.mdx b/site/docs/pages/identity/get-avatar.mdx index 93d74fb4fc..a2089a7860 100644 --- a/site/docs/pages/identity/get-avatar.mdx +++ b/site/docs/pages/identity/get-avatar.mdx @@ -8,14 +8,20 @@ use it with Next.js or any Node.js backend. Supported providers: +- Basenames - ENS ## Usage ```tsx import { getAvatar } from '@coinbase/onchainkit/identity'; +import { base, mainnet } from 'viem/chains'; -const avatar = await getAvatar({ ensName: 'vitalik.eth' }); +// For Basename +const baseAvatar = await getAvatar({ ensName: 'vitalik.base.eth', chain: base }); + +// For ENS +const ensAvatar = await getAvatar({ ensName: 'vitalik.eth', chain: mainnet }); ``` ## Returns diff --git a/site/docs/pages/identity/get-name.mdx b/site/docs/pages/identity/get-name.mdx index f303bf3d74..876f3032bc 100644 --- a/site/docs/pages/identity/get-name.mdx +++ b/site/docs/pages/identity/get-name.mdx @@ -8,6 +8,7 @@ use it with Next.js or any Node.js backend. Supported providers: +- Basenames - ENS ## Usage @@ -27,6 +28,25 @@ const name = await getName({ address }); zizzamia.eth; ``` +::: + +Get Basename from an address: + +:::code-group + +```tsx [code] +import { getName } from '@coinbase/onchainkit/identity'; +import { base } from 'viem/chains'; + +const address = '0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1'; +const name = await getName({ address, chain: base }); +``` + +```ts [return value] +zizzamia.base.eth; +``` + + ::: Get a sliced address when address does not have an ENS name: diff --git a/site/docs/pages/identity/name.mdx b/site/docs/pages/identity/name.mdx index c1731db150..f8e6cfc8f1 100644 --- a/site/docs/pages/identity/name.mdx +++ b/site/docs/pages/identity/name.mdx @@ -1,9 +1,10 @@ import { Badge, Name, Identity, } from '@coinbase/onchainkit/identity'; import App from '../../components/App'; +import { base } from 'viem/chains'; # `` -The `Name` component is used to display ENS names associated with Ethereum addresses. +The `Name` component is used to display ENS or Basenames associated with Ethereum addresses. ## Usage @@ -18,6 +19,18 @@ import { Name } from '@coinbase/onchainkit/identity'; +Address with a Basename: + +```tsx +import { Name } from '@coinbase/onchainkit/identity'; +import { base } from 'viem/chains'; // [!code focus] + // [!code focus] +``` + + + + + ### Override styles You can override component styles using `className`. diff --git a/site/docs/pages/wallet/wallet.mdx b/site/docs/pages/wallet/wallet.mdx index 3baacd135e..de8d4f34d0 100644 --- a/site/docs/pages/wallet/wallet.mdx +++ b/site/docs/pages/wallet/wallet.mdx @@ -10,14 +10,14 @@ import { WalletDropdownLink, WalletDropdownBaseName, WalletDropdownDisconnect, -} from '@coinbase/onchainkit/wallet'; +} from '../src/wallet'; import { Address, Avatar, Name, Identity, EthBalance, -} from '@coinbase/onchainkit/identity'; +} from '../src/identity'; import { color } from '@coinbase/onchainkit/theme'; import AppWithRK from '../../components/AppWithRK'; import WalletComponents from '../../components/WalletComponents'; @@ -33,7 +33,6 @@ import { // [!code focus] ConnectWallet, // [!code focus] Wallet, // [!code focus] WalletDropdown, // [!code focus] - WalletDropdownBaseName, // [!code focus] WalletDropdownLink, // [!code focus] WalletDropdownDisconnect, // [!code focus] } from '@coinbase/onchainkit/wallet'; // [!code focus] @@ -61,7 +60,6 @@ export function WalletComponents() {
- // [!code focus] // [!code focus] Wallet // [!code focus] // [!code focus] @@ -192,6 +190,44 @@ You can override component text using `text`. +### Add Basenames support + +You can add Basenames support using the `` component. + +```tsx +// omitted for brevity + + + + + +
+ + + // [!code focus] + + +``` + + + + + + + + + + + +
+ + + + + + + + ## Required providers If you are using any of the provided components, you will need to install diff --git a/src/internal/svg/baseNameSvg.tsx b/src/internal/svg/baseNameSvg.tsx index a1414db679..7541914112 100644 --- a/src/internal/svg/baseNameSvg.tsx +++ b/src/internal/svg/baseNameSvg.tsx @@ -1,4 +1,4 @@ -import { fill } from "../../styles/theme"; +import { fill } from '../../styles/theme'; export const baseNameSvg = ( Date: Mon, 12 Aug 2024 14:40:19 -0700 Subject: [PATCH 07/22] Clean up local changes --- site/docs/components/App.tsx | 8 ++++---- site/docs/pages/identity/avatar.mdx | 2 +- site/docs/pages/wallet/wallet.mdx | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/site/docs/components/App.tsx b/site/docs/components/App.tsx index a87fb60f95..98788e6536 100644 --- a/site/docs/components/App.tsx +++ b/site/docs/components/App.tsx @@ -1,14 +1,14 @@ 'use client'; -// import { OnchainKitProvider } from '@coinbase/onchainkit'; -import { OnchainKitProvider } from '../pages/src/OnchainKitProvider'; +import { OnchainKitProvider } from '@coinbase/onchainkit'; +// import { OnchainKitProvider } from '../pages/src/OnchainKitProvider'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import type { ReactNode } from 'react'; import { http, WagmiProvider, createConfig } from 'wagmi'; import { base, baseSepolia } from 'wagmi/chains'; import { coinbaseWallet } from 'wagmi/connectors'; -// import '@coinbase/onchainkit/styles.css'; -import '../../../src/styles.css'; +import '@coinbase/onchainkit/styles.css'; +// import '../../../src/styles.css'; const queryClient = new QueryClient(); diff --git a/site/docs/pages/identity/avatar.mdx b/site/docs/pages/identity/avatar.mdx index 532c50beef..be94f8aaf9 100644 --- a/site/docs/pages/identity/avatar.mdx +++ b/site/docs/pages/identity/avatar.mdx @@ -1,4 +1,4 @@ -import { Avatar, Badge, Identity } from '../src/identity'; +import { Avatar, Badge, Identity } from '@coinbase/onchainkit/identity'; import App from '../../components/App'; import { base } from 'viem/chains'; diff --git a/site/docs/pages/wallet/wallet.mdx b/site/docs/pages/wallet/wallet.mdx index de8d4f34d0..8907d0c2a6 100644 --- a/site/docs/pages/wallet/wallet.mdx +++ b/site/docs/pages/wallet/wallet.mdx @@ -10,14 +10,14 @@ import { WalletDropdownLink, WalletDropdownBaseName, WalletDropdownDisconnect, -} from '../src/wallet'; +} from '@coinbase/onchainkit/wallet'; import { Address, Avatar, Name, Identity, EthBalance, -} from '../src/identity'; +} from '@coinbase/onchainkit/identity'; import { color } from '@coinbase/onchainkit/theme'; import AppWithRK from '../../components/AppWithRK'; import WalletComponents from '../../components/WalletComponents'; From ec7744be68b1df5eb61e9ee827a8175e93acf36f Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 12 Aug 2024 14:45:21 -0700 Subject: [PATCH 08/22] Update avatar docs --- site/docs/pages/identity/avatar.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/docs/pages/identity/avatar.mdx b/site/docs/pages/identity/avatar.mdx index be94f8aaf9..9fdd165960 100644 --- a/site/docs/pages/identity/avatar.mdx +++ b/site/docs/pages/identity/avatar.mdx @@ -4,8 +4,8 @@ import { base } from 'viem/chains'; # `` -The `Avatar` component is used to display ENS avatar associated with Ethereum addresses. -When an ENS avatar is not available, it defaults to blue color avatar. +The `Avatar` component is used to display ENS or Basenames avatar associated with Ethereum addresses. +When an avatar is not available, it defaults to blue color avatar. ## Usage From 0e68155508f31265af2306889543973a9660bcb4 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 12 Aug 2024 14:48:46 -0700 Subject: [PATCH 09/22] Update basenames order in dropdown --- site/docs/pages/index.mdx | 4 ++-- site/docs/pages/wallet/wallet.mdx | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/site/docs/pages/index.mdx b/site/docs/pages/index.mdx index 0d4923ed1a..984dde2606 100644 --- a/site/docs/pages/index.mdx +++ b/site/docs/pages/index.mdx @@ -195,10 +195,10 @@ bun add @coinbase/onchainkit
- // [!code focus] Wallet // [!code focus] // [!code focus] + // [!code focus] // [!code focus] // [!code focus] @@ -220,10 +220,10 @@ bun add @coinbase/onchainkit
- Wallet + diff --git a/site/docs/pages/wallet/wallet.mdx b/site/docs/pages/wallet/wallet.mdx index 8907d0c2a6..473d59d343 100644 --- a/site/docs/pages/wallet/wallet.mdx +++ b/site/docs/pages/wallet/wallet.mdx @@ -84,10 +84,10 @@ export function WalletComponents() {
- Wallet + @@ -115,7 +115,6 @@ You can override component styles using `className`.
- Wallet + @@ -141,7 +141,6 @@ You can override component styles using `className`.
- Wallet + @@ -379,13 +379,13 @@ export default OnchainProviders;
- Wallet + From eef00d5000295a8e155d674909e7e984bd2b0ceb Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 12 Aug 2024 15:04:33 -0700 Subject: [PATCH 10/22] Add official Basenames link --- site/docs/pages/identity/avatar.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/docs/pages/identity/avatar.mdx b/site/docs/pages/identity/avatar.mdx index 9fdd165960..e00e833975 100644 --- a/site/docs/pages/identity/avatar.mdx +++ b/site/docs/pages/identity/avatar.mdx @@ -4,7 +4,7 @@ import { base } from 'viem/chains'; # `` -The `Avatar` component is used to display ENS or Basenames avatar associated with Ethereum addresses. +The `Avatar` component is used to display ENS or [Basenames](https://www.base.org/names) avatar associated with Ethereum addresses. When an avatar is not available, it defaults to blue color avatar. ## Usage From 539c0abd2361fa0ad4b0badbe5ff59ed5b5fccbc Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 12 Aug 2024 15:07:37 -0700 Subject: [PATCH 11/22] Update info about what Basenames avatar defaults to --- site/docs/pages/identity/avatar.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/docs/pages/identity/avatar.mdx b/site/docs/pages/identity/avatar.mdx index e00e833975..33951a7d17 100644 --- a/site/docs/pages/identity/avatar.mdx +++ b/site/docs/pages/identity/avatar.mdx @@ -20,7 +20,7 @@ import { Avatar } from '@coinbase/onchainkit/identity'; -Address without an ENS avatar, and it defaults to a plain avatar: +Address without an ENS or Basenames avatar defaults to a plain avatar: ```tsx import { Avatar } from '@coinbase/onchainkit/identity'; From 1ee5a26489facd2c3e14b9b13a5d8aa3364ac5d8 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 12 Aug 2024 15:13:40 -0700 Subject: [PATCH 12/22] Link to basenames site everytime basenames is mentioned. --- site/docs/pages/identity/get-avatar.mdx | 2 +- site/docs/pages/identity/name.mdx | 4 ++-- site/docs/pages/wallet/wallet.mdx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/site/docs/pages/identity/get-avatar.mdx b/site/docs/pages/identity/get-avatar.mdx index a2089a7860..0c2b11dc03 100644 --- a/site/docs/pages/identity/get-avatar.mdx +++ b/site/docs/pages/identity/get-avatar.mdx @@ -8,7 +8,7 @@ use it with Next.js or any Node.js backend. Supported providers: -- Basenames +- [Basenames](https://www.base.org/names) - ENS ## Usage diff --git a/site/docs/pages/identity/name.mdx b/site/docs/pages/identity/name.mdx index f8e6cfc8f1..43dc11bd57 100644 --- a/site/docs/pages/identity/name.mdx +++ b/site/docs/pages/identity/name.mdx @@ -4,7 +4,7 @@ import { base } from 'viem/chains'; # `` -The `Name` component is used to display ENS or Basenames associated with Ethereum addresses. +The `Name` component is used to display ENS or [Basenames](https://www.base.org/names) associated with Ethereum addresses. ## Usage @@ -19,7 +19,7 @@ import { Name } from '@coinbase/onchainkit/identity'; -Address with a Basename: +Address with a [Basename](https://www.base.org/names): ```tsx import { Name } from '@coinbase/onchainkit/identity'; diff --git a/site/docs/pages/wallet/wallet.mdx b/site/docs/pages/wallet/wallet.mdx index 473d59d343..8cb779f076 100644 --- a/site/docs/pages/wallet/wallet.mdx +++ b/site/docs/pages/wallet/wallet.mdx @@ -192,7 +192,7 @@ You can override component text using `text`. ### Add Basenames support -You can add Basenames support using the `` component. +You can add [Basenames](https://www.base.org/names) support using the `` component. ```tsx // omitted for brevity From f2e86e31552e6b73263bf2e179621317c24a990f Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 12 Aug 2024 15:31:51 -0700 Subject: [PATCH 13/22] update docs --- site/docs/pages/identity/avatar.mdx | 2 +- site/docs/pages/identity/get-avatar.mdx | 32 +++++++++++++++++++++---- site/docs/pages/identity/get-name.mdx | 2 +- site/docs/pages/identity/name.mdx | 2 +- 4 files changed, 30 insertions(+), 8 deletions(-) diff --git a/site/docs/pages/identity/avatar.mdx b/site/docs/pages/identity/avatar.mdx index 33951a7d17..8ed0f8b82e 100644 --- a/site/docs/pages/identity/avatar.mdx +++ b/site/docs/pages/identity/avatar.mdx @@ -1,4 +1,4 @@ -import { Avatar, Badge, Identity } from '@coinbase/onchainkit/identity'; +import { Avatar, Badge, Identity } from '../src/identity'; import App from '../../components/App'; import { base } from 'viem/chains'; diff --git a/site/docs/pages/identity/get-avatar.mdx b/site/docs/pages/identity/get-avatar.mdx index 0c2b11dc03..e58a9e920e 100644 --- a/site/docs/pages/identity/get-avatar.mdx +++ b/site/docs/pages/identity/get-avatar.mdx @@ -13,17 +13,39 @@ Supported providers: ## Usage -```tsx +Get Basename avatar: + +:::code-group +```tsx [code] import { getAvatar } from '@coinbase/onchainkit/identity'; import { base, mainnet } from 'viem/chains'; -// For Basename -const baseAvatar = await getAvatar({ ensName: 'vitalik.base.eth', chain: base }); +const baseAvatar = await getAvatar({ ensName: 'paulcramer.eth', chain: base }); +``` + +```ts [return value] +https://zku9gdedgba48lmr.public.blob.vercel-storage.com/basenames/avatar/paul.base.eth/1722120524815/FWUzoZmJ_400x400-kWjr2gMvjNe9hHMs9Z9LxGVGIME3By.jpg +``` + +::: + +Get ENS avatar: -// For ENS -const ensAvatar = await getAvatar({ ensName: 'vitalik.eth', chain: mainnet }); +:::code-group + +```tsx [code] +import { getAvatar } from '@coinbase/onchainkit/identity'; +import { mainnet } from 'viem/chains'; + +const ensAvatar = await getAvatar({ ensName: 'paulcramer.eth', chain: mainnet }); ``` +```ts [return value] +https://euc.li/paulcramer.eth; +``` + +::: + ## Returns [`Promise`](/identity/types#getavatarreturntype) diff --git a/site/docs/pages/identity/get-name.mdx b/site/docs/pages/identity/get-name.mdx index 876f3032bc..ef850e6113 100644 --- a/site/docs/pages/identity/get-name.mdx +++ b/site/docs/pages/identity/get-name.mdx @@ -8,7 +8,7 @@ use it with Next.js or any Node.js backend. Supported providers: -- Basenames +- [Basenames](https://www.base.org/names) - ENS ## Usage diff --git a/site/docs/pages/identity/name.mdx b/site/docs/pages/identity/name.mdx index 43dc11bd57..e34aab99f3 100644 --- a/site/docs/pages/identity/name.mdx +++ b/site/docs/pages/identity/name.mdx @@ -19,7 +19,7 @@ import { Name } from '@coinbase/onchainkit/identity'; -Address with a [Basename](https://www.base.org/names): +Address with a Basename: ```tsx import { Name } from '@coinbase/onchainkit/identity'; From a4b42c6d2058bbadbe800f1e036aa14b23b86bee Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 12 Aug 2024 15:33:32 -0700 Subject: [PATCH 14/22] restore --- site/docs/pages/identity/avatar.mdx | 23 ++++------------------- 1 file changed, 4 insertions(+), 19 deletions(-) diff --git a/site/docs/pages/identity/avatar.mdx b/site/docs/pages/identity/avatar.mdx index 8ed0f8b82e..b7bac979e6 100644 --- a/site/docs/pages/identity/avatar.mdx +++ b/site/docs/pages/identity/avatar.mdx @@ -1,11 +1,10 @@ -import { Avatar, Badge, Identity } from '../src/identity'; +import { Avatar, Badge, Identity } from '@coinbase/onchainkit/identity'; import App from '../../components/App'; -import { base } from 'viem/chains'; # `` -The `Avatar` component is used to display ENS or [Basenames](https://www.base.org/names) avatar associated with Ethereum addresses. -When an avatar is not available, it defaults to blue color avatar. +The `Avatar` component is used to display ENS avatar associated with Ethereum addresses. +When an ENS avatar is not available, it defaults to blue color avatar. ## Usage @@ -20,7 +19,7 @@ import { Avatar } from '@coinbase/onchainkit/identity'; -Address without an ENS or Basenames avatar defaults to a plain avatar: +Address without an ENS avatar, and it defaults to a plain avatar: ```tsx import { Avatar } from '@coinbase/onchainkit/identity'; @@ -31,20 +30,6 @@ import { Avatar } from '@coinbase/onchainkit/identity'; - -Address with a Basename avatar: - -```tsx -import { Avatar } from '@coinbase/onchainkit/identity'; -import { base } from 'viem/chains'; // [!code focus] - - // [!code focus] -``` - - - - - Override styles via `className` prop: ```tsx From f67021c447f59419503425cdfb0e50ca2511bd26 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 12 Aug 2024 15:34:50 -0700 Subject: [PATCH 15/22] Add back in changes --- site/docs/pages/identity/avatar.mdx | 38 ++++++++++++++--------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/site/docs/pages/identity/avatar.mdx b/site/docs/pages/identity/avatar.mdx index b7bac979e6..cc0f16980e 100644 --- a/site/docs/pages/identity/avatar.mdx +++ b/site/docs/pages/identity/avatar.mdx @@ -1,35 +1,47 @@ import { Avatar, Badge, Identity } from '@coinbase/onchainkit/identity'; import App from '../../components/App'; +import { base } from 'viem/chains'; # `` -The `Avatar` component is used to display ENS avatar associated with Ethereum addresses. -When an ENS avatar is not available, it defaults to blue color avatar. +The `Avatar` component is used to display ENS or [Basenames](https://www.base.org/names) avatar associated with Ethereum addresses. +When an avatar is not available, it defaults to blue color avatar. ## Usage Address with an ENS avatar: - ```tsx import { Avatar } from '@coinbase/onchainkit/identity'; // [!code focus] ``` - -Address without an ENS avatar, and it defaults to a plain avatar: +Address without an ENS or Basenames avatar defaults to a plain avatar: ```tsx import { Avatar } from '@coinbase/onchainkit/identity'; // [!code focus] ``` - + +Address with a Basename avatar: + +```tsx +import { Avatar } from '@coinbase/onchainkit/identity'; +import { base } from 'viem/chains'; // [!code focus] + + // [!code focus] +``` + + + + + Override styles via `className` prop: ```tsx @@ -39,15 +51,11 @@ import { Avatar } from '@coinbase/onchainkit/identity'; address="0x1234567890abcdef1234567890abcdef12345678" /> // [!code focus] ``` - - Use `defaultComponent` prop to change the default avatar when ENS avatar is not found. - Use `loadingComponent` prop to change the loading placeholder: - ```tsx import { Avatar } from '@coinbase/onchainkit/identity'; ``` - - Show attestation on ENV avatar with [`Badge`](/identity/badge) component. - Use [`OnchainKitProvider`](/config/onchainkit-provider) or [`Identity`](/identity/identity) component with the `schemaId` prop. - ```tsx import { Avatar, Badge, Identity } from '@coinbase/onchainkit/identity'; // [!code focus] - // [!code focus] ``` - - ## Props - -[`AvatarReact`](/identity/types#AvatarReact) +[`AvatarReact`](/identity/types#AvatarReact) \ No newline at end of file From 200b6b30b48701981433ae9cda50b9ab9af12423 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 12 Aug 2024 16:07:55 -0700 Subject: [PATCH 16/22] Add separate base name page --- .../wallet/wallet-dropdown-base-name.mdx | 84 +++++++++++++++++++ site/sidebar.ts | 4 + 2 files changed, 88 insertions(+) create mode 100644 site/docs/pages/wallet/wallet-dropdown-base-name.mdx diff --git a/site/docs/pages/wallet/wallet-dropdown-base-name.mdx b/site/docs/pages/wallet/wallet-dropdown-base-name.mdx new file mode 100644 index 0000000000..f7ba6be7d4 --- /dev/null +++ b/site/docs/pages/wallet/wallet-dropdown-base-name.mdx @@ -0,0 +1,84 @@ +import { + ConnectWallet, + Wallet, + WalletDropdown, + WalletDropdownLink, + WalletDropdownBaseName, + WalletDropdownDisconnect, +} from '../src/wallet'; +import { + Address, + Avatar, + Name, + Identity, + EthBalance, +} from '../src/identity'; +import { color } from '@coinbase/onchainkit/theme'; +import AppWithRK from '../../components/AppWithRK'; +import WalletComponents from '../../components/WalletComponents'; + +# `` + +The `WalletDropdownBaseName` component displays a user's [Basename](https://www.base.org/names) associated with their wallet address. + +## Usage + +```tsx +import { + ConnectWallet, + Wallet, + WalletDropdown, + WalletDropdownBaseName, // [!code focus] + WalletDropdownDisconnect, +} from '@coinbase/onchainkit/wallet'; +import { + Address, + Avatar, + Name, + Identity, + EthBalance, +} from '@coinbase/onchainkit/identity'; +import { color } from '@coinbase/onchainkit/theme'; + +export function WalletComponents() { + return ( +
+ + + + + + + + + +
+ + + // [!code focus] + + + +
+ ); +} +``` + + + + + + + + + + + +
+ + + + + + + diff --git a/site/sidebar.ts b/site/sidebar.ts index aea92c1e9a..37046d9fa8 100644 --- a/site/sidebar.ts +++ b/site/sidebar.ts @@ -135,6 +135,10 @@ export const sidebar = [ text: 'Wallet', link: '/wallet/wallet', }, + { + text: 'WalletDropdownBaseName', + link: '/wallet/wallet-dropdown-base-name', + } ], }, ] From 4943ed9f3c33f827b3b88d37eb00187011b66c02 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 12 Aug 2024 16:08:40 -0700 Subject: [PATCH 17/22] asfd --- site/docs/pages/wallet/wallet.mdx | 38 ------------------------------- 1 file changed, 38 deletions(-) diff --git a/site/docs/pages/wallet/wallet.mdx b/site/docs/pages/wallet/wallet.mdx index 8cb779f076..53a9788dea 100644 --- a/site/docs/pages/wallet/wallet.mdx +++ b/site/docs/pages/wallet/wallet.mdx @@ -190,44 +190,6 @@ You can override component text using `text`. -### Add Basenames support - -You can add [Basenames](https://www.base.org/names) support using the `` component. - -```tsx -// omitted for brevity - - - - - -
- - - // [!code focus] - - -``` - - - - - - - - - - - -
- - - - - - - - ## Required providers If you are using any of the provided components, you will need to install From 3c2af21324733d7def82fd81a3c255d4d8932ef6 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 12 Aug 2024 16:09:46 -0700 Subject: [PATCH 18/22] Add drops link --- site/docs/pages/wallet/wallet-dropdown-base-name.mdx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/site/docs/pages/wallet/wallet-dropdown-base-name.mdx b/site/docs/pages/wallet/wallet-dropdown-base-name.mdx index f7ba6be7d4..b4daab5195 100644 --- a/site/docs/pages/wallet/wallet-dropdown-base-name.mdx +++ b/site/docs/pages/wallet/wallet-dropdown-base-name.mdx @@ -82,3 +82,6 @@ export function WalletComponents() { + +## Props +- [`WalletDropdownBaseNameReact`](/wallet/types#walletdropdownbasenamereact) From ff8484a1e787185dcab16fd49bb8582543e31754 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 12 Aug 2024 16:16:18 -0700 Subject: [PATCH 19/22] Remove temp local code --- site/docs/pages/wallet/wallet-dropdown-base-name.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/docs/pages/wallet/wallet-dropdown-base-name.mdx b/site/docs/pages/wallet/wallet-dropdown-base-name.mdx index b4daab5195..5c646b7041 100644 --- a/site/docs/pages/wallet/wallet-dropdown-base-name.mdx +++ b/site/docs/pages/wallet/wallet-dropdown-base-name.mdx @@ -5,14 +5,14 @@ import { WalletDropdownLink, WalletDropdownBaseName, WalletDropdownDisconnect, -} from '../src/wallet'; +} from '@coinbase/onchainkit/wallet'; import { Address, Avatar, Name, Identity, EthBalance, -} from '../src/identity'; +} from '@coinbase/onchainkit/identity'; import { color } from '@coinbase/onchainkit/theme'; import AppWithRK from '../../components/AppWithRK'; import WalletComponents from '../../components/WalletComponents'; From 2b10741655b8ef2335fa284667731176f39f187a Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 12 Aug 2024 16:24:00 -0700 Subject: [PATCH 20/22] Update description --- site/docs/pages/wallet/wallet-dropdown-base-name.mdx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/site/docs/pages/wallet/wallet-dropdown-base-name.mdx b/site/docs/pages/wallet/wallet-dropdown-base-name.mdx index 5c646b7041..c33ad1add6 100644 --- a/site/docs/pages/wallet/wallet-dropdown-base-name.mdx +++ b/site/docs/pages/wallet/wallet-dropdown-base-name.mdx @@ -19,7 +19,12 @@ import WalletComponents from '../../components/WalletComponents'; # `` -The `WalletDropdownBaseName` component displays a user's [Basename](https://www.base.org/names) associated with their wallet address. +The `WalletDropdownBaseName` component adds a [Basename](https://www.base.org/names) tab to the Wallet Component. This tab serves two purposes: + +1. For users with a Basename: It provides a link to their Base Name profile page. +2. For users without a Basename: It provides a link to a page where they can create one. + +This component enhances the wallet interface by providing easy access to Base Name functionality, whether for viewing an existing profile or setting up a new one. ## Usage From 2fbd5893cdbd6687570e0509c94e3736f752857a Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 12 Aug 2024 16:27:24 -0700 Subject: [PATCH 21/22] Remove basenames from /wallet --- site/docs/pages/wallet/wallet.mdx | 2 -- 1 file changed, 2 deletions(-) diff --git a/site/docs/pages/wallet/wallet.mdx b/site/docs/pages/wallet/wallet.mdx index 53a9788dea..c7d2ac1cd9 100644 --- a/site/docs/pages/wallet/wallet.mdx +++ b/site/docs/pages/wallet/wallet.mdx @@ -8,7 +8,6 @@ import { Wallet, WalletDropdown, WalletDropdownLink, - WalletDropdownBaseName, WalletDropdownDisconnect, } from '@coinbase/onchainkit/wallet'; import { @@ -87,7 +86,6 @@ export function WalletComponents() { Wallet - From 7f713f72fb39df4ba36180c082b43d91d1768443 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Mon, 12 Aug 2024 16:28:22 -0700 Subject: [PATCH 22/22] Remove from wallet page --- site/docs/pages/wallet/wallet.mdx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/site/docs/pages/wallet/wallet.mdx b/site/docs/pages/wallet/wallet.mdx index c7d2ac1cd9..627878feda 100644 --- a/site/docs/pages/wallet/wallet.mdx +++ b/site/docs/pages/wallet/wallet.mdx @@ -120,7 +120,6 @@ You can override component styles using `className`. > Wallet - @@ -146,7 +145,6 @@ You can override component styles using `className`. > Wallet - @@ -244,7 +242,6 @@ OnchainKit leverages [RainbowKit](https://www.rainbowkit.com/) to offer this fea
- Wallet -