Merge pull request #95 from Developer-DAO/shortAddressProp

update Address component with shortAddress prop

Author: Erik Ritter

packages/components/src/components/Address/Address.stories.tsx

@@ -11,13 +11,24 @@ export default {
 
 export const Default = () => <Address value='testaddress.eth' />;
 
-const AddressUsingProvider = () => {
+export const DefaultShortenedWithENS = () => <Address shortened value='testaddress.eth' />;
+
+export const DefaultShortenedWithHexAddress = () => (
+  <Address shortened value='0x7Be8076f4EA4A4AD08075C2508e481d6C946D12b' />
+);
+
+type AddressProps = {
+  shortened?: boolean;
+};
+
+const AddressUsingProvider = (props: AddressProps) => {
   const { connected, connectWallet, connection } = useWallet();
 
   return (
     <>
       <Address
         value={connected ? connection.ens || connection.userAddress || '' : 'Not connected'}
+        shortened={props.shortened}
       />
       <Button onClick={connectWallet}>Connect wallet</Button>
     </>
@@ -29,3 +40,9 @@ export const WithWallet = () => (
     <AddressUsingProvider />
   </Provider>
 );
+
+export const WithWalletShortened = () => (
+  <Provider network={NETWORKS.rinkeby}>
+    <AddressUsingProvider shortened />
+  </Provider>
+);

packages/components/src/components/Address/Address.test.tsx

@@ -5,7 +5,13 @@ import { Address } from './Address';
 
 describe('Address', () => {
   it('renders without throwing', () => {
-    const { container } = render(<Address value="taylorswift.eth" />);
+    const { container } = render(<Address value='taylorswift.eth' shortened={false} />);
     expect(container).toBeInTheDocument();
   });
+  
+  it('checks the length of the address when shortened', () => {
+    const { container } = render(<Address value='0x00000000000000' shortened />);
+    const addressInput = container.querySelector('input') as HTMLInputElement;
+    expect(addressInput).toHaveValue('0x00...0000');
+  });
 });

packages/components/src/components/Address/Address.tsx

@@ -1,16 +1,36 @@
 import { Input } from '@chakra-ui/react';
-import React from 'react';
+import React, { FC } from 'react';
 
 export interface AddressProps {
   /**
    * The address to display
    */
   value: string;
+  /**
+   * Shorten the address if it does not resolve to an ENS name
+   */
+  shortened?: boolean;
 }
 
 /**
  * A component to display an address
  */
-export const Address: React.FC<AddressProps> = ({ value }) => {
-  return <Input value={value} />;
+export const Address: FC<AddressProps> = ({ value, shortened = false }) => {
+  let displayAddress: string;
+
+  if (shortened) {
+    if (value.includes('.eth')) {
+      displayAddress = value;
+    } else if (value === '' || value === 'Not connected') {
+      displayAddress = value;
+    } else {
+      displayAddress = `${value.substring(0, 4)}...${value.substring(
+        value.length - 4
+      )}`.toLowerCase();
+    }
+  } else {
+    displayAddress = value;
+  }
+
+  return <Input value={displayAddress} />;
 };