Add updated props for address component (#2833)

Update props of address component to get it work in more flexible way.

Integration PR for `metamask-extension`:
MetaMask/metamask-extension#27798

Related ticket: #2758

Author: david0xd

packages/examples/packages/browserify-plugin/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "j2iSyKR8FljepPZvGpP82aJlN4lq/LbCOmEkj18F8OM=",
+    "shasum": "zA6fni0b6B+ELhkMRiw6vcAgKj1/9A/Rm+dxkPY/oxM=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/browserify/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "SHtsXe9bzVAg3N1wepgK06JIiZvDKoKxC+Acys6fzY4=",
+    "shasum": "diJJzn5l3lSAKQvHldlYmQXjTcO/IDnLOnxH7kGmkW0=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snaps-sdk/src/jsx/components/Address.test.tsx

@@ -14,4 +14,26 @@ describe('Address', () => {
       },
     });
   });
+
+  it('renders an address with customized props', () => {
+    const result = (
+      <Address
+        address="0x1234567890123456789012345678901234567890"
+        truncate={true}
+        displayName={true}
+        avatar={false}
+      />
+    );
+
+    expect(result).toStrictEqual({
+      type: 'Address',
+      key: null,
+      props: {
+        address: '0x1234567890123456789012345678901234567890',
+        truncate: true,
+        displayName: true,
+        avatar: false,
+      },
+    });
+  });
 });

packages/snaps-sdk/src/jsx/components/Address.ts

@@ -7,9 +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 - Whether to truncate the address. Defaults to `true`.
+ * @property displayName - Whether to show the account name. Defaults to `false`.
+ * @property avatar - Whether to show the address avatar. Defaults to `true`.
  */
 export type AddressProps = {
   address: `0x${string}` | CaipAccountId;
+  truncate?: boolean | undefined;
+  displayName?: boolean | undefined;
+  avatar?: boolean | undefined;
 };
 
 const TYPE = 'Address';
@@ -22,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 - Whether to truncate the address. Defaults to `true`.
+ * @param props.displayName - Whether to show the account name. Defaults to `false`.
+ * @param props.avatar - Whether to show the address avatar. Defaults to `true`.
  * @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);
 

packages/snaps-sdk/src/jsx/validation.test.tsx

@@ -492,6 +492,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);
   });
@@ -518,6 +538,21 @@ describe('AddressStruct', () => {
     <Row label="label">
       <Image src="<svg />" alt="alt" />
     </Row>,
+    <Address
+      address="0x1234567890abcdef1234567890abcdef12345678"
+      // @ts-expect-error - Invalid props.
+      truncate="wrong-prop"
+    />,
+    <Address
+      address="0x1234567890abcdef1234567890abcdef12345678"
+      // @ts-expect-error - Invalid props.
+      displayName="false"
+    />,
+    <Address
+      address="0x1234567890abcdef1234567890abcdef12345678"
+      // @ts-expect-error - Invalid props.
+      avatar="wrong-prop"
+    />,
   ])('does not validate "%p"', (value) => {
     expect(is(value, AddressStruct)).toBe(false);
   });

packages/snaps-sdk/src/jsx/validation.ts

@@ -543,6 +543,9 @@ export const FormattingStruct: Describe<StandardFormattingElement> = typedUnion(
  */
 export const AddressStruct: Describe<AddressElement> = element('Address', {
   address: nullUnion([HexChecksumAddressStruct, CaipAccountIdStruct]),
+  truncate: optional(boolean()),
+  displayName: optional(boolean()),
+  avatar: optional(boolean()),
 });
 
 /**