update Address component with shortAddress prop

Author: joselvelez

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

@@ -9,15 +9,22 @@ export default {
   component: Address,
 };
 
-export const Default = () => <Address value='testaddress.eth' />;
+export const Default = () => <Address value='testaddress.eth' shortened={false} />;
 
-const AddressUsingProvider = () => {
+export const DefaultShortenedWithENS = () => <Address value='testaddress.eth' shortened={true} />;
+
+export const DefaultShortenedWithHexAddress = () => (
+  <Address value='0x7Be8076f4EA4A4AD08075C2508e481d6C946D12b' shortened={true} />
+);
+
+const AddressUsingProvider = ({ shortened }) => {
   const { connected, connectWallet, connection } = useWallet();
 
   return (
     <>
       <Address
         value={connected ? connection.ens || connection.userAddress || '' : 'Not connected'}
+        shortened={shortened}
       />
       <Button onClick={connectWallet}>Connect wallet</Button>
     </>
@@ -26,6 +33,12 @@ const AddressUsingProvider = () => {
 
 export const WithWallet = () => (
   <Provider network={NETWORKS.rinkeby}>
-    <AddressUsingProvider />
+    <AddressUsingProvider shortened={false} />
+  </Provider>
+);
+
+export const WithWalletShortened = () => (
+  <Provider network={NETWORKS.rinkeby}>
+    <AddressUsingProvider shortened={true} />
   </Provider>
 );

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

@@ -5,7 +5,7 @@ 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();
   });
 });

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

@@ -6,11 +6,27 @@ export interface AddressProps {
    * The address to display
    */
   value: string;
+  /**
+   * boolean to shorten the address if addresses 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: React.FC<AddressProps> = ({ value, shortened }) => {
+  if (shortened) {
+    if (value.includes('.eth')) {
+      return <Input value={value} />;
+    } else if (value === '' || value === 'Not connected') {
+      return <Input value={value} />;
+    } else {
+      let address: string;
+      address = `${value.substring(0, 4)}...${value.substring(value.length - 4)}`;
+      return <Input value={address.toLowerCase()} />;
+    }
+  } else {
+    return <Input value={value} />;
+  }
 };