Repository: Developer-DAO/web3-ui (ts)

Issue:
Don't include `.dev.js` stuff in the build 
![image](https://user-images.githubusercontent.com/39617427/145869533-7d8c04c0-c280-4dc3-9231-b0c32a8609f6.png)

https://www.runpkg.com/?@web3-ui/core@0.1.0/dist/web3-ui-core.cjs.dev.js

This shouldn't be published to npm because when `process.env.NODE_ENV` is not `production`, the `dev.js` file is being used. 

```ts
'use strict';

if (process.env.NODE_ENV === "production") {
  module.exports = require("./web3-ui-core.cjs.prod.js");
} else {
  module.exports = require("./web3-ui-core.cjs.dev.js");
}
```

Pull request:
include regenerator runtime babel runtime vars
Closes #115

## Description

preconstruct doesn't automatically include `regeneratorRuntime` this fixes that crash

Patch:
diff --git a/.all-contributorsrc b/.all-contributorsrc
index 95b34d6..ed9bb5f 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -50,7 +50,8 @@
       "avatar_url": "https://avatars.githubusercontent.com/u/48886275?v=4",
       "profile": "https://zanzeta.com",
       "contributions": [
-        "doc"
+        "doc",
+        "code"
       ]
     },
     {
diff --git a/.changeset/gold-phones-unite.md b/.changeset/gold-phones-unite.md
new file mode 100644
index 0000000..689d585
--- /dev/null
+++ b/.changeset/gold-phones-unite.md
@@ -0,0 +1,7 @@
+---
+'@web3-ui/components': patch
+'@web3-ui/core': patch
+'@web3-ui/hooks': patch
+---
+
+Add babel-runtime to deps so we can have regenerator runtime at runtime
diff --git a/README.md b/README.md
index 33caa01..05ea248 100644
--- a/README.md
+++ b/README.md
@@ -55,7 +55,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://github.com/crondinini"><img src="https://avatars.githubusercontent.com/u/21973269?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Camila Rondinini</b></sub></a><br /><a href="https://github.com/Developer-DAO/web3-ui/commits?author=crondinini" title="Code">💻</a> <a href="https://github.com/Developer-DAO/web3-ui/pulls?q=is%3Apr+reviewed-by%3Acrondinini" title="Reviewed Pull Requests">👀</a></td>
     <td align="center"><a href="http://dhaiwat.com"><img src="https://avatars.githubusercontent.com/u/39617427?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dhaiwat Pandya</b></sub></a><br /><a href="https://github.com/Developer-DAO/web3-ui/commits?author=Dhaiwat10" title="Code">💻</a> <a href="https://github.com/Developer-DAO/web3-ui/pulls?q=is%3Apr+reviewed-by%3ADhaiwat10" title="Reviewed Pull Requests">👀</a></td>
     <td align="center"><a href="https://nazeeh.dev/"><img src="https://avatars.githubusercontent.com/u/56908732?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Nazeeh Vahora</b></sub></a><br /><a href="https://github.com/Developer-DAO/web3-ui/commits?author=Nazeeh21" title="Code">💻</a></td>
-    <td align="center"><a href="https://zanzeta.com"><img src="https://avatars.githubusercontent.com/u/48886275?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jose L. Velez</b></sub></a><br /><a href="https://github.com/Developer-DAO/web3-ui/commits?author=joselvelez" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://zanzeta.com"><img src="https://avatars.githubusercontent.com/u/48886275?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jose L. Velez</b></sub></a><br /><a href="https://github.com/Developer-DAO/web3-ui/commits?author=joselvelez" title="Documentation">📖</a> <a href="https://github.com/Developer-DAO/web3-ui/commits?author=joselvelez" title="Code">💻</a></td>
     <td align="center"><a href="https://with-heart.me/"><img src="https://avatars.githubusercontent.com/u/1954752?v=4?s=100" width="100px;" alt=""/><br /><sub><b>with-heart</b></sub></a><br /><a href="https://github.com/Developer-DAO/web3-ui/pulls?q=is%3Apr+reviewed-by%3Awith-heart" title="Reviewed Pull Requests">👀</a></td>
     <td align="center"><a href="https://github.com/christiananese"><img src="https://avatars.githubusercontent.com/u/6060101?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Christian</b></sub></a><br /><a href="https://github.com/Developer-DAO/web3-ui/commits?author=christiananese" title="Code">💻</a></td>
   </tr>
diff --git a/packages/components/.babelrc b/packages/components/.babelrc
index 469d3d5..4156f95 100644
--- a/packages/components/.babelrc
+++ b/packages/components/.babelrc
@@ -3,5 +3,8 @@
     "@babel/preset-env",
     "@babel/preset-typescript",
     "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-runtime"
   ]
 }
diff --git a/packages/components/package.json b/packages/components/package.json
index be5161c..ce94a21 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -28,6 +28,7 @@
   "module": "dist/web3-ui-components.esm.js",
   "types": "dist/web3-ui-components.cjs.d.ts",
   "dependencies": {
+    "@babel/runtime": "^7.16.3",
     "@chakra-ui/react": "^1.7.2",
     "@emotion/core": "^11.0.0",
     "@emotion/react": "^11",
diff --git a/packages/components/src/components/Address/Address.stories.tsx b/packages/components/src/components/Address/Address.stories.tsx
index ee640b3..23c429c 100644
--- a/packages/components/src/components/Address/Address.stories.tsx
+++ b/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>
+);
diff --git a/packages/components/src/components/Address/Address.tsx b/packages/components/src/components/Address/Address.tsx
index b984fb3..07ab2d6 100644
--- a/packages/components/src/components/Address/Address.tsx
+++ b/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} />;
 };
diff --git a/packages/core/.babelrc b/packages/core/.babelrc
index bd96608..4156f95 100644
--- a/packages/core/.babelrc
+++ b/packages/core/.babelrc
@@ -1,3 +1,10 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-typescript", "@babel/preset-react"]
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-runtime"
+  ]
 }
diff --git a/packages/core/package.json b/packages/core/package.json
index 4f7ca0a..ced766a 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -28,6 +28,7 @@
   "module": "dist/web3-ui-core.esm.js",
   "types": "dist/web3-ui-core.cjs.d.ts",
   "dependencies": {
+    "@babel/runtime": "^7.16.3",
     "@chakra-ui/react": "^1.7.2",
     "@emotion/core": "^11.0.0",
     "@emotion/react": "^11",
diff --git a/packages/hooks/.babelrc b/packages/hooks/.babelrc
index 469d3d5..4156f95 100644
--- a/packages/hooks/.babelrc
+++ b/packages/hooks/.babelrc
@@ -3,5 +3,8 @@
     "@babel/preset-env",
     "@babel/preset-typescript",
     "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-runtime"
   ]
 }
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index b1782fb..392bf87 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -31,6 +31,7 @@
   "module": "dist/web3-ui-hooks.esm.js",
   "types": "dist/web3-ui-hooks.cjs.d.ts",
   "dependencies": {
+    "@babel/runtime": "^7.16.3",
     "@walletconnect/web3-provider": "^1.6.6",
     "ethers": "^5.5.1",
     "web3modal": "^1.9.4"


Test patch:
diff --git a/packages/components/src/components/Address/Address.test.tsx b/packages/components/src/components/Address/Address.test.tsx
index b19cc99..439c3f9 100644
--- a/packages/components/src/components/Address/Address.test.tsx
+++ b/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');
+  });
 });