From 94a7ac7d9fc75c9ef4cc0d7b9a0fbb731599a58d Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Wed, 11 Dec 2024 10:21:36 -0800 Subject: [PATCH 1/4] update --- .changeset/spotty-wasps-warn.md | 5 ++ .../components/landing/ComponentPreview.tsx | 14 ++--- .../components/landing/IdentityCardDemo.tsx | 33 ++++++++++++ site/docs/components/landing/IdentityDemo.tsx | 53 ------------------- 4 files changed, 45 insertions(+), 60 deletions(-) create mode 100644 .changeset/spotty-wasps-warn.md create mode 100644 site/docs/components/landing/IdentityCardDemo.tsx delete mode 100644 site/docs/components/landing/IdentityDemo.tsx diff --git a/.changeset/spotty-wasps-warn.md b/.changeset/spotty-wasps-warn.md new file mode 100644 index 0000000000..6e65465952 --- /dev/null +++ b/.changeset/spotty-wasps-warn.md @@ -0,0 +1,5 @@ +--- +'@coinbase/onchainkit': patch +--- + +-**docs**: Update Idendity component preview' diff --git a/site/docs/components/landing/ComponentPreview.tsx b/site/docs/components/landing/ComponentPreview.tsx index f0246eee20..9502a6c90f 100644 --- a/site/docs/components/landing/ComponentPreview.tsx +++ b/site/docs/components/landing/ComponentPreview.tsx @@ -8,7 +8,7 @@ import { getHighlightedCode } from './getHighlightedCode.tsx'; // Demo components and code snippets import CheckoutDemo, { checkoutDemoCode } from './CheckoutDemo.tsx'; import FundDemo, { fundDemoCode } from './FundDemo.tsx'; -import IdentityDemo, { identityDemoCode } from './IdentityDemo.tsx'; +import IdentityCardDemo, { identityCardDemoCode } from './IdentityCardDemo.tsx'; import NftMintCardDemo, { nftMintCardDemoCode } from './NftMintCardDemo.tsx'; import SwapDemo, { swapDemoCode } from './SwapDemo.tsx'; import TransactionDemo, { transactionDemoCode } from './TransactionDemo.tsx'; @@ -60,11 +60,11 @@ const components: Component[] = [ description: 'Fund wallets with a debit card or a coinbase account.', }, { - name: 'Identity', - component: IdentityDemo, - code: identityDemoCode, + name: 'Identity Card', + component: IdentityCardDemo, + code: identityCardDemoCode, description: - 'Display the Basename, avatar, and address associated with a wallet.', + 'Display the Basename, avatar, address, and social media links associated with a wallet.', }, ]; @@ -73,7 +73,7 @@ function ComponentPreview() { const [copiedIndex, setCopiedIndex] = useState(null); const [activeTab, setActiveTab] = useState(0); const [activeSubTab, setActiveSubTab] = useState<'preview' | 'code'>( - 'preview', + 'preview' ); const { theme } = useTheme(); @@ -186,7 +186,7 @@ function PreviewContainer({ useEffect(() => { getHighlightedCode({ code: components[activeTab].code, theme }).then( - setHighlightedCode, + setHighlightedCode ); }, [activeTab, theme]); diff --git a/site/docs/components/landing/IdentityCardDemo.tsx b/site/docs/components/landing/IdentityCardDemo.tsx new file mode 100644 index 0000000000..e9de113fc1 --- /dev/null +++ b/site/docs/components/landing/IdentityCardDemo.tsx @@ -0,0 +1,33 @@ +import App from '../App.tsx'; +import { base } from 'viem/chains'; +import { IdentityCard } from '@coinbase/onchainkit/identity'; + +export const identityCardDemoCode = ` + import { IdentityCard } from '@coinbase/onchainkit/identity'; + import { base } from 'viem/chains'; + + function IdentityCardDemo() { + return ( + + ) + } +`; + +function IdentityCardDemo() { + return ( + + + + ); +} + +export default IdentityCardDemo; diff --git a/site/docs/components/landing/IdentityDemo.tsx b/site/docs/components/landing/IdentityDemo.tsx deleted file mode 100644 index bb7d3a341f..0000000000 --- a/site/docs/components/landing/IdentityDemo.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { - Address, - Avatar, - Badge, - Identity, - Name, -} from '@coinbase/onchainkit/identity'; -import App from '../App.tsx'; - -export const identityDemoCode = ` - import { - Avatar, - Identity, - Name, - Badge, - Address - } from '@coinbase/onchainkit/identity'; - - function IdentityDemo() { - return ( - - - - - -
- - ) - } - `; - -function IdentityDemo() { - return ( - - - - - - -
- - - ); -} - -export default IdentityDemo; From cbf84306e96d911d6b6fd0c61b8bc6fcba2114d1 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Wed, 11 Dec 2024 10:22:51 -0800 Subject: [PATCH 2/4] Changeset --- .changeset/spotty-wasps-warn.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/spotty-wasps-warn.md b/.changeset/spotty-wasps-warn.md index 6e65465952..623bcfc24d 100644 --- a/.changeset/spotty-wasps-warn.md +++ b/.changeset/spotty-wasps-warn.md @@ -2,4 +2,4 @@ '@coinbase/onchainkit': patch --- --**docs**: Update Idendity component preview' +-**docs**: Updated `Identity` component preview. By @cpcramer #1717 From d15e48841dd001590f1d14dd16f95278c7c61f7c Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Wed, 11 Dec 2024 10:25:45 -0800 Subject: [PATCH 3/4] linting and formatting --- site/docs/components/landing/ComponentPreview.tsx | 4 ++-- site/docs/components/landing/IdentityCardDemo.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/site/docs/components/landing/ComponentPreview.tsx b/site/docs/components/landing/ComponentPreview.tsx index 9502a6c90f..376d640b69 100644 --- a/site/docs/components/landing/ComponentPreview.tsx +++ b/site/docs/components/landing/ComponentPreview.tsx @@ -73,7 +73,7 @@ function ComponentPreview() { const [copiedIndex, setCopiedIndex] = useState(null); const [activeTab, setActiveTab] = useState(0); const [activeSubTab, setActiveSubTab] = useState<'preview' | 'code'>( - 'preview' + 'preview', ); const { theme } = useTheme(); @@ -186,7 +186,7 @@ function PreviewContainer({ useEffect(() => { getHighlightedCode({ code: components[activeTab].code, theme }).then( - setHighlightedCode + setHighlightedCode, ); }, [activeTab, theme]); diff --git a/site/docs/components/landing/IdentityCardDemo.tsx b/site/docs/components/landing/IdentityCardDemo.tsx index e9de113fc1..f30eac59c6 100644 --- a/site/docs/components/landing/IdentityCardDemo.tsx +++ b/site/docs/components/landing/IdentityCardDemo.tsx @@ -1,6 +1,6 @@ -import App from '../App.tsx'; -import { base } from 'viem/chains'; import { IdentityCard } from '@coinbase/onchainkit/identity'; +import { base } from 'viem/chains'; +import App from '../App.tsx'; export const identityCardDemoCode = ` import { IdentityCard } from '@coinbase/onchainkit/identity'; From 7b73f4705ba66fb18af9423b5fbfdb84076c97e4 Mon Sep 17 00:00:00 2001 From: Paul Cramer Date: Wed, 11 Dec 2024 10:38:48 -0800 Subject: [PATCH 4/4] Update card demo bg color --- site/docs/components/landing/IdentityCardDemo.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/site/docs/components/landing/IdentityCardDemo.tsx b/site/docs/components/landing/IdentityCardDemo.tsx index f30eac59c6..db70757c52 100644 --- a/site/docs/components/landing/IdentityCardDemo.tsx +++ b/site/docs/components/landing/IdentityCardDemo.tsx @@ -24,7 +24,6 @@ function IdentityCardDemo() { address="0x849151d7D0bF1F34b70d5caD5149D28CC2308bf1" chain={base} schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9" - className="rounded-lg bg-gray-100 px-4 py-2 dark:bg-gray-900" /> );