feat: Add isSliced option to Name and Address component.

coinbase · Jun 28, 2024 · f18e92b · f18e92b
1 parent d638dc9
commit f18e92b
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 11 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 Name and Address component. This allows these components to render the full users address when set to false. By @cpcramer #733
diff --git a/site/docs/pages/identity/address.mdx b/site/docs/pages/identity/address.mdx
@@ -16,21 +16,32 @@ import { Address } from '@coinbase/onchainkit/identity';
 ```
 
 <App>
-  <Address  address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1" />
+  <Address className="bg-gray-300 rounded" address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1" />
+</App>
+
+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 via `className` prop:
 
 ```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,21 +15,21 @@ import { Name } from '@coinbase/onchainkit/identity';
 ```
 
 <App>
-  <Name address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1" />
+  <Name className='bg-gray-300 rounded' address="0x02feeb0AdE57b6adEEdE5A4EEea6Cf8c21BeB6B1"/>
 </App>
 
 Override styles via `className` prop:
 
 ```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:
@@ -40,7 +40,18 @@ import { Name } from '@coinbase/onchainkit/identity';
 ```
 
 <App>
-  <Name address="0x1234567890abcdef1234567890abcdef12345678" />
+  <Name className='bg-gray-300 rounded' address="0x435233231234567890abcdef1234567890abcdef12345678" />
+</App>
+
+Set `isSliced` to false, to display the full address if the ENS name is not found:
+
+```tsx
+import { Name } from '@coinbase/onchainkit/identity';
+<Name address="0x1234567890abcdef1234567890abcdef12345678" isSliced={false}/> // [!code focus]
+```
+
+<App>
+  <Name className='bg-gray-300 rounded' address="0x435233231234567890abcdef1234567890abcdef12345678" isSliced={false}/>
 </App>
 
 Show attestation on ENV name with [`Badge`](/identity/badge) component.
@@ -66,7 +77,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,7 @@ 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.
+  isSliced?: 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/docs/pages/swap/swap.mdx b/site/docs/pages/swap/swap.mdx
@@ -293,15 +293,15 @@ You can override component styles using `className`.
     swappableTokens={swappableTokens}
     token={swappableTokens[1]}
     type="from"
-    className=' bg-white' // [!code focus]
+    className='bg-white' // [!code focus]
   />
   <SwapToggleButton className='border-red-600 bg-white'/> // [!code focus]
   <SwapAmountInput
     label="Buy"
     swappableTokens={swappableTokens}
     token={swappableTokens[2]}
     type="to"
-    className=' bg-white' // [!code focus]
+    className='bg-white' // [!code focus]
   />
   <SwapButton className='bg-red-600'/> // [!code focus]
   <SwapMessage className='text-red-600'/> // [!code focus]