docs: added isSliced option to Address and remove slice logic from Na…

…me (coinbase#733)
navalboyblue · Jul 9, 2024 · c5ca26d · c5ca26d
1 parent cad1f18
commit c5ca26d
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 26 deletions.
diff --git a/.changeset/famous-readers-matter.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"