From 8d931ab6511b7e3a586d9e2d784c84807a2a8d72 Mon Sep 17 00:00:00 2001
From: Dani Somoza <daniel.somoza@gnosis.pm>
Date: Tue, 30 Nov 2021 17:46:56 +0100
Subject: [PATCH] New Approach of AddressInput Component (#174)

* Added load address from QR code in AddressInput Component

* Updated AddressInput Storybook

* Added push tag event to trigger the storybook deployment on release

* Added 0.9.1 version to package.json
---
 .github/workflows/deploy-storybook.yml        |   5 +-
 package.json                                  |   3 +-
 .../AddressInput/AddressInput.stories.tsx     | 502 ++++++++++-----
 src/inputs/AddressInput/index.tsx             | 171 +++--
 .../__snapshots__/fixedIcon.stories.storyshot |   4 +-
 .../Icon/__snapshots__/icon.stories.storyshot | 150 ++---
 .../AddressInput.stories.storyshot            | 602 ++++++++++++------
 .../__snapshots__/button.stories.storyshot    |  10 +-
 .../__snapshots__/index.stories.storyshot     |   2 +-
 .../TextFieldInput.stories.storyshot          |   2 +-
 yarn.lock                                     |  34 +
 11 files changed, 1002 insertions(+), 483 deletions(-)

diff --git a/.github/workflows/deploy-storybook.yml b/.github/workflows/deploy-storybook.yml
index 8f2bf412..e6a5e062 100644
--- a/.github/workflows/deploy-storybook.yml
+++ b/.github/workflows/deploy-storybook.yml
@@ -4,8 +4,9 @@ on:
   # Pull request hook without any config. Launches for every pull request
   pull_request:
   # Launches build when release is published
-  release:
-    types: [published]
+  push:
+    tags:
+      - 'v*'
 
 env:
   REPO_NAME_ALPHANUMERIC: safereactcomponents
diff --git a/package.json b/package.json
index 1f13c288..b498c69f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gnosis.pm/safe-react-components",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Gnosis UI components",
   "main": "dist/index.min.js",
   "typings": "dist/index.d.ts",
@@ -53,6 +53,7 @@
     "@typescript-eslint/eslint-plugin": "^4.31.0",
     "@typescript-eslint/parser": "^4.31.0",
     "copy-webpack-plugin": "^6.3.0",
+    "react-qr-reader": "2.2.1",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
diff --git a/src/inputs/AddressInput/AddressInput.stories.tsx b/src/inputs/AddressInput/AddressInput.stories.tsx
index 68ed328f..92c0f544 100644
--- a/src/inputs/AddressInput/AddressInput.stories.tsx
+++ b/src/inputs/AddressInput/AddressInput.stories.tsx
@@ -1,12 +1,21 @@
-import React, { useState, useEffect } from 'react';
-import { InputAdornment } from '@material-ui/core';
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  InputAdornment,
+  Typography,
+  IconButton,
+  CircularProgress,
+} from '@material-ui/core';
 import styled from 'styled-components';
 import CheckCircle from '@material-ui/icons/CheckCircle';
-import { Typography } from '@material-ui/core';
+import QrReader from 'react-qr-reader';
 
 import AddressInput from './index';
-import { isValidAddress } from '../../utils/address';
-import { Switch } from '..';
+import { isValidAddress, isValidEnsName } from '../../utils/address';
+import { Select, Switch, TextFieldInput } from '..';
+import { Icon } from '../..';
 
 export default {
   title: 'Inputs/AddressInput',
@@ -14,172 +23,239 @@ export default {
   parameters: {
     componentSubtitle: 'Address field input with several variants',
   },
+  argTypes: {
+    showNetworkPrefix: {
+      control: { type: 'boolean' },
+      defaultValue: true,
+    },
+
+    hiddenLabel: {
+      control: { type: 'boolean' },
+      defaultValue: true,
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      defaultValue: false,
+    },
+    isLoading: {
+      control: { type: 'boolean' },
+      defaultValue: false,
+    },
+    showErrors: {
+      control: { type: 'boolean' },
+      defaultValue: true,
+    },
+  },
 };
 
 const onSubmit = (e: React.FormEvent) => e.preventDefault();
 
-export const SimpleAddressInput = (): React.ReactElement => {
-  const [address, setAddress] = useState<string>(
-    '0x83eC7B0506556a7749306D69681aDbDbd08f0769'
-  );
-  const [showNetworkPrefix, setShowNetworkPrefix] = useState<boolean>(true);
-
+const networks = [
+  { id: 'eth', label: 'Mainnet (eth:)' },
+  { id: 'rin', label: 'Rinkeby (rin:)' },
+  { id: 'vt', label: 'Volta (vt:)' },
+];
+
+export const SimpleAddressInput = ({
+  hiddenLabel,
+  isDisabled,
+  isLoading,
+  showNetworkPrefix,
+  showErrors,
+}: {
+  hiddenLabel: boolean;
+  isDisabled: boolean;
+  isLoading: boolean;
+  showNetworkPrefix: boolean;
+  showErrors: boolean;
+}): React.ReactElement => {
+  const [address, setAddress] = useState<string>('');
+  const onChangeAddress = useCallback((address) => setAddress(address), []);
+
+  const [currentNetworkPrefix, setCurrentNetworkPrefix] = useState('rin');
+
+  const [openQRModal, setOpenQRModal] = useState(false);
+
+  const inValidAddressError = !isValidAddress(address) ? 'Invalid Address' : '';
+  const inValidNetworkError = address.includes(':')
+    ? 'The chain prefix must match the current network'
+    : '';
+
+  const error =
+    address && showErrors ? inValidNetworkError || inValidAddressError : '';
+
+  // fake ENS Resolution
   const getAddressFromDomain = () =>
     new Promise<string>((resolve) => {
       setTimeout(
         () => resolve('0x83eC7B0506556a7749306D69681aDbDbd08f0769'),
-        1200
+        2000
       );
     });
 
   return (
-    <form noValidate autoComplete="off" onSubmit={onSubmit}>
-      <Typography style={{ marginBottom: '16px' }}>
-        <Switch checked={showNetworkPrefix} onChange={setShowNetworkPrefix} />
-        Show Network Prefix (rin)
-      </Typography>
-      <AddressInput
-        id={'address-input'}
-        label="Ethereum Address"
-        name="address"
-        placeholder={'Ethereum address'}
-        showNetworkPrefix={showNetworkPrefix}
-        networkPrefix={'rin'}
-        address={address}
-        onChangeAddress={(address) => setAddress(address)}
-        getAddressFromDomain={getAddressFromDomain}
-      />
-      <Typography style={{ marginTop: '24px' }}>
-        Address value in the State:{' '}
-      </Typography>
-      <pre
-        style={{
-          display: 'inline-block',
-          backgroundColor: 'lightgrey',
-          marginLeft: '8px',
-          margin: '0',
-          padding: '8px',
-          minWidth: '500px',
-          borderRadius: '4px',
-        }}>
-        {address || ' '}
-      </pre>
-      <Typography style={{ marginTop: '16px' }}>
-        You can use ENS names (like safe.test) with the getAddressFromDomain
-        prop
-      </Typography>
-    </form>
-  );
-};
-
-export const AddressInputWithNetworkPrefix = (): React.ReactElement => {
-  const [address, setAddress] = useState<string>(
-    '0x83eC7B0506556a7749306D69681aDbDbd08f0769'
-  );
-
-  return (
-    <form noValidate autoComplete="off" onSubmit={onSubmit}>
-      <AddressInput
-        label="Prefixed Address"
-        name="prefixed-address"
-        networkPrefix="rin"
-        placeholder={'Ethereum address'}
-        showNetworkPrefix={true}
-        address={address}
-        onChangeAddress={(address) => setAddress(address)}
+    <div>
+      <StyledText>Network Settings:</StyledText>
+      <Select
+        items={networks}
+        activeItemId={currentNetworkPrefix}
+        onItemClick={(networkPrefix) => {
+          setCurrentNetworkPrefix(networkPrefix);
+        }}
       />
-      <pre>Address in the state: {address}</pre>
-    </form>
+      <form
+        noValidate
+        autoComplete="off"
+        onSubmit={onSubmit}
+        style={{ display: 'flex', margin: '12px 0px' }}>
+        <AddressInput
+          label="Address"
+          name="address"
+          placeholder={'Ethereum address'}
+          address={address}
+          onChangeAddress={onChangeAddress}
+          getAddressFromDomain={getAddressFromDomain}
+          hiddenLabel={hiddenLabel}
+          error={error}
+          showLoadingSpinner={isLoading}
+          disabled={isDisabled}
+          networkPrefix={currentNetworkPrefix}
+          showNetworkPrefix={showNetworkPrefix}
+        />
+        <IconButton
+          onClick={() => setOpenQRModal((openModal) => !openModal)}
+          aria-label="load QR code">
+          <Icon size="md" type="qrCode" />
+        </IconButton>
+      </form>
+      {/* Address In the State */}
+      <StyledText>Address In the State:</StyledText>
+      <CodeFormat>{address || ' '}</CodeFormat>
+      {/* Load QR Code Dialog */}
+      <Dialog
+        onClose={() => setOpenQRModal(false)}
+        aria-labelledby="Load Address from QR Code Dialog"
+        open={openQRModal}>
+        <DialogTitle>Load Address from QR Code</DialogTitle>
+        <DialogContent style={{ minWidth: '500px' }}>
+          <QrReader
+            delay={300}
+            onError={() => {
+              console.log('error:');
+            }}
+            onScan={(value) => {
+              if (value) {
+                setAddress(value);
+                setOpenQRModal(false);
+              }
+            }}
+            onImageLoad={(address) => setAddress(address)}
+          />
+        </DialogContent>
+      </Dialog>
+    </div>
   );
 };
 
-export const AddressInputWithValidation = (): React.ReactElement => {
-  const [address, setAddress] = useState<string>(
-    '0x83eC7B0506556a7749306D69681aDbDbd08f0769'
-  );
-  const [hasError, setHasError] = useState<boolean>(
-    () => !isValidAddress(address)
+export const AddressInputWithENSResolution = (): React.ReactElement => {
+  const [address, setAddress] = useState<string>('');
+  const [showError, setShowError] = useState<boolean>(false);
+  const [error, setError] = useState<string>('');
+  const onChangeAddress = useCallback((address) => setAddress(address), []);
+
+  const [customENSThrottleDelay, setCustomENSThrottleDelay] = useState<
+    number | undefined
+  >(2000);
+
+  // Fake ENS Resolution
+  const getAddressFromDomain = useCallback(
+    () =>
+      new Promise<string>((resolve, reject) => {
+        setTimeout(() => {
+          if (showError) {
+            setError('Error in the ENS Resolution Network Call');
+            reject();
+          } else {
+            setError('');
+            resolve('0x83eC7B0506556a7749306D69681aDbDbd08f0769');
+          }
+        }, 2500);
+      }),
+    [showError]
   );
 
+  // we clean the error when address changes...
   useEffect(() => {
-    setHasError(!isValidAddress(address));
+    setError('');
   }, [address]);
 
-  const error = 'Invalid Address';
-
-  return (
-    <form noValidate autoComplete="off" onSubmit={onSubmit}>
-      <AddressInput
-        label="Address"
-        name="address"
-        placeholder={'Ethereum address'}
-        networkPrefix="rin"
-        showNetworkPrefix={false}
-        error={hasError ? error : ''}
-        address={address}
-        onChangeAddress={(address) => setAddress(address)}
-      />
-    </form>
-  );
-};
-
-export const AddressInputWithoutPrefix = (): React.ReactElement => {
-  const [address, setAddress] = useState<string>(
-    '0x83eC7B0506556a7749306D69681aDbDbd08f0769'
-  );
-
-  return (
-    <form noValidate autoComplete="off" onSubmit={onSubmit}>
-      <AddressInput
-        label="Address"
-        name="address"
-        placeholder={'Ethereum address'}
-        networkPrefix="rin"
-        showNetworkPrefix={false}
-        address={address}
-        onChangeAddress={(address) => setAddress(address)}
-      />
-    </form>
-  );
-};
-
-export const AddressInputWithENSResolution = (): React.ReactElement => {
-  const [address, setAddress] = useState<string>(
-    '0x83eC7B0506556a7749306D69681aDbDbd08f0769'
-  );
-
-  const getAddressFromDomain = () =>
-    new Promise<string>((resolve) => {
-      setTimeout(
-        () => resolve('0x83eC7B0506556a7749306D69681aDbDbd08f0769'),
-        2000
-      );
-    });
-
   return (
     <form noValidate autoComplete="off" onSubmit={onSubmit}>
-      <AddressInput
-        label="Address"
-        name="address"
-        placeholder={'Ethereum address'}
-        networkPrefix="rin"
-        showNetworkPrefix={true}
-        address={address}
-        onChangeAddress={(address) => setAddress(address)}
-        getAddressFromDomain={getAddressFromDomain}
-      />
+      <StyledText>
+        <Switch checked={showError} onChange={setShowError} />
+        Simulate an error in the resolver ENS Network call
+      </StyledText>
+      <div
+        style={{
+          marginTop: '8px',
+          minHeight: '80px',
+          display: 'flex',
+          alignItems: 'center',
+        }}>
+        <AddressInput
+          label="Address with ENS"
+          hiddenLabel={false}
+          name="address"
+          placeholder={'Type safe.test to check ENS resolution'}
+          networkPrefix="rin"
+          showNetworkPrefix={true}
+          error={address && error}
+          address={address}
+          helperText={'Type safe.test to check ENS resolution!'}
+          disabled={!customENSThrottleDelay}
+          onChangeAddress={onChangeAddress}
+          getAddressFromDomain={getAddressFromDomain}
+          customENSThrottleDelay={customENSThrottleDelay}
+        />
+        {address && (
+          <LoaderIndicator
+            completeValue={customENSThrottleDelay}
+            address={address}
+            showError={showError}
+          />
+        )}
+      </div>
+      <div style={{ marginTop: '8px', minHeight: '80px' }}>
+        {/* custom Delay for ENS resolution*/}
+        <TextFieldInput
+          name={'customENSThrottleDelay'}
+          label={'custom Delay (in milliseconds)'}
+          placeholder={'Customize your throttle delay for ENS resolution!'}
+          helperText={
+            !!customENSThrottleDelay &&
+            'Customize your throttle delay for ENS resolution!'
+          }
+          value={customENSThrottleDelay}
+          type="number"
+          onChange={(e) =>
+            setCustomENSThrottleDelay(e.target.value && Number(e.target.value))
+          }
+        />
+      </div>
+      {/* Address In the State */}
+      <StyledText>Address In the State:</StyledText>
+      <CodeFormat>{address || ' '}</CodeFormat>
     </form>
   );
 };
 
 export const SafeAddressInputValidation = (): React.ReactElement => {
-  const [address, setAddress] = useState<string>(
-    '0x83eC7B0506556a7749306D69681aDbDbd08f0769'
-  );
+  const [address, setAddress] = useState<string>('');
+  const onChangeAddress = useCallback((address) => setAddress(address), []);
   const [isValidSafeAddress, setIsValidSafeAddress] = useState<boolean>(false);
   const [showLoadingSpinner, setShowLoadingSpinner] = useState<boolean>(false);
 
-  // check if address is the SafeAddress
+  // Fake SafeAddress checker
   useEffect(() => {
     setShowLoadingSpinner(true);
     setIsValidSafeAddress(false);
@@ -189,7 +265,7 @@ export const SafeAddressInputValidation = (): React.ReactElement => {
         address === '0x83eC7B0506556a7749306D69681aDbDbd08f0769';
       setIsValidSafeAddress(isValidSafeAddress);
       setShowLoadingSpinner(false);
-    }, 1200);
+    }, 1500);
 
     return () => {
       clearTimeout(timeId);
@@ -198,19 +274,29 @@ export const SafeAddressInputValidation = (): React.ReactElement => {
 
   const error = 'Address given is not a valid Safe address';
 
-  const showError = !isValidSafeAddress && !showLoadingSpinner;
+  const showError = address && !isValidSafeAddress && !showLoadingSpinner;
 
   return (
     <form noValidate autoComplete="off" onSubmit={onSubmit}>
+      <StyledText>You can customize validations</StyledText>
+      <StyledText>valid values:</StyledText>
+      <CodeFormat>
+        0x83eC7B0506556a7749306D69681aDbDbd08f0769 &amp;
+        rin:0x83eC7B0506556a7749306D69681aDbDbd08f0769
+      </CodeFormat>
+      <StyledText></StyledText>
       <AddressInput
         label="Safe Address"
         name="safeAddress"
         networkPrefix="rin"
-        placeholder={'Ethereum address'}
+        placeholder={'Type the valid safe address'}
+        hiddenLabel={false}
+        showErrorsInTheLabel={false}
+        helperText="Valid safe: 0x83eC7B0506556a7749306D69681aDbDbd08f0769"
         showNetworkPrefix={false}
         error={showError ? error : ''}
         address={address}
-        onChangeAddress={(address) => setAddress(address)}
+        onChangeAddress={onChangeAddress}
         showLoadingSpinner={showLoadingSpinner}
         InputProps={{
           endAdornment: isValidSafeAddress && (
@@ -220,6 +306,61 @@ export const SafeAddressInputValidation = (): React.ReactElement => {
           ),
         }}
       />
+      {/* Address In the State */}
+      <StyledText>Address In the State:</StyledText>
+      <CodeFormat>{address || ' '}</CodeFormat>
+    </form>
+  );
+};
+
+export const AddressInputWithSimpleAddressValidation =
+  (): React.ReactElement => {
+    const [address, setAddress] = useState<string>('');
+    const onChangeAddress = useCallback((address) => setAddress(address), []);
+    const [hasError, setHasError] = useState<boolean>();
+
+    useEffect(() => {
+      setHasError(address && !isValidAddress(address));
+    }, [address]);
+
+    const error = 'Invalid Address';
+
+    return (
+      <form noValidate autoComplete="off" onSubmit={onSubmit}>
+        <AddressInput
+          label="Address"
+          name="address"
+          placeholder={'Ethereum address'}
+          networkPrefix="rin"
+          error={hasError ? error : ''}
+          address={address}
+          onChangeAddress={onChangeAddress}
+        />
+        {/* Address In the State */}
+        <StyledText>Address In the State:</StyledText>
+        <CodeFormat>{address || ' '}</CodeFormat>
+      </form>
+    );
+  };
+
+export const AddressInputWithoutPrefix = (): React.ReactElement => {
+  const [address, setAddress] = useState<string>(
+    '0x83eC7B0506556a7749306D69681aDbDbd08f0769'
+  );
+  const onChangeAddress = useCallback((address) => setAddress(address), []);
+
+  return (
+    <form noValidate autoComplete="off" onSubmit={onSubmit}>
+      <AddressInput
+        label="Address"
+        name="address"
+        placeholder={'Ethereum address'}
+        address={address}
+        onChangeAddress={onChangeAddress}
+      />
+      {/* Address In the State */}
+      <StyledText>Address In the State:</StyledText>
+      <CodeFormat>{address || ' '}</CodeFormat>
     </form>
   );
 };
@@ -228,6 +369,7 @@ export const AddressInputLoading = (): React.ReactElement => {
   const [address, setAddress] = useState<string>(
     '0x83eC7B0506556a7749306D69681aDbDbd08f0769'
   );
+  const onChangeAddress = useCallback((address) => setAddress(address), []);
 
   return (
     <form noValidate autoComplete="off" onSubmit={onSubmit}>
@@ -239,7 +381,7 @@ export const AddressInputLoading = (): React.ReactElement => {
         placeholder={'Ethereum address'}
         showLoadingSpinner
         address={address}
-        onChangeAddress={(address) => setAddress(address)}
+        onChangeAddress={onChangeAddress}
       />
     </form>
   );
@@ -249,6 +391,7 @@ export const AddressInputWithAdornment = (): React.ReactElement => {
   const [address, setAddress] = useState<string>(
     '0x83eC7B0506556a7749306D69681aDbDbd08f0769'
   );
+  const onChangeAddress = useCallback((address) => setAddress(address), []);
 
   return (
     <form noValidate autoComplete="off" onSubmit={onSubmit}>
@@ -267,7 +410,7 @@ export const AddressInputWithAdornment = (): React.ReactElement => {
           ),
         }}
         address={address}
-        onChangeAddress={(address) => setAddress(address)}
+        onChangeAddress={onChangeAddress}
       />
     </form>
   );
@@ -277,6 +420,7 @@ export const AddressInputDisabled = (): React.ReactElement => {
   const [address, setAddress] = useState<string>(
     '0x83eC7B0506556a7749306D69681aDbDbd08f0769'
   );
+  const onChangeAddress = useCallback((address) => setAddress(address), []);
 
   return (
     <form noValidate autoComplete="off" onSubmit={onSubmit}>
@@ -289,7 +433,7 @@ export const AddressInputDisabled = (): React.ReactElement => {
         disabled
         placeholder={'Ethereum address'}
         address={address}
-        onChangeAddress={(address) => setAddress(address)}
+        onChangeAddress={onChangeAddress}
       />
     </form>
   );
@@ -299,6 +443,7 @@ export const AddressInputWithErrors = (): React.ReactElement => {
   const [address, setAddress] = useState<string>(
     '0x83eC7B0506556a7749306D69681aDbDbd08f0769'
   );
+  const onChangeAddress = useCallback((address) => setAddress(address), []);
 
   return (
     <form noValidate autoComplete="off" onSubmit={onSubmit}>
@@ -310,7 +455,7 @@ export const AddressInputWithErrors = (): React.ReactElement => {
         placeholder={'Ethereum address'}
         showLoadingSpinner={false}
         address={address}
-        onChangeAddress={(address) => setAddress(address)}
+        onChangeAddress={onChangeAddress}
         error={'Invalid Address'}
       />
     </form>
@@ -321,3 +466,64 @@ const CheckIconAddressAdornment = styled(CheckCircle)`
   color: #03ae60;
   height: 20px;
 `;
+
+const CodeFormat = styled.pre`
+  display: inline-block;
+  background-color: lightgrey;
+  margin: 0;
+  margin-top: 8px;
+  padding: 8px;
+  min-width: 500px;
+  border-radius: 4px;
+`;
+
+const StyledText = styled(Typography)`
+  && {
+    margin-top: 8px;
+  }
+`;
+
+const StyledCircularProgress = styled(CircularProgress)`
+  && {
+    margin-left: 16px;
+    margin-bottom: 18px;
+  }
+`;
+
+// Visual indicator for custom Throttle value in ENS resolver
+function LoaderIndicator({ completeValue, address, showError }) {
+  const [progress, setProgress] = React.useState(0);
+
+  React.useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((prevProgress) =>
+        prevProgress >= 100
+          ? prevProgress
+          : prevProgress + 100 / (completeValue / 200)
+      );
+    }, 200);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, [completeValue, address]);
+
+  useEffect(() => {
+    const hasToRestProgress =
+      address !== '0x83eC7B0506556a7749306D69681aDbDbd08f0769';
+    if (hasToRestProgress) {
+      setProgress(0);
+    }
+  }, [address, showError]);
+
+  const isComplete = progress >= 100;
+
+  const alreadyResolved =
+    address === '0x83eC7B0506556a7749306D69681aDbDbd08f0769';
+
+  if (alreadyResolved || !isValidEnsName(address) || isComplete) {
+    return null;
+  }
+
+  return <StyledCircularProgress variant="determinate" value={progress} />;
+}
diff --git a/src/inputs/AddressInput/index.tsx b/src/inputs/AddressInput/index.tsx
index 199bc9c7..5e4f7643 100644
--- a/src/inputs/AddressInput/index.tsx
+++ b/src/inputs/AddressInput/index.tsx
@@ -1,4 +1,11 @@
-import React, { ReactElement, useState, ChangeEvent, useEffect } from 'react';
+import React, {
+  ReactElement,
+  useState,
+  ChangeEvent,
+  useEffect,
+  useCallback,
+  useRef,
+} from 'react';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import CircularProgress from '@material-ui/core/CircularProgress';
 
@@ -24,6 +31,7 @@ type AddressInputProps = {
   disabled?: boolean;
   onChangeAddress: (address: string) => void;
   getAddressFromDomain?: (name: string) => Promise<string>;
+  customENSThrottleDelay?: number;
   showLoadingSpinner?: boolean;
 } & TextFieldInputProps;
 
@@ -31,88 +39,127 @@ function AddressInput({
   name,
   address,
   networkPrefix,
-  showNetworkPrefix,
+  showNetworkPrefix = true,
   disabled,
   onChangeAddress,
   getAddressFromDomain,
+  customENSThrottleDelay,
   showLoadingSpinner,
   InputProps,
+  inputProps,
+  hiddenLabel = true,
   ...rest
 }: AddressInputProps): ReactElement {
-  const [prefix, setPrefix] = useState(networkPrefix);
   const [isLoadingENSResolution, setIsLoadingENSResolution] = useState(false);
-
+  const defaulInputValue = addPrefix(address, networkPrefix, showNetworkPrefix);
+  const inputRef = useRef({ value: defaulInputValue });
   const throttle = useThrottle();
 
-  // ENS resolution
-  useEffect(() => {
-    const resolveDomainName = async (ENSName: string) => {
+  // we checksum & include the network prefix in the input if showNetworkPrefix is set to true
+  const updateInputValue = useCallback(
+    (value = '') => {
+      if (inputRef.current) {
+        const checksumAddress = checksumValidAddress(value);
+        inputRef.current.value = addPrefix(
+          checksumAddress,
+          networkPrefix,
+          showNetworkPrefix
+        );
+      }
+    },
+    [networkPrefix, showNetworkPrefix]
+  );
+
+  const resolveDomainName = useCallback(async () => {
+    const isEnsName = isValidEnsName(address);
+
+    if (isEnsName && getAddressFromDomain) {
       try {
         setIsLoadingENSResolution(true);
-        const address = (await getAddressFromDomain?.(ENSName)) as string;
-        onChangeAddress(checksumValidAddress(address));
-        setPrefix(showNetworkPrefix ? networkPrefix : '');
+        const resolvedAddress = await getAddressFromDomain(address);
+        onChangeAddress(checksumValidAddress(resolvedAddress));
+        // we update the input value
+        updateInputValue(resolvedAddress);
       } catch (e) {
-        onChangeAddress(checksumValidAddress(ENSName));
-        setPrefix('');
+        onChangeAddress(address);
       } finally {
         setIsLoadingENSResolution(false);
       }
-    };
-
-    const isEnsName = isValidEnsName(address);
+    }
+  }, [address, getAddressFromDomain, onChangeAddress, updateInputValue]);
 
-    if (isEnsName && getAddressFromDomain) {
-      throttle(() => resolveDomainName(address));
+  // ENS name resolution
+  useEffect(() => {
+    if (getAddressFromDomain) {
+      throttle(resolveDomainName, customENSThrottleDelay);
     }
   }, [
-    address,
     getAddressFromDomain,
-    networkPrefix,
-    showNetworkPrefix,
-    onChangeAddress,
+    resolveDomainName,
+    customENSThrottleDelay,
     throttle,
   ]);
 
-  // Network prefix
+  // if address changes from outside (Like Loaded from a QR code) we update the input value
   useEffect(() => {
-    setPrefix(networkPrefix);
-  }, [networkPrefix]);
-
-  useEffect(() => {
-    if (showNetworkPrefix) {
-      setPrefix(networkPrefix);
-    } else {
-      setPrefix('');
+    const inputValue = inputRef.current?.value;
+    const inputWithoutPrefix = getAddressWithoutNetworkPrefix(inputValue);
+    const addressWithoutPrefix = getAddressWithoutNetworkPrefix(address);
+    const inputPrefix = getNetworkPrefix(inputValue);
+    const addressPrefix = getNetworkPrefix(address);
+
+    const isNewAddressLoaded = inputWithoutPrefix !== addressWithoutPrefix;
+    const isNewPrefixLoaded = addressPrefix && inputPrefix !== addressPrefix;
+
+    // we check if we load a new address (both prefixed and unprefixed cases)
+    if (isNewAddressLoaded || isNewPrefixLoaded) {
+      // we update the input value
+      updateInputValue(address);
     }
-  }, [showNetworkPrefix, networkPrefix]);
+  }, [address, updateInputValue]);
 
-  const onChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const value = trimSpaces(e.target.value);
+  // we trim, checksum & remove valid network prefix when a valid address is typed by the user
+  const updateAddressState = useCallback(
+    (value) => {
+      const inputValue = trimSpaces(value);
 
-    const prefix = getNetworkPrefix(value);
-    const address = getAddressWithoutNetworkPrefix(value);
+      const inputPrefix = getNetworkPrefix(inputValue);
+      const inputWithoutPrefix = getAddressWithoutNetworkPrefix(inputValue);
 
-    const isValidPrefix =
-      value.includes(':') && !value.startsWith(':') && prefix === networkPrefix;
+      const isValidPrefix = networkPrefix === inputPrefix;
 
-    if (isValidPrefix) {
-      setPrefix(prefix);
-      onChangeAddress(checksumValidAddress(address));
-    } else {
-      setPrefix('');
-      onChangeAddress(checksumValidAddress(value));
-    }
-  };
+      if (isValidPrefix) {
+        // if the valid network prefix is present, we remove it from the address state
+        onChangeAddress(checksumValidAddress(inputWithoutPrefix));
+      } else {
+        onChangeAddress(checksumValidAddress(inputValue));
+      }
+    },
+    [networkPrefix, onChangeAddress]
+  );
 
-  const value = addNetworkPrefix(address, prefix);
+  // when user switch the network we update the address state
+  useEffect(() => {
+    updateAddressState(inputRef.current?.value);
+  }, [networkPrefix, address, updateAddressState]);
+
+  // when user types we update the address state
+  function onChange(e: ChangeEvent<HTMLInputElement>) {
+    updateAddressState(e.target.value);
+  }
 
   const isLoading = isLoadingENSResolution || showLoadingSpinner;
 
+  const [shrink, setshrink] = useState(!!defaulInputValue);
+
+  useEffect(() => {
+    setshrink(!!inputRef.current?.value);
+  }, [inputRef.current.value]);
+
   return (
     <TextFieldInput
       name={name}
-      value={value}
+      hiddenLabel={hiddenLabel && !shrink}
       disabled={disabled || isLoadingENSResolution}
       onChange={onChange}
       InputProps={{
@@ -124,6 +171,14 @@ function AddressInput({
           InputProps?.endAdornment
         ),
       }}
+      inputProps={{
+        ...inputProps,
+        ref: inputRef,
+      }}
+      InputLabelProps={{
+        ...rest.InputLabelProps,
+        shrink: shrink || hiddenLabel || undefined,
+      }}
       spellCheck={false}
       {...rest}
     />
@@ -148,3 +203,25 @@ function checksumValidAddress(address: string) {
 
   return address;
 }
+
+// we try to add the network prefix if its not present
+function addPrefix(
+  address: string,
+  networkPrefix: string | undefined,
+  showNetworkPrefix = false
+): string {
+  if (!address) {
+    return '';
+  }
+
+  if (showNetworkPrefix && networkPrefix) {
+    const hasPrefix = !!getNetworkPrefix(address);
+
+    // if the address has not prefix we add it by default
+    if (!hasPrefix) {
+      return addNetworkPrefix(address, networkPrefix);
+    }
+  }
+
+  return address;
+}
diff --git a/tests/dataDisplay/FixedIcon/__snapshots__/fixedIcon.stories.storyshot b/tests/dataDisplay/FixedIcon/__snapshots__/fixedIcon.stories.storyshot
index 03d50152..82cd2ff6 100644
--- a/tests/dataDisplay/FixedIcon/__snapshots__/fixedIcon.stories.storyshot
+++ b/tests/dataDisplay/FixedIcon/__snapshots__/fixedIcon.stories.storyshot
@@ -484,7 +484,7 @@ exports[`Storyshots Data Display/FixedIcon Icons White 1`] = `
   className="sc-bTfYFJ cbnUif"
 >
   <div
-    className="sc-kHOZwM sc-fbyfCU fIlulR eJOmZf"
+    className="sc-kHOZwM sc-bXTejn fIlulR dyGLSJ"
   >
     <span>
       <svg
@@ -503,7 +503,7 @@ exports[`Storyshots Data Display/FixedIcon Icons White 1`] = `
     arrowSentWhite
   </div>
   <div
-    className="sc-kHOZwM sc-fbyfCU fIlulR eJOmZf"
+    className="sc-kHOZwM sc-bXTejn fIlulR dyGLSJ"
   >
     <span>
       <svg
diff --git a/tests/dataDisplay/Icon/__snapshots__/icon.stories.storyshot b/tests/dataDisplay/Icon/__snapshots__/icon.stories.storyshot
index 1ae3acc2..2e1c6501 100644
--- a/tests/dataDisplay/Icon/__snapshots__/icon.stories.storyshot
+++ b/tests/dataDisplay/Icon/__snapshots__/icon.stories.storyshot
@@ -155,10 +155,10 @@ Array [
 
 exports[`Storyshots Data Display/Icon Icons 1`] = `
 <div
-  className="sc-GEbAx fefPwX"
+  className="sc-eGRUor kDVfsa"
 >
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -191,7 +191,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     add
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -220,7 +220,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     addressBook
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -248,7 +248,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     addressBookAdd
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -280,7 +280,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     alert
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -308,7 +308,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     allowances
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -345,7 +345,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     apps
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -374,7 +374,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     arrowUp
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -403,7 +403,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     arrowRight
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -431,7 +431,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     arrowDown
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -460,7 +460,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     arrowLeft
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -493,7 +493,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     assets
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -525,7 +525,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     awaitingConfirmations
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -559,7 +559,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     camera
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -593,7 +593,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     chain
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -621,7 +621,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     check
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -655,7 +655,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     circleCheck
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -688,7 +688,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     circleCross
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -721,7 +721,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     circleDropdown
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -749,7 +749,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     code
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -788,7 +788,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     collectibles
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -817,7 +817,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     copy
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -845,7 +845,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     cross
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -877,7 +877,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     currency
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -909,7 +909,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     delete
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -943,7 +943,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     devicePassword
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -971,7 +971,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     edit
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1013,7 +1013,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     error
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1041,7 +1041,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     eth
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1069,7 +1069,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     exportImg
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1102,7 +1102,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     externalLink
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1134,7 +1134,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     eye
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1166,7 +1166,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     eyeOff
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1194,7 +1194,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     filledCross
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1234,7 +1234,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     fingerPrint
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1269,7 +1269,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     fuelIndicator
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1297,7 +1297,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     getInTouch
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1326,7 +1326,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     home
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1354,7 +1354,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     importImg
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1396,7 +1396,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     info
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1424,7 +1424,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     knowledge
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1456,7 +1456,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     licenses
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1484,7 +1484,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     loadSafe
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1516,7 +1516,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     locked
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1548,7 +1548,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     mobileConfirm
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1580,7 +1580,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     noInternet
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1608,7 +1608,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     owners
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1637,7 +1637,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     paste
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1666,7 +1666,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     paymentToken
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1695,7 +1695,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     privacyPolicy
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1769,7 +1769,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     qrCode
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1803,7 +1803,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     question
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1831,7 +1831,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     rateApp
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1864,7 +1864,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     received
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1898,7 +1898,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     recover
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1926,7 +1926,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     replaceOwner
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1954,7 +1954,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     requiredConfirmations
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -1982,7 +1982,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     restricted
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -2010,7 +2010,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     resync
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -2039,7 +2039,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     rocket
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -2076,7 +2076,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     scan
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -2113,7 +2113,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     safe
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -2141,7 +2141,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     search
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -2175,7 +2175,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     sendAgain
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -2208,7 +2208,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     sent
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -2240,7 +2240,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     serverError
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -2268,7 +2268,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     settings
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -2301,7 +2301,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     settingsChange
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -2330,7 +2330,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     settingsTool
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -2359,7 +2359,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     share
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -2387,7 +2387,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     termsOfUse
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -2415,7 +2415,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     transactionsInactive
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -2447,7 +2447,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     unlocked
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
@@ -2475,7 +2475,7 @@ exports[`Storyshots Data Display/Icon Icons 1`] = `
     userEdit
   </div>
   <div
-    className="sc-gsNilK bdaiPb"
+    className="sc-ctqQKy ZdsfG"
   >
     <span
       className="sc-iqseJM iJclAE"
diff --git a/tests/inputs/AddressInput/__snapshots__/AddressInput.stories.storyshot b/tests/inputs/AddressInput/__snapshots__/AddressInput.stories.storyshot
index 5945b18d..4383181b 100644
--- a/tests/inputs/AddressInput/__snapshots__/AddressInput.stories.storyshot
+++ b/tests/inputs/AddressInput/__snapshots__/AddressInput.stories.storyshot
@@ -11,7 +11,7 @@ exports[`Storyshots Inputs/AddressInput Address Input Disabled 1`] = `
     spellCheck={false}
   >
     <label
-      className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-filled Mui-disabled Mui-disabled MuiFormLabel-filled"
+      className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-filled Mui-disabled Mui-disabled"
       data-shrink={true}
       htmlFor="address"
       id="address-label"
@@ -36,7 +36,6 @@ exports[`Storyshots Inputs/AddressInput Address Input Disabled 1`] = `
         placeholder="Ethereum address"
         required={false}
         type="text"
-        value="rin:0x83eC7B0506556a7749306D69681aDbDbd08f0769"
       />
     </div>
   </div>
@@ -54,7 +53,7 @@ exports[`Storyshots Inputs/AddressInput Address Input Loading 1`] = `
     spellCheck={false}
   >
     <label
-      className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-filled MuiFormLabel-filled"
+      className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-filled"
       data-shrink={true}
       htmlFor="address"
       id="address-label"
@@ -79,7 +78,6 @@ exports[`Storyshots Inputs/AddressInput Address Input Loading 1`] = `
         placeholder="Ethereum address"
         required={false}
         type="text"
-        value="rin:0x83eC7B0506556a7749306D69681aDbDbd08f0769"
       />
       <div
         className="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-filled"
@@ -126,7 +124,7 @@ exports[`Storyshots Inputs/AddressInput Address Input With Adornment 1`] = `
     spellCheck={false}
   >
     <label
-      className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-filled MuiFormLabel-filled"
+      className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-filled"
       data-shrink={true}
       htmlFor="address"
       id="address-label"
@@ -151,7 +149,6 @@ exports[`Storyshots Inputs/AddressInput Address Input With Adornment 1`] = `
         placeholder="Ethereum address"
         required={false}
         type="text"
-        value="rin:0x83eC7B0506556a7749306D69681aDbDbd08f0769"
       />
       <div
         className="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-filled"
@@ -178,40 +175,159 @@ exports[`Storyshots Inputs/AddressInput Address Input With ENS Resolution 1`] =
   noValidate={true}
   onSubmit={[Function]}
 >
-  <div
-    className="MuiFormControl-root MuiTextField-root sc-jJoQJp bqJZEI"
-    spellCheck={false}
+  <p
+    className="MuiTypography-root sc-jQrDum jLriAF MuiTypography-body1"
   >
-    <label
-      className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-filled MuiFormLabel-filled"
-      data-shrink={true}
-      htmlFor="address"
-      id="address-label"
-    >
-      Address
-    </label>
-    <div
-      className="MuiInputBase-root MuiFilledInput-root MuiFilledInput-underline MuiInputBase-formControl"
-      onClick={[Function]}
+    <span
+      className="MuiSwitch-root sc-kLwhqv eEUkNP"
     >
-      <input
-        aria-invalid={false}
-        autoFocus={false}
-        className="MuiInputBase-input MuiFilledInput-input"
-        disabled={false}
-        id="address"
-        name="address"
-        onAnimationStart={[Function]}
+      <span
+        aria-disabled={false}
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-57 MuiSwitch-switchBase MuiSwitch-colorSecondary"
         onBlur={[Function]}
-        onChange={[Function]}
+        onDragLeave={[Function]}
         onFocus={[Function]}
-        placeholder="Ethereum address"
-        required={false}
-        type="text"
-        value="rin:0x83eC7B0506556a7749306D69681aDbDbd08f0769"
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
+        tabIndex={null}
+      >
+        <span
+          className="MuiIconButton-label"
+        >
+          <input
+            checked={false}
+            className="PrivateSwitchBase-input-60 MuiSwitch-input"
+            onChange={[Function]}
+            type="checkbox"
+          />
+          <span
+            className="MuiSwitch-thumb"
+          />
+        </span>
+      </span>
+      <span
+        className="MuiSwitch-track"
       />
+    </span>
+    Simulate an error in the resolver ENS Network call
+  </p>
+  <div
+    style={
+      Object {
+        "alignItems": "center",
+        "display": "flex",
+        "marginTop": "8px",
+        "minHeight": "80px",
+      }
+    }
+  >
+    <div
+      className="MuiFormControl-root MuiTextField-root sc-jJoQJp bqJZEI"
+      spellCheck={false}
+    >
+      <label
+        className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-filled"
+        data-shrink={false}
+        htmlFor="address"
+        id="address-label"
+      >
+        Address with ENS
+      </label>
+      <div
+        className="MuiInputBase-root MuiFilledInput-root MuiFilledInput-underline MuiInputBase-formControl"
+        onClick={[Function]}
+      >
+        <input
+          aria-describedby="address-helper-text"
+          aria-invalid={false}
+          autoFocus={false}
+          className="MuiInputBase-input MuiFilledInput-input"
+          disabled={false}
+          id="address"
+          name="address"
+          onAnimationStart={[Function]}
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="Type safe.test to check ENS resolution"
+          required={false}
+          type="text"
+        />
+      </div>
+      <p
+        className="MuiFormHelperText-root MuiFormHelperText-contained"
+        id="address-helper-text"
+      >
+        Type safe.test to check ENS resolution!
+      </p>
     </div>
+    
   </div>
+  <div
+    style={
+      Object {
+        "marginTop": "8px",
+        "minHeight": "80px",
+      }
+    }
+  >
+    <div
+      className="MuiFormControl-root MuiTextField-root sc-jJoQJp bqJZEI"
+    >
+      <label
+        className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-filled MuiFormLabel-filled"
+        data-shrink={true}
+        htmlFor="customENSThrottleDelay"
+        id="customENSThrottleDelay-label"
+      >
+        custom Delay (in milliseconds)
+      </label>
+      <div
+        className="MuiInputBase-root MuiFilledInput-root MuiFilledInput-underline MuiInputBase-formControl"
+        onClick={[Function]}
+      >
+        <input
+          aria-describedby="customENSThrottleDelay-helper-text"
+          aria-invalid={false}
+          autoFocus={false}
+          className="MuiInputBase-input MuiFilledInput-input"
+          disabled={false}
+          id="customENSThrottleDelay"
+          name="customENSThrottleDelay"
+          onAnimationStart={[Function]}
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="Customize your throttle delay for ENS resolution!"
+          required={false}
+          type="number"
+          value={2000}
+        />
+      </div>
+      <p
+        className="MuiFormHelperText-root MuiFormHelperText-contained MuiFormHelperText-filled"
+        id="customENSThrottleDelay-helper-text"
+      >
+        Customize your throttle delay for ENS resolution!
+      </p>
+    </div>
+  </div>
+  <p
+    className="MuiTypography-root sc-jQrDum jLriAF MuiTypography-body1"
+  >
+    Address In the State:
+  </p>
+  <pre
+    className="sc-jUosCB eSSjao"
+  >
+     
+  </pre>
 </form>
 `;
 
@@ -226,7 +342,7 @@ exports[`Storyshots Inputs/AddressInput Address Input With Errors 1`] = `
     spellCheck={false}
   >
     <label
-      className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-filled Mui-error Mui-error MuiFormLabel-filled"
+      className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-filled Mui-error Mui-error"
       data-shrink={true}
       htmlFor="address"
       id="address-label"
@@ -252,11 +368,10 @@ exports[`Storyshots Inputs/AddressInput Address Input With Errors 1`] = `
         placeholder="Ethereum address"
         required={false}
         type="text"
-        value="rin:0x83eC7B0506556a7749306D69681aDbDbd08f0769"
       />
     </div>
     <p
-      className="MuiFormHelperText-root MuiFormHelperText-contained Mui-error MuiFormHelperText-filled"
+      className="MuiFormHelperText-root MuiFormHelperText-contained Mui-error"
       id="address-helper-text"
     >
       Invalid Address
@@ -265,65 +380,18 @@ exports[`Storyshots Inputs/AddressInput Address Input With Errors 1`] = `
 </form>
 `;
 
-exports[`Storyshots Inputs/AddressInput Address Input With Network Prefix 1`] = `
-<form
-  autoComplete="off"
-  noValidate={true}
-  onSubmit={[Function]}
->
-  <div
-    className="MuiFormControl-root MuiTextField-root sc-jJoQJp bqJZEI"
-    spellCheck={false}
-  >
-    <label
-      className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-filled MuiFormLabel-filled"
-      data-shrink={true}
-      htmlFor="prefixed-address"
-      id="prefixed-address-label"
-    >
-      Prefixed Address
-    </label>
-    <div
-      className="MuiInputBase-root MuiFilledInput-root MuiFilledInput-underline MuiInputBase-formControl"
-      onClick={[Function]}
-    >
-      <input
-        aria-invalid={false}
-        autoFocus={false}
-        className="MuiInputBase-input MuiFilledInput-input"
-        disabled={false}
-        id="prefixed-address"
-        name="prefixed-address"
-        onAnimationStart={[Function]}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        placeholder="Ethereum address"
-        required={false}
-        type="text"
-        value="rin:0x83eC7B0506556a7749306D69681aDbDbd08f0769"
-      />
-    </div>
-  </div>
-  <pre>
-    Address in the state: 
-    0x83eC7B0506556a7749306D69681aDbDbd08f0769
-  </pre>
-</form>
-`;
-
-exports[`Storyshots Inputs/AddressInput Address Input With Validation 1`] = `
+exports[`Storyshots Inputs/AddressInput Address Input With Simple Address Validation 1`] = `
 <form
   autoComplete="off"
   noValidate={true}
   onSubmit={[Function]}
 >
   <div
-    className="MuiFormControl-root MuiTextField-root sc-jJoQJp bqJZEI"
+    className="MuiFormControl-root MuiTextField-root sc-jJoQJp gNEEiH"
     spellCheck={false}
   >
     <label
-      className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-filled MuiFormLabel-filled"
+      className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-filled"
       data-shrink={true}
       htmlFor="address"
       id="address-label"
@@ -337,7 +405,7 @@ exports[`Storyshots Inputs/AddressInput Address Input With Validation 1`] = `
       <input
         aria-invalid={false}
         autoFocus={false}
-        className="MuiInputBase-input MuiFilledInput-input"
+        className="MuiInputBase-input MuiFilledInput-input MuiInputBase-inputHiddenLabel MuiFilledInput-inputHiddenLabel"
         disabled={false}
         id="address"
         name="address"
@@ -348,10 +416,19 @@ exports[`Storyshots Inputs/AddressInput Address Input With Validation 1`] = `
         placeholder="Ethereum address"
         required={false}
         type="text"
-        value="rin:0x83eC7B0506556a7749306D69681aDbDbd08f0769"
       />
     </div>
   </div>
+  <p
+    className="MuiTypography-root sc-jQrDum jLriAF MuiTypography-body1"
+  >
+    Address In the State:
+  </p>
+  <pre
+    className="sc-jUosCB eSSjao"
+  >
+     
+  </pre>
 </form>
 `;
 
@@ -366,7 +443,7 @@ exports[`Storyshots Inputs/AddressInput Address Input Without Prefix 1`] = `
     spellCheck={false}
   >
     <label
-      className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-filled MuiFormLabel-filled"
+      className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-filled"
       data-shrink={true}
       htmlFor="address"
       id="address-label"
@@ -391,10 +468,19 @@ exports[`Storyshots Inputs/AddressInput Address Input Without Prefix 1`] = `
         placeholder="Ethereum address"
         required={false}
         type="text"
-        value="rin:0x83eC7B0506556a7749306D69681aDbDbd08f0769"
       />
     </div>
   </div>
+  <p
+    className="MuiTypography-root sc-jQrDum jLriAF MuiTypography-body1"
+  >
+    Address In the State:
+  </p>
+  <pre
+    className="sc-jUosCB eSSjao"
+  >
+    0x83eC7B0506556a7749306D69681aDbDbd08f0769
+  </pre>
 </form>
 `;
 
@@ -404,25 +490,43 @@ exports[`Storyshots Inputs/AddressInput Safe Address Input Validation 1`] = `
   noValidate={true}
   onSubmit={[Function]}
 >
+  <p
+    className="MuiTypography-root sc-jQrDum jLriAF MuiTypography-body1"
+  >
+    You can customize validations
+  </p>
+  <p
+    className="MuiTypography-root sc-jQrDum jLriAF MuiTypography-body1"
+  >
+    valid values:
+  </p>
+  <pre
+    className="sc-jUosCB eSSjao"
+  >
+    0x83eC7B0506556a7749306D69681aDbDbd08f0769 & rin:0x83eC7B0506556a7749306D69681aDbDbd08f0769
+  </pre>
+  <p
+    className="MuiTypography-root sc-jQrDum jLriAF MuiTypography-body1"
+  />
   <div
-    className="MuiFormControl-root MuiTextField-root sc-jJoQJp laNQiK"
+    className="MuiFormControl-root MuiTextField-root sc-jJoQJp bqJZEI"
     spellCheck={false}
   >
     <label
-      className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-filled Mui-error Mui-error MuiFormLabel-filled"
-      data-shrink={true}
+      className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-filled"
+      data-shrink={false}
       htmlFor="safeAddress"
       id="safeAddress-label"
     >
       Safe Address
     </label>
     <div
-      className="MuiInputBase-root MuiFilledInput-root MuiFilledInput-underline Mui-error Mui-error MuiInputBase-formControl"
+      className="MuiInputBase-root MuiFilledInput-root MuiFilledInput-underline MuiInputBase-formControl"
       onClick={[Function]}
     >
       <input
         aria-describedby="safeAddress-helper-text"
-        aria-invalid={true}
+        aria-invalid={false}
         autoFocus={false}
         className="MuiInputBase-input MuiFilledInput-input"
         disabled={false}
@@ -432,144 +536,240 @@ exports[`Storyshots Inputs/AddressInput Safe Address Input Validation 1`] = `
         onBlur={[Function]}
         onChange={[Function]}
         onFocus={[Function]}
-        placeholder="Ethereum address"
+        placeholder="Type the valid safe address"
         required={false}
         type="text"
-        value="rin:0x83eC7B0506556a7749306D69681aDbDbd08f0769"
       />
     </div>
     <p
-      className="MuiFormHelperText-root MuiFormHelperText-contained Mui-error MuiFormHelperText-filled"
+      className="MuiFormHelperText-root MuiFormHelperText-contained"
       id="safeAddress-helper-text"
     >
-      Address given is not a valid Safe address
+      Valid safe: 0x83eC7B0506556a7749306D69681aDbDbd08f0769
     </p>
   </div>
+  <p
+    className="MuiTypography-root sc-jQrDum jLriAF MuiTypography-body1"
+  >
+    Address In the State:
+  </p>
+  <pre
+    className="sc-jUosCB eSSjao"
+  >
+     
+  </pre>
 </form>
 `;
 
 exports[`Storyshots Inputs/AddressInput Simple Address Input 1`] = `
-<form
-  autoComplete="off"
-  noValidate={true}
-  onSubmit={[Function]}
->
+<div>
   <p
-    className="MuiTypography-root MuiTypography-body1"
+    className="MuiTypography-root sc-jQrDum jLriAF MuiTypography-body1"
+  >
+    Network Settings:
+  </p>
+  <div>
+    <div
+      className="MuiFormControl-root"
+    >
+      <div
+        className="MuiInputBase-root MuiInput-root MuiInput-underline sc-bYoBSM dNRdPa MuiInputBase-formControl MuiInput-formControl"
+        onClick={[Function]}
+      >
+        <div
+          aria-haspopup="listbox"
+          aria-labelledby="generic-select generic-select"
+          className="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiInputBase-input MuiInput-input"
+          id="generic-select"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onMouseDown={[Function]}
+          role="button"
+          tabIndex={0}
+        >
+          <div>
+            <p
+              className="sc-crHmcD dtryax"
+              color="text"
+              size="sm"
+            >
+              Rinkeby (rin:)
+            </p>
+          </div>
+        </div>
+        <input
+          aria-hidden={true}
+          className="MuiSelect-nativeInput"
+          onAnimationStart={[Function]}
+          onChange={[Function]}
+          required={false}
+          tabIndex={-1}
+          value="rin"
+        />
+        <svg
+          aria-hidden={true}
+          className="MuiSvgIcon-root MuiSelect-icon"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M7 10l5 5 5-5z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+  <form
+    autoComplete="off"
+    noValidate={true}
+    onSubmit={[Function]}
     style={
       Object {
-        "marginBottom": "16px",
+        "display": "flex",
+        "margin": "12px 0px",
       }
     }
   >
-    <span
-      className="MuiSwitch-root sc-kLwhqv ckEIHj"
+    <div
+      className="MuiFormControl-root MuiTextField-root sc-jJoQJp gNEEiH"
+      spellCheck={false}
+    >
+      <label
+        className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-filled"
+        data-shrink={true}
+        htmlFor="address"
+        id="address-label"
+      >
+        Address
+      </label>
+      <div
+        className="MuiInputBase-root MuiFilledInput-root MuiFilledInput-underline MuiInputBase-formControl"
+        onClick={[Function]}
+      >
+        <input
+          aria-invalid={false}
+          autoFocus={false}
+          className="MuiInputBase-input MuiFilledInput-input MuiInputBase-inputHiddenLabel MuiFilledInput-inputHiddenLabel"
+          disabled={false}
+          id="address"
+          name="address"
+          onAnimationStart={[Function]}
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="Ethereum address"
+          required={false}
+          type="text"
+        />
+      </div>
+    </div>
+    <button
+      aria-label="load QR code"
+      className="MuiButtonBase-root MuiIconButton-root"
+      disabled={false}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onDragLeave={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
+      tabIndex={0}
+      type="button"
     >
       <span
-        aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-57 MuiSwitch-switchBase MuiSwitch-colorSecondary PrivateSwitchBase-checked-58 Mui-checked"
-        onBlur={[Function]}
-        onDragLeave={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        onMouseDown={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-        onTouchEnd={[Function]}
-        onTouchMove={[Function]}
-        onTouchStart={[Function]}
-        tabIndex={null}
+        className="MuiIconButton-label"
       >
         <span
-          className="MuiIconButton-label"
+          className="sc-iqseJM iJclAE"
         >
-          <input
-            checked={true}
-            className="PrivateSwitchBase-input-60 MuiSwitch-input"
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <span
-            className="MuiSwitch-thumb"
-          />
+          <svg
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              fill="none"
+              fillRule="evenodd"
+            >
+              <path
+                d="M0 0H24V24H0z"
+              />
+              <path
+                className="icon-color"
+                d="M4 2h5c1.105 0 2 .895 2 2v5c0 1.105-.895 2-2 2H4c-1.105 0-2-.895-2-2V4c0-1.105.895-2 2-2zm0 2v5h5V4H4zM4 13h5c1.105 0 2 .895 2 2v5c0 1.105-.895 2-2 2H4c-1.105 0-2-.895-2-2v-5c0-1.105.895-2 2-2zm0 2v5h5v-5H4zM15 2h5c1.105 0 2 .895 2 2v5c0 1.105-.895 2-2 2h-5c-1.105 0-2-.895-2-2V4c0-1.105.895-2 2-2zm0 2v5h5V4h-5z"
+                fillRule="nonzero"
+              />
+              <rect
+                className="icon-color"
+                height="3"
+                rx=".5"
+                transform="matrix(-1 0 0 1 29 0)"
+                width="3"
+                x="13"
+                y="13"
+              />
+              <rect
+                className="icon-color"
+                height="3"
+                rx=".5"
+                transform="matrix(-1 0 0 1 41 0)"
+                width="3"
+                x="19"
+                y="13"
+              />
+              <rect
+                className="icon-color"
+                height="3"
+                rx=".5"
+                transform="matrix(-1 0 0 1 35 0)"
+                width="3"
+                x="16"
+                y="16"
+              />
+              <rect
+                className="icon-color"
+                height="3"
+                rx=".5"
+                transform="matrix(-1 0 0 1 41 0)"
+                width="3"
+                x="19"
+                y="19"
+              />
+              <rect
+                className="icon-color"
+                height="3"
+                rx=".5"
+                transform="matrix(-1 0 0 1 29 0)"
+                width="3"
+                x="13"
+                y="19"
+              />
+            </g>
+          </svg>
         </span>
       </span>
       <span
-        className="MuiSwitch-track"
-      />
-    </span>
-    Show Network Prefix (rin)
-  </p>
-  <div
-    className="MuiFormControl-root MuiTextField-root sc-jJoQJp bqJZEI"
-    spellCheck={false}
-  >
-    <label
-      className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-filled MuiFormLabel-filled"
-      data-shrink={true}
-      htmlFor="address-input"
-      id="address-input-label"
-    >
-      Ethereum Address
-    </label>
-    <div
-      className="MuiInputBase-root MuiFilledInput-root MuiFilledInput-underline MuiInputBase-formControl"
-      onClick={[Function]}
-    >
-      <input
-        aria-invalid={false}
-        autoFocus={false}
-        className="MuiInputBase-input MuiFilledInput-input"
-        disabled={false}
-        id="address-input"
-        name="address"
-        onAnimationStart={[Function]}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        placeholder="Ethereum address"
-        required={false}
-        type="text"
-        value="rin:0x83eC7B0506556a7749306D69681aDbDbd08f0769"
+        className="MuiTouchRipple-root"
       />
-    </div>
-  </div>
+    </button>
+  </form>
   <p
-    className="MuiTypography-root MuiTypography-body1"
-    style={
-      Object {
-        "marginTop": "24px",
-      }
-    }
+    className="MuiTypography-root sc-jQrDum jLriAF MuiTypography-body1"
   >
-    Address value in the State:
-     
+    Address In the State:
   </p>
   <pre
-    style={
-      Object {
-        "backgroundColor": "lightgrey",
-        "borderRadius": "4px",
-        "display": "inline-block",
-        "margin": "0",
-        "marginLeft": "8px",
-        "minWidth": "500px",
-        "padding": "8px",
-      }
-    }
+    className="sc-jUosCB eSSjao"
   >
-    0x83eC7B0506556a7749306D69681aDbDbd08f0769
+     
   </pre>
-  <p
-    className="MuiTypography-root MuiTypography-body1"
-    style={
-      Object {
-        "marginTop": "16px",
-      }
-    }
-  >
-    You can use ENS names (like safe.test) with the getAddressFromDomain prop
-  </p>
-</form>
+</div>
 `;
diff --git a/tests/inputs/Button/__snapshots__/button.stories.storyshot b/tests/inputs/Button/__snapshots__/button.stories.storyshot
index 60d243c2..08d59438 100644
--- a/tests/inputs/Button/__snapshots__/button.stories.storyshot
+++ b/tests/inputs/Button/__snapshots__/button.stories.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots Inputs/Button Disabled Button 1`] = `
 <div
-  className="sc-jUosCB iCFwpT"
+  className="sc-fbyfCU bDrXRk"
 >
   <button
     className="MuiButtonBase-root MuiButton-root MuiButton-text sc-iwjdpV bPRbzV ads Mui-disabled Mui-disabled"
@@ -218,7 +218,7 @@ exports[`Storyshots Inputs/Button Disabled Button 1`] = `
 
 exports[`Storyshots Inputs/Button Simple Button 1`] = `
 <div
-  className="sc-jUosCB iCFwpT"
+  className="sc-fbyfCU bDrXRk"
 >
   <button
     className="MuiButtonBase-root MuiButton-root MuiButton-text sc-iwjdpV bPRbzV primary contained"
@@ -434,7 +434,7 @@ exports[`Storyshots Inputs/Button Simple Button 1`] = `
 
 exports[`Storyshots Inputs/Button Sizes 1`] = `
 <div
-  className="sc-jUosCB iCFwpT"
+  className="sc-fbyfCU bDrXRk"
 >
   <button
     className="MuiButtonBase-root MuiButton-root MuiButton-text sc-iwjdpV bPRbzV primary contained"
@@ -538,7 +538,7 @@ exports[`Storyshots Inputs/Button With Custom Component 1`] = `
 
 exports[`Storyshots Inputs/Button With Icon 1`] = `
 <div
-  className="sc-jUosCB iCFwpT"
+  className="sc-fbyfCU bDrXRk"
 >
   <button
     className="MuiButtonBase-root MuiButton-root MuiButton-text sc-iwjdpV esbZNJ primary contained"
@@ -970,7 +970,7 @@ exports[`Storyshots Inputs/Button With Icon 1`] = `
 
 exports[`Storyshots Inputs/Button With Icon Size 1`] = `
 <div
-  className="sc-jUosCB iCFwpT"
+  className="sc-fbyfCU bDrXRk"
 >
   <button
     className="MuiButtonBase-root MuiButton-root MuiButton-text sc-iwjdpV jqMZKs secondary bordered"
diff --git a/tests/inputs/Link/__snapshots__/index.stories.storyshot b/tests/inputs/Link/__snapshots__/index.stories.storyshot
index 6b75de9f..ca9644b9 100644
--- a/tests/inputs/Link/__snapshots__/index.stories.storyshot
+++ b/tests/inputs/Link/__snapshots__/index.stories.storyshot
@@ -26,7 +26,7 @@ exports[`Storyshots inputs/Link With Custom Child 1`] = `
   size="lg"
 >
   <div
-    className="sc-jQrDum gquLvU"
+    className="sc-GEbAx kiUOMw"
   >
     <span
       className="sc-iqseJM iJclAE"
diff --git a/tests/inputs/TextFieldInput/__snapshots__/TextFieldInput.stories.storyshot b/tests/inputs/TextFieldInput/__snapshots__/TextFieldInput.stories.storyshot
index 45e4bdb2..86712586 100644
--- a/tests/inputs/TextFieldInput/__snapshots__/TextFieldInput.stories.storyshot
+++ b/tests/inputs/TextFieldInput/__snapshots__/TextFieldInput.stories.storyshot
@@ -7,7 +7,7 @@ exports[`Storyshots Inputs/TextFieldInput Custom CSS Text Field 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="MuiFormControl-root MuiTextField-root sc-jJoQJp bqJZEI sc-fvxzrP eWJijy"
+    className="MuiFormControl-root MuiTextField-root sc-jJoQJp bqJZEI sc-gsNilK gDEnwG"
   >
     <label
       className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-filled MuiFormLabel-filled"
diff --git a/yarn.lock b/yarn.lock
index 5facc35c..622a281e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7865,6 +7865,11 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jsqr@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/jsqr/-/jsqr-1.4.0.tgz#8efb8d0a7cc6863cb6d95116b9069123ce9eb2d1"
+  integrity sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A==
+
 jss-plugin-camel-case@^10.5.1:
   version "10.5.1"
   resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.5.1.tgz#427b24a9951b4c2eaa7e3d5267acd2e00b0934f9"
@@ -9792,6 +9797,15 @@ react-popper@^2.2.4:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
+react-qr-reader@2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-qr-reader/-/react-qr-reader-2.2.1.tgz#dc89046d1c1a1da837a683dd970de5926817d55b"
+  integrity sha512-EL5JEj53u2yAOgtpAKAVBzD/SiKWn0Bl7AZy6ZrSf1lub7xHwtaXe6XSx36Wbhl1VMGmvmrwYMRwO1aSCT2fwA==
+  dependencies:
+    jsqr "^1.2.0"
+    prop-types "^15.7.2"
+    webrtc-adapter "^7.2.1"
+
 react-refresh@^0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
@@ -10230,6 +10244,13 @@ rsvp@^4.8.4:
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
   integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
 
+rtcpeerconnection-shim@^1.2.15:
+  version "1.2.15"
+  resolved "https://registry.yarnpkg.com/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz#e7cc189a81b435324c4949aa3dfb51888684b243"
+  integrity sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==
+  dependencies:
+    sdp "^2.6.0"
+
 run-parallel@^1.1.9:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
@@ -10350,6 +10371,11 @@ scrypt-js@^3.0.0:
   resolved "https://registry.yarnpkg.com/scrypt-js/-/scrypt-js-3.0.1.tgz#d314a57c2aef69d1ad98a138a21fe9eafa9ee312"
   integrity sha512-cdwTTnqPu0Hyvf5in5asVdZocVDTNRmR7XEcJuIzMjJeSHybHl7vpB66AzwTaIg6CLSbtjcxc8fqcySfnTkccA==
 
+sdp@^2.12.0, sdp@^2.6.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/sdp/-/sdp-2.12.0.tgz#338a106af7560c86e4523f858349680350d53b22"
+  integrity sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw==
+
 secp256k1@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/secp256k1/-/secp256k1-4.0.2.tgz#15dd57d0f0b9fdb54ac1fa1694f40e5e9a54f4a1"
@@ -11940,6 +11966,14 @@ webpack@4.43.0:
     watchpack "^1.6.1"
     webpack-sources "^1.4.1"
 
+webrtc-adapter@^7.2.1:
+  version "7.7.1"
+  resolved "https://registry.yarnpkg.com/webrtc-adapter/-/webrtc-adapter-7.7.1.tgz#b2c227a6144983b35057df67bd984a7d4bfd17f1"
+  integrity sha512-TbrbBmiQBL9n0/5bvDdORc6ZfRY/Z7JnEj+EYOD1ghseZdpJ+nF2yx14k3LgQKc7JZnG7HAcL+zHnY25So9d7A==
+  dependencies:
+    rtcpeerconnection-shim "^1.2.15"
+    sdp "^2.12.0"
+
 whatwg-encoding@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"