From c5ca26dee742c31d78d057f9d38482dacba4ff9b Mon Sep 17 00:00:00 2001
From: Paul Cramer <paulccramer@gmail.com>
Date: Tue, 9 Jul 2024 15:57:47 -0700
Subject: [PATCH] docs: added isSliced option to Address and remove slice logic
 from Name (#733)

---
 .changeset/famous-readers-matter.md  |  5 +++++
 site/docs/pages/identity/address.mdx | 23 +++++++++++++++++++----
 site/docs/pages/identity/name.mdx    | 23 ++++++++---------------
 site/docs/pages/identity/types.mdx   |  1 -
 site/package.json                    |  2 +-
 site/yarn.lock                       | 10 +++++-----
 6 files changed, 38 insertions(+), 26 deletions(-)
 create mode 100644 .changeset/famous-readers-matter.md

diff --git a/.changeset/famous-readers-matter.md b/.changeset/famous-readers-matter.md
new file mode 100644
index 0000000000..4590d6a925
--- /dev/null
+++ b/.changeset/famous-readers-matter.md
@@ -0,0 +1,5 @@
+---
+"@coinbase/onchainkit": patch
+---
+
+- **docs**: Add isSliced option to the Address component. This allows this component to render the full users address when set to false. Remove the isSliced field from the Name component and update the component to return null if the ENS name is not found for the given address. Update onchainkit dependency to version 0.24.3. Add sub sections to the Address and Name pages. By @cpcramer #733
diff --git a/site/docs/pages/identity/address.mdx b/site/docs/pages/identity/address.mdx
index c4c6b20536..da2d2540cb 100644
--- a/site/docs/pages/identity/address.mdx
+++ b/site/docs/pages/identity/address.mdx
@@ -16,21 +16,36 @@ import { Address } from '@coinbase/onchainkit/identity';
 ```
 
 <App>
-  <Address  address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1" />
+  <Address className="bg-gray-300 rounded" address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1" />
 </App>
 
-Override styles via `className` prop:
+### Display full address
+
+Set `isSliced` to false, to display the full address:
+
+```tsx
+import { Address } from '@coinbase/onchainkit/identity';
+<Address address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1" isSliced={false}/> // [!code focus]
+```
+
+<App>
+  <Address className="bg-gray-300 rounded" address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1" isSliced={false}/>
+</App>
+
+### Override styles
+
+You can override component styles using `className`.
 
 ```tsx
 import { Address } from '@coinbase/onchainkit/identity';
 <Address
-  className="bg-white px-2 py-1" // [!code focus]
+  className="bg-emerald-400 px-2 py-1 rounded" // [!code focus]
   address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1"
 />
 ```
 
 <App>
-  <Address className="bg-white px-2 py-1" address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1" />
+  <Address className="bg-emerald-400 px-2 py-1" address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1"/>
 </App>
 
 ## Props
diff --git a/site/docs/pages/identity/name.mdx b/site/docs/pages/identity/name.mdx
index 369338ca34..9d93581c0b 100644
--- a/site/docs/pages/identity/name.mdx
+++ b/site/docs/pages/identity/name.mdx
@@ -15,33 +15,26 @@ import { Name } from '@coinbase/onchainkit/identity';
 ```
 
 <App>
-  <Name address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1" />
+  <Name className='bg-gray-300 rounded' address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1"/>
 </App>
 
-Override styles via `className` prop:
+### Override styles
+
+You can override component styles using `className`.
 
 ```tsx
 import { Name } from '@coinbase/onchainkit/identity';
 <Name
-  className="bg-default"// [!code focus]
+  className="bg-emerald-400"// [!code focus]
   address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1"
 />
 ```
 
 <App>
-  <Name className="bg-default px-2 py-1" address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1" />
+  <Name className="bg-emerald-400 px-2 py-1 rounded" address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1" />
 </App>
 
-Address without an ENS name, and it defaults to his sliced address:
-
-```tsx
-import { Name } from '@coinbase/onchainkit/identity';
-<Name address="0x1234567890abcdef1234567890abcdef12345678" /> // [!code focus]
-```
-
-<App>
-  <Name address="0x1234567890abcdef1234567890abcdef12345678" />
-</App>
+### Add attestation badge
 
 Show attestation on ENV name with [`Badge`](/identity/badge) component.
 
@@ -66,7 +59,7 @@ import { Badge, Name, Identity } from '@coinbase/onchainkit/identity'; // [!code
     address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9"
     className="bg-transparent"
   >
-    <Name >
+    <Name className='bg-gray-300 rounded'>
       <Badge />
     </Name>
   </Identity>
diff --git a/site/docs/pages/identity/types.mdx b/site/docs/pages/identity/types.mdx
index 95a91d610e..da0d1235f0 100644
--- a/site/docs/pages/identity/types.mdx
+++ b/site/docs/pages/identity/types.mdx
@@ -121,7 +121,6 @@ type IdentityReact = {
 export type NameReact = {
   address?: Address | null; // Ethereum address to be displayed.
   className?: string; // Optional className override for top span element.
-  sliced?: boolean; // Determines if the address should be sliced when no ENS name is available.
   children?: ReactNode; // Optional attestation by passing Badge component as its children
 } & HTMLAttributes<HTMLSpanElement>; // Optional additional span attributes to apply to the name.
 ```
diff --git a/site/package.json b/site/package.json
index e4c9a05b9f..f34f9d2dd8 100644
--- a/site/package.json
+++ b/site/package.json
@@ -8,7 +8,7 @@
     "preview": "vocs preview"
   },
   "dependencies": {
-    "@coinbase/onchainkit": "0.24.1",
+    "@coinbase/onchainkit": "0.24.3",
     "@types/react": "latest",
     "@vercel/edge": "^1.1.1",
     "permissionless": "^0.1.29",
diff --git a/site/yarn.lock b/site/yarn.lock
index 44b5facfd9..a70062b7d4 100644
--- a/site/yarn.lock
+++ b/site/yarn.lock
@@ -338,9 +338,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@coinbase/onchainkit@npm:0.24.1":
-  version: 0.24.1
-  resolution: "@coinbase/onchainkit@npm:0.24.1"
+"@coinbase/onchainkit@npm:0.24.3":
+  version: 0.24.3
+  resolution: "@coinbase/onchainkit@npm:0.24.3"
   dependencies:
     "@tanstack/react-query": "npm:^5"
     clsx: "npm:^2.1.1"
@@ -354,7 +354,7 @@ __metadata:
     "@xmtp/frames-validator": ^0.6.0
     react: ^18
     react-dom: ^18
-  checksum: bbe3e6f2af5120468a8bbfff9d6720f06b0e6383e39f32f1c9a76119ee22fb28f858c6f0b8efa04145869f986f95aa61a274025ecf845599cb97c0e11be629a1
+  checksum: f81c4b588a170fc9bccc3d367d67f8ce5c19d57252f82edf2b6ffb8b2a82d1447454c629df45fcae851d40b43bea561d59dfad4f7d4a5204f581d010a9462f3a
   languageName: node
   linkType: hard
 
@@ -7826,7 +7826,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "onchainkit@workspace:."
   dependencies:
-    "@coinbase/onchainkit": "npm:0.24.1"
+    "@coinbase/onchainkit": "npm:0.24.3"
     "@types/react": "npm:latest"
     "@vercel/edge": "npm:^1.1.1"
     permissionless: "npm:^0.1.29"