From a60d1ab3bede1abe61506dc23a086444114da36e Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Wed, 31 Jul 2024 14:22:18 -0700 Subject: [PATCH 1/5] asdf --- site/docs/components/App.tsx | 4 ++-- site/docs/pages/wallet/wallet.mdx | 9 +++++++-- src/wallet/components/WalletDropdownBaseName.tsx | 7 +++++-- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/site/docs/components/App.tsx b/site/docs/components/App.tsx index 98788e6536..962bf8a8cc 100644 --- a/site/docs/components/App.tsx +++ b/site/docs/components/App.tsx @@ -1,6 +1,6 @@ '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'; diff --git a/site/docs/pages/wallet/wallet.mdx b/site/docs/pages/wallet/wallet.mdx index 0c0d49db6b..7ce62e95a6 100644 --- a/site/docs/pages/wallet/wallet.mdx +++ b/site/docs/pages/wallet/wallet.mdx @@ -7,9 +7,10 @@ import { ConnectWallet, Wallet, WalletDropdown, + WalletDropdownBaseName, WalletDropdownLink, WalletDropdownDisconnect, -} from '@coinbase/onchainkit/wallet'; +} from '../src/wallet'; import { Address, Avatar, @@ -17,7 +18,7 @@ import { Badge, 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,6 +34,7 @@ import { // [!code focus] ConnectWallet, // [!code focus] Wallet, // [!code focus] WalletDropdown, // [!code focus] + WalletDropdownBaseName, WalletDropdownLink, // [!code focus] WalletDropdownDisconnect, // [!code focus] } from '@coinbase/onchainkit/wallet'; // [!code focus] @@ -63,6 +65,7 @@ export function WalletComponents() {
+ // [!code focus] Go to Wallet Dashboard // [!code focus] // [!code focus] @@ -89,6 +92,7 @@ export function WalletComponents() {
+ Go to Wallet Dashboard @@ -121,6 +125,7 @@ You can override component styles using `className`.
+ < WalletDropdownBaseName /> Date: Wed, 31 Jul 2024 14:45:24 -0700 Subject: [PATCH 2/5] chore: Fix Basenames to work on Testnet and Mainnet --- .../components/WalletDropdownBaseName.test.tsx | 18 ++++++++++++++++++ .../components/WalletDropdownBaseName.tsx | 7 +++---- src/wallet/components/WalletProvider.tsx | 4 ++++ src/wallet/types.ts | 3 ++- 4 files changed, 27 insertions(+), 5 deletions(-) diff --git a/src/wallet/components/WalletDropdownBaseName.test.tsx b/src/wallet/components/WalletDropdownBaseName.test.tsx index 1567cb40f1..de1fcd2b22 100644 --- a/src/wallet/components/WalletDropdownBaseName.test.tsx +++ b/src/wallet/components/WalletDropdownBaseName.test.tsx @@ -1,10 +1,12 @@ import type { UseQueryResult } from '@tanstack/react-query'; import { render, screen } from '@testing-library/react'; import type { GetAccountReturnType } from '@wagmi/core'; +import { base } from 'viem/chains'; import { describe, expect, it, vi } from 'vitest'; import { useAccount } from 'wagmi'; import { useName } from '../../identity/hooks/useName'; import { WalletDropdownBaseName } from './WalletDropdownBaseName'; +import { useWalletContext } from './WalletProvider'; vi.mock('wagmi', () => ({ useAccount: vi.fn(), @@ -14,12 +16,19 @@ vi.mock('../../identity/hooks/useName', () => ({ useName: vi.fn(), })); +vi.mock('./WalletProvider', () => ({ + useWalletContext: vi.fn(), +})); + describe('WalletDropdownBaseName', () => { it('should render "Claim a Basename" when no basename', () => { (useAccount as vi.Mock<[], Partial>).mockReturnValue({ address: '0x1234' as `0x${string}`, isConnected: true, }); + (useWalletContext as vi.Mock).mockReturnValue({ + chain: base, + }); ( useName as vi.Mock<[], Partial>> ).mockReturnValue({ @@ -39,6 +48,9 @@ describe('WalletDropdownBaseName', () => { address: '0x1234' as `0x${string}`, isConnected: true, }); + (useWalletContext as vi.Mock).mockReturnValue({ + chain: base, + }); ( useName as vi.Mock<[], Partial>> ).mockReturnValue({ @@ -58,6 +70,9 @@ describe('WalletDropdownBaseName', () => { address: '0x1234' as `0x${string}`, isConnected: true, }); + (useWalletContext as vi.Mock).mockReturnValue({ + chain: base, + }); ( useName as vi.Mock<[], Partial>> ).mockReturnValue({ @@ -79,6 +94,9 @@ describe('WalletDropdownBaseName', () => { address: undefined, isConnected: false, }); + (useWalletContext as vi.Mock).mockReturnValue({ + chain: base, + }); const { container } = render(); expect(container.firstChild).toBeNull(); diff --git a/src/wallet/components/WalletDropdownBaseName.tsx b/src/wallet/components/WalletDropdownBaseName.tsx index c5aaea4d60..4d26094ba0 100644 --- a/src/wallet/components/WalletDropdownBaseName.tsx +++ b/src/wallet/components/WalletDropdownBaseName.tsx @@ -1,18 +1,17 @@ -import { base } from 'viem/chains'; +// import { base } from 'viem/chains'; import { useAccount } from 'wagmi'; import { useName } from '../../identity/hooks/useName'; import { Spinner } from '../../internal/components/Spinner'; import { baseNameSvg } from '../../internal/svg/baseNameSvg'; import { cn, pressable, text } from '../../styles/theme'; import type { WalletDropdownBaseNameReact } from '../types'; -import { useIdentityContext } from '../../identity/components/IdentityProvider' +import { useWalletContext } from './WalletProvider'; export function WalletDropdownBaseName({ className, }: WalletDropdownBaseNameReact) { const { address } = useAccount(); - const { chain } = useIdentityContext() - console.log("Chain : ", chain) + const { chain } = useWalletContext(); if (!address || !chain) { return null; diff --git a/src/wallet/components/WalletProvider.tsx b/src/wallet/components/WalletProvider.tsx index 98d70559a2..d5e9edba96 100644 --- a/src/wallet/components/WalletProvider.tsx +++ b/src/wallet/components/WalletProvider.tsx @@ -1,6 +1,7 @@ import { createContext, useContext, useState } from 'react'; import type { ReactNode } from 'react'; import { useValue } from '../../internal/hooks/useValue'; +import { useOnchainKit } from '../../useOnchainKit'; import type { WalletContextType } from '../types'; const emptyContext = {} as WalletContextType; @@ -12,9 +13,12 @@ type WalletProviderReact = { }; export function WalletProvider({ children }: WalletProviderReact) { + const { chain } = useOnchainKit(); + const [isOpen, setIsOpen] = useState(false); const value = useValue({ isOpen, + chain, setIsOpen, }); return ( diff --git a/src/wallet/types.ts b/src/wallet/types.ts index 297a9779e7..631a2566f9 100644 --- a/src/wallet/types.ts +++ b/src/wallet/types.ts @@ -1,6 +1,6 @@ import type { UserOperation } from 'permissionless'; import type { Dispatch, ReactNode, SetStateAction } from 'react'; -import type { Address, PublicClient } from 'viem'; +import type { Address, Chain, PublicClient } from 'viem'; import type { UseBalanceReturnType, UseReadContractReturnType } from 'wagmi'; import type { SwapError } from '../swap'; @@ -61,6 +61,7 @@ export type UseGetTokenBalanceResponse = { */ export type WalletContextType = { address?: Address | null; // The Ethereum address to fetch the avatar and name for. + chain?: Chain; // Optional chain for domain resolution isOpen: boolean; setIsOpen: Dispatch>; }; From 26e978b2fd9ca77e6ae93c861cb28d0305e0453f Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Wed, 31 Jul 2024 14:55:40 -0700 Subject: [PATCH 3/5] Clean up --- site/docs/components/App.tsx | 4 ++-- site/docs/pages/wallet/wallet.mdx | 9 ++------- src/wallet/components/WalletDropdownBaseName.tsx | 1 - 3 files changed, 4 insertions(+), 10 deletions(-) diff --git a/site/docs/components/App.tsx b/site/docs/components/App.tsx index 962bf8a8cc..98788e6536 100644 --- a/site/docs/components/App.tsx +++ b/site/docs/components/App.tsx @@ -1,6 +1,6 @@ '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'; diff --git a/site/docs/pages/wallet/wallet.mdx b/site/docs/pages/wallet/wallet.mdx index 7ce62e95a6..0c0d49db6b 100644 --- a/site/docs/pages/wallet/wallet.mdx +++ b/site/docs/pages/wallet/wallet.mdx @@ -7,10 +7,9 @@ import { ConnectWallet, Wallet, WalletDropdown, - WalletDropdownBaseName, WalletDropdownLink, WalletDropdownDisconnect, -} from '../src/wallet'; +} from '@coinbase/onchainkit/wallet'; import { Address, Avatar, @@ -18,7 +17,7 @@ import { Badge, 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'; @@ -34,7 +33,6 @@ import { // [!code focus] ConnectWallet, // [!code focus] Wallet, // [!code focus] WalletDropdown, // [!code focus] - WalletDropdownBaseName, WalletDropdownLink, // [!code focus] WalletDropdownDisconnect, // [!code focus] } from '@coinbase/onchainkit/wallet'; // [!code focus] @@ -65,7 +63,6 @@ export function WalletComponents() {
- // [!code focus] Go to Wallet Dashboard // [!code focus] // [!code focus] @@ -92,7 +89,6 @@ export function WalletComponents() {
- Go to Wallet Dashboard @@ -125,7 +121,6 @@ You can override component styles using `className`.
- < WalletDropdownBaseName /> Date: Wed, 31 Jul 2024 14:56:39 -0700 Subject: [PATCH 4/5] Add changeset --- .changeset/beige-bikes-greet.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/beige-bikes-greet.md diff --git a/.changeset/beige-bikes-greet.md b/.changeset/beige-bikes-greet.md new file mode 100644 index 0000000000..0631d79900 --- /dev/null +++ b/.changeset/beige-bikes-greet.md @@ -0,0 +1,5 @@ +--- +"@coinbase/onchainkit": patch +--- + +-**chore**: Base Names testnet compatibility. By @cpcramer #966 From 9a16b9a800e1981a594217bb61253b928c3a55a7 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Fri, 2 Aug 2024 11:59:51 -0700 Subject: [PATCH 5/5] Stylign nit --- src/wallet/components/WalletProvider.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/wallet/components/WalletProvider.tsx b/src/wallet/components/WalletProvider.tsx index d5e9edba96..45a1c96beb 100644 --- a/src/wallet/components/WalletProvider.tsx +++ b/src/wallet/components/WalletProvider.tsx @@ -14,7 +14,6 @@ type WalletProviderReact = { export function WalletProvider({ children }: WalletProviderReact) { const { chain } = useOnchainKit(); - const [isOpen, setIsOpen] = useState(false); const value = useValue({ isOpen,