Add some refactoring updates to the Address component

MetaMask · Oct 14, 2024 · 2f47791 · 2f47791
1 parent 0162c8f
commit 2f47791
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);
  });