Add some refactoring updates to the Address component

MetaMask · Oct 14, 2024 · 5472339 · 5472339
1 parent b753e4d
commit 5472339
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/packages/snaps-sdk/src/jsx/components/Address.ts b/packages/snaps-sdk/src/jsx/components/Address.ts
@@ -7,12 +7,15 @@ import { createSnapComponent } from '../component';
  *
  * @property address - The (Ethereum) address to display. This should be a
  * valid Ethereum address, starting with `0x`, or a valid CAIP-10 address.
+ * @property truncate - Optional boolean flag used to control truncation of the address.
+ * @property displayName - Optional boolean flag used to control displaying a name of an account or contact.
+ * @property avatar - Optional boolean flag used to control displaying of the address avatar.
  */
 export type AddressProps = {
   address: `0x${string}` | CaipAccountId;
-  truncate?: boolean;
-  displayName?: boolean;
-  avatar?: boolean;
+  truncate?: boolean | undefined;
+  displayName?: boolean | undefined;
+  avatar?: boolean | undefined;
 };
 
 const TYPE = 'Address';
@@ -25,13 +28,20 @@ const TYPE = 'Address';
  * @param props - The props of the component.
  * @param props.address - The address to display. This should be a
  * valid Ethereum address, starting with `0x`, or a valid CAIP-10 address.
+ * @param props.truncate - Optional boolean flag used to control truncation of the address.
+ * @param props.displayName - Optional boolean flag used to control displaying a name of an account or contact.
+ * @param props.avatar - Optional boolean flag used to control displaying of the address avatar.
  * @returns An address element.
  * @example
  * <Address address="0x1234567890123456789012345678901234567890" />
  * @example
  * <Address address="eip155:1:0x1234567890123456789012345678901234567890" />
  * @example
  * <Address address="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />
+ * @example
+ * <Address address="0x1234567890123456789012345678901234567890" truncate={false} avatar={false} />
+ * @example
+ * <Address address="0x1234567890123456789012345678901234567890" displayName={true} />
  */
 export const Address = createSnapComponent<AddressProps, typeof TYPE>(TYPE);
 

diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx
@@ -493,6 +493,26 @@ describe('AddressStruct', () => {
     <Address address="eip155:1:0x1234567890abcdef1234567890abcdef12345678" />,
     <Address address="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />,
     <Address address="cosmos:cosmoshub-3:cosmos1t2uflqwqe0fsj0shcfkrvpukewcw40yjj6hdc0" />,
+    <Address
+      address="0x1234567890abcdef1234567890abcdef12345678"
+      truncate={false}
+      avatar={false}
+    />,
+    <Address
+      address="0x1234567890abcdef1234567890abcdef12345678"
+      displayName={true}
+    />,
+    <Address
+      address="0x1234567890abcdef1234567890abcdef12345678"
+      displayName={true}
+      avatar={false}
+    />,
+    <Address
+      address="0x1234567890abcdef1234567890abcdef12345678"
+      truncate={true}
+      displayName={false}
+      avatar={true}
+    />,
   ])('validates an address element', (value) => {
     expect(is(value, AddressStruct)).toBe(true);
   });