diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 000000000..12ac3025e
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged --allow-empty
diff --git a/.prettierrc b/.prettierrc
index a0d1c9a90..007de7c2a 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,8 @@
 {
-  "printWidth": 120,
+  "printWidth": 100,
+  "arrowParens": "avoid",
   "trailingComma": "all",
-  "singleQuote": true
+  "singleQuote": true,
+  "semi": false,
+  "endOfLine": "auto"
 }
diff --git a/apps/compound/config-overrides.js b/apps/compound/config-overrides.js
index cfe7814f0..f4ec1f4f0 100644
--- a/apps/compound/config-overrides.js
+++ b/apps/compound/config-overrides.js
@@ -1,8 +1,8 @@
-const webpack = require('webpack');
+const webpack = require('webpack')
 
 module.exports = {
   webpack: function (config, env) {
-    const fallback = config.resolve.fallback || {};
+    const fallback = config.resolve.fallback || {}
 
     // https://github.com/ChainSafe/web3.js#web3-and-create-react-app
     Object.assign(fallback, {
@@ -15,39 +15,39 @@ module.exports = {
       url: require.resolve('url'),
       // https://stackoverflow.com/questions/68707553/uncaught-referenceerror-buffer-is-not-defined
       buffer: require.resolve('buffer'),
-    });
+    })
 
-    config.resolve.fallback = fallback;
+    config.resolve.fallback = fallback
 
     config.plugins = (config.plugins || []).concat([
       new webpack.ProvidePlugin({
         process: 'process/browser',
         Buffer: ['buffer', 'Buffer'],
       }),
-    ]);
+    ])
 
     // https://github.com/facebook/create-react-app/issues/11924
-    config.ignoreWarnings = [/to parse source map/i];
+    config.ignoreWarnings = [/to parse source map/i]
 
-    return config;
+    return config
   },
   jest: function (config) {
-    return config;
+    return config
   },
   devServer: function (configFunction) {
     return function (proxy, allowedHost) {
-      const config = configFunction(proxy, allowedHost);
+      const config = configFunction(proxy, allowedHost)
 
       config.headers = {
         'Access-Control-Allow-Origin': '*',
         'Access-Control-Allow-Methods': 'GET',
         'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
-      };
+      }
 
-      return config;
-    };
+      return config
+    }
   },
   paths: function (paths) {
-    return paths;
+    return paths
   },
-};
+}
diff --git a/apps/compound/src/App.tsx b/apps/compound/src/App.tsx
index 33348671e..897e47972 100644
--- a/apps/compound/src/App.tsx
+++ b/apps/compound/src/App.tsx
@@ -1,8 +1,8 @@
-import { useEffect, useMemo, useState } from 'react';
-import Big from 'big.js';
-import { Button, Select, Text, Loader, Tab, ButtonLink } from '@gnosis.pm/safe-react-components';
-import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk';
-import { getTokenList, TokenItem } from './config';
+import { useEffect, useMemo, useState } from 'react'
+import Big from 'big.js'
+import { Button, Select, Text, Loader, Tab, ButtonLink } from '@gnosis.pm/safe-react-components'
+import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk'
+import { getTokenList, TokenItem } from './config'
 import {
   SelectContainer,
   InfoContainer,
@@ -10,110 +10,119 @@ import {
   StyledTitle,
   StyledTextField,
   LoaderContainer,
-} from './styles';
-import { getTokenInteractions, parseEvents } from './tokensTransfers';
-import useComp from './hooks/useComp';
-import useWeb3 from './hooks/useWeb3';
-import useCToken from './hooks/useCToken';
-import CompBalance from './components/CompBalance';
-import InfoRow from './components/InfoRow';
-import WidgetWrapper from './components/WidgetWrapper';
-import { BigNumberInput } from 'big-number-input';
-
-type Operation = 'lock' | 'withdraw';
-
-const WITHDRAW = 'withdraw';
-const SUPPLY = 'supply';
+} from './styles'
+import { getTokenInteractions, parseEvents } from './tokensTransfers'
+import useComp from './hooks/useComp'
+import useWeb3 from './hooks/useWeb3'
+import useCToken from './hooks/useCToken'
+import CompBalance from './components/CompBalance'
+import InfoRow from './components/InfoRow'
+import WidgetWrapper from './components/WidgetWrapper'
+import { BigNumberInput } from 'big-number-input'
+
+type Operation = 'lock' | 'withdraw'
+
+const WITHDRAW = 'withdraw'
+const SUPPLY = 'supply'
 const TABS = [
   { id: SUPPLY, label: 'Supply' },
   { id: WITHDRAW, label: 'Withdraw' },
-];
+]
 
 const CompoundWidget = () => {
-  const [ethBalance, setEthBalance] = useState('0');
-  const [tokenList, setTokenList] = useState<Array<TokenItem>>();
-  const [selectedToken, setSelectedToken] = useState<TokenItem>();
-  const { cTokenInstance, tokenInstance } = useCToken(selectedToken);
-  const [selectedTab, setSelectedTab] = useState(SUPPLY);
-  const [interestEarn, setInterestEarn] = useState('0');
-  const [tokenBalance, setTokenBalance] = useState<string>('0');
-  const [underlyingBalance, setUnderlyingBalance] = useState<string>('0');
-  const [inputValue, setInputValue] = useState<string>('');
-  const [inputError, setInputError] = useState<string | undefined>();
-  const { web3 } = useWeb3();
-  const { sdk: appsSdk, safe: safeInfo, connected } = useSafeAppsSDK();
-  const { cTokenSupplyAPY, cDistributionTokenSupplyAPY, claimableComp, claimComp } = useComp(selectedToken);
-  const isMainnet = useMemo(() => safeInfo.chainId === 1, [safeInfo.chainId]);
+  const [ethBalance, setEthBalance] = useState('0')
+  const [tokenList, setTokenList] = useState<Array<TokenItem>>()
+  const [selectedToken, setSelectedToken] = useState<TokenItem>()
+  const { cTokenInstance, tokenInstance } = useCToken(selectedToken)
+  const [selectedTab, setSelectedTab] = useState(SUPPLY)
+  const [interestEarn, setInterestEarn] = useState('0')
+  const [tokenBalance, setTokenBalance] = useState<string>('0')
+  const [underlyingBalance, setUnderlyingBalance] = useState<string>('0')
+  const [inputValue, setInputValue] = useState<string>('')
+  const [inputError, setInputError] = useState<string | undefined>()
+  const { web3 } = useWeb3()
+  const { sdk: appsSdk, safe: safeInfo, connected } = useSafeAppsSDK()
+  const { cTokenSupplyAPY, cDistributionTokenSupplyAPY, claimableComp, claimComp } =
+    useComp(selectedToken)
+  const isMainnet = useMemo(() => safeInfo.chainId === 1, [safeInfo.chainId])
 
   // fetch eth balance
   useEffect(() => {
     const fetchEthBalance = async () => {
       try {
         if (safeInfo.safeAddress) {
-          const balance = await web3?.eth.getBalance(safeInfo.safeAddress);
+          const balance = await web3?.eth.getBalance(safeInfo.safeAddress)
 
           if (balance) {
-            setEthBalance(balance);
+            setEthBalance(balance)
           }
         }
       } catch (err) {
-        console.error(err);
+        console.error(err)
       }
-    };
+    }
 
-    fetchEthBalance();
-  }, [web3, safeInfo.safeAddress]);
+    fetchEthBalance()
+  }, [web3, safeInfo.safeAddress])
 
   useEffect(() => {
-    (async () => {
+    ;(async () => {
       if (!safeInfo) {
-        return;
+        return
       }
 
-      const tokenListRes = await getTokenList(safeInfo.chainId);
-      setTokenList(tokenListRes);
-      setSelectedToken(tokenListRes.find((t) => t.id === 'ETH'));
-    })();
-  }, [safeInfo]);
+      const tokenListRes = await getTokenList(safeInfo.chainId)
+      setTokenList(tokenListRes)
+      setSelectedToken(tokenListRes.find(t => t.id === 'ETH'))
+    })()
+  }, [safeInfo])
   // on selectedToken
   useEffect(() => {
     if (!selectedToken || !web3) {
-      return;
+      return
     }
 
-    setInterestEarn('0');
-    setTokenBalance('0');
-    setUnderlyingBalance('0');
-    setInputValue('');
-    setInputError(undefined);
-  }, [selectedToken, web3]);
+    setInterestEarn('0')
+    setTokenBalance('0')
+    setUnderlyingBalance('0')
+    setInputValue('')
+    setInputError(undefined)
+  }, [selectedToken, web3])
 
   useEffect(() => {
     const getData = async () => {
       if (!safeInfo.safeAddress || !selectedToken || !cTokenInstance || !tokenInstance) {
-        return;
+        return
       }
 
       // wait until cToken is correctly updated
-      if (selectedToken.cTokenAddr.toLocaleLowerCase() !== cTokenInstance?.['_address'].toLocaleLowerCase()) {
-        return;
+      if (
+        selectedToken.cTokenAddr.toLocaleLowerCase() !==
+        cTokenInstance?.['_address'].toLocaleLowerCase()
+      ) {
+        return
       }
 
       // wait until token is correctly updated
-      if (selectedToken.tokenAddr.toLocaleLowerCase() !== tokenInstance?.['_address'].toLocaleLowerCase()) {
-        return;
+      if (
+        selectedToken.tokenAddr.toLocaleLowerCase() !==
+        tokenInstance?.['_address'].toLocaleLowerCase()
+      ) {
+        return
       }
 
       // get token Balance
-      let tokenBalance;
+      let tokenBalance
       if (selectedToken.id === 'ETH') {
-        tokenBalance = ethBalance;
+        tokenBalance = ethBalance
       } else {
-        tokenBalance = await tokenInstance.methods.balanceOf(safeInfo.safeAddress).call();
+        tokenBalance = await tokenInstance.methods.balanceOf(safeInfo.safeAddress).call()
       }
 
       // get token Locked amount
-      const underlyingBalance = await cTokenInstance.methods.balanceOfUnderlying(safeInfo.safeAddress).call();
+      const underlyingBalance = await cTokenInstance.methods
+        .balanceOfUnderlying(safeInfo.safeAddress)
+        .call()
 
       // get interest earned
       const tokenEvents = await getTokenInteractions(
@@ -121,53 +130,54 @@ const CompoundWidget = () => {
         safeInfo.safeAddress,
         selectedToken.tokenAddr,
         selectedToken.cTokenAddr,
-      );
-      const { deposits, withdrawals } = parseEvents(safeInfo.safeAddress, tokenEvents);
+      )
+      const { deposits, withdrawals } = parseEvents(safeInfo.safeAddress, tokenEvents)
       const earned = new Big(underlyingBalance)
         .div(10 ** selectedToken.decimals)
         .plus(withdrawals)
-        .minus(deposits);
-      const underlyingEarned = earned.lt('0') ? '0' : earned.toFixed(4);
+        .minus(deposits)
+      const underlyingEarned = earned.lt('0') ? '0' : earned.toFixed(4)
 
       // update all the values in a row to avoid UI flickers
-      selectedToken.id === 'ETH' ? setInterestEarn('-') : setInterestEarn(underlyingEarned);
-      setTokenBalance(tokenBalance);
-      setUnderlyingBalance(underlyingBalance);
-    };
+      selectedToken.id === 'ETH' ? setInterestEarn('-') : setInterestEarn(underlyingEarned)
+      setTokenBalance(tokenBalance)
+      setUnderlyingBalance(underlyingBalance)
+    }
 
-    getData();
-  }, [safeInfo, selectedToken, cTokenInstance, tokenInstance, ethBalance]);
+    getData()
+  }, [safeInfo, selectedToken, cTokenInstance, tokenInstance, ethBalance])
 
   const bNumberToHumanFormat = (value: string) => {
     if (!selectedToken) {
-      return '';
+      return ''
     }
-    return new Big(value).div(10 ** selectedToken.decimals).toFixed(4);
-  };
+    return new Big(value).div(10 ** selectedToken.decimals).toFixed(4)
+  }
 
   const validateInputValue = (operation: Operation): boolean => {
-    setInputError(undefined);
+    setInputError(undefined)
 
-    const currentValueBN = new Big(inputValue);
-    const comparisonValueBN = operation === 'lock' ? new Big(tokenBalance) : new Big(underlyingBalance);
+    const currentValueBN = new Big(inputValue)
+    const comparisonValueBN =
+      operation === 'lock' ? new Big(tokenBalance) : new Big(underlyingBalance)
 
     if (currentValueBN.gt(comparisonValueBN)) {
-      const value = operation === 'lock' ? tokenBalance : underlyingBalance;
-      setInputError(`Max value is ${bNumberToHumanFormat(value)}`);
-      return false;
+      const value = operation === 'lock' ? tokenBalance : underlyingBalance
+      setInputError(`Max value is ${bNumberToHumanFormat(value)}`)
+      return false
     }
 
-    return true;
-  };
+    return true
+  }
 
   const lock = async () => {
     if (!selectedToken || !validateInputValue('lock') || !web3) {
-      return;
+      return
     }
 
-    const supplyParameter = web3.eth.abi.encodeParameter('uint256', inputValue.toString());
+    const supplyParameter = web3.eth.abi.encodeParameter('uint256', inputValue.toString())
 
-    let txs;
+    let txs
 
     if (selectedToken.id === 'ETH') {
       txs = [
@@ -176,103 +186,106 @@ const CompoundWidget = () => {
           value: supplyParameter,
           data: cTokenInstance?.methods.mint().encodeABI(),
         },
-      ];
+      ]
     } else {
       txs = [
         {
           to: selectedToken.tokenAddr,
           value: '0',
-          data: tokenInstance?.methods.approve(selectedToken.cTokenAddr, supplyParameter).encodeABI(),
+          data: tokenInstance?.methods
+            .approve(selectedToken.cTokenAddr, supplyParameter)
+            .encodeABI(),
         },
         {
           to: selectedToken.cTokenAddr,
           value: '0',
           data: cTokenInstance?.methods.mint(supplyParameter).encodeABI(),
         },
-      ];
+      ]
     }
 
     try {
-      await appsSdk.txs.send({ txs });
+      await appsSdk.txs.send({ txs })
     } catch (error) {
-      console.error('Lock: Transaction rejected or failed: ', error);
+      console.error('Lock: Transaction rejected or failed: ', error)
     }
 
-    setInputValue('');
-  };
+    setInputValue('')
+  }
 
   const withdraw = async () => {
     if (!selectedToken || !validateInputValue('withdraw') || !web3) {
-      return;
+      return
     }
 
-    const supplyParameter = web3.eth.abi.encodeParameter('uint256', inputValue.toString());
+    const supplyParameter = web3.eth.abi.encodeParameter('uint256', inputValue.toString())
     const txs = [
       {
         to: selectedToken.cTokenAddr,
         value: '0',
         data: cTokenInstance?.methods.redeemUnderlying(supplyParameter).encodeABI(),
       },
-    ];
+    ]
 
     try {
-      await appsSdk.txs.send({ txs });
+      await appsSdk.txs.send({ txs })
     } catch (error) {
-      console.error('Withdraw: Transaction rejected or failed: ', error);
+      console.error('Withdraw: Transaction rejected or failed: ', error)
     }
 
-    setInputValue('');
-  };
+    setInputValue('')
+  }
 
   const isWithdrawDisabled = () => {
     if (!!inputError || !inputValue) {
-      return true;
+      return true
     }
 
-    const bigInput = new Big(inputValue);
+    const bigInput = new Big(inputValue)
 
-    return bigInput.eq('0') || bigInput.gt(underlyingBalance);
-  };
+    return bigInput.eq('0') || bigInput.gt(underlyingBalance)
+  }
 
   const isSupplyDisabled = () => {
     if (!!inputError || !inputValue) {
-      return true;
+      return true
     }
 
-    const bigInput = new Big(inputValue);
+    const bigInput = new Big(inputValue)
 
-    return bigInput.eq('0') || bigInput.gt(tokenBalance);
-  };
+    return bigInput.eq('0') || bigInput.gt(tokenBalance)
+  }
 
   const onSelectItem = (id: string) => {
     if (!tokenList) {
-      return;
+      return
     }
-    const selectedToken = tokenList.find((t) => t.id === id);
+    const selectedToken = tokenList.find(t => t.id === id)
     if (!selectedToken) {
-      return;
+      return
     }
-    setSelectedToken(selectedToken);
-  };
+    setSelectedToken(selectedToken)
+  }
 
   const onInputChange = (value: string) => {
-    setInputError(undefined);
-    setInputValue(value);
-  };
+    setInputError(undefined)
+    setInputValue(value)
+  }
 
   const handleTabsChange = (selected: string) => {
-    setSelectedTab(selected);
-    setInputValue('');
-  };
+    setSelectedTab(selected)
+    setInputValue('')
+  }
 
-  const handleMaxInputValue = () => setInputValue(selectedTab === SUPPLY ? tokenBalance : underlyingBalance);
+  const handleMaxInputValue = () =>
+    setInputValue(selectedTab === SUPPLY ? tokenBalance : underlyingBalance)
 
   if (!selectedToken || !connected) {
     return (
       <LoaderContainer>
         <Loader size="md" />
       </LoaderContainer>
-    );
+    )
   }
 
   return (
@@ -280,20 +293,36 @@ const CompoundWidget = () => {
       <StyledTitle size="sm">Compound</StyledTitle>
 
       <SelectContainer>
-        <Select items={tokenList || []} activeItemId={selectedToken.id} onItemClick={onSelectItem} />
+        <Select
+          items={tokenList || []}
+          activeItemId={selectedToken.id}
+          onItemClick={onSelectItem}
+        />
         <Text strong size="lg">
           ~ {bNumberToHumanFormat(tokenBalance)}
         </Text>
       </SelectContainer>
 
-      <Tab onChange={handleTabsChange} selectedTab={selectedTab} variant="outlined" fullWidth items={TABS} />
+      <Tab
+        onChange={handleTabsChange}
+        selectedTab={selectedTab}
+        variant="outlined"
+        fullWidth
+        items={TABS}
+      />
 
       <InfoContainer>
-        <InfoRow label={`Supplied ${selectedToken.label}`} data={bNumberToHumanFormat(underlyingBalance)} />
+        <InfoRow
+          label={`Supplied ${selectedToken.label}`}
+          data={bNumberToHumanFormat(underlyingBalance)}
+        />
         <InfoRow label="Interest earned" data={`~ ${interestEarn} ${selectedToken.label}`} />
         <InfoRow label="Supply APY" data={cTokenSupplyAPY && `${cTokenSupplyAPY}%`} />
         {isMainnet && (
-          <InfoRow label="Distribution APY" data={cDistributionTokenSupplyAPY && `${cDistributionTokenSupplyAPY}%`} />
+          <InfoRow
+            label="Distribution APY"
+            data={cDistributionTokenSupplyAPY && `${cDistributionTokenSupplyAPY}%`}
+          />
         )}
       </InfoContainer>
 
@@ -330,7 +359,14 @@ const CompoundWidget = () => {
         )}
 
         {selectedTab === SUPPLY && (
-          <Button size="lg" color="primary" variant="contained" onClick={lock} disabled={isSupplyDisabled()} fullWidth>
+          <Button
+            size="lg"
+            color="primary"
+            variant="contained"
+            onClick={lock}
+            disabled={isSupplyDisabled()}
+            fullWidth
+          >
             {parseFloat(tokenBalance) > 0 ? 'Supply' : 'No balance to supply'}
           </Button>
         )}
@@ -338,7 +374,7 @@ const CompoundWidget = () => {
 
       {isMainnet && <CompBalance balance={claimableComp} onCollect={claimComp} />}
     </WidgetWrapper>
-  );
-};
+  )
+}
 
-export default CompoundWidget;
+export default CompoundWidget
diff --git a/apps/compound/src/abis/CErc20.ts b/apps/compound/src/abis/CErc20.ts
index 01451206f..a3daa4f53 100644
--- a/apps/compound/src/abis/CErc20.ts
+++ b/apps/compound/src/abis/CErc20.ts
@@ -614,6 +614,6 @@ const CErc20ABI = [
     name: 'Approval',
     type: 'event',
   },
-];
+]
 
-export default CErc20ABI;
+export default CErc20ABI
diff --git a/apps/compound/src/abis/CToken.ts b/apps/compound/src/abis/CToken.ts
index 40982691e..b77a6d5b0 100644
--- a/apps/compound/src/abis/CToken.ts
+++ b/apps/compound/src/abis/CToken.ts
@@ -1121,6 +1121,6 @@ const CTokenABI = [
     name: 'Approval',
     type: 'event',
   },
-];
+]
 
-export default CTokenABI;
+export default CTokenABI
diff --git a/apps/compound/src/abis/CWEth.ts b/apps/compound/src/abis/CWEth.ts
index ab609e9ba..fbefd6ffd 100644
--- a/apps/compound/src/abis/CWEth.ts
+++ b/apps/compound/src/abis/CWEth.ts
@@ -593,6 +593,6 @@ const CWethABI = [
     name: 'Approval',
     type: 'event',
   },
-];
+]
 
-export default CWethABI;
+export default CWethABI
diff --git a/apps/compound/src/abis/CompoundLens.ts b/apps/compound/src/abis/CompoundLens.ts
index 2ae3f610a..f7a1cfd58 100644
--- a/apps/compound/src/abis/CompoundLens.ts
+++ b/apps/compound/src/abis/CompoundLens.ts
@@ -3,7 +3,11 @@ const CompoundLensABI = [
     constant: false,
     inputs: [
       { internalType: 'contract Comp', name: 'comp', type: 'address' },
-      { internalType: 'contract ComptrollerLensInterface', name: 'comptroller', type: 'address' },
+      {
+        internalType: 'contract ComptrollerLensInterface',
+        name: 'comptroller',
+        type: 'address',
+      },
       { internalType: 'address', name: 'account', type: 'address' },
     ],
     name: 'getCompBalanceMetadataExt',
@@ -24,6 +28,6 @@ const CompoundLensABI = [
     stateMutability: 'nonpayable',
     type: 'function',
   },
-];
+]
 
-export default CompoundLensABI;
+export default CompoundLensABI
diff --git a/apps/compound/src/abis/Comptroller.ts b/apps/compound/src/abis/Comptroller.ts
index 39271a78f..5fe4a6f90 100644
--- a/apps/compound/src/abis/Comptroller.ts
+++ b/apps/compound/src/abis/Comptroller.ts
@@ -1,5 +1,10 @@
 const ComptrollerABI = [
-  { inputs: [], payable: false, stateMutability: 'nonpayable', type: 'constructor' },
+  {
+    inputs: [],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'constructor',
+  },
   {
     constant: false,
     inputs: [
@@ -30,6 +35,6 @@ const ComptrollerABI = [
     stateMutability: 'view',
     type: 'function',
   },
-];
+]
 
-export default ComptrollerABI;
+export default ComptrollerABI
diff --git a/apps/compound/src/abis/UniSwapAnchoredViewABI.ts b/apps/compound/src/abis/UniSwapAnchoredViewABI.ts
index 4ba280f61..b4ae54d63 100644
--- a/apps/compound/src/abis/UniSwapAnchoredViewABI.ts
+++ b/apps/compound/src/abis/UniSwapAnchoredViewABI.ts
@@ -6,6 +6,6 @@ const UniSwapAnchoredViewABI = [
     stateMutability: 'view',
     type: 'function',
   },
-];
+]
 
-export default UniSwapAnchoredViewABI;
+export default UniSwapAnchoredViewABI
diff --git a/apps/compound/src/components/CompBalance.tsx b/apps/compound/src/components/CompBalance.tsx
index 7e8e957c8..4907eee17 100644
--- a/apps/compound/src/components/CompBalance.tsx
+++ b/apps/compound/src/components/CompBalance.tsx
@@ -1,24 +1,24 @@
-import { SyntheticEvent, useCallback } from 'react';
-import { Title, ButtonLink } from '@gnosis.pm/safe-react-components';
-import styled from 'styled-components';
-import { InfoContainer } from '../styles';
-import InfoRow from './InfoRow';
+import { SyntheticEvent, useCallback } from 'react'
+import { Title, ButtonLink } from '@gnosis.pm/safe-react-components'
+import styled from 'styled-components'
+import { InfoContainer } from '../styles'
+import InfoRow from './InfoRow'
 
 type Props = {
-  balance: number | undefined;
-  onCollect: () => void;
-};
+  balance: number | undefined
+  onCollect: () => void
+}
 
 export default function CompBalance({ balance, onCollect }: Props): React.ReactElement {
   const handleOnCollect = useCallback(
     (event: SyntheticEvent) => {
-      event.preventDefault();
+      event.preventDefault()
       if (balance && balance > 0) {
-        onCollect();
+        onCollect()
       }
     },
     [balance, onCollect],
-  );
+  )
 
   return (
     <InfoContainer>
@@ -35,9 +35,9 @@ export default function CompBalance({ balance, onCollect }: Props): React.ReactE
         }
       />
     </InfoContainer>
-  );
+  )
 }
 
 const Button = styled(ButtonLink)`
   display: inline-block;
-`;
+`
diff --git a/apps/compound/src/components/InfoRow.tsx b/apps/compound/src/components/InfoRow.tsx
index 44db56fe9..4bb576c33 100644
--- a/apps/compound/src/components/InfoRow.tsx
+++ b/apps/compound/src/components/InfoRow.tsx
@@ -1,10 +1,10 @@
-import { Divider, Text } from '@gnosis.pm/safe-react-components';
-import styled from 'styled-components';
+import { Divider, Text } from '@gnosis.pm/safe-react-components'
+import styled from 'styled-components'
 
 type Props = {
-  label: string;
-  data: string | React.ReactElement | undefined;
-};
+  label: string
+  data: string | React.ReactElement | undefined
+}
 
 export default function InfoRow({ label, data }: Props): React.ReactElement {
   return (
@@ -15,11 +15,11 @@ export default function InfoRow({ label, data }: Props): React.ReactElement {
       </InfoRowContainer>
       <Divider />
     </>
-  );
+  )
 }
 
 const InfoRowContainer = styled.div`
   display: flex;
   width: 100%;
   justify-content: space-between;
-`;
+`
diff --git a/apps/compound/src/components/WidgetWrapper.tsx b/apps/compound/src/components/WidgetWrapper.tsx
index 1dfd8566c..eff38a943 100644
--- a/apps/compound/src/components/WidgetWrapper.tsx
+++ b/apps/compound/src/components/WidgetWrapper.tsx
@@ -1,17 +1,17 @@
-import React from 'react';
-import styled from 'styled-components';
+import React from 'react'
+import styled from 'styled-components'
 
 const Card = styled.div`
   width: 400px;
   padding: 24px;
-`;
+`
 
 const WidgetWrapper: React.FC = ({ children }) => {
   return (
     <Card>
       <div>{children}</div>
     </Card>
-  );
-};
+  )
+}
 
-export default WidgetWrapper;
+export default WidgetWrapper
diff --git a/apps/compound/src/config.ts b/apps/compound/src/config.ts
index 2589c48e7..3252a0559 100644
--- a/apps/compound/src/config.ts
+++ b/apps/compound/src/config.ts
@@ -1,59 +1,65 @@
-import { CHAINS } from './utils/networks';
-import { cToken, getMarkets } from './http/compoundApi';
-import STATIC_CONFIG from './tokens';
+import { CHAINS } from './utils/networks'
+import { cToken, getMarkets } from './http/compoundApi'
+import STATIC_CONFIG from './tokens'
 
 export type TokenItem = {
-  id: string;
-  label: string;
-  iconUrl: string;
-  decimals: number;
-  tokenAddr: string;
-  cTokenAddr: string;
-};
+  id: string
+  label: string
+  iconUrl: string
+  decimals: number
+  tokenAddr: string
+  cTokenAddr: string
+}
 
 const ETH_UNDERLYING_ADDRESS: { [key: number]: string } = {
   1: '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2',
   4: '0xc778417e063141139fce010982780140aa0cd5ab',
-};
+}
 
-const EXCLUDE_TOKENS = ['cWBTC', 'cSAI', 'cREP'];
+const EXCLUDE_TOKENS = ['cWBTC', 'cSAI', 'cREP']
 
 const getSymbolIconUrl = (symbol: string) =>
-  `https://app.compound.finance/compound-components/assets/asset_${symbol === 'WBTC' ? 'BTC' : symbol}.svg`;
+  `https://app.compound.finance/compound-components/assets/asset_${
+    symbol === 'WBTC' ? 'BTC' : symbol
+  }.svg`
 
-const filterTokens = (token: cToken) => !EXCLUDE_TOKENS.includes(token.symbol);
-const orderTokensBySymbol = (a: cToken, b: cToken) => ('' + a.underlying_symbol).localeCompare(b.underlying_symbol);
+const filterTokens = (token: cToken) => !EXCLUDE_TOKENS.includes(token.symbol)
+const orderTokensBySymbol = (a: cToken, b: cToken) =>
+  ('' + a.underlying_symbol).localeCompare(b.underlying_symbol)
 const transformFromCompoundResponse = (token: cToken, chainId: number): TokenItem => {
   return {
     id: token.underlying_symbol,
     label: token.underlying_symbol,
     iconUrl: getSymbolIconUrl(token.underlying_symbol),
     decimals: token.cash.value.split('.')[1].length,
-    tokenAddr: token.underlying_symbol === 'ETH' ? ETH_UNDERLYING_ADDRESS[chainId] : token.underlying_address,
+    tokenAddr:
+      token.underlying_symbol === 'ETH'
+        ? ETH_UNDERLYING_ADDRESS[chainId]
+        : token.underlying_address,
     cTokenAddr: token.token_address,
-  };
-};
+  }
+}
 
 export const getTokenList = async (chainId: number): Promise<TokenItem[]> => {
   if (chainId !== CHAINS.RINKEBY && chainId !== CHAINS.MAINNET) {
-    throw Error(`Not supported Chain id ${chainId}`);
+    throw Error(`Not supported Chain id ${chainId}`)
   }
 
   if (chainId === CHAINS.RINKEBY) {
-    return STATIC_CONFIG;
+    return STATIC_CONFIG
   }
 
-  const cToken = await getMarkets();
+  const cToken = await getMarkets()
 
   return cToken
     .filter(filterTokens)
     .sort(orderTokensBySymbol)
     .reduce((tokenItems: TokenItem[], cToken: cToken): TokenItem[] => {
       if (cToken?.cash?.value?.split('.')?.[1]?.length) {
-        const transformedToken = transformFromCompoundResponse(cToken, chainId);
-        return [...tokenItems, transformedToken];
+        const transformedToken = transformFromCompoundResponse(cToken, chainId)
+        return [...tokenItems, transformedToken]
       }
 
-      return tokenItems;
-    }, []);
-};
+      return tokenItems
+    }, [])
+}
diff --git a/apps/compound/src/global.ts b/apps/compound/src/global.ts
index 5f88cf7ae..7d9558ea3 100644
--- a/apps/compound/src/global.ts
+++ b/apps/compound/src/global.ts
@@ -1,6 +1,6 @@
-import { createGlobalStyle } from "styled-components";
-import avertaFont from "@gnosis.pm/safe-react-components/dist/fonts/averta-normal.woff2";
-import avertaBoldFont from "@gnosis.pm/safe-react-components/dist/fonts/averta-bold.woff2";
+import { createGlobalStyle } from 'styled-components'
+import avertaFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-normal.woff2'
+import avertaBoldFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-bold.woff2'
 
 const GlobalStyle = createGlobalStyle`
     html {
@@ -23,6 +23,6 @@ const GlobalStyle = createGlobalStyle`
         url(${avertaFont}) format('woff2'),
         url(${avertaBoldFont}) format('woff');
     }
-`;
+`
 
-export default GlobalStyle;
+export default GlobalStyle
diff --git a/apps/compound/src/hooks/useCToken.ts b/apps/compound/src/hooks/useCToken.ts
index 695557c7e..f4445457d 100644
--- a/apps/compound/src/hooks/useCToken.ts
+++ b/apps/compound/src/hooks/useCToken.ts
@@ -1,32 +1,32 @@
-import { useEffect, useState } from 'react';
-import { AbiItem } from 'web3-utils';
-import { Contract } from 'web3-eth-contract';
-import CErc20ABI from '../abis/CErc20';
-import CWethABI from '../abis/CWEth';
-import { TokenItem } from '../config';
-import useWeb3 from './useWeb3';
+import { useEffect, useState } from 'react'
+import { AbiItem } from 'web3-utils'
+import { Contract } from 'web3-eth-contract'
+import CErc20ABI from '../abis/CErc20'
+import CWethABI from '../abis/CWEth'
+import { TokenItem } from '../config'
+import useWeb3 from './useWeb3'
 
 export default function useCToken(selectedToken: TokenItem | undefined) {
-  const { web3 } = useWeb3();
-  const [cTokenInstance, setCTokenInstance] = useState<Contract>();
-  const [tokenInstance, setTokenInstance] = useState<Contract>();
+  const { web3 } = useWeb3()
+  const [cTokenInstance, setCTokenInstance] = useState<Contract>()
+  const [tokenInstance, setTokenInstance] = useState<Contract>()
 
   useEffect(() => {
     if (!selectedToken || !web3) {
-      return;
+      return
     }
 
-    setTokenInstance(new web3.eth.Contract(CErc20ABI as AbiItem[], selectedToken.tokenAddr));
+    setTokenInstance(new web3.eth.Contract(CErc20ABI as AbiItem[], selectedToken.tokenAddr))
 
     if (selectedToken.id === 'ETH') {
-      setCTokenInstance(new web3.eth.Contract(CWethABI as AbiItem[], selectedToken.cTokenAddr));
+      setCTokenInstance(new web3.eth.Contract(CWethABI as AbiItem[], selectedToken.cTokenAddr))
     } else {
-      setCTokenInstance(new web3.eth.Contract(CErc20ABI as AbiItem[], selectedToken.cTokenAddr));
+      setCTokenInstance(new web3.eth.Contract(CErc20ABI as AbiItem[], selectedToken.cTokenAddr))
     }
-  }, [selectedToken, web3]);
+  }, [selectedToken, web3])
 
   return {
     cTokenInstance,
     tokenInstance,
-  };
+  }
 }
diff --git a/apps/compound/src/hooks/useComp.ts b/apps/compound/src/hooks/useComp.ts
index 2bfc29efa..a18096422 100644
--- a/apps/compound/src/hooks/useComp.ts
+++ b/apps/compound/src/hooks/useComp.ts
@@ -1,127 +1,147 @@
-import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk';
-import { useCallback, useEffect, useState } from 'react';
-import { AbiItem } from 'web3-utils';
-import { Contract } from 'web3-eth-contract';
-import ComptrollerABI from '../abis/Comptroller';
-import { TokenItem } from '../config';
-import useCToken from './useCToken';
-import usePriceFeed from './useOpenPriceFeed';
-import useWeb3 from './useWeb3';
-import CompoundLensABI from '../abis/CompoundLens';
-import { getMarketAddressesForSafeAccount } from '../http/compoundApi';
-
-const COMPOUND_LENS_ADDRESS = '0xdCbDb7306c6Ff46f77B349188dC18cEd9DF30299';
+import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk'
+import { useCallback, useEffect, useState } from 'react'
+import { AbiItem } from 'web3-utils'
+import { Contract } from 'web3-eth-contract'
+import ComptrollerABI from '../abis/Comptroller'
+import { TokenItem } from '../config'
+import useCToken from './useCToken'
+import usePriceFeed from './useOpenPriceFeed'
+import useWeb3 from './useWeb3'
+import CompoundLensABI from '../abis/CompoundLens'
+import { getMarketAddressesForSafeAccount } from '../http/compoundApi'
+
+const COMPOUND_LENS_ADDRESS = '0xdCbDb7306c6Ff46f77B349188dC18cEd9DF30299'
 
 export default function useComp(selectedToken: TokenItem | undefined) {
-  const { sdk, safe } = useSafeAppsSDK();
-  const { web3 } = useWeb3();
-  const [comptrollerInstance, setComptrollerInstance] = useState<Contract>();
-  const [compoundLensInstance, setCompoundLensInstance] = useState<Contract>();
-  const [claimableComp, setClaimableComp] = useState<number>();
-  const [comptrollerAddress, setComptrollerAddress] = useState<string>();
-  const [cTokenSupplyAPY, setCTokenSupplyAPY] = useState<string>();
-  const [cDistributionTokenSupplyAPY, setCDistributionTokenSupplyAPY] = useState<string>();
-  const { opfInstance } = usePriceFeed();
-  const { cTokenInstance, tokenInstance } = useCToken(selectedToken);
+  const { sdk, safe } = useSafeAppsSDK()
+  const { web3 } = useWeb3()
+  const [comptrollerInstance, setComptrollerInstance] = useState<Contract>()
+  const [compoundLensInstance, setCompoundLensInstance] = useState<Contract>()
+  const [claimableComp, setClaimableComp] = useState<number>()
+  const [comptrollerAddress, setComptrollerAddress] = useState<string>()
+  const [cTokenSupplyAPY, setCTokenSupplyAPY] = useState<string>()
+  const [cDistributionTokenSupplyAPY, setCDistributionTokenSupplyAPY] = useState<string>()
+  const { opfInstance } = usePriceFeed()
+  const { cTokenInstance, tokenInstance } = useCToken(selectedToken)
 
   useEffect(() => {
-    (async () => {
-      const address = await cTokenInstance?.methods.comptroller().call();
-      setComptrollerAddress(address);
-    })();
-  }, [cTokenInstance, selectedToken, web3]);
+    ;(async () => {
+      const address = await cTokenInstance?.methods.comptroller().call()
+      setComptrollerAddress(address)
+    })()
+  }, [cTokenInstance, selectedToken, web3])
 
   useEffect(() => {
     if (!web3 || !comptrollerAddress) {
-      return;
+      return
     }
 
-    setComptrollerInstance(new web3.eth.Contract(ComptrollerABI as AbiItem[], comptrollerAddress));
-    setCompoundLensInstance(new web3.eth.Contract(CompoundLensABI as AbiItem[], COMPOUND_LENS_ADDRESS));
-  }, [web3, comptrollerAddress]);
+    setComptrollerInstance(new web3.eth.Contract(ComptrollerABI as AbiItem[], comptrollerAddress))
+    setCompoundLensInstance(
+      new web3.eth.Contract(CompoundLensABI as AbiItem[], COMPOUND_LENS_ADDRESS),
+    )
+  }, [web3, comptrollerAddress])
 
   useEffect(() => {
     // Using getCompBalanceMetadataExt for get the COMP value allowed to collect
     // https://gist.github.com/ajb413/f1cf80c988ed679092cff4e4b01e3d94
 
     if (!comptrollerInstance) {
-      return;
+      return
     }
 
-    (async () => {
+    ;(async () => {
       try {
-        const compAddress = await comptrollerInstance?.methods?.getCompAddress().call();
+        const compAddress = await comptrollerInstance?.methods?.getCompAddress().call()
         const accrued = await compoundLensInstance?.methods
           ?.getCompBalanceMetadataExt(compAddress, comptrollerAddress, safe?.safeAddress)
-          .call();
-        setClaimableComp(accrued?.allocated / 10 ** 18);
+          .call()
+        setClaimableComp(accrued?.allocated / 10 ** 18)
       } catch (e) {
-        console.error(e);
+        console.error(e)
       }
-    })();
-  }, [compoundLensInstance, comptrollerInstance, comptrollerAddress, safe]);
+    })()
+  }, [compoundLensInstance, comptrollerInstance, comptrollerAddress, safe])
 
   useEffect(() => {
     // Calculate APYs
     // https://gist.github.com/ajb413/d32442edae9251ad395436d5b80d4480
 
-    if (!cTokenInstance || !comptrollerInstance || !opfInstance || !selectedToken || !tokenInstance) {
-      return;
+    if (
+      !cTokenInstance ||
+      !comptrollerInstance ||
+      !opfInstance ||
+      !selectedToken ||
+      !tokenInstance
+    ) {
+      return
     }
 
     // wait until cToken is correctly updated
-    if (selectedToken.cTokenAddr.toLocaleLowerCase() !== cTokenInstance?.['_address'].toLocaleLowerCase()) {
-      return;
+    if (
+      selectedToken.cTokenAddr.toLocaleLowerCase() !==
+      cTokenInstance?.['_address'].toLocaleLowerCase()
+    ) {
+      return
     }
 
     // wait until token is correctly updated
-    if (selectedToken.tokenAddr.toLocaleLowerCase() !== tokenInstance?.['_address'].toLocaleLowerCase()) {
-      return;
+    if (
+      selectedToken.tokenAddr.toLocaleLowerCase() !==
+      tokenInstance?.['_address'].toLocaleLowerCase()
+    ) {
+      return
     }
 
-    const ethMantissa = 1e18;
-    const blocksPerDay = 6570; // 13.15 seconds per block
-    const daysPerYear = 365;
+    const ethMantissa = 1e18
+    const blocksPerDay = 6570 // 13.15 seconds per block
+    const daysPerYear = 365
 
     // Calculate Supply APY
-    (async () => {
-      const supplyRatePerBlock = await cTokenInstance.methods.supplyRatePerBlock().call();
-      const supplyApy = (Math.pow((supplyRatePerBlock / ethMantissa) * blocksPerDay + 1, daysPerYear) - 1) * 100;
-      setCTokenSupplyAPY((Math.round(supplyApy * 100) / 100).toString());
-    })();
+    ;(async () => {
+      const supplyRatePerBlock = await cTokenInstance.methods.supplyRatePerBlock().call()
+      const supplyApy =
+        (Math.pow((supplyRatePerBlock / ethMantissa) * blocksPerDay + 1, daysPerYear) - 1) * 100
+      setCTokenSupplyAPY((Math.round(supplyApy * 100) / 100).toString())
+    })()
 
     // Calculate Distribution APY
-    (async () => {
-      let compSpeedSupply = await comptrollerInstance?.methods?.compSupplySpeeds(selectedToken.cTokenAddr).call();
-      let compPrice = await opfInstance?.methods?.price('COMP').call();
-      let assetPrice = await opfInstance?.methods?.price(selectedToken.id === 'WBTC' ? 'BTC' : selectedToken.id).call();
-      let totalSupply = await cTokenInstance?.methods?.totalSupply().call();
-      let exchangeRate = await cTokenInstance?.methods?.exchangeRateCurrent().call();
+    ;(async () => {
+      let compSpeedSupply = await comptrollerInstance?.methods
+        ?.compSupplySpeeds(selectedToken.cTokenAddr)
+        .call()
+      let compPrice = await opfInstance?.methods?.price('COMP').call()
+      let assetPrice = await opfInstance?.methods
+        ?.price(selectedToken.id === 'WBTC' ? 'BTC' : selectedToken.id)
+        .call()
+      let totalSupply = await cTokenInstance?.methods?.totalSupply().call()
+      let exchangeRate = await cTokenInstance?.methods?.exchangeRateCurrent().call()
 
       // Total supply needs to be converted from cTokens
-      const apxBlockSpeedInSeconds = 13.15;
-      exchangeRate = +exchangeRate.toString() / Math.pow(10, selectedToken.decimals);
+      const apxBlockSpeedInSeconds = 13.15
+      exchangeRate = +exchangeRate.toString() / Math.pow(10, selectedToken.decimals)
 
-      compSpeedSupply = compSpeedSupply / 1e18; // COMP has 18 decimal places
-      compPrice = compPrice / 1e6; // price feed is USD price with 6 decimal places
-      assetPrice = assetPrice / 1e6;
-      totalSupply = (+totalSupply.toString() * exchangeRate) / Math.pow(10, 18);
+      compSpeedSupply = compSpeedSupply / 1e18 // COMP has 18 decimal places
+      compPrice = compPrice / 1e6 // price feed is USD price with 6 decimal places
+      assetPrice = assetPrice / 1e6
+      totalSupply = (+totalSupply.toString() * exchangeRate) / Math.pow(10, 18)
 
-      const compPerDaySupply = compSpeedSupply * ((60 * 60 * 24) / apxBlockSpeedInSeconds);
+      const compPerDaySupply = compSpeedSupply * ((60 * 60 * 24) / apxBlockSpeedInSeconds)
 
-      const compSupplyApy = 100 * (Math.pow(1 + (compPrice * compPerDaySupply) / (totalSupply * assetPrice), 365) - 1);
+      const compSupplyApy =
+        100 * (Math.pow(1 + (compPrice * compPerDaySupply) / (totalSupply * assetPrice), 365) - 1)
 
-      setCDistributionTokenSupplyAPY((Math.round(compSupplyApy * 100) / 100).toString());
-    })();
-  }, [cTokenInstance, comptrollerInstance, opfInstance, selectedToken, tokenInstance]);
+      setCDistributionTokenSupplyAPY((Math.round(compSupplyApy * 100) / 100).toString())
+    })()
+  }, [cTokenInstance, comptrollerInstance, opfInstance, selectedToken, tokenInstance])
 
   const claimComp = useCallback(async () => {
     if (!comptrollerAddress) {
-      return;
+      return
     }
 
     // Get all the cToken addresses the safe account is using
-    const allMarkets: string[] = await getMarketAddressesForSafeAccount(safe.safeAddress);
+    const allMarkets: string[] = await getMarketAddressesForSafeAccount(safe.safeAddress)
 
     if (allMarkets.length) {
       const txs = [
@@ -130,15 +150,15 @@ export default function useComp(selectedToken: TokenItem | undefined) {
           value: '0',
           data: comptrollerInstance?.methods.claimComp(safe?.safeAddress, allMarkets).encodeABI(),
         },
-      ];
+      ]
 
       try {
-        await sdk.txs.send({ txs });
+        await sdk.txs.send({ txs })
       } catch {
-        console.error('Collect COMP: Transaction rejected or failed');
+        console.error('Collect COMP: Transaction rejected or failed')
       }
     }
-  }, [comptrollerAddress, comptrollerInstance, safe, sdk]);
+  }, [comptrollerAddress, comptrollerInstance, safe, sdk])
 
   return {
     comptrollerInstance,
@@ -146,5 +166,5 @@ export default function useComp(selectedToken: TokenItem | undefined) {
     claimComp,
     cTokenSupplyAPY,
     cDistributionTokenSupplyAPY,
-  };
+  }
 }
diff --git a/apps/compound/src/hooks/useOpenPriceFeed.ts b/apps/compound/src/hooks/useOpenPriceFeed.ts
index 86e6ad539..d885f8d8d 100644
--- a/apps/compound/src/hooks/useOpenPriceFeed.ts
+++ b/apps/compound/src/hooks/useOpenPriceFeed.ts
@@ -1,30 +1,35 @@
 // https://compound.finance/docs/prices
-import { useEffect, useState } from 'react';
-import { AbiItem } from 'web3-utils';
-import { Contract } from 'web3-eth-contract';
-import useWeb3 from './useWeb3';
-import UniSwapAnchoredViewABI from '../abis/UniSwapAnchoredViewABI';
-import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk';
+import { useEffect, useState } from 'react'
+import { AbiItem } from 'web3-utils'
+import { Contract } from 'web3-eth-contract'
+import useWeb3 from './useWeb3'
+import UniSwapAnchoredViewABI from '../abis/UniSwapAnchoredViewABI'
+import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk'
 
 export default function useOpenPriceFeed() {
-  const { safe } = useSafeAppsSDK();
-  const [opfInstance, setOpfInstance] = useState<Contract>();
-  const { web3 } = useWeb3();
+  const { safe } = useSafeAppsSDK()
+  const [opfInstance, setOpfInstance] = useState<Contract>()
+  const { web3 } = useWeb3()
 
   useEffect(() => {
     if (!web3 || !safe) {
-      return;
+      return
     }
 
-    setOpfInstance(new web3.eth.Contract(UniSwapAnchoredViewABI as AbiItem[], OPEN_PRICE_FEED_CONTRACT[safe.chainId]));
-  }, [web3, safe]);
+    setOpfInstance(
+      new web3.eth.Contract(
+        UniSwapAnchoredViewABI as AbiItem[],
+        OPEN_PRICE_FEED_CONTRACT[safe.chainId],
+      ),
+    )
+  }, [web3, safe])
 
   return {
     opfInstance,
-  };
+  }
 }
 
 const OPEN_PRICE_FEED_CONTRACT: { [key: number]: string } = {
   1: '0x046728da7cb8272284238bd3e47909823d63a58d',
   4: '0x01f590Fc7399A71BbD4cF15538FF82b2133AEbb6',
-};
+}
diff --git a/apps/compound/src/hooks/useWeb3.ts b/apps/compound/src/hooks/useWeb3.ts
index c54ce99b4..7b655fbbb 100644
--- a/apps/compound/src/hooks/useWeb3.ts
+++ b/apps/compound/src/hooks/useWeb3.ts
@@ -1,42 +1,42 @@
-import { useEffect, useState } from 'react';
-import Web3 from 'web3';
-import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk';
+import { useEffect, useState } from 'react'
+import Web3 from 'web3'
+import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk'
 
 function useWeb3(): { web3: Web3 | undefined } {
-  const [web3, setWeb3] = useState<Web3 | undefined>();
+  const [web3, setWeb3] = useState<Web3 | undefined>()
 
-  const { sdk } = useSafeAppsSDK();
+  const { sdk } = useSafeAppsSDK()
 
   useEffect(() => {
     const setWeb3Instance = async () => {
-      const chainInfo = await sdk.safe.getChainInfo();
+      const chainInfo = await sdk.safe.getChainInfo()
 
       if (!chainInfo) {
-        return;
+        return
       }
 
-      const rpcUrlGetter = rpcUrlGetterByNetwork[chainInfo.chainId as CHAINS];
+      const rpcUrlGetter = rpcUrlGetterByNetwork[chainInfo.chainId as CHAINS]
 
       if (!rpcUrlGetter) {
-        throw Error(`RPC URL not defined for ${chainInfo.chainName} chain`);
+        throw Error(`RPC URL not defined for ${chainInfo.chainName} chain`)
       }
 
-      const rpcUrl = rpcUrlGetter(process.env.REACT_APP_RPC_TOKEN);
+      const rpcUrl = rpcUrlGetter(process.env.REACT_APP_RPC_TOKEN)
 
-      const web3Instance = new Web3(rpcUrl);
+      const web3Instance = new Web3(rpcUrl)
 
-      setWeb3(web3Instance);
-    };
+      setWeb3(web3Instance)
+    }
 
-    setWeb3Instance();
-  }, [sdk.safe]);
+    setWeb3Instance()
+  }, [sdk.safe])
 
   return {
     web3,
-  };
+  }
 }
 
-export default useWeb3;
+export default useWeb3
 
 export enum CHAINS {
   MAINNET = '1',
@@ -44,8 +44,8 @@ export enum CHAINS {
 }
 
 export const rpcUrlGetterByNetwork: {
-  [key in CHAINS]: null | ((token?: string) => string);
+  [key in CHAINS]: null | ((token?: string) => string)
 } = {
-  [CHAINS.MAINNET]: (token) => `https://mainnet.infura.io/v3/${token}`,
-  [CHAINS.RINKEBY]: (token) => `https://rinkeby.infura.io/v3/${token}`,
-};
+  [CHAINS.MAINNET]: token => `https://mainnet.infura.io/v3/${token}`,
+  [CHAINS.RINKEBY]: token => `https://rinkeby.infura.io/v3/${token}`,
+}
diff --git a/apps/compound/src/http/compoundApi.ts b/apps/compound/src/http/compoundApi.ts
index 7ef7f47a8..61bbfa9b4 100644
--- a/apps/compound/src/http/compoundApi.ts
+++ b/apps/compound/src/http/compoundApi.ts
@@ -1,33 +1,35 @@
-const COMPOUND_API_BASE_URL = 'https://api.compound.finance/api/v2/';
+const COMPOUND_API_BASE_URL = 'https://api.compound.finance/api/v2/'
 
 export type cToken = {
-  symbol: string;
-  token_address: string;
-  underlying_symbol: string;
-  underlying_address: string;
+  symbol: string
+  token_address: string
+  underlying_symbol: string
+  underlying_address: string
   cash: {
-    value: string;
-  };
-};
+    value: string
+  }
+}
 
 export async function getMarketAddressesForSafeAccount(safeAddress: string): Promise<string[]> {
   try {
-    const response = await fetch(`${COMPOUND_API_BASE_URL}/governance/comp/account?address=${safeAddress}`);
-    const { markets } = await response.json();
-    return markets.map(({ address }: { address: string }): string => address);
+    const response = await fetch(
+      `${COMPOUND_API_BASE_URL}/governance/comp/account?address=${safeAddress}`,
+    )
+    const { markets } = await response.json()
+    return markets.map(({ address }: { address: string }): string => address)
   } catch (error) {
-    console.error(error);
-    return [];
+    console.error(error)
+    return []
   }
 }
 
 export async function getMarkets(): Promise<cToken[]> {
   try {
-    const response = await fetch(`${COMPOUND_API_BASE_URL}/ctoken`);
-    const { cToken } = await response.json();
-    return cToken;
+    const response = await fetch(`${COMPOUND_API_BASE_URL}/ctoken`)
+    const { cToken } = await response.json()
+    return cToken
   } catch (error) {
-    console.error(error);
-    return [];
+    console.error(error)
+    return []
   }
 }
diff --git a/apps/compound/src/index.tsx b/apps/compound/src/index.tsx
index a93fc6298..9d19919c7 100644
--- a/apps/compound/src/index.tsx
+++ b/apps/compound/src/index.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { SafeProvider } from '@gnosis.pm/safe-apps-react-sdk';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { SafeProvider } from '@gnosis.pm/safe-apps-react-sdk'
 
-import GlobalStyles from './global';
-import * as serviceWorker from './serviceWorker';
-import App from './App';
-import { ThemeProvider } from 'styled-components';
-import { Loader, theme, Title } from '@gnosis.pm/safe-react-components';
+import GlobalStyles from './global'
+import * as serviceWorker from './serviceWorker'
+import App from './App'
+import { ThemeProvider } from 'styled-components'
+import { Loader, theme, Title } from '@gnosis.pm/safe-react-components'
 
 ReactDOM.render(
   <React.StrictMode>
@@ -25,9 +25,9 @@ ReactDOM.render(
     </ThemeProvider>
   </React.StrictMode>,
   document.getElementById('root'),
-);
+)
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.unregister()
diff --git a/apps/compound/src/serviceWorker.ts b/apps/compound/src/serviceWorker.ts
index d5f0275a7..018ffc4f7 100644
--- a/apps/compound/src/serviceWorker.ts
+++ b/apps/compound/src/serviceWorker.ts
@@ -15,50 +15,45 @@ const isLocalhost = Boolean(
     // [::1] is the IPv6 localhost address.
     window.location.hostname === '[::1]' ||
     // 127.0.0.0/8 are considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
-);
+    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/),
+)
 
 type Config = {
-  onSuccess?: (registration: ServiceWorkerRegistration) => void;
-  onUpdate?: (registration: ServiceWorkerRegistration) => void;
-};
+  onSuccess?: (registration: ServiceWorkerRegistration) => void
+  onUpdate?: (registration: ServiceWorkerRegistration) => void
+}
 
 export function register(config?: Config) {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(
-      process.env.PUBLIC_URL,
-      window.location.href
-    );
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href)
     if (publicUrl.origin !== window.location.origin) {
       // Our service worker won't work if PUBLIC_URL is on a different origin
       // from what our page is served on. This might happen if a CDN is used to
       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-      return;
+      return
     }
 
     window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
 
       if (isLocalhost) {
         // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl, config);
+        checkValidServiceWorker(swUrl, config)
 
         // Add some additional logging to localhost, pointing developers to the
         // service worker/PWA documentation.
         navigator.serviceWorker.ready.then(() => {
           console.log(
             'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://bit.ly/CRA-PWA'
-          );
-        });
+              'worker. To learn more, visit https://bit.ly/CRA-PWA',
+          )
+        })
       } else {
         // Is not localhost. Just register service worker
-        registerValidSW(swUrl, config);
+        registerValidSW(swUrl, config)
       }
-    });
+    })
   }
 }
 
@@ -67,9 +62,9 @@ function registerValidSW(swUrl: string, config?: Config) {
     .register(swUrl)
     .then(registration => {
       registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
+        const installingWorker = registration.installing
         if (installingWorker == null) {
-          return;
+          return
         }
         installingWorker.onstatechange = () => {
           if (installingWorker.state === 'installed') {
@@ -79,41 +74,41 @@ function registerValidSW(swUrl: string, config?: Config) {
               // content until all client tabs are closed.
               console.log(
                 'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
-              );
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.',
+              )
 
               // Execute callback
               if (config && config.onUpdate) {
-                config.onUpdate(registration);
+                config.onUpdate(registration)
               }
             } else {
               // At this point, everything has been precached.
               // It's the perfect time to display a
               // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
+              console.log('Content is cached for offline use.')
 
               // Execute callback
               if (config && config.onSuccess) {
-                config.onSuccess(registration);
+                config.onSuccess(registration)
               }
             }
           }
-        };
-      };
+        }
+      }
     })
     .catch(error => {
-      console.error('Error during service worker registration:', error);
-    });
+      console.error('Error during service worker registration:', error)
+    })
 }
 
 function checkValidServiceWorker(swUrl: string, config?: Config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl, {
-    headers: { 'Service-Worker': 'script' }
+    headers: { 'Service-Worker': 'script' },
   })
     .then(response => {
       // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get('content-type');
+      const contentType = response.headers.get('content-type')
       if (
         response.status === 404 ||
         (contentType != null && contentType.indexOf('javascript') === -1)
@@ -121,25 +116,23 @@ function checkValidServiceWorker(swUrl: string, config?: Config) {
         // No service worker found. Probably a different app. Reload the page.
         navigator.serviceWorker.ready.then(registration => {
           registration.unregister().then(() => {
-            window.location.reload();
-          });
-        });
+            window.location.reload()
+          })
+        })
       } else {
         // Service worker found. Proceed as normal.
-        registerValidSW(swUrl, config);
+        registerValidSW(swUrl, config)
       }
     })
     .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
-    });
+      console.log('No internet connection found. App is running in offline mode.')
+    })
 }
 
 export function unregister() {
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.ready.then(registration => {
-      registration.unregister();
-    });
+      registration.unregister()
+    })
   }
 }
diff --git a/apps/compound/src/setupTests.ts b/apps/compound/src/setupTests.ts
index 74b1a275a..2eb59b05d 100644
--- a/apps/compound/src/setupTests.ts
+++ b/apps/compound/src/setupTests.ts
@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom/extend-expect'
diff --git a/apps/compound/src/styles.tsx b/apps/compound/src/styles.tsx
index 347745e2c..0abc57b21 100644
--- a/apps/compound/src/styles.tsx
+++ b/apps/compound/src/styles.tsx
@@ -1,5 +1,5 @@
-import { TextField, Title } from '@gnosis.pm/safe-react-components';
-import styled from 'styled-components';
+import { TextField, Title } from '@gnosis.pm/safe-react-components'
+import styled from 'styled-components'
 
 export const SelectContainer = styled.div`
   display: flex;
@@ -11,7 +11,7 @@ export const SelectContainer = styled.div`
   *:first-child {
     margin-right: 5px;
   }
-`;
+`
 
 export const InfoContainer = styled.div`
   margin-top: 20px;
@@ -19,7 +19,7 @@ export const InfoContainer = styled.div`
   flex-direction: column;
   align-items: left;
   width: 100%;
-`;
+`
 
 export const ButtonContainer = styled.div`
   display: flex;
@@ -29,17 +29,17 @@ export const ButtonContainer = styled.div`
   button:not(:first-child) {
     margin-left: 10px;
   }
-`;
+`
 
 export const StyledTextField = styled(TextField)`
   &.MuiTextField-root {
     width: 100%;
   }
-`;
+`
 
 export const StyledTitle = styled(Title)`
   margin-top: 0;
-`;
+`
 
 export const LoaderContainer = styled.div`
   display: flex;
@@ -48,4 +48,4 @@ export const LoaderContainer = styled.div`
   justify-content: center;
   width: calc(100vw - 50px);
   height: calc(100vh);
-`;
+`
diff --git a/apps/compound/src/tokens.ts b/apps/compound/src/tokens.ts
index d16437392..9d2e60055 100644
--- a/apps/compound/src/tokens.ts
+++ b/apps/compound/src/tokens.ts
@@ -9,7 +9,7 @@ const TOKENS = {
   cUSDC: '0x5B281A6DdA0B271e91ae35DE655Ad301C976edb1',
   ZRX: '0xddea378A6dDC8AfeC82C36E9b0078826bf9e68B6',
   cZRX: '0x52201ff1720134bBbBB2f6BC97Bf3715490EC19B',
-};
+}
 
 const STATIC_CONFIG = [
   {
@@ -52,6 +52,6 @@ const STATIC_CONFIG = [
     tokenAddr: TOKENS.ZRX,
     cTokenAddr: TOKENS.cZRX,
   },
-];
+]
 
-export default STATIC_CONFIG;
+export default STATIC_CONFIG
diff --git a/apps/compound/src/tokensTransfers.ts b/apps/compound/src/tokensTransfers.ts
index 39b1737bb..f634e35e7 100644
--- a/apps/compound/src/tokensTransfers.ts
+++ b/apps/compound/src/tokensTransfers.ts
@@ -1,19 +1,19 @@
-import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
-import { CHAINS } from './utils/networks';
+import { ApolloClient, InMemoryCache, gql } from '@apollo/client'
+import { CHAINS } from './utils/networks'
 
 export type TokenInteractionData = {
-  amount: string;
-  destination: string;
-  sender?: string;
-};
+  amount: string
+  destination: string
+  sender?: string
+}
 
-const RINKEBY = 'https://api.thegraph.com/subgraphs/name/protofire/token-registry-rinkeby';
-const MAINNET = 'https://api.thegraph.com/subgraphs/name/protofire/token-registry';
+const RINKEBY = 'https://api.thegraph.com/subgraphs/name/protofire/token-registry-rinkeby'
+const MAINNET = 'https://api.thegraph.com/subgraphs/name/protofire/token-registry'
 
 const subgraphUri: { [key in CHAINS.MAINNET | CHAINS.RINKEBY]: string } = {
   [CHAINS.RINKEBY]: RINKEBY,
   [CHAINS.MAINNET]: MAINNET,
-};
+}
 
 const TRANSFER_EVENTS = gql`
   query TransferEvents($first: Int!, $skip: Int!, $token: String!, $addresses: [String!]!) {
@@ -27,7 +27,7 @@ const TRANSFER_EVENTS = gql`
       destination
     }
   }
-`;
+`
 
 async function getTransferEvents(
   client: any,
@@ -35,10 +35,10 @@ async function getTransferEvents(
   tokenAddr: string,
   cTokenAddr: string,
 ): Promise<Array<TokenInteractionData>> {
-  let ended = false;
-  let first = 100;
-  let skip = 0;
-  let transferEvents: Array<TokenInteractionData> = [];
+  let ended = false
+  let first = 100
+  let skip = 0
+  let transferEvents: Array<TokenInteractionData> = []
 
   while (!ended) {
     try {
@@ -50,20 +50,20 @@ async function getTransferEvents(
           token: tokenAddr.toLocaleLowerCase(),
           addresses: [cTokenAddr, safeAddress],
         },
-      });
-      skip += first;
+      })
+      skip += first
 
-      transferEvents = [...transferEvents, ...res.data.transferEvents];
+      transferEvents = [...transferEvents, ...res.data.transferEvents]
       if (res.data.transferEvents.length < first) {
-        ended = true;
+        ended = true
       }
     } catch (error) {
-      ended = true;
-      throw error;
+      ended = true
+      throw error
     }
   }
 
-  return transferEvents;
+  return transferEvents
 }
 
 const MINT_EVENTS = gql`
@@ -73,17 +73,17 @@ const MINT_EVENTS = gql`
       destination
     }
   }
-`;
+`
 
 async function getMintEvents(
   client: any,
   safeAddress: string,
   tokenAddr: string,
 ): Promise<Array<TokenInteractionData>> {
-  let ended = false;
-  let first = 100;
-  let skip = 0;
-  let mintEvents: Array<TokenInteractionData> = [];
+  let ended = false
+  let first = 100
+  let skip = 0
+  let mintEvents: Array<TokenInteractionData> = []
 
   while (!ended) {
     try {
@@ -95,20 +95,20 @@ async function getMintEvents(
           token: tokenAddr.toLocaleLowerCase(),
           safeAddress: safeAddress,
         },
-      });
-      skip += first;
+      })
+      skip += first
 
-      mintEvents = [...mintEvents, ...res.data.mintEvents];
+      mintEvents = [...mintEvents, ...res.data.mintEvents]
       if (res.data.mintEvents.length < first) {
-        ended = true;
+        ended = true
       }
     } catch (error) {
-      ended = true;
-      throw error;
+      ended = true
+      throw error
     }
   }
 
-  return mintEvents;
+  return mintEvents
 }
 
 export async function getTokenInteractions(
@@ -118,33 +118,33 @@ export async function getTokenInteractions(
   cTokenAddr: string,
 ) {
   if (chainId !== CHAINS.RINKEBY && chainId !== CHAINS.MAINNET) {
-    return [];
+    return []
   }
 
   const client = new ApolloClient({
     uri: subgraphUri[chainId],
-    cache: new InMemoryCache()
-  });
+    cache: new InMemoryCache(),
+  })
 
-  const mintEventsRes = await getMintEvents(client, safeAddress, tokenAddr);
-  const transferEventsRes = await getTransferEvents(client, safeAddress, tokenAddr, cTokenAddr);
-  return [...mintEventsRes, ...transferEventsRes];
+  const mintEventsRes = await getMintEvents(client, safeAddress, tokenAddr)
+  const transferEventsRes = await getTransferEvents(client, safeAddress, tokenAddr, cTokenAddr)
+  return [...mintEventsRes, ...transferEventsRes]
 }
 
 export function parseEvents(senderAddress: string, tokenEvents: Array<any>) {
-  let deposits = 0;
-  let withdrawals = 0;
+  let deposits = 0
+  let withdrawals = 0
 
-  tokenEvents.forEach((event) => {
-    const parsedAmount = Number(event.amount);
+  tokenEvents.forEach(event => {
+    const parsedAmount = Number(event.amount)
     if (!Number.isNaN(parsedAmount)) {
       event.sender && event.sender.toLowerCase() === senderAddress.toLowerCase()
         ? (deposits += parsedAmount)
-        : (withdrawals += parsedAmount);
+        : (withdrawals += parsedAmount)
     }
-  });
+  })
   return {
     deposits,
     withdrawals,
-  };
+  }
 }
diff --git a/apps/compound/src/typings/custom.d.ts b/apps/compound/src/typings/custom.d.ts
index 16ef5c298..2e323377f 100644
--- a/apps/compound/src/typings/custom.d.ts
+++ b/apps/compound/src/typings/custom.d.ts
@@ -1,4 +1,4 @@
 declare module '*.svg' {
-    const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-    export default content;
-  }
\ No newline at end of file
+  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>
+  export default content
+}
diff --git a/apps/compound/src/typings/ethers.d.ts b/apps/compound/src/typings/ethers.d.ts
index 6aba0d9c4..5f3c567d8 100644
--- a/apps/compound/src/typings/ethers.d.ts
+++ b/apps/compound/src/typings/ethers.d.ts
@@ -1 +1 @@
-declare module 'ethers/utils';
\ No newline at end of file
+declare module 'ethers/utils'
diff --git a/apps/compound/src/typings/fonts.d.ts b/apps/compound/src/typings/fonts.d.ts
index 7bbf68bbc..85a0dfc7e 100644
--- a/apps/compound/src/typings/fonts.d.ts
+++ b/apps/compound/src/typings/fonts.d.ts
@@ -1,2 +1,2 @@
-declare module '*.woff';
-declare module '*.woff2';
+declare module '*.woff'
+declare module '*.woff2'
diff --git a/apps/compound/src/utils/networks.ts b/apps/compound/src/utils/networks.ts
index b519647e5..129bbcb7e 100644
--- a/apps/compound/src/utils/networks.ts
+++ b/apps/compound/src/utils/networks.ts
@@ -4,10 +4,10 @@ enum CHAINS {
 }
 
 const networkByChainId: {
-  [key in CHAINS]: string;
+  [key in CHAINS]: string
 } = {
   [CHAINS.MAINNET]: 'MAINNET',
   [CHAINS.RINKEBY]: 'RINKEBY',
-};
+}
 
-export { CHAINS, networkByChainId };
+export { CHAINS, networkByChainId }
diff --git a/apps/drain-safe/config-overrides.js b/apps/drain-safe/config-overrides.js
index cfe7814f0..f4ec1f4f0 100644
--- a/apps/drain-safe/config-overrides.js
+++ b/apps/drain-safe/config-overrides.js
@@ -1,8 +1,8 @@
-const webpack = require('webpack');
+const webpack = require('webpack')
 
 module.exports = {
   webpack: function (config, env) {
-    const fallback = config.resolve.fallback || {};
+    const fallback = config.resolve.fallback || {}
 
     // https://github.com/ChainSafe/web3.js#web3-and-create-react-app
     Object.assign(fallback, {
@@ -15,39 +15,39 @@ module.exports = {
       url: require.resolve('url'),
       // https://stackoverflow.com/questions/68707553/uncaught-referenceerror-buffer-is-not-defined
       buffer: require.resolve('buffer'),
-    });
+    })
 
-    config.resolve.fallback = fallback;
+    config.resolve.fallback = fallback
 
     config.plugins = (config.plugins || []).concat([
       new webpack.ProvidePlugin({
         process: 'process/browser',
         Buffer: ['buffer', 'Buffer'],
       }),
-    ]);
+    ])
 
     // https://github.com/facebook/create-react-app/issues/11924
-    config.ignoreWarnings = [/to parse source map/i];
+    config.ignoreWarnings = [/to parse source map/i]
 
-    return config;
+    return config
   },
   jest: function (config) {
-    return config;
+    return config
   },
   devServer: function (configFunction) {
     return function (proxy, allowedHost) {
-      const config = configFunction(proxy, allowedHost);
+      const config = configFunction(proxy, allowedHost)
 
       config.headers = {
         'Access-Control-Allow-Origin': '*',
         'Access-Control-Allow-Methods': 'GET',
         'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
-      };
+      }
 
-      return config;
-    };
+      return config
+    }
   },
   paths: function (paths) {
-    return paths;
+    return paths
   },
-};
+}
diff --git a/apps/drain-safe/src/GlobalStyle.ts b/apps/drain-safe/src/GlobalStyle.ts
index 05da37427..3c709691e 100644
--- a/apps/drain-safe/src/GlobalStyle.ts
+++ b/apps/drain-safe/src/GlobalStyle.ts
@@ -1,6 +1,6 @@
-import { createGlobalStyle } from 'styled-components';
-import avertaFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-normal.woff2';
-import avertaBoldFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-bold.woff2';
+import { createGlobalStyle } from 'styled-components'
+import avertaFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-normal.woff2'
+import avertaBoldFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-bold.woff2'
 
 const GlobalStyle = createGlobalStyle`
     html {
@@ -29,6 +29,6 @@ const GlobalStyle = createGlobalStyle`
         url(${avertaFont}) format('woff2'),
         url(${avertaBoldFont}) format('woff');
     }
-`;
+`
 
-export default GlobalStyle;
+export default GlobalStyle
diff --git a/apps/drain-safe/src/__tests__/App.test.js b/apps/drain-safe/src/__tests__/App.test.js
index 05fed3a3e..34d62578b 100644
--- a/apps/drain-safe/src/__tests__/App.test.js
+++ b/apps/drain-safe/src/__tests__/App.test.js
@@ -1,11 +1,11 @@
-import { screen, waitFor, fireEvent } from '@testing-library/react';
-import { within } from '@testing-library/dom';
-import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk';
-import { mockTxsRequest, mockInitialBalances, renderWithProviders } from '../utils/test-helpers';
-import App from '../components/App';
+import { screen, waitFor, fireEvent } from '@testing-library/react'
+import { within } from '@testing-library/dom'
+import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk'
+import { mockTxsRequest, mockInitialBalances, renderWithProviders } from '../utils/test-helpers'
+import App from '../components/App'
 
 jest.mock('@gnosis.pm/safe-apps-react-sdk', () => {
-  const originalModule = jest.requireActual('@gnosis.pm/safe-apps-react-sdk');
+  const originalModule = jest.requireActual('@gnosis.pm/safe-apps-react-sdk')
   const sdk = {
     sdk: {
       txs: { send: jest.fn().mockResolvedValue({ safeTxHash: 'safeTxHash' }) },
@@ -37,142 +37,146 @@ jest.mock('@gnosis.pm/safe-apps-react-sdk', () => {
       safeAddress: '0x57CB13cbef735FbDD65f5f2866638c546464E45F',
       chainId: 'chainId',
     },
-  };
+  }
 
   return {
     ...originalModule,
     useSafeAppsSDK: () => sdk,
-  };
-});
+  }
+})
 
 describe('<App />', () => {
   it('should render the tokens in the safe balance', async () => {
-    renderWithProviders(<App />);
+    renderWithProviders(<App />)
 
-    expect(await screen.findByText(/ether/i)).toBeInTheDocument();
-    expect(await screen.findByText(/0.949938510499549077/)).toBeInTheDocument();
-  });
+    expect(await screen.findByText(/ether/i)).toBeInTheDocument()
+    expect(await screen.findByText(/0.949938510499549077/)).toBeInTheDocument()
+  })
 
   it('should drain the safe when submit button is clicked', async () => {
-    renderWithProviders(<App />);
-    const { sdk } = useSafeAppsSDK();
+    renderWithProviders(<App />)
+    const { sdk } = useSafeAppsSDK()
 
-    await screen.findByText(/chainlink token/i);
-    fireEvent.change(screen.getByRole('textbox'), { target: { value: '0x301812eb4c89766875eFe61460f7a8bBC0CadB96' } });
-    fireEvent.click(screen.getByText(/transfer everything/i));
-    await waitFor(() => expect(sdk.txs.send).toHaveBeenCalledWith(mockTxsRequest));
-  });
+    await screen.findByText(/chainlink token/i)
+    fireEvent.change(screen.getByRole('textbox'), {
+      target: { value: '0x301812eb4c89766875eFe61460f7a8bBC0CadB96' },
+    })
+    fireEvent.click(screen.getByText(/transfer everything/i))
+    await waitFor(() => expect(sdk.txs.send).toHaveBeenCalledWith(mockTxsRequest))
+  })
 
   it('should drain the safe when submit button is clicked removing the tokens excluded by the user', async () => {
-    renderWithProviders(<App />);
-    const { sdk } = useSafeAppsSDK();
+    renderWithProviders(<App />)
+    const { sdk } = useSafeAppsSDK()
 
-    await screen.findByText(/chainlink token/i);
-    const checkboxes = await screen.findAllByRole('checkbox');
+    await screen.findByText(/chainlink token/i)
+    const checkboxes = await screen.findAllByRole('checkbox')
 
-    fireEvent.click(checkboxes[2]);
-    fireEvent.click(checkboxes[4]);
-    fireEvent.click(checkboxes[5]);
-    fireEvent.change(screen.getByRole('textbox'), { target: { value: '0x301812eb4c89766875eFe61460f7a8bBC0CadB96' } });
-    fireEvent.click(screen.getByText(/transfer 2 assets/i));
+    fireEvent.click(checkboxes[2])
+    fireEvent.click(checkboxes[4])
+    fireEvent.click(checkboxes[5])
+    fireEvent.change(screen.getByRole('textbox'), {
+      target: { value: '0x301812eb4c89766875eFe61460f7a8bBC0CadB96' },
+    })
+    fireEvent.click(screen.getByText(/transfer 2 assets/i))
 
     await waitFor(() =>
       expect(sdk.txs.send).toHaveBeenCalledWith({
         txs: [mockTxsRequest.txs[0], mockTxsRequest.txs[2]],
       }),
-    );
-  });
+    )
+  })
 
   it('should show an error if no recipient address is entered', async () => {
-    renderWithProviders(<App />);
+    renderWithProviders(<App />)
 
-    await screen.findByText(/chainLink token/i);
-    fireEvent.click(screen.getByText(/transfer everything/i));
+    await screen.findByText(/chainLink token/i)
+    fireEvent.click(screen.getByText(/transfer everything/i))
 
-    expect(await screen.findByText(/please enter a valid recipient address/i)).toBeInTheDocument();
-  });
+    expect(await screen.findByText(/please enter a valid recipient address/i)).toBeInTheDocument()
+  })
 
   it('should allow to order token by string prop', async () => {
-    renderWithProviders(<App />);
+    renderWithProviders(<App />)
 
-    await screen.findByText(/chainlink token/i);
-    const assetColumnHeaderElement = screen.getByText(/asset/i);
-    fireEvent.click(assetColumnHeaderElement);
+    await screen.findByText(/chainlink token/i)
+    const assetColumnHeaderElement = screen.getByText(/asset/i)
+    fireEvent.click(assetColumnHeaderElement)
 
     await waitFor(() => {
-      const tableRows = document.querySelectorAll('.MuiDataGrid-row');
-      expect(within(tableRows[4]).getByText(/chainlink token/i)).toBeDefined();
-      expect(within(tableRows[0]).getByText(/uniswap/i)).toBeDefined();
-    });
+      const tableRows = document.querySelectorAll('.MuiDataGrid-row')
+      expect(within(tableRows[4]).getByText(/chainlink token/i)).toBeDefined()
+      expect(within(tableRows[0]).getByText(/uniswap/i)).toBeDefined()
+    })
 
-    fireEvent.click(assetColumnHeaderElement);
+    fireEvent.click(assetColumnHeaderElement)
 
     await waitFor(() => {
-      const tableRows = document.querySelectorAll('.MuiDataGrid-row');
-      expect(within(tableRows[0]).getByText(/chainlink token/i)).toBeDefined();
-      expect(within(tableRows[4]).getByText(/uniswap/i)).toBeDefined();
-    });
-  });
+      const tableRows = document.querySelectorAll('.MuiDataGrid-row')
+      expect(within(tableRows[0]).getByText(/chainlink token/i)).toBeDefined()
+      expect(within(tableRows[4]).getByText(/uniswap/i)).toBeDefined()
+    })
+  })
 
   it('should allow to order token by numeric prop', async () => {
-    renderWithProviders(<App />);
+    renderWithProviders(<App />)
 
-    await screen.findByText(/chainLink token/i);
-    const amountColumnHeaderElement = screen.getByText(/amount/i);
-    fireEvent.click(amountColumnHeaderElement);
+    await screen.findByText(/chainLink token/i)
+    const amountColumnHeaderElement = screen.getByText(/amount/i)
+    fireEvent.click(amountColumnHeaderElement)
 
     await waitFor(() => {
-      const tableRows = document.querySelectorAll('.MuiDataGrid-row');
-      expect(within(tableRows[0]).getByText(/dai/i)).toBeDefined();
-      expect(within(tableRows[4]).getByText(/maker/i)).toBeDefined();
-    });
+      const tableRows = document.querySelectorAll('.MuiDataGrid-row')
+      expect(within(tableRows[0]).getByText(/dai/i)).toBeDefined()
+      expect(within(tableRows[4]).getByText(/maker/i)).toBeDefined()
+    })
 
-    fireEvent.click(amountColumnHeaderElement);
+    fireEvent.click(amountColumnHeaderElement)
 
     await waitFor(() => {
-      const tableRows = document.querySelectorAll('.MuiDataGrid-row');
-      expect(within(tableRows[4]).getByText(/dai/i)).toBeDefined();
-      expect(within(tableRows[0]).getByText(/maker/i)).toBeDefined();
-    });
-  });
+      const tableRows = document.querySelectorAll('.MuiDataGrid-row')
+      expect(within(tableRows[4]).getByText(/dai/i)).toBeDefined()
+      expect(within(tableRows[0]).getByText(/maker/i)).toBeDefined()
+    })
+  })
 
   it('Shows a Warning icon when token transfer cost is higher than its current market value ', async () => {
-    renderWithProviders(<App />);
+    renderWithProviders(<App />)
 
-    await screen.findByText(/maker/i);
+    await screen.findByText(/maker/i)
 
     const warningTooltip =
-      /Beware that the cost of this token transfer could be higher than its current market value \(Estimated transfer cost: /i;
+      /Beware that the cost of this token transfer could be higher than its current market value \(Estimated transfer cost: /i
 
     await waitFor(() => {
-      const tableRows = document.querySelectorAll('.MuiDataGrid-row');
+      const tableRows = document.querySelectorAll('.MuiDataGrid-row')
 
       // warning only should be present in Maker (MKR) row
-      const makerRow = tableRows[3];
-      expect(within(makerRow).getByText(/maker/i)).toBeDefined();
-      expect(within(makerRow).queryByTitle(warningTooltip)).toBeInTheDocument();
+      const makerRow = tableRows[3]
+      expect(within(makerRow).getByText(/maker/i)).toBeDefined()
+      expect(within(makerRow).queryByTitle(warningTooltip)).toBeInTheDocument()
 
       // warning should NOT be present in other rows
-      expect(within(tableRows[0]).queryByTitle(warningTooltip)).not.toBeInTheDocument();
-      expect(within(tableRows[1]).queryByTitle(warningTooltip)).not.toBeInTheDocument();
-      expect(within(tableRows[2]).queryByTitle(warningTooltip)).not.toBeInTheDocument();
-    });
-  });
+      expect(within(tableRows[0]).queryByTitle(warningTooltip)).not.toBeInTheDocument()
+      expect(within(tableRows[1]).queryByTitle(warningTooltip)).not.toBeInTheDocument()
+      expect(within(tableRows[2]).queryByTitle(warningTooltip)).not.toBeInTheDocument()
+    })
+  })
 
   it('Filter native token without value', async () => {
-    let balances = mockInitialBalances;
-    balances[0].fiatBalance = '0.00000';
-    const { sdk } = useSafeAppsSDK();
+    let balances = mockInitialBalances
+    balances[0].fiatBalance = '0.00000'
+    const { sdk } = useSafeAppsSDK()
     sdk.safe.experimental_getBalances = jest.fn().mockImplementationOnce(() =>
       Promise.resolve({
         items: balances,
       }),
-    );
+    )
 
-    renderWithProviders(<App />);
+    renderWithProviders(<App />)
 
-    await screen.findByText(/maker/i);
+    await screen.findByText(/maker/i)
 
-    expect(document.querySelectorAll('.MuiDataGrid-row').length).toEqual(4);
-  });
-});
+    expect(document.querySelectorAll('.MuiDataGrid-row').length).toEqual(4)
+  })
+})
diff --git a/apps/drain-safe/src/__tests__/sdk-helpers.test.js b/apps/drain-safe/src/__tests__/sdk-helpers.test.js
index e2c23b8df..07522e8da 100644
--- a/apps/drain-safe/src/__tests__/sdk-helpers.test.js
+++ b/apps/drain-safe/src/__tests__/sdk-helpers.test.js
@@ -1,27 +1,27 @@
-import { encodeTxData, tokenToTx } from '../utils/sdk-helpers';
-import erc20 from '../abis/erc20';
+import { encodeTxData, tokenToTx } from '../utils/sdk-helpers'
+import erc20 from '../abis/erc20'
 
 describe('Safe SDK helpers', () => {
   describe('encodeTxData', () => {
     it('encodes a simple transfer call', () => {
-      const data = encodeTxData(erc20.transfer, '0xb3b83bf204C458B461de9B0CD2739DB152b4fa5A', 1000);
+      const data = encodeTxData(erc20.transfer, '0xb3b83bf204C458B461de9B0CD2739DB152b4fa5A', 1000)
       expect(data).toEqual(
         '0xa9059cbb000000000000000000000000b3b83bf204c458b461de9b0cd2739db152b4fa5a00000000000000000000000000000000000000000000000000000000000003e8',
-      );
+      )
 
-      const data2 = encodeTxData(erc20.transfer, '0xb3b83bf204C458B461de9B0CD2739DB152b4fa5A', 1);
+      const data2 = encodeTxData(erc20.transfer, '0xb3b83bf204C458B461de9B0CD2739DB152b4fa5A', 1)
       expect(data2).toEqual(
         '0xa9059cbb000000000000000000000000b3b83bf204c458b461de9b0cd2739db152b4fa5a0000000000000000000000000000000000000000000000000000000000000001',
-      );
-    });
+      )
+    })
 
     it('fails on invalid address', () => {
-      const badAddress = '0xb3b83bf204C458B46';
+      const badAddress = '0xb3b83bf204C458B46'
       expect(() => encodeTxData(erc20.transfer, badAddress, 1000)).toThrow(
         `Given address "${badAddress}" is not a valid Ethereum address.`,
-      );
-    });
-  });
+      )
+    })
+  })
 
   describe('tokenToTx', () => {
     it('creats a tx for a ERC-20 token', () => {
@@ -30,20 +30,24 @@ describe('Safe SDK helpers', () => {
           decimals: 18,
           symbol: 'DAI',
           name: 'Dai',
-          logoUri: 'https://gnosis-safe-token-logos.s3.amazonaws.com/0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa.png',
+          logoUri:
+            'https://gnosis-safe-token-logos.s3.amazonaws.com/0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa.png',
+        },
+        tokenInfo: {
+          type: 'ERC20',
+          address: '0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa',
         },
-        tokenInfo: { type: 'ERC20', address: '0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa' },
         balance: '20000000000000000000000',
         fiatBalance: '136972.3434',
         fiatConversion: '6.8486',
-      });
+      })
 
       expect(tx).toEqual({
         to: '0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa',
         value: '0',
         data: '0xa9059cbb000000000000000000000000b3b83bf204c458b461de9b0cd2739db152b4fa5a00000000000000000000000000000000000000000000043c33c1937564800000',
-      });
-    });
+      })
+    })
 
     it('creats a tx for ETH', () => {
       const tx = tokenToTx('0xb3b83bf204C458B461de9B0CD2739DB152b4fa5A', {
@@ -52,13 +56,13 @@ describe('Safe SDK helpers', () => {
         fiatBalance: '4574.8946',
         fiatConversion: '2287.4473',
         tokenInfo: { type: 'NATIVE_TOKEN', address: null },
-      });
+      })
 
       expect(tx).toEqual({
         to: '0xb3b83bf204C458B461de9B0CD2739DB152b4fa5A',
         value: '2000000000000000000',
         data: '0x',
-      });
-    });
-  });
-});
+      })
+    })
+  })
+})
diff --git a/apps/drain-safe/src/abis/erc20.ts b/apps/drain-safe/src/abis/erc20.ts
index 7d0ae473b..2ddc37b1b 100644
--- a/apps/drain-safe/src/abis/erc20.ts
+++ b/apps/drain-safe/src/abis/erc20.ts
@@ -1,4 +1,4 @@
-import { AbiItem } from 'web3-utils';
+import { AbiItem } from 'web3-utils'
 
 const erc20: { [key: string]: AbiItem } = {
   transfer: {
@@ -24,6 +24,6 @@ const erc20: { [key: string]: AbiItem } = {
     stateMutability: 'nonpayable',
     type: 'function',
   },
-};
+}
 
-export default erc20;
+export default erc20
diff --git a/apps/drain-safe/src/components/AddressInput.tsx b/apps/drain-safe/src/components/AddressInput.tsx
index c133a9532..dd7f33306 100644
--- a/apps/drain-safe/src/components/AddressInput.tsx
+++ b/apps/drain-safe/src/components/AddressInput.tsx
@@ -1,5 +1,5 @@
-import styled from 'styled-components';
-import { AddressInput } from '@gnosis.pm/safe-react-components';
+import styled from 'styled-components'
+import { AddressInput } from '@gnosis.pm/safe-react-components'
 
 export default styled(AddressInput)`
   && {
@@ -14,4 +14,4 @@ export default styled(AddressInput)`
       color: #008c73;
     }
   }
-`;
+`
diff --git a/apps/drain-safe/src/components/App.tsx b/apps/drain-safe/src/components/App.tsx
index aafc99621..73f662322 100644
--- a/apps/drain-safe/src/components/App.tsx
+++ b/apps/drain-safe/src/components/App.tsx
@@ -1,133 +1,133 @@
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { Title, Text } from '@gnosis.pm/safe-react-components';
-import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk';
-import web3Utils from 'web3-utils';
-import { BigNumber } from 'bignumber.js';
-
-import useBalances, { BalancesType } from '../hooks/use-balances';
-import { tokenToTx } from '../utils/sdk-helpers';
-import FormContainer from './FormContainer';
-import Flex from './Flex';
-import Logo from './Logo';
-import Balances from './Balances';
-import SubmitButton from './SubmitButton';
-import CancelButton from './CancelButton';
-import AddressInput from './AddressInput';
-import useWeb3 from '../hooks/useWeb3';
-import TimedComponent from './TimedComponent';
+import React, { useState, useEffect, useMemo, useCallback } from 'react'
+import { Title, Text } from '@gnosis.pm/safe-react-components'
+import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk'
+import web3Utils from 'web3-utils'
+import { BigNumber } from 'bignumber.js'
+
+import useBalances, { BalancesType } from '../hooks/use-balances'
+import { tokenToTx } from '../utils/sdk-helpers'
+import FormContainer from './FormContainer'
+import Flex from './Flex'
+import Logo from './Logo'
+import Balances from './Balances'
+import SubmitButton from './SubmitButton'
+import CancelButton from './CancelButton'
+import AddressInput from './AddressInput'
+import useWeb3 from '../hooks/useWeb3'
+import TimedComponent from './TimedComponent'
 
 const App = (): React.ReactElement => {
-  const { sdk, safe } = useSafeAppsSDK();
-  const { web3 } = useWeb3();
+  const { sdk, safe } = useSafeAppsSDK()
+  const { web3 } = useWeb3()
   const {
     assets,
     selectedTokens,
     setSelectedTokens,
     error: balancesError,
-  }: BalancesType = useBalances(safe.safeAddress, safe.chainId);
-  const [submitting, setSubmitting] = useState(false);
-  const [toAddress, setToAddress] = useState<string>('');
-  const [isFinished, setFinished] = useState<boolean>(false);
-  const [error, setError] = useState<string>('');
-  const [gasPrice, setGasPrice] = useState<BigNumber>(new BigNumber(0));
-  const [networkPrefix, setNetworkPrefix] = useState<string>('');
+  }: BalancesType = useBalances(safe.safeAddress, safe.chainId)
+  const [submitting, setSubmitting] = useState(false)
+  const [toAddress, setToAddress] = useState<string>('')
+  const [isFinished, setFinished] = useState<boolean>(false)
+  const [error, setError] = useState<string>('')
+  const [gasPrice, setGasPrice] = useState<BigNumber>(new BigNumber(0))
+  const [networkPrefix, setNetworkPrefix] = useState<string>('')
 
   const onError = (userMsg: string, err: Error) => {
-    setError(`${userMsg}: ${err.message}`);
-    console.error(userMsg, err);
-  };
+    setError(`${userMsg}: ${err.message}`)
+    console.error(userMsg, err)
+  }
 
   const sendTxs = async (): Promise<string> => {
     const txs = assets
-      .filter((item) => selectedTokens.includes(item.tokenInfo.address))
-      .map((item) => tokenToTx(toAddress, item));
-    const data = await sdk.txs.send({ txs });
+      .filter(item => selectedTokens.includes(item.tokenInfo.address))
+      .map(item => tokenToTx(toAddress, item))
+    const data = await sdk.txs.send({ txs })
 
-    return data?.safeTxHash;
-  };
+    return data?.safeTxHash
+  }
 
   const submitTx = async (): Promise<void> => {
     if (!web3Utils.isAddress(toAddress)) {
-      setError('Please enter a valid recipient address');
-      return;
+      setError('Please enter a valid recipient address')
+      return
     }
 
-    setError('');
-    setSubmitting(true);
+    setError('')
+    setSubmitting(true)
 
     try {
-      await sendTxs();
+      await sendTxs()
     } catch (e) {
-      setSubmitting(false);
-      onError('Failed sending transactions', e as Error);
-      return;
+      setSubmitting(false)
+      onError('Failed sending transactions', e as Error)
+      return
     }
 
-    setSubmitting(false);
-    setFinished(true);
-    setToAddress('');
-    setSelectedTokens(assets.map((token) => token.tokenInfo.address));
-  };
+    setSubmitting(false)
+    setFinished(true)
+    setToAddress('')
+    setSelectedTokens(assets.map(token => token.tokenInfo.address))
+  }
 
   const onSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    submitTx();
-  };
+    e.preventDefault()
+    submitTx()
+  }
 
   const onCancel = () => {
-    setError('');
-    setSubmitting(false);
-  };
+    setError('')
+    setSubmitting(false)
+  }
 
   const onToAddressChange = useCallback((address: string): void => {
-    setToAddress(address);
-    setError('');
-  }, []);
+    setToAddress(address)
+    setError('')
+  }, [])
 
   const transferStatusText = useMemo(() => {
     if (!selectedTokens.length) {
-      return 'No tokens selected';
+      return 'No tokens selected'
     }
 
     if (selectedTokens.length === assets.length) {
-      return 'Transfer everything';
+      return 'Transfer everything'
     }
 
-    const assetsToTransferCount = selectedTokens.length;
-    return `Transfer ${assetsToTransferCount} asset${assetsToTransferCount > 1 ? 's' : ''}`;
-  }, [assets, selectedTokens]);
+    const assetsToTransferCount = selectedTokens.length
+    return `Transfer ${assetsToTransferCount} asset${assetsToTransferCount > 1 ? 's' : ''}`
+  }, [assets, selectedTokens])
 
   const getAddressFromDomain = useCallback(
     (address: string) => web3?.eth.ens.getAddress(address) || Promise.resolve(address),
     [web3],
-  );
+  )
 
   useEffect(() => {
     if (balancesError) {
-      onError('Failed fetching balances', balancesError);
+      onError('Failed fetching balances', balancesError)
     }
-  }, [balancesError]);
+  }, [balancesError])
 
   useEffect(() => {
     sdk.eth.getGasPrice().then((gasPrice: string) => {
-      setGasPrice(new BigNumber(gasPrice));
-    });
-  }, [sdk.eth]);
+      setGasPrice(new BigNumber(gasPrice))
+    })
+  }, [sdk.eth])
 
-  const ethFiatPrice = Number(assets[0]?.fiatConversion || 0);
+  const ethFiatPrice = Number(assets[0]?.fiatConversion || 0)
 
   useEffect(() => {
     const getChainInfo = async () => {
       try {
-        const { shortName } = await sdk.safe.getChainInfo();
-        setNetworkPrefix(shortName);
+        const { shortName } = await sdk.safe.getChainInfo()
+        setNetworkPrefix(shortName)
       } catch (e) {
-        console.error('Unable to get chain info:', e);
+        console.error('Unable to get chain info:', e)
       }
-    };
+    }
 
-    getChainInfo();
-  }, [sdk]);
+    getChainInfo()
+  }, [sdk])
 
   return (
     <FormContainer onSubmit={onSubmit} onReset={onCancel}>
@@ -177,7 +177,7 @@ const App = (): React.ReactElement => {
         <Text size="xl">You don't have any transferable assets</Text>
       )}
     </FormContainer>
-  );
-};
+  )
+}
 
-export default App;
+export default App
diff --git a/apps/drain-safe/src/components/Balances.tsx b/apps/drain-safe/src/components/Balances.tsx
index a49a8c256..3168e5d09 100644
--- a/apps/drain-safe/src/components/Balances.tsx
+++ b/apps/drain-safe/src/components/Balances.tsx
@@ -1,14 +1,14 @@
-import { useMemo, useState, useEffect } from 'react';
-import { DataTable } from '@gnosis.pm/safe-react-components';
-import { GridColDef, GridRowsProp, GridSelectionModel, GridDensityTypes } from '@mui/x-data-grid';
-import { TokenBalance, TokenInfo, TokenType } from '@gnosis.pm/safe-apps-sdk';
-import BigNumber from 'bignumber.js';
+import { useMemo, useState, useEffect } from 'react'
+import { DataTable } from '@gnosis.pm/safe-react-components'
+import { GridColDef, GridRowsProp, GridSelectionModel, GridDensityTypes } from '@mui/x-data-grid'
+import { TokenBalance, TokenInfo, TokenType } from '@gnosis.pm/safe-apps-sdk'
+import BigNumber from 'bignumber.js'
 
-import { formatTokenValue } from '../utils/formatters';
-import Icon from './Icon';
-import CurrencyCell from './CurrencyCell';
+import { formatTokenValue } from '../utils/formatters'
+import Icon from './Icon'
+import CurrencyCell from './CurrencyCell'
 
-const CURRENCY = 'USD';
+const CURRENCY = 'USD'
 
 const ethToken: TokenInfo = {
   logoUri: './eth.svg',
@@ -17,7 +17,7 @@ const ethToken: TokenInfo = {
   decimals: 18,
   type: TokenType['NATIVE_TOKEN'],
   address: '',
-};
+}
 
 function Balances({
   assets,
@@ -25,16 +25,16 @@ function Balances({
   gasPrice,
   ethFiatPrice,
 }: {
-  assets: TokenBalance[];
-  ethFiatPrice: number;
-  onSelectionChange: (addresses: string[]) => void;
-  gasPrice: BigNumber;
+  assets: TokenBalance[]
+  ethFiatPrice: number
+  onSelectionChange: (addresses: string[]) => void
+  gasPrice: BigNumber
 }): JSX.Element {
-  const [selectionModel, setSelectionModel] = useState<GridSelectionModel>([]);
+  const [selectionModel, setSelectionModel] = useState<GridSelectionModel>([])
 
   useEffect(() => {
-    setSelectionModel(assets.map((item) => item.tokenInfo.address));
-  }, [assets]);
+    setSelectionModel(assets.map(item => item.tokenInfo.address))
+  }, [assets])
 
   const dataGridColumns: GridColDef[] = [
     {
@@ -43,24 +43,24 @@ function Balances({
       flex: 1,
       sortComparator: (v1, v2, param1: any, param2: any) => {
         if (param1.value.name < param2.value.name) {
-          return -1;
+          return -1
         }
 
         if (param1.value.name > param2.value.name) {
-          return 1;
+          return 1
         }
 
-        return 0;
+        return 0
       },
       renderCell: (params: any) => {
-        const { logoUri, symbol, name } = params.value;
+        const { logoUri, symbol, name } = params.value
 
         return (
           <>
             <Icon logoUri={logoUri} symbol={symbol} />
             {name}
           </>
-        );
+        )
       },
     },
     {
@@ -68,7 +68,7 @@ function Balances({
       headerName: 'Amount',
       flex: 1,
       sortComparator: (v1, v2, param1: any, param2: any) => {
-        return param1.value - param2.value;
+        return param1.value - param2.value
       },
     },
     {
@@ -76,28 +76,33 @@ function Balances({
       headerName: 'Value',
       flex: 1,
       sortComparator: (v1, v2, param1: any, param2: any) => {
-        return param1.value.fiatBalance - param2.value.fiatBalance;
+        return param1.value.fiatBalance - param2.value.fiatBalance
       },
       renderCell: (params: any) => (
-        <CurrencyCell ethFiatPrice={ethFiatPrice} gasPrice={gasPrice} item={params.value} currency={CURRENCY} />
+        <CurrencyCell
+          ethFiatPrice={ethFiatPrice}
+          gasPrice={gasPrice}
+          item={params.value}
+          currency={CURRENCY}
+        />
       ),
     },
-  ];
+  ]
 
   const dataGridRows: GridRowsProp = useMemo(
     () =>
       assets.slice().map((item: TokenBalance) => {
-        const token = item.tokenInfo || ethToken;
+        const token = item.tokenInfo || ethToken
 
         return {
           id: token.address,
           asset: token,
           amount: formatTokenValue(item.balance, token.decimals),
           value: item,
-        };
+        }
       }),
     [assets],
-  );
+  )
 
   return (
     <DataTable
@@ -112,11 +117,11 @@ function Balances({
       selectionModel={selectionModel}
       density={GridDensityTypes.Comfortable}
       onSelectionModelChange={(newSelection: GridSelectionModel) => {
-        setSelectionModel(newSelection);
-        onSelectionChange(newSelection as string[]);
+        setSelectionModel(newSelection)
+        onSelectionChange(newSelection as string[])
       }}
     />
-  );
+  )
 }
 
-export default Balances;
+export default Balances
diff --git a/apps/drain-safe/src/components/CancelButton.tsx b/apps/drain-safe/src/components/CancelButton.tsx
index 8442d4935..4056e33a1 100644
--- a/apps/drain-safe/src/components/CancelButton.tsx
+++ b/apps/drain-safe/src/components/CancelButton.tsx
@@ -1,5 +1,5 @@
-import { Button, Loader } from '@gnosis.pm/safe-react-components';
-import Flex from './Flex';
+import { Button, Loader } from '@gnosis.pm/safe-react-components'
+import Flex from './Flex'
 
 function CancelButton({ children }: { children: string }): JSX.Element {
   return (
@@ -13,7 +13,7 @@ function CancelButton({ children }: { children: string }): JSX.Element {
         </Button>
       </Flex>
     </>
-  );
+  )
 }
 
-export default CancelButton;
+export default CancelButton
diff --git a/apps/drain-safe/src/components/CurrencyCell.tsx b/apps/drain-safe/src/components/CurrencyCell.tsx
index 7da1c0487..ece22bb49 100644
--- a/apps/drain-safe/src/components/CurrencyCell.tsx
+++ b/apps/drain-safe/src/components/CurrencyCell.tsx
@@ -1,13 +1,13 @@
-import { TokenBalance } from '@gnosis.pm/safe-apps-sdk';
-import { Icon, Tooltip } from '@gnosis.pm/safe-react-components';
-import BigNumber from 'bignumber.js';
-import { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import web3Utils from 'web3-utils';
-import { formatCurrencyValue } from '../utils/formatters';
-import { tokenToTx } from '../utils/sdk-helpers';
-import Flex from './Flex';
-import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk';
+import { TokenBalance } from '@gnosis.pm/safe-apps-sdk'
+import { Icon, Tooltip } from '@gnosis.pm/safe-react-components'
+import BigNumber from 'bignumber.js'
+import { useEffect, useState } from 'react'
+import styled from 'styled-components'
+import web3Utils from 'web3-utils'
+import { formatCurrencyValue } from '../utils/formatters'
+import { tokenToTx } from '../utils/sdk-helpers'
+import Flex from './Flex'
+import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk'
 
 function CurrencyCell({
   item,
@@ -15,49 +15,54 @@ function CurrencyCell({
   gasPrice,
   ethFiatPrice,
 }: {
-  item: TokenBalance;
-  currency: string;
-  gasPrice: BigNumber;
-  ethFiatPrice: number;
+  item: TokenBalance
+  currency: string
+  gasPrice: BigNumber
+  ethFiatPrice: number
 }) {
-  const label = formatCurrencyValue(item.fiatBalance, currency);
-  const [transferCostInFiat, setTransferCostInFiat] = useState(new BigNumber(0));
+  const label = formatCurrencyValue(item.fiatBalance, currency)
+  const [transferCostInFiat, setTransferCostInFiat] = useState(new BigNumber(0))
 
-  const { safe, sdk } = useSafeAppsSDK();
+  const { safe, sdk } = useSafeAppsSDK()
 
   // Transfer cost estimation
   useEffect(() => {
     const estimateTransferCost = async () => {
       try {
-        const sendTokenTx = tokenToTx(safe.safeAddress, item);
+        const sendTokenTx = tokenToTx(safe.safeAddress, item)
 
         const estimatedTransferGas = await sdk.eth.getEstimateGas({
           ...sendTokenTx,
-          value: item.tokenInfo.type === 'NATIVE_TOKEN' ? `0x${Number(sendTokenTx.value).toString(16)}` : undefined,
+          value:
+            item.tokenInfo.type === 'NATIVE_TOKEN'
+              ? `0x${Number(sendTokenTx.value).toString(16)}`
+              : undefined,
           from: safe.safeAddress,
-        });
+        })
 
-        const gasCostInWei = gasPrice.multipliedBy(estimatedTransferGas);
-        const gasCostInEther = new BigNumber(web3Utils.fromWei(gasCostInWei.toString(), 'ether'));
+        const gasCostInWei = gasPrice.multipliedBy(estimatedTransferGas)
+        const gasCostInEther = new BigNumber(web3Utils.fromWei(gasCostInWei.toString(), 'ether'))
 
-        const transferCostInFiat = gasCostInEther.multipliedBy(ethFiatPrice);
+        const transferCostInFiat = gasCostInEther.multipliedBy(ethFiatPrice)
 
-        setTransferCostInFiat(transferCostInFiat);
+        setTransferCostInFiat(transferCostInFiat)
       } catch (e) {
-        console.log('Error: ', e);
+        console.log('Error: ', e)
       }
-    };
-    estimateTransferCost();
-  }, [gasPrice, ethFiatPrice, item, sdk, safe]);
+    }
+    estimateTransferCost()
+  }, [gasPrice, ethFiatPrice, item, sdk, safe])
 
   // if transfer cost is higher than token market value, we show a warning icon & tooltip in the cell
   const showWarningIcon =
-    ethFiatPrice > 0 && gasPrice.toNumber() > 0 && transferCostInFiat.toNumber() >= Number(item.fiatBalance);
+    ethFiatPrice > 0 &&
+    gasPrice.toNumber() > 0 &&
+    transferCostInFiat.toNumber() >= Number(item.fiatBalance)
 
   const warningTooltip = `Beware that the cost of this token transfer could be higher than its current market value (Estimated transfer cost: ${formatCurrencyValue(
     transferCostInFiat.toString(),
     currency,
-  )})`;
+  )})`
 
   return showWarningIcon ? (
     <Tooltip title={warningTooltip} placement="top">
@@ -68,11 +73,11 @@ function CurrencyCell({
     </Tooltip>
   ) : (
     <Flex>{label}</Flex>
-  );
+  )
 }
 
-export default CurrencyCell;
+export default CurrencyCell
 
 const StyledIcon = styled(Icon)`
   margin-left: 4px;
-`;
+`
diff --git a/apps/drain-safe/src/components/Flex.tsx b/apps/drain-safe/src/components/Flex.tsx
index 8cdd40212..20a45bdd1 100644
--- a/apps/drain-safe/src/components/Flex.tsx
+++ b/apps/drain-safe/src/components/Flex.tsx
@@ -1,14 +1,14 @@
-import styled, { css } from 'styled-components';
+import styled, { css } from 'styled-components'
 
 const Flex = styled.div<{ centered?: boolean }>`
   display: flex;
   align-items: center;
 
-  ${(props) =>
+  ${props =>
     props.centered &&
     css`
       justify-content: center;
     `}
-`;
+`
 
-export default Flex;
+export default Flex
diff --git a/apps/drain-safe/src/components/FormContainer.tsx b/apps/drain-safe/src/components/FormContainer.tsx
index c3ceb2b7f..b01ad546a 100644
--- a/apps/drain-safe/src/components/FormContainer.tsx
+++ b/apps/drain-safe/src/components/FormContainer.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from 'styled-components'
 
 const FormContainer = styled.form`
   margin-bottom: 2rem;
@@ -10,6 +10,6 @@ const FormContainer = styled.form`
   grid-template-columns: 1fr;
   grid-column-gap: 1rem;
   grid-row-gap: 1rem;
-`;
+`
 
-export default FormContainer;
+export default FormContainer
diff --git a/apps/drain-safe/src/components/Icon.tsx b/apps/drain-safe/src/components/Icon.tsx
index d1f20c92b..5fa5887fd 100644
--- a/apps/drain-safe/src/components/Icon.tsx
+++ b/apps/drain-safe/src/components/Icon.tsx
@@ -1,30 +1,30 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
+import React, { useState } from 'react'
+import styled from 'styled-components'
 
 interface Props {
-  logoUri: string | null;
-  symbol: string;
+  logoUri: string | null
+  symbol: string
 }
 
 const IconImg = styled.img`
   margin-right: 10px;
   height: 1.5em;
   width: auto;
-`;
+`
 
-const defaultIcon = './question.svg';
+const defaultIcon = './question.svg'
 
 function Icon(props: Props): JSX.Element | null {
-  const [fallbackIcon, setFallbackIcon] = useState<string>('');
-  const { logoUri, symbol } = props;
+  const [fallbackIcon, setFallbackIcon] = useState<string>('')
+  const { logoUri, symbol } = props
 
   const onError = () => {
     if (!fallbackIcon) {
-      setFallbackIcon(defaultIcon);
+      setFallbackIcon(defaultIcon)
     }
-  };
+  }
 
-  return <IconImg src={fallbackIcon || logoUri || ''} alt={symbol} onError={onError} />;
+  return <IconImg src={fallbackIcon || logoUri || ''} alt={symbol} onError={onError} />
 }
 
-export default Icon;
+export default Icon
diff --git a/apps/drain-safe/src/components/Logo.tsx b/apps/drain-safe/src/components/Logo.tsx
index 77b81cf76..afb1a6a82 100644
--- a/apps/drain-safe/src/components/Logo.tsx
+++ b/apps/drain-safe/src/components/Logo.tsx
@@ -1,14 +1,14 @@
-import React from 'react';
-import styled from 'styled-components';
+import React from 'react'
+import styled from 'styled-components'
 
 const IconImg = styled.img`
   margin-right: 10px;
   height: 3em;
   width: auto;
-`;
+`
 
 function Logo(): JSX.Element {
-  return <IconImg src="./logo.svg" alt="logo" />;
+  return <IconImg src="./logo.svg" alt="logo" />
 }
 
-export default Logo;
+export default Logo
diff --git a/apps/drain-safe/src/components/SubmitButton.tsx b/apps/drain-safe/src/components/SubmitButton.tsx
index 5bb6e51cb..30c204cfd 100644
--- a/apps/drain-safe/src/components/SubmitButton.tsx
+++ b/apps/drain-safe/src/components/SubmitButton.tsx
@@ -1,14 +1,20 @@
-import { Button } from '@gnosis.pm/safe-react-components';
-import Flex from './Flex';
+import { Button } from '@gnosis.pm/safe-react-components'
+import Flex from './Flex'
 
-function SubmitButton({ children, disabled }: { children: string; disabled?: boolean }): JSX.Element {
+function SubmitButton({
+  children,
+  disabled,
+}: {
+  children: string
+  disabled?: boolean
+}): JSX.Element {
   return (
     <Flex centered>
       <Button size="lg" color="primary" variant="contained" type="submit" disabled={disabled}>
         {children}
       </Button>
     </Flex>
-  );
+  )
 }
 
-export default SubmitButton;
+export default SubmitButton
diff --git a/apps/drain-safe/src/components/TimedComponent.tsx b/apps/drain-safe/src/components/TimedComponent.tsx
index 472747e11..ab143cfc7 100644
--- a/apps/drain-safe/src/components/TimedComponent.tsx
+++ b/apps/drain-safe/src/components/TimedComponent.tsx
@@ -1,14 +1,14 @@
-import useTimeout from '../hooks/useTimeout';
+import useTimeout from '../hooks/useTimeout'
 
 type Props = {
-  onTimeout: () => void;
-  timeout: number;
-};
+  onTimeout: () => void
+  timeout: number
+}
 
 const TimedComponent: React.FC<Props> = ({ onTimeout, timeout, children }) => {
-  useTimeout(onTimeout, timeout);
+  useTimeout(onTimeout, timeout)
 
-  return children as React.ReactElement;
-};
+  return children as React.ReactElement
+}
 
-export default TimedComponent;
+export default TimedComponent
diff --git a/apps/drain-safe/src/fonts.d.ts b/apps/drain-safe/src/fonts.d.ts
index 7bbf68bbc..85a0dfc7e 100644
--- a/apps/drain-safe/src/fonts.d.ts
+++ b/apps/drain-safe/src/fonts.d.ts
@@ -1,2 +1,2 @@
-declare module '*.woff';
-declare module '*.woff2';
+declare module '*.woff'
+declare module '*.woff2'
diff --git a/apps/drain-safe/src/hooks/use-balances.ts b/apps/drain-safe/src/hooks/use-balances.ts
index 475cac02d..6d7a95f85 100644
--- a/apps/drain-safe/src/hooks/use-balances.ts
+++ b/apps/drain-safe/src/hooks/use-balances.ts
@@ -1,45 +1,48 @@
-import { useState, useEffect, useCallback } from 'react';
-import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk';
-import { TokenBalance } from '@gnosis.pm/safe-apps-sdk';
-import { NATIVE_TOKEN } from '../utils/sdk-helpers';
+import { useState, useEffect, useCallback } from 'react'
+import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk'
+import { TokenBalance } from '@gnosis.pm/safe-apps-sdk'
+import { NATIVE_TOKEN } from '../utils/sdk-helpers'
 
 export type BalancesType = {
-  error?: Error;
-  assets: TokenBalance[];
-  selectedTokens: string[];
-  setSelectedTokens: (tokens: string[]) => void;
-};
+  error?: Error
+  assets: TokenBalance[]
+  selectedTokens: string[]
+  setSelectedTokens: (tokens: string[]) => void
+}
 
 const transferableTokens = (item: TokenBalance) =>
-  item.tokenInfo.type !== NATIVE_TOKEN || (item.tokenInfo.type === NATIVE_TOKEN && Number(item.fiatBalance) !== 0);
+  item.tokenInfo.type !== NATIVE_TOKEN ||
+  (item.tokenInfo.type === NATIVE_TOKEN && Number(item.fiatBalance) !== 0)
 
 function useBalances(safeAddress: string, chainId: number): BalancesType {
-  const { sdk } = useSafeAppsSDK();
-  const [assets, setAssets] = useState<TokenBalance[]>([]);
-  const [selectedTokens, setSelectedTokens] = useState<string[]>([]);
-  const [error, setError] = useState<Error>();
+  const { sdk } = useSafeAppsSDK()
+  const [assets, setAssets] = useState<TokenBalance[]>([])
+  const [selectedTokens, setSelectedTokens] = useState<string[]>([])
+  const [error, setError] = useState<Error>()
 
   const loadBalances = useCallback(async () => {
     if (!safeAddress || !chainId) {
-      return;
+      return
     }
 
     try {
-      const balances = await sdk.safe.experimental_getBalances({ currency: 'USD' });
-      const assets = balances.items.filter(transferableTokens);
+      const balances = await sdk.safe.experimental_getBalances({
+        currency: 'USD',
+      })
+      const assets = balances.items.filter(transferableTokens)
 
-      setAssets(assets);
-      setSelectedTokens(assets.map((token: TokenBalance) => token.tokenInfo.address));
+      setAssets(assets)
+      setSelectedTokens(assets.map((token: TokenBalance) => token.tokenInfo.address))
     } catch (err) {
-      setError(err as Error);
+      setError(err as Error)
     }
-  }, [safeAddress, chainId, sdk]);
+  }, [safeAddress, chainId, sdk])
 
   useEffect(() => {
-    loadBalances();
-  }, [loadBalances]);
+    loadBalances()
+  }, [loadBalances])
 
-  return { error, assets, selectedTokens, setSelectedTokens };
+  return { error, assets, selectedTokens, setSelectedTokens }
 }
 
-export default useBalances;
+export default useBalances
diff --git a/apps/drain-safe/src/hooks/useTimeout.ts b/apps/drain-safe/src/hooks/useTimeout.ts
index 2eb70926d..6015efc26 100644
--- a/apps/drain-safe/src/hooks/useTimeout.ts
+++ b/apps/drain-safe/src/hooks/useTimeout.ts
@@ -1,21 +1,21 @@
-import { useEffect, useLayoutEffect, useRef } from 'react';
+import { useEffect, useLayoutEffect, useRef } from 'react'
 
 function useTimeout(callback: () => void, delay: number | null) {
-  const savedCallback = useRef(callback);
+  const savedCallback = useRef(callback)
 
   useLayoutEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
+    savedCallback.current = callback
+  }, [callback])
 
   useEffect(() => {
     if (!delay && delay !== 0) {
-      return;
+      return
     }
 
-    const id = setTimeout(() => savedCallback.current(), delay);
+    const id = setTimeout(() => savedCallback.current(), delay)
 
-    return () => clearTimeout(id);
-  }, [delay]);
+    return () => clearTimeout(id)
+  }, [delay])
 }
 
-export default useTimeout;
+export default useTimeout
diff --git a/apps/drain-safe/src/hooks/useWeb3.ts b/apps/drain-safe/src/hooks/useWeb3.ts
index 2ec51928b..ed91285ff 100644
--- a/apps/drain-safe/src/hooks/useWeb3.ts
+++ b/apps/drain-safe/src/hooks/useWeb3.ts
@@ -1,41 +1,41 @@
-import { useEffect, useState } from 'react';
-import Web3 from 'web3';
-import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk';
+import { useEffect, useState } from 'react'
+import Web3 from 'web3'
+import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk'
 
 function useWeb3() {
-  const [web3, setWeb3] = useState<Web3 | undefined>();
-  const { sdk } = useSafeAppsSDK();
+  const [web3, setWeb3] = useState<Web3 | undefined>()
+  const { sdk } = useSafeAppsSDK()
 
   useEffect(() => {
     const setWeb3Instance = async () => {
-      const chainInfo = await sdk.safe.getChainInfo();
+      const chainInfo = await sdk.safe.getChainInfo()
 
       if (!chainInfo) {
-        return;
+        return
       }
 
-      const rpcUrlGetter = rpcUrlGetterByNetwork[chainInfo.chainId as CHAINS];
+      const rpcUrlGetter = rpcUrlGetterByNetwork[chainInfo.chainId as CHAINS]
 
       if (!rpcUrlGetter) {
-        throw Error(`RPC URL not defined for ${chainInfo.chainName} chain`);
+        throw Error(`RPC URL not defined for ${chainInfo.chainName} chain`)
       }
 
-      const rpcUrl = rpcUrlGetter(process.env.REACT_APP_RPC_TOKEN);
+      const rpcUrl = rpcUrlGetter(process.env.REACT_APP_RPC_TOKEN)
 
-      const web3Instance = new Web3(rpcUrl);
+      const web3Instance = new Web3(rpcUrl)
 
-      setWeb3(web3Instance);
-    };
+      setWeb3(web3Instance)
+    }
 
-    setWeb3Instance();
-  }, [sdk.safe]);
+    setWeb3Instance()
+  }, [sdk.safe])
 
   return {
     web3,
-  };
+  }
 }
 
-export default useWeb3;
+export default useWeb3
 
 export enum CHAINS {
   MAINNET = '1',
@@ -56,12 +56,12 @@ export enum CHAINS {
 }
 
 export const rpcUrlGetterByNetwork: {
-  [key in CHAINS]: null | ((token?: string) => string);
+  [key in CHAINS]: null | ((token?: string) => string)
 } = {
-  [CHAINS.MAINNET]: (token) => `https://mainnet.infura.io/v3/${token}`,
+  [CHAINS.MAINNET]: token => `https://mainnet.infura.io/v3/${token}`,
   [CHAINS.MORDEN]: null,
   [CHAINS.ROPSTEN]: null,
-  [CHAINS.RINKEBY]: (token) => `https://rinkeby.infura.io/v3/${token}`,
+  [CHAINS.RINKEBY]: token => `https://rinkeby.infura.io/v3/${token}`,
   [CHAINS.GOERLI]: null,
   [CHAINS.OPTIMISM]: () => 'https://mainnet.optimism.io',
   [CHAINS.KOVAN]: null,
@@ -73,4 +73,4 @@ export const rpcUrlGetterByNetwork: {
   [CHAINS.AVALANCHE]: () => 'https://api.avax.network/ext/bc/C/rpc',
   [CHAINS.VOLTA]: () => 'https://volta-rpc.energyweb.org',
   [CHAINS.AURORA]: () => 'https://mainnet.aurora.dev',
-};
+}
diff --git a/apps/drain-safe/src/index.tsx b/apps/drain-safe/src/index.tsx
index 08659ace4..c457c4d09 100644
--- a/apps/drain-safe/src/index.tsx
+++ b/apps/drain-safe/src/index.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { ThemeProvider } from 'styled-components';
-import { theme, Loader, Title } from '@gnosis.pm/safe-react-components';
-import SafeProvider from '@gnosis.pm/safe-apps-react-sdk';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { ThemeProvider } from 'styled-components'
+import { theme, Loader, Title } from '@gnosis.pm/safe-react-components'
+import SafeProvider from '@gnosis.pm/safe-apps-react-sdk'
 
-import GlobalStyle from './GlobalStyle';
-import App from './components/App';
+import GlobalStyle from './GlobalStyle'
+import App from './components/App'
 
 ReactDOM.render(
   <React.StrictMode>
@@ -24,4 +24,4 @@ ReactDOM.render(
     </ThemeProvider>
   </React.StrictMode>,
   document.getElementById('root'),
-);
+)
diff --git a/apps/drain-safe/src/setupTests.ts b/apps/drain-safe/src/setupTests.ts
index 666127af3..264828a90 100644
--- a/apps/drain-safe/src/setupTests.ts
+++ b/apps/drain-safe/src/setupTests.ts
@@ -1 +1 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom/extend-expect'
diff --git a/apps/drain-safe/src/utils/formatters.ts b/apps/drain-safe/src/utils/formatters.ts
index 180827b0e..bf673c7d3 100644
--- a/apps/drain-safe/src/utils/formatters.ts
+++ b/apps/drain-safe/src/utils/formatters.ts
@@ -1,9 +1,9 @@
-import BigNumber from 'bignumber.js';
+import BigNumber from 'bignumber.js'
 
 export const formatTokenValue = (value: number | string, decimals: number): string => {
-  return new BigNumber(value).times(`1e-${decimals}`).toFixed();
-};
+  return new BigNumber(value).times(`1e-${decimals}`).toFixed()
+}
 
 export const formatCurrencyValue = (value: string, currency: string): string => {
-  return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(parseFloat(value));
-};
+  return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(parseFloat(value))
+}
diff --git a/apps/drain-safe/src/utils/sdk-helpers.ts b/apps/drain-safe/src/utils/sdk-helpers.ts
index 5a2b4df1b..9e5e7e1f6 100644
--- a/apps/drain-safe/src/utils/sdk-helpers.ts
+++ b/apps/drain-safe/src/utils/sdk-helpers.ts
@@ -1,13 +1,16 @@
-import web3Utils, { AbiItem } from 'web3-utils';
-import abiCoder, { AbiCoder } from 'web3-eth-abi';
-import { BaseTransaction, TokenBalance, TokenType } from '@gnosis.pm/safe-apps-sdk';
-import erc20 from '../abis/erc20';
+import web3Utils, { AbiItem } from 'web3-utils'
+import abiCoder, { AbiCoder } from 'web3-eth-abi'
+import { BaseTransaction, TokenBalance, TokenType } from '@gnosis.pm/safe-apps-sdk'
+import erc20 from '../abis/erc20'
 
-export const NATIVE_TOKEN = TokenType['NATIVE_TOKEN'];
+export const NATIVE_TOKEN = TokenType['NATIVE_TOKEN']
 
 export function encodeTxData(method: AbiItem, recipient: string, amount: string): string {
-  const abi = abiCoder as unknown; // a bug in the web3-eth-abi types
-  return (abi as AbiCoder).encodeFunctionCall(method, [web3Utils.toChecksumAddress(recipient), amount]);
+  const abi = abiCoder as unknown // a bug in the web3-eth-abi types
+  return (abi as AbiCoder).encodeFunctionCall(method, [
+    web3Utils.toChecksumAddress(recipient),
+    amount,
+  ])
 }
 
 export function tokenToTx(recipient: string, item: TokenBalance): BaseTransaction {
@@ -23,5 +26,5 @@ export function tokenToTx(recipient: string, item: TokenBalance): BaseTransactio
         to: web3Utils.toChecksumAddress(item.tokenInfo.address),
         value: '0',
         data: encodeTxData(erc20.transfer, recipient, item.balance),
-      };
+      }
 }
diff --git a/apps/drain-safe/src/utils/sort-helpers.ts b/apps/drain-safe/src/utils/sort-helpers.ts
index 6f899296c..df3f852e3 100644
--- a/apps/drain-safe/src/utils/sort-helpers.ts
+++ b/apps/drain-safe/src/utils/sort-helpers.ts
@@ -1,37 +1,40 @@
 function resolvePath(path: string, obj: any) {
-  const props = path.split('.');
-  return props.reduce((prev, curr) => prev && prev[curr], obj);
+  const props = path.split('.')
+  return props.reduce((prev, curr) => prev && prev[curr], obj)
 }
 
 function descendingComparator<T>(a: T, b: T, orderBy: string) {
-  let item1 = resolvePath(orderBy, a);
-  let item2 = resolvePath(orderBy, b);
+  let item1 = resolvePath(orderBy, a)
+  let item2 = resolvePath(orderBy, b)
 
   if (isNumeric(item1) && isNumeric(item2)) {
-    return item1 - item2;
+    return item1 - item2
   }
 
   if (item2 < item1) {
-    return -1;
+    return -1
   }
 
   if (item2 > item1) {
-    return 1;
+    return 1
   }
 
-  return 0;
+  return 0
 }
 
 function isNumeric(num: any) {
-  return !isNaN(num);
+  return !isNaN(num)
 }
 
-export function getComparator<T>(order: string, orderBy: string | undefined): (a: T, b: T) => number {
+export function getComparator<T>(
+  order: string,
+  orderBy: string | undefined,
+): (a: T, b: T) => number {
   if (!orderBy) {
-    return () => 0;
+    return () => 0
   }
 
   return order === 'desc'
     ? (a, b) => descendingComparator(a, b, orderBy)
-    : (a, b) => -descendingComparator(a, b, orderBy);
+    : (a, b) => -descendingComparator(a, b, orderBy)
 }
diff --git a/apps/drain-safe/src/utils/test-helpers.tsx b/apps/drain-safe/src/utils/test-helpers.tsx
index 1c88b7b70..1b9f3e4d1 100644
--- a/apps/drain-safe/src/utils/test-helpers.tsx
+++ b/apps/drain-safe/src/utils/test-helpers.tsx
@@ -1,5 +1,5 @@
-import { ThemeProvider } from 'styled-components';
-import { render } from '@testing-library/react';
+import { ThemeProvider } from 'styled-components'
+import { render } from '@testing-library/react'
 
 export const mockTheme = {
   buttons: {
@@ -43,7 +43,7 @@ export const mockTheme = {
       },
     },
   },
-};
+}
 
 export const mockTxsRequest = {
   txs: [
@@ -73,7 +73,7 @@ export const mockTxsRequest = {
       value: '0',
     },
   ],
-};
+}
 
 export const mockInitialBalances = [
   {
@@ -96,7 +96,8 @@ export const mockInitialBalances = [
       decimals: 18,
       symbol: 'LINK',
       name: 'ChainLink Token',
-      logoUri: 'https://gnosis-safe-token-logos.s3.amazonaws.com/0x01BE23585060835E02B77ef475b0Cc51aA1e0709.png',
+      logoUri:
+        'https://gnosis-safe-token-logos.s3.amazonaws.com/0x01BE23585060835E02B77ef475b0Cc51aA1e0709.png',
     },
     balance: '10000000000000000000',
     fiatBalance: '32.17898',
@@ -109,7 +110,8 @@ export const mockInitialBalances = [
       decimals: 18,
       symbol: 'DAI',
       name: 'Dai Stablecoin',
-      logoUri: 'https://gnosis-safe-token-logos.s3.amazonaws.com/0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735.png',
+      logoUri:
+        'https://gnosis-safe-token-logos.s3.amazonaws.com/0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735.png',
     },
     balance: '342342323423000000000000000000',
     fiatBalance: '24.89904',
@@ -122,7 +124,8 @@ export const mockInitialBalances = [
       decimals: 18,
       symbol: 'MKR',
       name: 'Maker',
-      logoUri: 'https://gnosis-safe-token-logos.s3.amazonaws.com/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85.png',
+      logoUri:
+        'https://gnosis-safe-token-logos.s3.amazonaws.com/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85.png',
     },
     balance: '318438539290761',
     fiatBalance: '0.00000',
@@ -135,16 +138,17 @@ export const mockInitialBalances = [
       decimals: 18,
       symbol: 'UNI',
       name: 'Uniswap',
-      logoUri: 'https://gnosis-safe-token-logos.s3.amazonaws.com/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984.png',
+      logoUri:
+        'https://gnosis-safe-token-logos.s3.amazonaws.com/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984.png',
     },
     balance: '1050000000000000044',
     fiatBalance: '3971.92584',
     fiatConversion: '3782.786514637171',
   },
-];
+]
 
 export function renderWithProviders(ui: JSX.Element) {
   return {
     ...render(<ThemeProvider theme={mockTheme}>{ui}</ThemeProvider>),
-  };
+  }
 }
diff --git a/apps/ramp-network/config-overrides.js b/apps/ramp-network/config-overrides.js
index cfe7814f0..f4ec1f4f0 100644
--- a/apps/ramp-network/config-overrides.js
+++ b/apps/ramp-network/config-overrides.js
@@ -1,8 +1,8 @@
-const webpack = require('webpack');
+const webpack = require('webpack')
 
 module.exports = {
   webpack: function (config, env) {
-    const fallback = config.resolve.fallback || {};
+    const fallback = config.resolve.fallback || {}
 
     // https://github.com/ChainSafe/web3.js#web3-and-create-react-app
     Object.assign(fallback, {
@@ -15,39 +15,39 @@ module.exports = {
       url: require.resolve('url'),
       // https://stackoverflow.com/questions/68707553/uncaught-referenceerror-buffer-is-not-defined
       buffer: require.resolve('buffer'),
-    });
+    })
 
-    config.resolve.fallback = fallback;
+    config.resolve.fallback = fallback
 
     config.plugins = (config.plugins || []).concat([
       new webpack.ProvidePlugin({
         process: 'process/browser',
         Buffer: ['buffer', 'Buffer'],
       }),
-    ]);
+    ])
 
     // https://github.com/facebook/create-react-app/issues/11924
-    config.ignoreWarnings = [/to parse source map/i];
+    config.ignoreWarnings = [/to parse source map/i]
 
-    return config;
+    return config
   },
   jest: function (config) {
-    return config;
+    return config
   },
   devServer: function (configFunction) {
     return function (proxy, allowedHost) {
-      const config = configFunction(proxy, allowedHost);
+      const config = configFunction(proxy, allowedHost)
 
       config.headers = {
         'Access-Control-Allow-Origin': '*',
         'Access-Control-Allow-Methods': 'GET',
         'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
-      };
+      }
 
-      return config;
-    };
+      return config
+    }
   },
   paths: function (paths) {
-    return paths;
+    return paths
   },
-};
+}
diff --git a/apps/ramp-network/src/App.tsx b/apps/ramp-network/src/App.tsx
index 00c7c465d..c68286ad8 100644
--- a/apps/ramp-network/src/App.tsx
+++ b/apps/ramp-network/src/App.tsx
@@ -1,10 +1,10 @@
-import React, { useEffect, useState, useMemo } from 'react';
-import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk';
-import { Title, Loader, Text } from '@gnosis.pm/safe-react-components';
-import { ChainInfo } from '@gnosis.pm/safe-apps-sdk';
-import { goBack } from './utils';
-import { ASSETS_BY_CHAIN, getRampWidgetUrl, initializeRampWidget } from './ramp';
-import styled from 'styled-components';
+import React, { useEffect, useState, useMemo } from 'react'
+import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk'
+import { Title, Loader, Text } from '@gnosis.pm/safe-react-components'
+import { ChainInfo } from '@gnosis.pm/safe-apps-sdk'
+import { goBack } from './utils'
+import { ASSETS_BY_CHAIN, getRampWidgetUrl, initializeRampWidget } from './ramp'
+import styled from 'styled-components'
 
 const Container = styled.div`
   display: flex;
@@ -12,7 +12,7 @@ const Container = styled.div`
   align-items: center;
   justify-content: center;
   height: 30em;
-`;
+`
 
 const NetworkNotSupported = ({ name }: { name: string }): React.ReactElement => {
   return (
@@ -20,27 +20,27 @@ const NetworkNotSupported = ({ name }: { name: string }): React.ReactElement =>
       <Title size="md">Network not supported</Title>
       <Text size="lg">Currently {name} is not supported</Text>
     </Container>
-  );
-};
+  )
+}
 
 const SafeApp = (): React.ReactElement | null => {
-  const { sdk, safe } = useSafeAppsSDK();
-  const [chainInfo, setChainInfo] = useState<ChainInfo>();
+  const { sdk, safe } = useSafeAppsSDK()
+  const [chainInfo, setChainInfo] = useState<ChainInfo>()
 
   const isChainSupported = useMemo(() => {
-    return chainInfo && Object.keys(ASSETS_BY_CHAIN).includes(chainInfo.chainId);
-  }, [chainInfo]);
+    return chainInfo && Object.keys(ASSETS_BY_CHAIN).includes(chainInfo.chainId)
+  }, [chainInfo])
 
   useEffect(() => {
-    (async () => {
+    ;(async () => {
       try {
-        const chainInfo = await sdk.safe.getChainInfo();
-        setChainInfo(chainInfo);
+        const chainInfo = await sdk.safe.getChainInfo()
+        setChainInfo(chainInfo)
       } catch (e) {
-        console.error('Unable to get chain info:', e);
+        console.error('Unable to get chain info:', e)
       }
-    })();
-  }, [sdk]);
+    })()
+  }, [sdk])
 
   useEffect(() => {
     if (chainInfo && safe && isChainSupported) {
@@ -49,19 +49,19 @@ const SafeApp = (): React.ReactElement | null => {
         address: safe.safeAddress,
         assets: ASSETS_BY_CHAIN[chainInfo.chainId],
         onClose: goBack,
-      });
+      })
     }
-  }, [chainInfo, safe, isChainSupported]);
+  }, [chainInfo, safe, isChainSupported])
 
   if (!chainInfo || !safe) {
-    return <Loader size="lg" />;
+    return <Loader size="lg" />
   }
 
   if (!isChainSupported) {
-    return <NetworkNotSupported name={chainInfo.chainName} />;
+    return <NetworkNotSupported name={chainInfo.chainName} />
   }
 
-  return null;
-};
+  return null
+}
 
-export default SafeApp;
+export default SafeApp
diff --git a/apps/ramp-network/src/index.tsx b/apps/ramp-network/src/index.tsx
index d3a40eebe..74255acc2 100644
--- a/apps/ramp-network/src/index.tsx
+++ b/apps/ramp-network/src/index.tsx
@@ -1,17 +1,17 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { ThemeProvider } from 'styled-components';
-import { Loader, theme, Title } from '@gnosis.pm/safe-react-components';
-import SafeProvider from '@gnosis.pm/safe-apps-react-sdk';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { ThemeProvider } from 'styled-components'
+import { Loader, theme, Title } from '@gnosis.pm/safe-react-components'
+import SafeProvider from '@gnosis.pm/safe-apps-react-sdk'
 
-import App from './App';
+import App from './App'
 
 const AppLoader = () => (
   <>
     <Title size="md">Waiting for Safe...</Title>
     <Loader size="md" />
   </>
-);
+)
 
 ReactDOM.render(
   <React.StrictMode>
@@ -22,4 +22,4 @@ ReactDOM.render(
     </ThemeProvider>
   </React.StrictMode>,
   document.getElementById('root'),
-);
+)
diff --git a/apps/ramp-network/src/ramp.ts b/apps/ramp-network/src/ramp.ts
index 79413a1c5..fc45a6605 100644
--- a/apps/ramp-network/src/ramp.ts
+++ b/apps/ramp-network/src/ramp.ts
@@ -1,9 +1,9 @@
-import { ChainInfo } from '@gnosis.pm/safe-apps-sdk';
-import { RampInstantEvent, RampInstantSDK } from '@ramp-network/ramp-instant-sdk';
+import { ChainInfo } from '@gnosis.pm/safe-apps-sdk'
+import { RampInstantEvent, RampInstantSDK } from '@ramp-network/ramp-instant-sdk'
 
-const RINKEBY_STAGING_URL = 'https://ri-widget-staging.firebaseapp.com/';
-const WIDGET_CLOSE_EVENT = 'WIDGET_CLOSE';
-const PURCHASE_CREATED_EVENT = 'PURCHASE_CREATED';
+const RINKEBY_STAGING_URL = 'https://ri-widget-staging.firebaseapp.com/'
+const WIDGET_CLOSE_EVENT = 'WIDGET_CLOSE'
+const PURCHASE_CREATED_EVENT = 'PURCHASE_CREATED'
 
 export const ASSETS_BY_CHAIN: { [key: string]: string } = {
   '1': 'ETH_*,ERC20_*',
@@ -12,18 +12,18 @@ export const ASSETS_BY_CHAIN: { [key: string]: string } = {
   '137': 'MATIC_*',
   '100': 'XDAI_*',
   '43114': 'AVAX_*',
-};
+}
 
 export const getRampWidgetUrl = (chainInfo: ChainInfo) => {
-  return chainInfo?.chainId === '4' ? RINKEBY_STAGING_URL : '';
-};
+  return chainInfo?.chainId === '4' ? RINKEBY_STAGING_URL : ''
+}
 
 type RampWidgetInitializer = {
-  url?: string;
-  assets: string;
-  address: string;
-  onClose?: () => void;
-};
+  url?: string
+  assets: string
+  address: string
+  onClose?: () => void
+}
 
 export const initializeRampWidget = ({ url, assets, address, onClose }: RampWidgetInitializer) => {
   return new RampInstantSDK({
@@ -35,14 +35,14 @@ export const initializeRampWidget = ({ url, assets, address, onClose }: RampWidg
   })
     .on('*', (event: RampInstantEvent) => {
       if (event.type === WIDGET_CLOSE_EVENT) {
-        onClose?.();
+        onClose?.()
       }
 
       if (event.type === PURCHASE_CREATED_EVENT) {
         // TODO: Send Analytics when the infra is ready
         // https://github.com/gnosis/safe-apps-sdk/issues/255
-        console.log('PURCHASE_CREATED_EVENT', event);
+        console.log('PURCHASE_CREATED_EVENT', event)
       }
     })
-    .show();
-};
+    .show()
+}
diff --git a/apps/ramp-network/src/setupProxy.js b/apps/ramp-network/src/setupProxy.js
index 89e88afa4..178eff9c5 100644
--- a/apps/ramp-network/src/setupProxy.js
+++ b/apps/ramp-network/src/setupProxy.js
@@ -2,12 +2,11 @@
 // https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually
 
 module.exports = function (app) {
-  app.use("/manifest.json", function (req, res, next) {
+  app.use('/manifest.json', function (req, res, next) {
     res.set({
-      "Access-Control-Allow-Origin": "*",
-      "Access-Control-Allow-Methods": "GET",
-      "Access-Control-Allow-Headers":
-        "X-Requested-With, content-type, Authorization",
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET',
+      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
     })
 
     next()
diff --git a/apps/ramp-network/src/utils.ts b/apps/ramp-network/src/utils.ts
index d1ec1f49a..1870dd22a 100644
--- a/apps/ramp-network/src/utils.ts
+++ b/apps/ramp-network/src/utils.ts
@@ -1 +1 @@
-export const goBack = () => window.history.back();
+export const goBack = () => window.history.back()
diff --git a/apps/tx-builder/config-overrides.js b/apps/tx-builder/config-overrides.js
index cfe7814f0..f4ec1f4f0 100644
--- a/apps/tx-builder/config-overrides.js
+++ b/apps/tx-builder/config-overrides.js
@@ -1,8 +1,8 @@
-const webpack = require('webpack');
+const webpack = require('webpack')
 
 module.exports = {
   webpack: function (config, env) {
-    const fallback = config.resolve.fallback || {};
+    const fallback = config.resolve.fallback || {}
 
     // https://github.com/ChainSafe/web3.js#web3-and-create-react-app
     Object.assign(fallback, {
@@ -15,39 +15,39 @@ module.exports = {
       url: require.resolve('url'),
       // https://stackoverflow.com/questions/68707553/uncaught-referenceerror-buffer-is-not-defined
       buffer: require.resolve('buffer'),
-    });
+    })
 
-    config.resolve.fallback = fallback;
+    config.resolve.fallback = fallback
 
     config.plugins = (config.plugins || []).concat([
       new webpack.ProvidePlugin({
         process: 'process/browser',
         Buffer: ['buffer', 'Buffer'],
       }),
-    ]);
+    ])
 
     // https://github.com/facebook/create-react-app/issues/11924
-    config.ignoreWarnings = [/to parse source map/i];
+    config.ignoreWarnings = [/to parse source map/i]
 
-    return config;
+    return config
   },
   jest: function (config) {
-    return config;
+    return config
   },
   devServer: function (configFunction) {
     return function (proxy, allowedHost) {
-      const config = configFunction(proxy, allowedHost);
+      const config = configFunction(proxy, allowedHost)
 
       config.headers = {
         'Access-Control-Allow-Origin': '*',
         'Access-Control-Allow-Methods': 'GET',
         'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
-      };
+      }
 
-      return config;
-    };
+      return config
+    }
   },
   paths: function (paths) {
-    return paths;
+    return paths
   },
-};
+}
diff --git a/apps/tx-builder/package.json b/apps/tx-builder/package.json
index 80fe2fe02..59e80c90f 100644
--- a/apps/tx-builder/package.json
+++ b/apps/tx-builder/package.json
@@ -5,7 +5,7 @@
   "homepage": "/tx-builder",
   "dependencies": {
     "@gnosis.pm/safe-deployments": "^1.11.0",
-    "@gnosis.pm/safe-react-components": "^1.1.3",
+    "@gnosis.pm/safe-react-components": "^1.1.4",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.0",
     "@material-ui/lab": "^4.0.0-alpha.60",
diff --git a/apps/tx-builder/src/App.tsx b/apps/tx-builder/src/App.tsx
index bf3d5666e..1bbd5ed56 100644
--- a/apps/tx-builder/src/App.tsx
+++ b/apps/tx-builder/src/App.tsx
@@ -1,19 +1,19 @@
-import { Routes, Route } from 'react-router-dom';
-
-import Header from './components/Header';
-import CreateTransactions from './pages/CreateTransactions';
-import Dashboard from './pages/Dashboard';
-import EditTransactionLibrary from './pages/EditTransactionLibrary';
-import ReviewAndConfirm from './pages/ReviewAndConfirm';
-import SaveTransactionLibrary from './pages/SaveTransactionLibrary';
-import TransactionLibrary from './pages/TransactionLibrary';
+import { Routes, Route } from 'react-router-dom'
+
+import Header from './components/Header'
+import CreateTransactions from './pages/CreateTransactions'
+import Dashboard from './pages/Dashboard'
+import EditTransactionLibrary from './pages/EditTransactionLibrary'
+import ReviewAndConfirm from './pages/ReviewAndConfirm'
+import SaveTransactionLibrary from './pages/SaveTransactionLibrary'
+import TransactionLibrary from './pages/TransactionLibrary'
 import {
   HOME_PATH,
   EDIT_BATCH_PATH,
   REVIEW_AND_CONFIRM_PATH,
   SAVE_BATCH_PATH,
   TRANSACTION_LIBRARY_PATH,
-} from './routes/routes';
+} from './routes/routes'
 
 const App = () => {
   return (
@@ -41,7 +41,7 @@ const App = () => {
         <Route path={TRANSACTION_LIBRARY_PATH} element={<TransactionLibrary />} />
       </Routes>
     </>
-  );
-};
+  )
+}
 
-export default App;
+export default App
diff --git a/apps/tx-builder/src/components/ChecksumWarning.tsx b/apps/tx-builder/src/components/ChecksumWarning.tsx
index b4a32593f..82fc3d229 100644
--- a/apps/tx-builder/src/components/ChecksumWarning.tsx
+++ b/apps/tx-builder/src/components/ChecksumWarning.tsx
@@ -1,24 +1,26 @@
-import React from 'react';
-import MuiAlert from '@material-ui/lab/Alert';
-import MuiAlertTitle from '@material-ui/lab/AlertTitle';
-import styled from 'styled-components';
-import { useTransactionLibrary } from '../store';
+import React from 'react'
+import MuiAlert from '@material-ui/lab/Alert'
+import MuiAlertTitle from '@material-ui/lab/AlertTitle'
+import styled from 'styled-components'
+import { useTransactionLibrary } from '../store'
 
 const ChecksumWarning = () => {
-  const { hasChecksumWarning, setHasChecksumWarning } = useTransactionLibrary();
+  const { hasChecksumWarning, setHasChecksumWarning } = useTransactionLibrary()
 
   if (!hasChecksumWarning) {
-    return null;
+    return null
   }
 
   return (
     <ChecksumWrapper>
       <MuiAlert severity="warning" onClose={() => setHasChecksumWarning(false)}>
-        <MuiAlertTitle>This batch contains some changed properties since you saved or downloaded it</MuiAlertTitle>
+        <MuiAlertTitle>
+          This batch contains some changed properties since you saved or downloaded it
+        </MuiAlertTitle>
       </MuiAlert>
     </ChecksumWrapper>
-  );
-};
+  )
+}
 
 const ChecksumWrapper = styled.div`
   position: fixed;
@@ -26,6 +28,6 @@ const ChecksumWrapper = styled.div`
   z-index: 10;
   background-color: transparent;
   height: 70px;
-`;
+`
 
-export default ChecksumWarning;
+export default ChecksumWarning
diff --git a/apps/tx-builder/src/components/CreateNewBatchCard.tsx b/apps/tx-builder/src/components/CreateNewBatchCard.tsx
index 5bfc75b90..d8c40f178 100644
--- a/apps/tx-builder/src/components/CreateNewBatchCard.tsx
+++ b/apps/tx-builder/src/components/CreateNewBatchCard.tsx
@@ -1,38 +1,38 @@
-import { useRef } from 'react';
-import { ButtonLink, Icon, Text } from '@gnosis.pm/safe-react-components';
-import { alpha } from '@material-ui/core';
-import Hidden from '@material-ui/core/Hidden';
-import styled from 'styled-components';
-import { useTheme } from '@material-ui/core/styles';
+import { useRef } from 'react'
+import { ButtonLink, Icon, Text } from '@gnosis.pm/safe-react-components'
+import { alpha } from '@material-ui/core'
+import Hidden from '@material-ui/core/Hidden'
+import styled from 'styled-components'
+import { useTheme } from '@material-ui/core/styles'
 
-import { ReactComponent as CreateNewBatchSVG } from '../assets/add-new-batch.svg';
-import useDropZone from '../hooks/useDropZone';
-import { useMediaQuery } from '@material-ui/core';
+import { ReactComponent as CreateNewBatchSVG } from '../assets/add-new-batch.svg'
+import useDropZone from '../hooks/useDropZone'
+import { useMediaQuery } from '@material-ui/core'
 
 type CreateNewBatchCardProps = {
-  onFileSelected: (file: File | null) => void;
-};
+  onFileSelected: (file: File | null) => void
+}
 
 const CreateNewBatchCard = ({ onFileSelected }: CreateNewBatchCardProps) => {
-  const theme = useTheme();
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+  const theme = useTheme()
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'))
 
-  const fileRef = useRef<HTMLInputElement | null>(null);
+  const fileRef = useRef<HTMLInputElement | null>(null)
   const { isOverDropZone, isAcceptError, dropHandlers } = useDropZone((file: File | null) => {
-    onFileSelected(file);
-  }, '.json');
+    onFileSelected(file)
+  }, '.json')
 
   const handleFileSelected = (event: any) => {
-    event.preventDefault();
+    event.preventDefault()
     if (event.target.files.length) {
-      onFileSelected(event.target.files[0]);
+      onFileSelected(event.target.files[0])
     }
-  };
+  }
 
   const handleBrowse = function (event: any) {
-    event.preventDefault();
-    fileRef.current?.click();
-  };
+    event.preventDefault()
+    fileRef.current?.click()
+  }
 
   return (
     <Wrapper isSmallScreen={isSmallScreen}>
@@ -59,18 +59,29 @@ const CreateNewBatchCard = ({ onFileSelected }: CreateNewBatchCardProps) => {
           </>
         )}
       </StyledDragAndDropFileContainer>
-      <input ref={fileRef} id="logo-input" type="file" onChange={handleFileSelected} accept=".json" hidden />
+      <input
+        ref={fileRef}
+        id="logo-input"
+        type="file"
+        onChange={handleFileSelected}
+        accept=".json"
+        hidden
+      />
     </Wrapper>
-  );
-};
+  )
+}
 
-export default CreateNewBatchCard;
+export default CreateNewBatchCard
 
 const Wrapper = styled.div<{ isSmallScreen: boolean }>`
   margin-top: ${({ isSmallScreen }) => (isSmallScreen ? '0' : '64px')};
-`;
+`
 
-const StyledDragAndDropFileContainer = styled.div<{ dragOver: Boolean; fullWidth: boolean; error: Boolean }>`
+const StyledDragAndDropFileContainer = styled.div<{
+  dragOver: Boolean
+  fullWidth: boolean
+  error: Boolean
+}>`
   box-sizing: border-box;
   max-width: ${({ fullWidth }) => (fullWidth ? '100%' : '420px')};
   border: 2px dashed ${({ theme, error }) => (error ? theme.colors.error : '#008c73')};
@@ -88,20 +99,20 @@ const StyledDragAndDropFileContainer = styled.div<{ dragOver: Boolean; fullWidth
       return `
         transition: all 0.2s ease-in-out;
         transform: scale(1.05);
-      `;
+      `
     }
 
     return `
       border-color: ${error ? theme.colors.error : '#008c73'};
       background-color: ${error ? alpha(theme.colors.error, 0.7) : '#eaf7f4'};
-    `;
+    `
   }}
-`;
+`
 
 const StyledText = styled(Text)<{ error?: Boolean }>`
   margin-left: 4px;
   color: ${({ error }) => (error ? '#FFF' : '#566976')};
-`;
+`
 
 const StyledButtonLink = styled(ButtonLink)`
   padding: 0;
@@ -110,4 +121,4 @@ const StyledButtonLink = styled(ButtonLink)`
   && > p {
     font-size: 16px;
   }
-`;
+`
diff --git a/apps/tx-builder/src/components/EditTransactionModal.tsx b/apps/tx-builder/src/components/EditTransactionModal.tsx
index 77043ee36..c6821acb1 100644
--- a/apps/tx-builder/src/components/EditTransactionModal.tsx
+++ b/apps/tx-builder/src/components/EditTransactionModal.tsx
@@ -1,6 +1,6 @@
-import { GenericModal, Button } from '@gnosis.pm/safe-react-components';
-import styled from 'styled-components';
-import { ProposedTransaction } from '../typings/models';
+import { GenericModal, Button } from '@gnosis.pm/safe-react-components'
+import styled from 'styled-components'
+import { ProposedTransaction } from '../typings/models'
 import SolidityForm, {
   CONTRACT_METHOD_INDEX_FIELD_NAME,
   CONTRACT_VALUES_FIELD_NAME,
@@ -9,19 +9,19 @@ import SolidityForm, {
   parseFormToProposedTransaction,
   SolidityFormValuesTypes,
   TO_ADDRESS_FIELD_NAME,
-} from './forms/SolidityForm';
-import { weiToEther } from '../utils';
+} from './forms/SolidityForm'
+import { weiToEther } from '../utils'
 
 type EditTransactionModalProps = {
-  txIndex: number;
-  transaction: ProposedTransaction;
-  onSubmit: (newTransaction: ProposedTransaction) => void;
-  onDeleteTx: () => void;
-  onClose: () => void;
-  nativeCurrencySymbol: string | undefined;
-  networkPrefix: string | undefined;
-  getAddressFromDomain: (name: string) => Promise<string>;
-};
+  txIndex: number
+  transaction: ProposedTransaction
+  onSubmit: (newTransaction: ProposedTransaction) => void
+  onDeleteTx: () => void
+  onClose: () => void
+  nativeCurrencySymbol: string | undefined
+  networkPrefix: string | undefined
+  getAddressFromDomain: (name: string) => Promise<string>
+}
 
 const EditTransactionModal = ({
   txIndex,
@@ -33,11 +33,11 @@ const EditTransactionModal = ({
   networkPrefix,
   getAddressFromDomain,
 }: EditTransactionModalProps) => {
-  const { description, contractInterface } = transaction;
+  const { description, contractInterface } = transaction
 
-  const { customTransactionData, contractFieldsValues, contractMethodIndex } = description;
+  const { customTransactionData, contractFieldsValues, contractMethodIndex } = description
 
-  const isCustomHexDataTx = !!customTransactionData;
+  const isCustomHexDataTx = !!customTransactionData
 
   const initialFormValues: Partial<SolidityFormValuesTypes> = {
     [TO_ADDRESS_FIELD_NAME]: transaction.raw.to,
@@ -45,7 +45,7 @@ const EditTransactionModal = ({
     [CUSTOM_TRANSACTION_DATA_FIELD_NAME]: customTransactionData,
     [CONTRACT_METHOD_INDEX_FIELD_NAME]: contractMethodIndex,
     [CONTRACT_VALUES_FIELD_NAME]: contractFieldsValues,
-  };
+  }
 
   const handleSubmit = (values: SolidityFormValuesTypes) => {
     const editedTransaction = parseFormToProposedTransaction(
@@ -53,11 +53,11 @@ const EditTransactionModal = ({
       contractInterface,
       nativeCurrencySymbol,
       networkPrefix,
-    );
+    )
 
     // keep the id of the transaction
-    onSubmit({ ...editedTransaction, id: transaction.id });
-  };
+    onSubmit({ ...editedTransaction, id: transaction.id })
+  }
 
   return (
     <GenericModal
@@ -90,14 +90,14 @@ const EditTransactionModal = ({
       }
       onClose={onClose}
     />
-  );
-};
+  )
+}
 
 const ButtonContainer = styled.div`
   display: flex;
   justify-content: space-between;
   margin-top: 15px;
-`;
+`
 
 const FormContainer = styled.div`
   width: 400px;
@@ -105,6 +105,6 @@ const FormContainer = styled.div`
   border-radius: 8px;
 
   background-color: white;
-`;
+`
 
-export default EditTransactionModal;
+export default EditTransactionModal
diff --git a/apps/tx-builder/src/components/EditableLabel.tsx b/apps/tx-builder/src/components/EditableLabel.tsx
index e405b40a2..1e5fe0134 100644
--- a/apps/tx-builder/src/components/EditableLabel.tsx
+++ b/apps/tx-builder/src/components/EditableLabel.tsx
@@ -1,25 +1,27 @@
-import styled from 'styled-components';
+import styled from 'styled-components'
 
 type EditableLabelProps = {
-  children: React.ReactNode;
-  onEdit: (value: string) => void;
-};
+  children: React.ReactNode
+  onEdit: (value: string) => void
+}
 
 const EditableLabel = ({ children, onEdit }: EditableLabelProps) => {
   return (
     <EditableComponent
       contentEditable="true"
       suppressContentEditableWarning={true}
-      onBlur={(event) => onEdit(event.target.innerText)}
-      onKeyPress={(event: any) => event.key === 'Enter' && event.target.blur() && event.preventDefault()}
-      onClick={(event) => event.stopPropagation()}
+      onBlur={event => onEdit(event.target.innerText)}
+      onKeyPress={(event: any) =>
+        event.key === 'Enter' && event.target.blur() && event.preventDefault()
+      }
+      onClick={event => event.stopPropagation()}
     >
       {children}
     </EditableComponent>
-  );
-};
+  )
+}
 
-export default EditableLabel;
+export default EditableLabel
 
 const EditableComponent = styled.div`
   font-family: Averta, 'Roboto', sans-serif;
@@ -39,4 +41,4 @@ const EditableComponent = styled.div`
   &:focus {
     outline-color: #008c73;
   }
-`;
+`
diff --git a/apps/tx-builder/src/components/Header.tsx b/apps/tx-builder/src/components/Header.tsx
index b267e9e52..474ecb081 100644
--- a/apps/tx-builder/src/components/Header.tsx
+++ b/apps/tx-builder/src/components/Header.tsx
@@ -1,6 +1,6 @@
-import { FixedIcon, Icon, Text, Title, Tooltip } from '@gnosis.pm/safe-react-components';
-import { Link, useLocation, useNavigate } from 'react-router-dom';
-import styled from 'styled-components';
+import { FixedIcon, Icon, Text, Title, Tooltip } from '@gnosis.pm/safe-react-components'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
+import styled from 'styled-components'
 
 import {
   CREATE_BATCH_PATH,
@@ -8,42 +8,42 @@ import {
   HOME_PATH,
   SAVE_BATCH_PATH,
   TRANSACTION_LIBRARY_PATH,
-} from '../routes/routes';
-import { useTransactionLibrary } from '../store';
-import ChecksumWarning from './ChecksumWarning';
+} from '../routes/routes'
+import { useTransactionLibrary } from '../store'
+import ChecksumWarning from './ChecksumWarning'
 
 const HELP_ARTICLE_LINK =
-  'https://help.gnosis-safe.io/en/articles/4680071-create-a-batched-transaction-with-the-transaction-builder-safe-app';
+  'https://help.gnosis-safe.io/en/articles/4680071-create-a-batched-transaction-with-the-transaction-builder-safe-app'
 
 const goBackLabel: Record<string, string> = {
   [CREATE_BATCH_PATH]: 'Back to Transaction Creation',
   [TRANSACTION_LIBRARY_PATH]: 'Back to Your Transaction Library',
   [EDIT_BATCH_PATH]: 'Back to Edit Batch',
   [SAVE_BATCH_PATH]: 'Back to Transaction Creation',
-};
+}
 
 type LocationType = {
-  state: { from: string } | null;
-};
+  state: { from: string } | null
+}
 
 const Header = () => {
-  const { pathname } = useLocation();
+  const { pathname } = useLocation()
 
-  const navigate = useNavigate();
+  const navigate = useNavigate()
 
-  const goBack = () => navigate(-1);
+  const goBack = () => navigate(-1)
 
-  const { batches } = useTransactionLibrary();
+  const { batches } = useTransactionLibrary()
 
-  const isTransactionCreationPath = pathname === CREATE_BATCH_PATH;
-  const isSaveBatchPath = pathname === SAVE_BATCH_PATH;
+  const isTransactionCreationPath = pathname === CREATE_BATCH_PATH
+  const isSaveBatchPath = pathname === SAVE_BATCH_PATH
 
-  const showTitle = isTransactionCreationPath || isSaveBatchPath;
-  const showLinkToLibrary = isTransactionCreationPath || isSaveBatchPath;
+  const showTitle = isTransactionCreationPath || isSaveBatchPath
+  const showLinkToLibrary = isTransactionCreationPath || isSaveBatchPath
 
-  const { state } = useLocation() as LocationType;
+  const { state } = useLocation() as LocationType
 
-  const previousUrl = state?.from || CREATE_BATCH_PATH;
+  const previousUrl = state?.from || CREATE_BATCH_PATH
 
   return (
     <>
@@ -52,7 +52,13 @@ const Header = () => {
           <>
             {/* Transaction Builder Title */}
             <StyledTitle size="xl">Transaction Builder</StyledTitle>
-            <Tooltip placement="top" title="Help Article" backgroundColor="primary" textColor="white" arrow>
+            <Tooltip
+              placement="top"
+              title="Help Article"
+              backgroundColor="primary"
+              textColor="white"
+              arrow
+            >
               <a href={HELP_ARTICLE_LINK} target="_blank" rel="noreferrer">
                 <Icon size="md" type="info" />
               </a>
@@ -77,10 +83,10 @@ const Header = () => {
       </HeaderWrapper>
       <ChecksumWarning />
     </>
-  );
-};
+  )
+}
 
-export default Header;
+export default Header
 
 const HeaderWrapper = styled.header`
   position: fixed;
@@ -93,12 +99,12 @@ const HeaderWrapper = styled.header`
   height: 70px;
   padding: 0 40px;
   box-sizing: border-box;
-`;
+`
 
 const StyledTitle = styled(Title)`
   font-size: 20px;
   margin: 0 10px 0 0;
-`;
+`
 
 const StyledLink = styled(Link)`
   display: flex;
@@ -106,18 +112,18 @@ const StyledLink = styled(Link)`
   color: #000000;
   font-size: 16px;
   text-decoration: none;
-`;
+`
 
 const StyledLeftLinkLabel = styled(Text)`
   margin-left: 8px;
-`;
+`
 
 const RigthLinkWrapper = styled.div`
   display: flex;
   flex-grow: 1;
   justify-content: flex-end;
-`;
+`
 
 const StyledRightLinkLabel = styled(Text)`
   margin-right: 8px;
-`;
+`
diff --git a/apps/tx-builder/src/components/QuickTip.tsx b/apps/tx-builder/src/components/QuickTip.tsx
index 7e1422556..ac1a46c48 100644
--- a/apps/tx-builder/src/components/QuickTip.tsx
+++ b/apps/tx-builder/src/components/QuickTip.tsx
@@ -1,24 +1,25 @@
-import { Icon } from '@gnosis.pm/safe-react-components';
-import MuiAlert from '@material-ui/lab/Alert';
-import MuiAlertTitle from '@material-ui/lab/AlertTitle';
-import React from 'react';
-import styled from 'styled-components';
+import { Icon } from '@gnosis.pm/safe-react-components'
+import MuiAlert from '@material-ui/lab/Alert'
+import MuiAlertTitle from '@material-ui/lab/AlertTitle'
+import React from 'react'
+import styled from 'styled-components'
 
 type QuickTipProps = {
-  onClose: () => void;
-};
+  onClose: () => void
+}
 
 const QuickTip = ({ onClose }: QuickTipProps) => {
   return (
     <StyledAlert severity="success" onClose={onClose} icon={false}>
       <StyledTitle>Quick Tip</StyledTitle>
       You can save your batches in your transaction library{' '}
-      <StyledIcon size="sm" type="bookmark" color="primary" aria-label="Save to Library" /> (local browser storage) or{' '}
-      <StyledIcon size="sm" type="importImg" color="primary" aria-label="Download" /> download the .json file to use
-      them later.
+      <StyledIcon size="sm" type="bookmark" color="primary" aria-label="Save to Library" /> (local
+      browser storage) or{' '}
+      <StyledIcon size="sm" type="importImg" color="primary" aria-label="Download" /> download the
+      .json file to use them later.
     </StyledAlert>
-  );
-};
+  )
+}
 
 const StyledAlert = styled(MuiAlert)`
   && {
@@ -33,18 +34,18 @@ const StyledAlert = styled(MuiAlert)`
       align-items: flex-start;
     }
   }
-`;
+`
 
 const StyledTitle = styled(MuiAlertTitle)`
   && {
     font-size: 14px;
     font-weight: bold;
   }
-`;
+`
 
 const StyledIcon = styled(Icon)`
   position: relative;
   top: 3px;
-`;
+`
 
-export default QuickTip;
+export default QuickTip
diff --git a/apps/tx-builder/src/components/ShowMoreText.tsx b/apps/tx-builder/src/components/ShowMoreText.tsx
index 6c91c7289..83e150bbc 100644
--- a/apps/tx-builder/src/components/ShowMoreText.tsx
+++ b/apps/tx-builder/src/components/ShowMoreText.tsx
@@ -1,15 +1,15 @@
-import { useState, SyntheticEvent } from 'react';
-import { Link } from '@gnosis.pm/safe-react-components';
+import { useState, SyntheticEvent } from 'react'
+import { Link } from '@gnosis.pm/safe-react-components'
 
 type ShowMoreTextProps = {
-  children: string;
-  moreLabel?: string;
-  lessLabel?: string;
-  splitIndex?: number;
-};
+  children: string
+  moreLabel?: string
+  lessLabel?: string
+  splitIndex?: number
+}
 
-const SHOW_MORE = 'Show more';
-const SHOW_LESS = 'Show less';
+const SHOW_MORE = 'Show more'
+const SHOW_LESS = 'Show less'
 
 export const ShowMoreText = ({
   children,
@@ -17,15 +17,15 @@ export const ShowMoreText = ({
   lessLabel = SHOW_LESS,
   splitIndex = 50,
 }: ShowMoreTextProps) => {
-  const [expanded, setExpanded] = useState(false);
+  const [expanded, setExpanded] = useState(false)
 
   const handleToggle = (event: SyntheticEvent) => {
-    event.preventDefault();
-    setExpanded(!expanded);
-  };
+    event.preventDefault()
+    setExpanded(!expanded)
+  }
 
   if (children.length < splitIndex) {
-    return <span>{children}</span>;
+    return <span>{children}</span>
   }
 
   return (
@@ -33,5 +33,5 @@ export const ShowMoreText = ({
       {expanded ? `${children}  ` : `${children.substr(0, splitIndex)}  ...  `}
       <Link onClick={handleToggle}>{expanded ? lessLabel : moreLabel}</Link>
     </>
-  );
-};
+  )
+}
diff --git a/apps/tx-builder/src/components/TransactionBatchListItem.tsx b/apps/tx-builder/src/components/TransactionBatchListItem.tsx
index c5a669416..53785d6ce 100644
--- a/apps/tx-builder/src/components/TransactionBatchListItem.tsx
+++ b/apps/tx-builder/src/components/TransactionBatchListItem.tsx
@@ -7,37 +7,37 @@ import {
   Icon,
   Text,
   Tooltip,
-} from '@gnosis.pm/safe-react-components';
-import { AccordionDetails, IconButton } from '@material-ui/core';
-import { memo, useState } from 'react';
-import { DraggableProvided, DraggableStateSnapshot } from 'react-beautiful-dnd';
-import styled from 'styled-components';
-import DragIndicatorIcon from '@material-ui/icons/DragIndicator';
-import { ProposedTransaction } from '../typings/models';
-import TransactionDetails from './TransactionDetails';
-import { getTransactionText } from '../utils';
-
-const UNKNOWN_POSITION_LABEL = '?';
-const minArrowSize = '12';
+} from '@gnosis.pm/safe-react-components'
+import { AccordionDetails, IconButton } from '@material-ui/core'
+import { memo, useState } from 'react'
+import { DraggableProvided, DraggableStateSnapshot } from 'react-beautiful-dnd'
+import styled from 'styled-components'
+import DragIndicatorIcon from '@material-ui/icons/DragIndicator'
+import { ProposedTransaction } from '../typings/models'
+import TransactionDetails from './TransactionDetails'
+import { getTransactionText } from '../utils'
+
+const UNKNOWN_POSITION_LABEL = '?'
+const minArrowSize = '12'
 
 type TransactionProps = {
-  transaction: ProposedTransaction;
-  provided: DraggableProvided;
-  snapshot: DraggableStateSnapshot;
-  isLastTransaction: boolean;
-  showTransactionDetails: boolean;
-  index: number;
-  draggableTxIndexDestination: number | undefined;
-  draggableTxIndexOrigin: number | undefined;
-  reorderTransactions?: (sourceIndex: number, destinationIndex: number) => void;
-  networkPrefix: string | undefined;
-  replaceTransaction?: (newTransaction: ProposedTransaction, index: number) => void;
-  setTxIndexToEdit: (index: string) => void;
-  openEditTxModal: () => void;
-  removeTransaction?: (index: number) => void;
-  setTxIndexToRemove: (index: string) => void;
-  openDeleteTxModal: () => void;
-};
+  transaction: ProposedTransaction
+  provided: DraggableProvided
+  snapshot: DraggableStateSnapshot
+  isLastTransaction: boolean
+  showTransactionDetails: boolean
+  index: number
+  draggableTxIndexDestination: number | undefined
+  draggableTxIndexOrigin: number | undefined
+  reorderTransactions?: (sourceIndex: number, destinationIndex: number) => void
+  networkPrefix: string | undefined
+  replaceTransaction?: (newTransaction: ProposedTransaction, index: number) => void
+  setTxIndexToEdit: (index: string) => void
+  openEditTxModal: () => void
+  removeTransaction?: (index: number) => void
+  setTxIndexToRemove: (index: string) => void
+  openDeleteTxModal: () => void
+}
 
 const TransactionBatchListItem = memo(
   ({
@@ -58,21 +58,21 @@ const TransactionBatchListItem = memo(
     setTxIndexToRemove,
     openDeleteTxModal,
   }: TransactionProps) => {
-    const { description } = transaction;
-    const { to } = description;
+    const { description } = transaction
+    const { to } = description
 
-    const transactionDescription = getTransactionText(description);
+    const transactionDescription = getTransactionText(description)
 
-    const [isTxExpanded, setTxExpanded] = useState(false);
+    const [isTxExpanded, setTxExpanded] = useState(false)
 
     const onClickShowTransactionDetails = () => {
       if (showTransactionDetails) {
-        setTxExpanded((isTxExpanded) => !isTxExpanded);
+        setTxExpanded(isTxExpanded => !isTxExpanded)
       }
-    };
-    const isThisTxBeingDragging = snapshot.isDragging;
+    }
+    const isThisTxBeingDragging = snapshot.isDragging
 
-    const showArrowAdornment = !isLastTransaction && !isThisTxBeingDragging;
+    const showArrowAdornment = !isLastTransaction && !isThisTxBeingDragging
 
     // displayed order can change if the user uses the drag and drop feature
     const displayedTxPosition = getDisplayedTxPosition(
@@ -80,7 +80,7 @@ const TransactionBatchListItem = memo(
       isThisTxBeingDragging,
       draggableTxIndexDestination,
       draggableTxIndexOrigin,
-    );
+    )
 
     return (
       <TransactionListItem ref={provided.innerRef} {...provided.draggableProps}>
@@ -101,16 +101,30 @@ const TransactionBatchListItem = memo(
           TransitionProps={{ unmountOnExit: true }}
         >
           <div {...provided.dragHandleProps}>
-            <AccordionSummary expandIcon={false} style={{ cursor: reorderTransactions ? 'grab' : 'pointer' }}>
+            <AccordionSummary
+              expandIcon={false}
+              style={{ cursor: reorderTransactions ? 'grab' : 'pointer' }}
+            >
               {/* Drag & Drop Indicator */}
               {reorderTransactions && (
-                <Tooltip placement="top" title="Drag and Drop" backgroundColor="primary" textColor="white" arrow>
+                <Tooltip
+                  placement="top"
+                  title="Drag and Drop"
+                  backgroundColor="primary"
+                  textColor="white"
+                  arrow
+                >
                   <DragAndDropIndicatorIcon fontSize="small" />
                 </Tooltip>
               )}
 
               {/* Destination Address label */}
-              <EthHashInfo shortName={networkPrefix || ''} hash={to} shortenHash={4} shouldShowShortName />
+              <EthHashInfo
+                shortName={networkPrefix || ''}
+                hash={to}
+                shortenHash={4}
+                shouldShowShortName
+              />
 
               {/* Transaction Description label */}
               <TransactionsDescription size="lg">{transactionDescription}</TransactionsDescription>
@@ -123,10 +137,10 @@ const TransactionBatchListItem = memo(
                   <TransactionActionButton
                     size="medium"
                     aria-label="Edit transaction"
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      setTxIndexToEdit(String(index));
-                      openEditTxModal();
+                    onClick={event => {
+                      event.stopPropagation()
+                      setTxIndexToEdit(String(index))
+                      openEditTxModal()
                     }}
                   >
                     <Icon size="sm" type="edit" />
@@ -136,12 +150,18 @@ const TransactionBatchListItem = memo(
 
               {/* Delete transaction */}
               {removeTransaction && (
-                <Tooltip placement="top" title="Delete transaction" backgroundColor="primary" textColor="white" arrow>
+                <Tooltip
+                  placement="top"
+                  title="Delete transaction"
+                  backgroundColor="primary"
+                  textColor="white"
+                  arrow
+                >
                   <TransactionActionButton
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      setTxIndexToRemove(String(index));
-                      openDeleteTxModal();
+                    onClick={event => {
+                      event.stopPropagation()
+                      setTxIndexToRemove(String(index))
+                      openDeleteTxModal()
                     }}
                     size="medium"
                     aria-label="Delete transaction"
@@ -161,9 +181,9 @@ const TransactionBatchListItem = memo(
                   arrow
                 >
                   <TransactionActionButton
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      onClickShowTransactionDetails();
+                    onClick={event => {
+                      event.stopPropagation()
+                      onClickShowTransactionDetails()
                     }}
                     size="medium"
                     aria-label="Expand transaction details"
@@ -181,9 +201,9 @@ const TransactionBatchListItem = memo(
           </AccordionDetails>
         </StyledAccordion>
       </TransactionListItem>
-    );
+    )
   },
-);
+)
 
 const getDisplayedTxPosition = (
   index: number,
@@ -193,30 +213,32 @@ const getDisplayedTxPosition = (
 ): string => {
   // we show the correct position in the transaction that is being dragged
   if (isDraggingThisTx) {
-    const isAwayFromDroppableZone = draggableTxIndexDestination === undefined;
-    return isAwayFromDroppableZone ? UNKNOWN_POSITION_LABEL : String(draggableTxIndexDestination + 1);
+    const isAwayFromDroppableZone = draggableTxIndexDestination === undefined
+    return isAwayFromDroppableZone
+      ? UNKNOWN_POSITION_LABEL
+      : String(draggableTxIndexDestination + 1)
   }
 
   // if a transaction is being dragged, we show the correct position in previous transactions
   if (index < Number(draggableTxIndexOrigin)) {
     // depending on the current destination we show the correct position
-    return index >= Number(draggableTxIndexDestination) ? `${index + 2}` : `${index + 1}`;
+    return index >= Number(draggableTxIndexDestination) ? `${index + 2}` : `${index + 1}`
   }
 
   // if a transaction is being dragged, we show the correct position in next transactions
   if (index > Number(draggableTxIndexOrigin)) {
     // depending on the current destination we show the correct position
-    return index > Number(draggableTxIndexDestination) ? `${index + 1}` : `${index}`;
+    return index > Number(draggableTxIndexDestination) ? `${index + 1}` : `${index}`
   }
 
   // otherwise we show the natural position
-  return `${index + 1}`;
-};
+  return `${index + 1}`
+}
 
 const TransactionListItem = styled.li`
   display: flex;
   margin-bottom: 8px;
-`;
+`
 
 // transaction postion dot styles
 
@@ -225,7 +247,7 @@ const PositionWrapper = styled.div`
   flex-direction: column;
   align-items: center;
   padding: 14px 10px 0 0;
-`;
+`
 
 const PositionDot = styled(Dot).withConfig({
   shouldForwardProp: (prop, defaultValidatorFn) => defaultValidatorFn(prop),
@@ -235,7 +257,7 @@ const PositionDot = styled(Dot).withConfig({
   min-width: 24px;
   background-color: ${({ isDragging }) => (isDragging ? '#92c9be' : ' #e2e3e3')};
   transition: background-color 0.5s linear;
-`;
+`
 
 const ArrowAdornment = styled.div`
   position: relative;
@@ -268,12 +290,12 @@ const ArrowAdornment = styled.div`
 
     transform: rotate(45deg);
   }
-`;
+`
 
 // transaction description styles
 
 const StyledAccordion = styled(Accordion).withConfig({
-  shouldForwardProp: (prop) => !['isDragging'].includes(prop),
+  shouldForwardProp: prop => !['isDragging'].includes(prop),
 })<{ isDragging: boolean }>`
   flex-grow: 1;
 
@@ -298,7 +320,8 @@ const StyledAccordion = styled(Accordion).withConfig({
 
     &.Mui-expanded {
       background-color: #effaf8;
-      border-color: ${({ isDragging, expanded }) => (isDragging || expanded ? '#92c9be' : '#e8e7e6')};
+      border-color: ${({ isDragging, expanded }) =>
+        isDragging || expanded ? '#92c9be' : '#e8e7e6'};
     }
   }
 
@@ -306,13 +329,13 @@ const StyledAccordion = styled(Accordion).withConfig({
     max-width: 100%;
     align-items: center;
   }
-`;
+`
 
 const TransactionActionButton = styled(IconButton)`
   height: 32px;
   width: 32px;
   padding: 0;
-`;
+`
 
 const TransactionsDescription = styled(Text)`
   flex-grow: 1;
@@ -321,11 +344,11 @@ const TransactionsDescription = styled(Text)`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-`;
+`
 
 const DragAndDropIndicatorIcon = styled(DragIndicatorIcon)`
   color: #b2bbc0;
   margin-right: 4px;
-`;
+`
 
-export default TransactionBatchListItem;
+export default TransactionBatchListItem
diff --git a/apps/tx-builder/src/components/TransactionDetails.tsx b/apps/tx-builder/src/components/TransactionDetails.tsx
index f67494eed..5aaeb1c67 100644
--- a/apps/tx-builder/src/components/TransactionDetails.tsx
+++ b/apps/tx-builder/src/components/TransactionDetails.tsx
@@ -1,41 +1,60 @@
-import { ButtonLink, EthHashInfo, Text, Title } from '@gnosis.pm/safe-react-components';
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
+import { ButtonLink, EthHashInfo, Text, Title } from '@gnosis.pm/safe-react-components'
+import React, { useEffect, useState } from 'react'
+import styled from 'styled-components'
 
-import useElementHeight from '../hooks/useElementHeight/useElementHeight';
-import { ProposedTransaction } from '../typings/models';
-import { weiToEther } from '../utils';
+import useElementHeight from '../hooks/useElementHeight/useElementHeight'
+import { ProposedTransaction } from '../typings/models'
+import { weiToEther } from '../utils'
 
 type TransactionDetailsProp = {
-  transaction: ProposedTransaction;
-};
+  transaction: ProposedTransaction
+}
 
 const TransactionDetails = ({ transaction }: TransactionDetailsProp) => {
-  const { description, raw } = transaction;
+  const { description, raw } = transaction
 
-  const { to, value, data } = raw;
-  const { contractMethod, contractFieldsValues, customTransactionData, networkPrefix, nativeCurrencySymbol } =
-    description;
+  const { to, value, data } = raw
+  const {
+    contractMethod,
+    contractFieldsValues,
+    customTransactionData,
+    networkPrefix,
+    nativeCurrencySymbol,
+  } = description
 
-  const isCustomHexDataTx = !!customTransactionData;
-  const isContractInteractionTx = !!contractMethod && !isCustomHexDataTx;
+  const isCustomHexDataTx = !!customTransactionData
+  const isContractInteractionTx = !!contractMethod && !isCustomHexDataTx
 
-  const isTokenTransferTx = !isCustomHexDataTx && !isContractInteractionTx;
+  const isTokenTransferTx = !isCustomHexDataTx && !isContractInteractionTx
 
   return (
     <Wrapper>
       <StyledTxTitle size="md">
-        {isTokenTransferTx ? `Transfer ${weiToEther(value)} ${nativeCurrencySymbol} to:` : 'Interact with:'}
+        {isTokenTransferTx
+          ? `Transfer ${weiToEther(value)} ${nativeCurrencySymbol} to:`
+          : 'Interact with:'}
       </StyledTxTitle>
 
-      <EthHashInfo shortName={networkPrefix || ''} hash={to} showAvatar showCopyBtn shouldShowShortName />
+      <EthHashInfo
+        shortName={networkPrefix || ''}
+        hash={to}
+        showAvatar
+        showCopyBtn
+        shouldShowShortName
+      />
 
       <TxSummaryContainer>
         {/* to address */}
         <Text size="xl" color="secondaryHover">
           to (address)
         </Text>
-        <EthHashInfo shortName={networkPrefix || ''} hash={to} shortenHash={4} showCopyBtn shouldShowShortName />
+        <EthHashInfo
+          shortName={networkPrefix || ''}
+          hash={to}
+          shortenHash={4}
+          showCopyBtn
+          shouldShowShortName
+        />
 
         {/* value */}
         <Text size="xl" color="secondaryHover">
@@ -59,9 +78,9 @@ const TransactionDetails = ({ transaction }: TransactionDetailsProp) => {
 
             {/* method inputs */}
             {contractMethod.inputs.map(({ name, type }, index) => {
-              const inputName = name || index;
-              const inputLabel = `${inputName} (${type})`;
-              const inputValue = contractFieldsValues?.[inputName];
+              const inputName = name || index
+              const inputLabel = `${inputName} (${type})`
+              const inputValue = contractFieldsValues?.[inputName]
               return (
                 <React.Fragment key={`${inputLabel}-${index}`}>
                   {/* input name */}
@@ -71,22 +90,22 @@ const TransactionDetails = ({ transaction }: TransactionDetailsProp) => {
                   {/* input value */}
                   <TxValueLabel>{inputValue}</TxValueLabel>
                 </React.Fragment>
-              );
+              )
             })}
           </>
         )}
       </TxSummaryContainer>
     </Wrapper>
-  );
-};
+  )
+}
 
-export default TransactionDetails;
+export default TransactionDetails
 
 const Wrapper = styled.article`
   flex-grow: 1;
   padding: 0 16px;
   user-select: text;
-`;
+`
 
 const TxSummaryContainer = styled.div`
   display: grid;
@@ -94,14 +113,14 @@ const TxSummaryContainer = styled.div`
   gap: 4px;
 
   margin-top: 16px;
-`;
+`
 
 const StyledTxTitle = styled(Title)`
   font-size: 16px;
   margin: 8px 0;
   font-weight: bold;
   line-height: initial;
-`;
+`
 
 const StyledMethodNameLabel = styled(Text)`
   padding-left: 4px;
@@ -109,26 +128,26 @@ const StyledMethodNameLabel = styled(Text)`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-`;
+`
 
-const LINE_HEIGHT = 22;
-const MAX_HEIGHT = 2 * LINE_HEIGHT; // 2 lines as max height
+const LINE_HEIGHT = 22
+const MAX_HEIGHT = 2 * LINE_HEIGHT // 2 lines as max height
 
 const TxValueLabel = ({ children }: { children: React.ReactNode }) => {
-  const [showMore, setShowMore] = useState(false);
-  const [showEllipsis, setShowEllipsis] = useState(false);
+  const [showMore, setShowMore] = useState(false)
+  const [showEllipsis, setShowEllipsis] = useState(false)
 
-  const { height: containerHeight, elementRef } = useElementHeight<HTMLDivElement>();
+  const { height: containerHeight, elementRef } = useElementHeight<HTMLDivElement>()
 
   // we show the Show more/less button if the height is more than 44px (the height of 2 lines)
-  const showMoreButton = containerHeight && containerHeight > MAX_HEIGHT;
+  const showMoreButton = containerHeight && containerHeight > MAX_HEIGHT
 
   // we show/hide ellipsis at the end of the second line if user clicks on "Show more"
   useEffect(() => {
     if (showMoreButton && !showMore) {
-      setShowEllipsis(true);
+      setShowEllipsis(true)
     }
-  }, [showMoreButton, showMore]);
+  }, [showMoreButton, showMore])
 
   return (
     <div ref={elementRef}>
@@ -139,16 +158,16 @@ const TxValueLabel = ({ children }: { children: React.ReactNode }) => {
 
       {/* show more/less button */}
       {showMoreButton && (
-        <StyledButtonLink color="primary" onClick={() => setShowMore((showMore) => !showMore)}>
+        <StyledButtonLink color="primary" onClick={() => setShowMore(showMore => !showMore)}>
           {showMore ? 'Show less' : 'Show more'}
         </StyledButtonLink>
       )}
     </div>
-  );
-};
+  )
+}
 
 const StyledTxValueLabel = styled(Text).withConfig({
-  shouldForwardProp: (prop) => !['showMore'].includes(prop) || !['showEllipsis'].includes(prop),
+  shouldForwardProp: prop => !['showMore'].includes(prop) || !['showEllipsis'].includes(prop),
 })<{ showMore?: boolean; showEllipsis?: boolean }>`
   max-height: ${({ showMore }) => (showMore ? '100%' : `${MAX_HEIGHT + 1}px`)};
 
@@ -165,7 +184,7 @@ const StyledTxValueLabel = styled(Text).withConfig({
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
   }`}
-`;
+`
 
 const StyledButtonLink = styled(ButtonLink)`
   padding: 0;
@@ -174,4 +193,4 @@ const StyledButtonLink = styled(ButtonLink)`
     margin 0;
   }
 
-`;
+`
diff --git a/apps/tx-builder/src/components/TransactionsBatchList.tsx b/apps/tx-builder/src/components/TransactionsBatchList.tsx
index 8782befc9..85a056883 100644
--- a/apps/tx-builder/src/components/TransactionsBatchList.tsx
+++ b/apps/tx-builder/src/components/TransactionsBatchList.tsx
@@ -1,8 +1,8 @@
-import { isValidElement, useMemo, useState } from 'react';
-import { Dot, Text, Title, Icon, Tooltip } from '@gnosis.pm/safe-react-components';
+import { isValidElement, useMemo, useState } from 'react'
+import { Dot, Text, Title, Icon, Tooltip } from '@gnosis.pm/safe-react-components'
 
-import IconButton from '@material-ui/core/IconButton';
-import styled from 'styled-components';
+import IconButton from '@material-ui/core/IconButton'
+import styled from 'styled-components'
 import {
   DragDropContext,
   Droppable,
@@ -13,33 +13,33 @@ import {
   Draggable,
   DraggableProvided,
   DraggableStateSnapshot,
-} from 'react-beautiful-dnd';
-import { ProposedTransaction } from '../typings/models';
-import useModal from '../hooks/useModal/useModal';
-import DeleteTransactionModal from './modals/DeleteTransactionModal';
-import DeleteBatchModal from './modals/DeleteBatchModal';
-import SaveBatchModal from './modals/SaveBatchModal';
-import EditTransactionModal from './EditTransactionModal';
-import { useNetwork, useTransactionLibrary } from '../store';
-import Item from './TransactionBatchListItem';
-import VirtualizedList from './VirtualizedList';
-import { getTransactionText } from '../utils';
+} from 'react-beautiful-dnd'
+import { ProposedTransaction } from '../typings/models'
+import useModal from '../hooks/useModal/useModal'
+import DeleteTransactionModal from './modals/DeleteTransactionModal'
+import DeleteBatchModal from './modals/DeleteBatchModal'
+import SaveBatchModal from './modals/SaveBatchModal'
+import EditTransactionModal from './EditTransactionModal'
+import { useNetwork, useTransactionLibrary } from '../store'
+import Item from './TransactionBatchListItem'
+import VirtualizedList from './VirtualizedList'
+import { getTransactionText } from '../utils'
 
 type TransactionsBatchListProps = {
-  transactions: ProposedTransaction[];
-  showTransactionDetails: boolean;
-  showBatchHeader: boolean;
-  batchTitle?: string | React.ReactNode;
-  removeTransaction?: (index: number) => void;
-  saveBatch?: (name: string, transactions: ProposedTransaction[]) => void;
-  downloadBatch?: (name: string, transactions: ProposedTransaction[]) => void;
-  removeAllTransactions?: () => void;
-  replaceTransaction?: (newTransaction: ProposedTransaction, index: number) => void;
-  reorderTransactions?: (sourceIndex: number, destinationIndex: number) => void;
-};
-
-const TRANSACTION_LIST_DROPPABLE_ID = 'Transaction_List';
-const DROP_EVENT = 'DROP';
+  transactions: ProposedTransaction[]
+  showTransactionDetails: boolean
+  showBatchHeader: boolean
+  batchTitle?: string | React.ReactNode
+  removeTransaction?: (index: number) => void
+  saveBatch?: (name: string, transactions: ProposedTransaction[]) => void
+  downloadBatch?: (name: string, transactions: ProposedTransaction[]) => void
+  removeAllTransactions?: () => void
+  replaceTransaction?: (newTransaction: ProposedTransaction, index: number) => void
+  reorderTransactions?: (sourceIndex: number, destinationIndex: number) => void
+}
+
+const TRANSACTION_LIST_DROPPABLE_ID = 'Transaction_List'
+const DROP_EVENT = 'DROP'
 
 const TransactionsBatchList = ({
   transactions,
@@ -54,60 +54,72 @@ const TransactionsBatchList = ({
   batchTitle,
 }: TransactionsBatchListProps) => {
   // we need those states to display the correct position in each tx during the drag & drop
-  const { batch } = useTransactionLibrary();
-  const [draggableTxIndexOrigin, setDraggableTxIndexOrigin] = useState<number>();
-  const [draggableTxIndexDestination, setDraggableTxIndexDestination] = useState<number>();
+  const { batch } = useTransactionLibrary()
+  const [draggableTxIndexOrigin, setDraggableTxIndexOrigin] = useState<number>()
+  const [draggableTxIndexDestination, setDraggableTxIndexDestination] = useState<number>()
 
-  const { networkPrefix, getAddressFromDomain, nativeCurrencySymbol } = useNetwork();
+  const { networkPrefix, getAddressFromDomain, nativeCurrencySymbol } = useNetwork()
 
   const onDragStart = ({ source }: DragStart) => {
-    setDraggableTxIndexOrigin(source.index);
-    setDraggableTxIndexDestination(source.index);
-  };
+    setDraggableTxIndexOrigin(source.index)
+    setDraggableTxIndexDestination(source.index)
+  }
 
   const onDragUpdate = ({ source, destination }: DragUpdate) => {
-    setDraggableTxIndexOrigin(source.index);
-    setDraggableTxIndexDestination(destination?.index);
-  };
+    setDraggableTxIndexOrigin(source.index)
+    setDraggableTxIndexDestination(destination?.index)
+  }
 
   // we only perform the reorder if its present
   const onDragEnd = ({ reason, source, destination }: DropResult) => {
-    const sourceIndex = source.index;
-    const destinationIndex = destination?.index;
+    const sourceIndex = source.index
+    const destinationIndex = destination?.index
 
-    const isDropEvent = reason === DROP_EVENT; // because user can cancel the drag & drop
-    const hasTxPositionChanged = sourceIndex !== destinationIndex && destinationIndex !== undefined;
+    const isDropEvent = reason === DROP_EVENT // because user can cancel the drag & drop
+    const hasTxPositionChanged = sourceIndex !== destinationIndex && destinationIndex !== undefined
 
-    const shouldPerformTxReorder = isDropEvent && hasTxPositionChanged;
+    const shouldPerformTxReorder = isDropEvent && hasTxPositionChanged
 
     if (shouldPerformTxReorder) {
-      reorderTransactions?.(sourceIndex, destinationIndex);
+      reorderTransactions?.(sourceIndex, destinationIndex)
     }
 
-    setDraggableTxIndexOrigin(undefined);
-    setDraggableTxIndexDestination(undefined);
-  };
+    setDraggableTxIndexOrigin(undefined)
+    setDraggableTxIndexDestination(undefined)
+  }
 
   // 5 modals needed: save batch modal, edit transaction modal, delete batch modal, delete transaction modal, download batch modal
   const {
     open: showDeleteBatchModal,
     openModal: openClearTransactions,
     closeModal: closeDeleteBatchModal,
-  } = useModal();
-  const { open: showSaveBatchModal, openModal: openSaveBatchModal, closeModal: closeSaveBatchModal } = useModal();
-  const { open: showDeleteTxModal, openModal: openDeleteTxModal, closeModal: closeDeleteTxModal } = useModal();
-  const { open: showEditTxModal, openModal: openEditTxModal, closeModal: closeEditTxModal } = useModal();
+  } = useModal()
+  const {
+    open: showSaveBatchModal,
+    openModal: openSaveBatchModal,
+    closeModal: closeSaveBatchModal,
+  } = useModal()
+  const {
+    open: showDeleteTxModal,
+    openModal: openDeleteTxModal,
+    closeModal: closeDeleteTxModal,
+  } = useModal()
+  const {
+    open: showEditTxModal,
+    openModal: openEditTxModal,
+    closeModal: closeEditTxModal,
+  } = useModal()
 
-  const [txIndexToRemove, setTxIndexToRemove] = useState<string>();
-  const [txIndexToEdit, setTxIndexToEdit] = useState<string>();
+  const [txIndexToRemove, setTxIndexToRemove] = useState<string>()
+  const [txIndexToEdit, setTxIndexToEdit] = useState<string>()
 
   const fileName = useMemo(() => {
     if (isValidElement(batchTitle)) {
-      return batchTitle.props.children;
+      return batchTitle.props.children
     }
 
-    return batchTitle || 'Untitled';
-  }, [batchTitle]);
+    return batchTitle || 'Untitled'
+  }, [batchTitle])
 
   return (
     <>
@@ -131,7 +143,13 @@ const TransactionsBatchList = ({
 
             {/* Transactions Batch Actions */}
             {saveBatch && (
-              <Tooltip placement="top" title="Save to Library" backgroundColor="primary" textColor="white" arrow>
+              <Tooltip
+                placement="top"
+                title="Save to Library"
+                backgroundColor="primary"
+                textColor="white"
+                arrow
+              >
                 <StyledHeaderIconButton onClick={openSaveBatchModal}>
                   <Icon
                     size="sm"
@@ -143,7 +161,13 @@ const TransactionsBatchList = ({
               </Tooltip>
             )}
             {downloadBatch && (
-              <Tooltip placement="top" title="Download" backgroundColor="primary" textColor="white" arrow>
+              <Tooltip
+                placement="top"
+                title="Download"
+                backgroundColor="primary"
+                textColor="white"
+                arrow
+              >
                 <StyledHeaderIconButton onClick={() => downloadBatch(fileName, transactions)}>
                   <Icon size="sm" type="importImg" color="primary" aria-label="Download" />
                 </StyledHeaderIconButton>
@@ -151,7 +175,13 @@ const TransactionsBatchList = ({
             )}
 
             {removeAllTransactions && (
-              <Tooltip placement="top" title="Clear transactions" backgroundColor="primary" textColor="white" arrow>
+              <Tooltip
+                placement="top"
+                title="Clear transactions"
+                backgroundColor="primary"
+                textColor="white"
+                arrow
+              >
                 <StyledHeaderIconButton onClick={openClearTransactions}>
                   <Icon size="sm" type="delete" color="error" aria-label="Clear transactions" />
                 </StyledHeaderIconButton>
@@ -162,7 +192,11 @@ const TransactionsBatchList = ({
 
         {/* Standard Transactions List */}
         {transactions.length <= 20 && (
-          <DragDropContext onDragStart={onDragStart} onDragUpdate={onDragUpdate} onDragEnd={onDragEnd}>
+          <DragDropContext
+            onDragStart={onDragStart}
+            onDragUpdate={onDragUpdate}
+            onDragEnd={onDragEnd}
+          >
             <Droppable mode={'standard'} droppableId={TRANSACTION_LIST_DROPPABLE_ID}>
               {(provided: DroppableProvided) => (
                 <TransactionList {...provided.droppableProps} ref={provided.innerRef}>
@@ -205,11 +239,19 @@ const TransactionsBatchList = ({
 
         {/* Virtualized Transaction List */}
         {transactions.length > 20 && (
-          <DragDropContext onDragStart={onDragStart} onDragUpdate={onDragUpdate} onDragEnd={onDragEnd}>
+          <DragDropContext
+            onDragStart={onDragStart}
+            onDragUpdate={onDragUpdate}
+            onDragEnd={onDragEnd}
+          >
             <Droppable
               mode={'virtual'}
               droppableId={TRANSACTION_LIST_DROPPABLE_ID}
-              renderClone={(provided: DraggableProvided, snapshot: DraggableStateSnapshot, rubric) => (
+              renderClone={(
+                provided: DraggableProvided,
+                snapshot: DraggableStateSnapshot,
+                rubric,
+              ) => (
                 <Item
                   key={transactions[rubric.source.index].id}
                   transaction={transactions[rubric.source.index]}
@@ -281,12 +323,12 @@ const TransactionsBatchList = ({
           txIndex={Number(txIndexToEdit)}
           transaction={transactions[Number(txIndexToEdit)]}
           onSubmit={(updatedTransaction: ProposedTransaction) => {
-            closeEditTxModal();
-            replaceTransaction?.(updatedTransaction, Number(txIndexToEdit));
+            closeEditTxModal()
+            replaceTransaction?.(updatedTransaction, Number(txIndexToEdit))
           }}
           onDeleteTx={() => {
-            closeEditTxModal();
-            removeTransaction?.(Number(txIndexToEdit));
+            closeEditTxModal()
+            removeTransaction?.(Number(txIndexToEdit))
           }}
           onClose={closeEditTxModal}
           networkPrefix={networkPrefix}
@@ -300,8 +342,8 @@ const TransactionsBatchList = ({
         <DeleteBatchModal
           count={transactions.length}
           onClick={() => {
-            closeDeleteBatchModal();
-            removeAllTransactions();
+            closeDeleteBatchModal()
+            removeAllTransactions()
           }}
           onClose={closeDeleteBatchModal}
         />
@@ -313,8 +355,8 @@ const TransactionsBatchList = ({
           txIndex={Number(txIndexToRemove)}
           txDescription={getTransactionText(transactions[Number(txIndexToRemove)]?.description)}
           onClick={() => {
-            closeDeleteTxModal();
-            removeTransaction?.(Number(txIndexToRemove));
+            closeDeleteTxModal()
+            removeTransaction?.(Number(txIndexToRemove))
           }}
           onClose={closeDeleteTxModal}
         />
@@ -324,24 +366,24 @@ const TransactionsBatchList = ({
       {showSaveBatchModal && (
         <SaveBatchModal
           onClick={(name: string) => {
-            closeSaveBatchModal();
-            saveBatch?.(name, transactions);
+            closeSaveBatchModal()
+            saveBatch?.(name, transactions)
           }}
           onClose={closeSaveBatchModal}
         />
       )}
     </>
-  );
-};
+  )
+}
 
-export default TransactionsBatchList;
+export default TransactionsBatchList
 
 // tx positions can change during drag & drop
 
 const TransactionsBatchWrapper = styled.section`
   width: 100%;
   user-select: none;
-`;
+`
 
 // batch header styles
 
@@ -349,14 +391,14 @@ const TransactionHeader = styled.header`
   margin-top: 24px;
   display: flex;
   align-items: center;
-`;
+`
 
 const TransactionCounterDot = styled(Dot)`
   height: 24px;
   width: 24px;
   min-width: 24px;
   background-color: #566976;
-`;
+`
 
 const TransactionsTitle = styled(Title)`
   flex-grow: 1;
@@ -367,7 +409,7 @@ const TransactionsTitle = styled(Title)`
   line-height: normal;
   display: flex;
   align-items: center;
-`;
+`
 
 const StyledHeaderIconButton = styled(IconButton)`
   &.MuiIconButton-root {
@@ -375,11 +417,11 @@ const StyledHeaderIconButton = styled(IconButton)`
     background-color: white;
     margin-left: 8px;
   }
-`;
+`
 
 // transactions list styles
 
 const TransactionList = styled.ol`
   list-style: none;
   padding: 0;
-`;
+`
diff --git a/apps/tx-builder/src/components/VirtualizedList.tsx b/apps/tx-builder/src/components/VirtualizedList.tsx
index 6ddc059f2..c0da55b33 100644
--- a/apps/tx-builder/src/components/VirtualizedList.tsx
+++ b/apps/tx-builder/src/components/VirtualizedList.tsx
@@ -1,14 +1,18 @@
-import { memo, useEffect, useState } from 'react';
-import { Virtuoso } from 'react-virtuoso';
-import styled from 'styled-components';
+import { memo, useEffect, useState } from 'react'
+import { Virtuoso } from 'react-virtuoso'
+import styled from 'styled-components'
 
 type VirtualizedListProps<T> = {
-  innerRef: any;
-  items: T[];
-  renderItem: (item: T, index: number) => React.ReactNode;
-};
+  innerRef: any
+  items: T[]
+  renderItem: (item: T, index: number) => React.ReactNode
+}
 
-const VirtualizedList = <T extends unknown>({ innerRef, items, renderItem }: VirtualizedListProps<T>) => {
+const VirtualizedList = <T extends unknown>({
+  innerRef,
+  items,
+  renderItem,
+}: VirtualizedListProps<T>) => {
   return (
     <Virtuoso
       style={{ height: 600 }}
@@ -21,32 +25,32 @@ const VirtualizedList = <T extends unknown>({ innerRef, items, renderItem }: Vir
       totalCount={items.length}
       overscan={100}
     />
-  );
-};
+  )
+}
 
 const HeightPreservingItem: React.FC = memo(({ children, ...props }: any) => {
-  const [size, setSize] = useState(0);
-  const knownSize = props['data-known-size'];
+  const [size, setSize] = useState(0)
+  const knownSize = props['data-known-size']
 
   useEffect(() => {
-    setSize((prevSize) => {
-      return knownSize === 0 ? prevSize : knownSize;
-    });
-  }, [knownSize]);
+    setSize(prevSize => {
+      return knownSize === 0 ? prevSize : knownSize
+    })
+  }, [knownSize])
 
   return (
     <HeightPreservingContainer {...props} size={size}>
       {children}
     </HeightPreservingContainer>
-  );
-});
+  )
+})
 
 const HeightPreservingContainer = styled.div<{ size: number }>`
-  --child-height: ${(props) => `${props.size}px`};
+  --child-height: ${props => `${props.size}px`};
   &:empty {
     min-height: calc(var(--child-height));
     box-sizing: border-box;
   }
-`;
+`
 
-export default VirtualizedList;
+export default VirtualizedList
diff --git a/apps/tx-builder/src/components/forms/AddNewTransactionForm.tsx b/apps/tx-builder/src/components/forms/AddNewTransactionForm.tsx
index 97c4e30f2..e5df78724 100644
--- a/apps/tx-builder/src/components/forms/AddNewTransactionForm.tsx
+++ b/apps/tx-builder/src/components/forms/AddNewTransactionForm.tsx
@@ -1,36 +1,45 @@
-import { Title, Button } from '@gnosis.pm/safe-react-components';
-import styled from 'styled-components';
+import { Title, Button } from '@gnosis.pm/safe-react-components'
+import styled from 'styled-components'
 
-import { ContractInterface } from '../../typings/models';
-import { isValidAddress } from '../../utils';
+import { ContractInterface } from '../../typings/models'
+import { isValidAddress } from '../../utils'
 import SolidityForm, {
   CONTRACT_METHOD_INDEX_FIELD_NAME,
   SolidityFormValuesTypes,
   TO_ADDRESS_FIELD_NAME,
   parseFormToProposedTransaction,
-} from './SolidityForm';
-import { useTransactions, useNetwork } from '../../store';
+} from './SolidityForm'
+import { useTransactions, useNetwork } from '../../store'
 
 type AddNewTransactionFormProps = {
-  contract: ContractInterface | null;
-  to: string;
-  showHexEncodedData: boolean;
-};
+  contract: ContractInterface | null
+  to: string
+  showHexEncodedData: boolean
+}
 
-const AddNewTransactionForm = ({ contract, to, showHexEncodedData }: AddNewTransactionFormProps) => {
+const AddNewTransactionForm = ({
+  contract,
+  to,
+  showHexEncodedData,
+}: AddNewTransactionFormProps) => {
   const initialFormValues = {
     [TO_ADDRESS_FIELD_NAME]: isValidAddress(to) ? to : '',
     [CONTRACT_METHOD_INDEX_FIELD_NAME]: '0',
-  };
+  }
 
-  const { addTransaction } = useTransactions();
-  const { networkPrefix, getAddressFromDomain, nativeCurrencySymbol } = useNetwork();
+  const { addTransaction } = useTransactions()
+  const { networkPrefix, getAddressFromDomain, nativeCurrencySymbol } = useNetwork()
 
   const onSubmit = (values: SolidityFormValuesTypes) => {
-    const proposedTransaction = parseFormToProposedTransaction(values, contract, nativeCurrencySymbol, networkPrefix);
+    const proposedTransaction = parseFormToProposedTransaction(
+      values,
+      contract,
+      nativeCurrencySymbol,
+      networkPrefix,
+    )
 
-    addTransaction(proposedTransaction);
-  };
+    addTransaction(proposedTransaction)
+  }
 
   return (
     <>
@@ -54,13 +63,13 @@ const AddNewTransactionForm = ({ contract, to, showHexEncodedData }: AddNewTrans
         </ButtonContainer>
       </SolidityForm>
     </>
-  );
-};
+  )
+}
 
-export default AddNewTransactionForm;
+export default AddNewTransactionForm
 
 const ButtonContainer = styled.div`
   display: flex;
   justify-content: space-between;
   margin-top: 15px;
-`;
+`
diff --git a/apps/tx-builder/src/components/forms/SolidityForm.tsx b/apps/tx-builder/src/components/forms/SolidityForm.tsx
index 73b3be951..4ad7d15bc 100644
--- a/apps/tx-builder/src/components/forms/SolidityForm.tsx
+++ b/apps/tx-builder/src/components/forms/SolidityForm.tsx
@@ -1,7 +1,7 @@
-import { useEffect } from 'react';
-import { SubmitHandler, useForm } from 'react-hook-form';
-import { DevTool } from '@hookform/devtools';
-import { toChecksumAddress, toWei } from 'web3-utils';
+import { useEffect } from 'react'
+import { SubmitHandler, useForm } from 'react-hook-form'
+import { DevTool } from '@hookform/devtools'
+import { toChecksumAddress, toWei } from 'web3-utils'
 
 import {
   ADDRESS_FIELD_TYPE,
@@ -9,42 +9,42 @@ import {
   CUSTOM_TRANSACTION_DATA_FIELD_TYPE,
   NATIVE_AMOUNT_FIELD_TYPE,
   SolidityFieldTypes,
-} from './fields/fields';
-import Field from './fields/Field';
-import { encodeToHexData, getInputTypeHelper } from '../../utils';
-import { ContractInterface, ProposedTransaction } from '../../typings/models';
+} from './fields/fields'
+import Field from './fields/Field'
+import { encodeToHexData, getInputTypeHelper } from '../../utils'
+import { ContractInterface, ProposedTransaction } from '../../typings/models'
 
-export const TO_ADDRESS_FIELD_NAME = 'toAddress';
-export const NATIVE_VALUE_FIELD_NAME = 'nativeAmount';
-export const CONTRACT_METHOD_INDEX_FIELD_NAME = 'contractMethodIndex';
-export const CONTRACT_VALUES_FIELD_NAME = 'contractFieldsValues';
-export const CUSTOM_TRANSACTION_DATA_FIELD_NAME = 'customTransactionData';
+export const TO_ADDRESS_FIELD_NAME = 'toAddress'
+export const NATIVE_VALUE_FIELD_NAME = 'nativeAmount'
+export const CONTRACT_METHOD_INDEX_FIELD_NAME = 'contractMethodIndex'
+export const CONTRACT_VALUES_FIELD_NAME = 'contractFieldsValues'
+export const CUSTOM_TRANSACTION_DATA_FIELD_NAME = 'customTransactionData'
 
 type SolidityFormPropsTypes = {
-  id: string;
-  networkPrefix: undefined | string;
-  getAddressFromDomain: (name: string) => Promise<string>;
-  nativeCurrencySymbol: undefined | string;
-  contract: ContractInterface | null;
-  onSubmit: SubmitHandler<SolidityFormValuesTypes>;
-  initialValues?: Partial<SolidityInitialFormValuesTypes>;
-  showHexToggler?: boolean;
-  children: React.ReactNode;
-  showHexEncodedData: boolean;
-};
+  id: string
+  networkPrefix: undefined | string
+  getAddressFromDomain: (name: string) => Promise<string>
+  nativeCurrencySymbol: undefined | string
+  contract: ContractInterface | null
+  onSubmit: SubmitHandler<SolidityFormValuesTypes>
+  initialValues?: Partial<SolidityInitialFormValuesTypes>
+  showHexToggler?: boolean
+  children: React.ReactNode
+  showHexEncodedData: boolean
+}
 
 export type SolidityInitialFormValuesTypes = {
-  [TO_ADDRESS_FIELD_NAME]: string;
-  [CONTRACT_METHOD_INDEX_FIELD_NAME]: string;
-};
+  [TO_ADDRESS_FIELD_NAME]: string
+  [CONTRACT_METHOD_INDEX_FIELD_NAME]: string
+}
 
 export type SolidityFormValuesTypes = {
-  [TO_ADDRESS_FIELD_NAME]: string;
-  [NATIVE_VALUE_FIELD_NAME]: string;
-  [CONTRACT_METHOD_INDEX_FIELD_NAME]: string;
-  [CONTRACT_VALUES_FIELD_NAME]: Record<string, string>;
-  [CUSTOM_TRANSACTION_DATA_FIELD_NAME]: string;
-};
+  [TO_ADDRESS_FIELD_NAME]: string
+  [NATIVE_VALUE_FIELD_NAME]: string
+  [CONTRACT_METHOD_INDEX_FIELD_NAME]: string
+  [CONTRACT_VALUES_FIELD_NAME]: Record<string, string>
+  [CUSTOM_TRANSACTION_DATA_FIELD_NAME]: string
+}
 
 export const parseFormToProposedTransaction = (
   values: SolidityFormValuesTypes,
@@ -52,17 +52,18 @@ export const parseFormToProposedTransaction = (
   nativeCurrencySymbol: string | undefined,
   networkPrefix: string | undefined,
 ): ProposedTransaction => {
-  const contractMethodIndex = values[CONTRACT_METHOD_INDEX_FIELD_NAME];
-  const toAddress = values[TO_ADDRESS_FIELD_NAME];
-  const tokenValue = values[NATIVE_VALUE_FIELD_NAME];
-  const contractFieldsValues = values[CONTRACT_VALUES_FIELD_NAME];
-  const customTransactionData = values[CUSTOM_TRANSACTION_DATA_FIELD_NAME];
+  const contractMethodIndex = values[CONTRACT_METHOD_INDEX_FIELD_NAME]
+  const toAddress = values[TO_ADDRESS_FIELD_NAME]
+  const tokenValue = values[NATIVE_VALUE_FIELD_NAME]
+  const contractFieldsValues = values[CONTRACT_VALUES_FIELD_NAME]
+  const customTransactionData = values[CUSTOM_TRANSACTION_DATA_FIELD_NAME]
 
-  const contractMethod = contract?.methods[Number(contractMethodIndex)];
+  const contractMethod = contract?.methods[Number(contractMethodIndex)]
 
-  const data = customTransactionData || encodeToHexData(contractMethod, contractFieldsValues) || '0x';
-  const to = toChecksumAddress(toAddress);
-  const value = toWei(tokenValue || '0');
+  const data =
+    customTransactionData || encodeToHexData(contractMethod, contractFieldsValues) || '0x'
+  const to = toChecksumAddress(toAddress)
+  const value = toWei(tokenValue || '0')
 
   return {
     id: new Date().getTime(),
@@ -78,10 +79,10 @@ export const parseFormToProposedTransaction = (
       networkPrefix,
     },
     raw: { to, value, data },
-  };
-};
+  }
+}
 
-const isProdEnv = process.env.NODE_ENV === 'production';
+const isProdEnv = process.env.NODE_ENV === 'production'
 
 const SolidityForm = ({
   id,
@@ -105,28 +106,28 @@ const SolidityForm = ({
   } = useForm<SolidityFormValuesTypes>({
     defaultValues: initialValues,
     mode: 'onTouched', // This option allows you to configure the validation strategy before the user submits the form
-  });
+  })
 
-  const toAddress = watch(TO_ADDRESS_FIELD_NAME);
-  const contractMethodIndex = watch(CONTRACT_METHOD_INDEX_FIELD_NAME);
-  const nativeValue = watch(NATIVE_VALUE_FIELD_NAME);
-  const customTransactionData = watch(CUSTOM_TRANSACTION_DATA_FIELD_NAME);
-  const contractMethod = contract?.methods[Number(contractMethodIndex)];
+  const toAddress = watch(TO_ADDRESS_FIELD_NAME)
+  const contractMethodIndex = watch(CONTRACT_METHOD_INDEX_FIELD_NAME)
+  const nativeValue = watch(NATIVE_VALUE_FIELD_NAME)
+  const customTransactionData = watch(CUSTOM_TRANSACTION_DATA_FIELD_NAME)
+  const contractMethod = contract?.methods[Number(contractMethodIndex)]
 
-  const contractFields = contractMethod?.inputs || [];
-  const showContractFields = !!contract && contract.methods.length > 0 && !showHexEncodedData;
-  const isPayableMethod = !!contract && contractMethod?.payable;
+  const contractFields = contractMethod?.inputs || []
+  const showContractFields = !!contract && contract.methods.length > 0 && !showHexEncodedData
+  const isPayableMethod = !!contract && contractMethod?.payable
 
-  const isValueInputVisible = showHexEncodedData || !showContractFields || isPayableMethod;
+  const isValueInputVisible = showHexEncodedData || !showContractFields || isPayableMethod
 
   useEffect(() => {
-    const contractFieldsValues = getValues(CONTRACT_VALUES_FIELD_NAME);
+    const contractFieldsValues = getValues(CONTRACT_VALUES_FIELD_NAME)
 
     if (showHexEncodedData && contractMethod) {
-      const encodeData = encodeToHexData(contractMethod, contractFieldsValues);
-      setValue(CUSTOM_TRANSACTION_DATA_FIELD_TYPE, encodeData || '');
+      const encodeData = encodeToHexData(contractMethod, contractFieldsValues)
+      setValue(CUSTOM_TRANSACTION_DATA_FIELD_TYPE, encodeData || '')
     }
-  }, [contractMethod, getValues, setValue, showHexEncodedData]);
+  }, [contractMethod, getValues, setValue, showHexEncodedData])
 
   // Resets form to initial values if the user edited contract method and then switched to custom data and edited it
   useEffect(() => {
@@ -140,15 +141,23 @@ const SolidityForm = ({
         [TO_ADDRESS_FIELD_NAME]: toAddress,
         [CUSTOM_TRANSACTION_DATA_FIELD_NAME]: customTransactionData,
         [NATIVE_VALUE_FIELD_NAME]: nativeValue,
-      });
+      })
     }
-  }, [dirtyFields, reset, showHexEncodedData, customTransactionData, toAddress, nativeValue, initialValues]);
+  }, [
+    dirtyFields,
+    reset,
+    showHexEncodedData,
+    customTransactionData,
+    toAddress,
+    nativeValue,
+    initialValues,
+  ])
 
   useEffect(() => {
     if (isSubmitSuccessful) {
-      reset({ ...initialValues, [TO_ADDRESS_FIELD_NAME]: toAddress });
+      reset({ ...initialValues, [TO_ADDRESS_FIELD_NAME]: toAddress })
     }
-  }, [isSubmitSuccessful, reset, toAddress, initialValues]);
+  }, [isSubmitSuccessful, reset, toAddress, initialValues])
 
   return (
     <>
@@ -202,8 +211,8 @@ const SolidityForm = ({
 
         {/* Contract Fields */}
         {contractFields.map((contractField, index) => {
-          const name = `${CONTRACT_VALUES_FIELD_NAME}.${contractField.name || index}`;
-          const fieldType = getInputTypeHelper(contractField);
+          const name = `${CONTRACT_VALUES_FIELD_NAME}.${contractField.name || index}`
+          const fieldType = getInputTypeHelper(contractField)
 
           return (
             showContractFields && (
@@ -222,7 +231,7 @@ const SolidityForm = ({
                 networkPrefix={networkPrefix}
               />
             )
-          );
+          )
         })}
 
         {/* Hex encoded textarea field */}
@@ -245,7 +254,7 @@ const SolidityForm = ({
       {/* set up the dev tool only in dev env */}
       {!isProdEnv && <DevTool control={control} />}
     </>
-  );
-};
+  )
+}
 
-export default SolidityForm;
+export default SolidityForm
diff --git a/apps/tx-builder/src/components/forms/fields/AddressContractField.tsx b/apps/tx-builder/src/components/forms/fields/AddressContractField.tsx
index d93b5414e..194c74be5 100644
--- a/apps/tx-builder/src/components/forms/fields/AddressContractField.tsx
+++ b/apps/tx-builder/src/components/forms/fields/AddressContractField.tsx
@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { AddressInput } from '@gnosis.pm/safe-react-components';
+import { ReactElement } from 'react'
+import { AddressInput } from '@gnosis.pm/safe-react-components'
 
 const AddressContractField = ({
   id,
@@ -29,7 +29,7 @@ const AddressContractField = ({
       onChangeAddress={onChange}
       showErrorsInTheLabel={false}
     />
-  );
-};
+  )
+}
 
-export default AddressContractField;
+export default AddressContractField
diff --git a/apps/tx-builder/src/components/forms/fields/Field.tsx b/apps/tx-builder/src/components/forms/fields/Field.tsx
index 01aed30da..e11b91ac4 100644
--- a/apps/tx-builder/src/components/forms/fields/Field.tsx
+++ b/apps/tx-builder/src/components/forms/fields/Field.tsx
@@ -1,6 +1,6 @@
-import { ReactElement } from 'react';
-import { Control, Controller } from 'react-hook-form';
-import { SelectItem } from '@gnosis.pm/safe-react-components/dist/inputs/Select';
+import { ReactElement } from 'react'
+import { Control, Controller } from 'react-hook-form'
+import { SelectItem } from '@gnosis.pm/safe-react-components/dist/inputs/Select'
 
 import {
   ADDRESS_FIELD_TYPE,
@@ -9,61 +9,61 @@ import {
   CUSTOM_TRANSACTION_DATA_FIELD_TYPE,
   SolidityFieldTypes,
   CustomFieldTypes,
-} from './fields';
-import AddressContractField from './AddressContractField';
-import SelectContractField from './SelectContractField';
-import TextareaContractField from './TextareaContractField';
-import TextContractField from './TextContractField';
-import validateField, { ValidationFunction } from '../validations/validateField';
+} from './fields'
+import AddressContractField from './AddressContractField'
+import SelectContractField from './SelectContractField'
+import TextareaContractField from './TextareaContractField'
+import TextContractField from './TextContractField'
+import validateField, { ValidationFunction } from '../validations/validateField'
 
 const CUSTOM_SOLIDITY_COMPONENTS: CustomSolidityComponent = {
   [ADDRESS_FIELD_TYPE]: AddressContractField,
   [BOOLEAN_FIELD_TYPE]: SelectContractField,
   [CONTRACT_METHOD_FIELD_TYPE]: SelectContractField,
   [CUSTOM_TRANSACTION_DATA_FIELD_TYPE]: TextareaContractField,
-};
+}
 
 const CUSTOM_DEFAULT_VALUES: CustomDefaultValueTypes = {
   [BOOLEAN_FIELD_TYPE]: 'true',
   [CONTRACT_METHOD_FIELD_TYPE]: '0', // first contract method as default
-};
+}
 
 const BOOLEAN_DEFAULT_OPTIONS: SelectItem[] = [
   { id: 'true', label: 'True' },
   { id: 'false', label: 'False' },
-];
+]
 
 const DEFAULT_OPTIONS: DefaultOptionTypes = {
   [BOOLEAN_FIELD_TYPE]: BOOLEAN_DEFAULT_OPTIONS,
-};
+}
 
 interface CustomDefaultValueTypes {
-  [key: string]: string;
+  [key: string]: string
 }
 
 interface CustomSolidityComponent {
-  [key: string]: (props: any) => ReactElement;
+  [key: string]: (props: any) => ReactElement
 }
 
 interface DefaultOptionTypes {
-  [key: string]: SelectItem[];
+  [key: string]: SelectItem[]
 }
 
 type FieldProps = {
-  fieldType: SolidityFieldTypes | CustomFieldTypes;
-  control: Control<any, object>;
-  id: string;
-  name: string;
-  label: string;
-  fullWidth?: boolean;
-  required?: boolean;
-  validations?: ValidationFunction[];
-  getAddressFromDomain?: (name: string) => Promise<string>;
-  networkPrefix?: string;
-  showErrorsInTheLabel?: boolean;
-  shouldUnregister?: boolean;
-  options?: SelectItem[];
-};
+  fieldType: SolidityFieldTypes | CustomFieldTypes
+  control: Control<any, object>
+  id: string
+  name: string
+  label: string
+  fullWidth?: boolean
+  required?: boolean
+  validations?: ValidationFunction[]
+  getAddressFromDomain?: (name: string) => Promise<string>
+  networkPrefix?: string
+  showErrorsInTheLabel?: boolean
+  shouldUnregister?: boolean
+  options?: SelectItem[]
+}
 
 const Field = ({
   fieldType,
@@ -76,7 +76,7 @@ const Field = ({
   ...props
 }: FieldProps) => {
   // Component based on field type
-  const Component = CUSTOM_SOLIDITY_COMPONENTS[fieldType] || TextContractField;
+  const Component = CUSTOM_SOLIDITY_COMPONENTS[fieldType] || TextContractField
 
   // see https://react-hook-form.com/advanced-usage#ControlledmixedwithUncontrolledComponents
   return (
@@ -105,7 +105,7 @@ const Field = ({
         />
       )}
     />
-  );
-};
+  )
+}
 
-export default Field;
+export default Field
diff --git a/apps/tx-builder/src/components/forms/fields/JsonField.tsx b/apps/tx-builder/src/components/forms/fields/JsonField.tsx
index f937241ae..8c4c86e77 100644
--- a/apps/tx-builder/src/components/forms/fields/JsonField.tsx
+++ b/apps/tx-builder/src/components/forms/fields/JsonField.tsx
@@ -1,63 +1,71 @@
-import { useState, useCallback, ClipboardEvent } from 'react';
-import styled from 'styled-components';
-import { Icon, TextFieldInput, Tooltip, GenericModal, Text, Button, IconTypes } from '@gnosis.pm/safe-react-components';
-import IconButton from '@material-ui/core/IconButton';
-import { Box } from '@material-ui/core';
-import useModal from '../../../hooks/useModal/useModal';
-
-const DEFAULT_ROWS = 4;
+import { useState, useCallback, ClipboardEvent } from 'react'
+import styled from 'styled-components'
+import {
+  Icon,
+  TextFieldInput,
+  Tooltip,
+  GenericModal,
+  Text,
+  Button,
+  IconTypes,
+} from '@gnosis.pm/safe-react-components'
+import IconButton from '@material-ui/core/IconButton'
+import { Box } from '@material-ui/core'
+import useModal from '../../../hooks/useModal/useModal'
+
+const DEFAULT_ROWS = 4
 
 type Props = {
-  id: string;
-  name: string;
-  label: string;
-  value: string;
-  onChange: (value: string) => void;
-};
+  id: string
+  name: string
+  label: string
+  value: string
+  onChange: (value: string) => void
+}
 
 const JsonField = ({ id, name, label, value, onChange }: Props) => {
-  const { open: showReplaceModal, toggleModal } = useModal();
-  const [tempAbi, setTempAbi] = useState(value);
-  const [isPrettified, setIsPrettified] = useState(false);
-  const hasError = isValidJSON(value) ? undefined : 'Invalid JSON value';
+  const { open: showReplaceModal, toggleModal } = useModal()
+  const [tempAbi, setTempAbi] = useState(value)
+  const [isPrettified, setIsPrettified] = useState(false)
+  const hasError = isValidJSON(value) ? undefined : 'Invalid JSON value'
 
   const toggleFormatJSON = useCallback(() => {
     if (!value) {
-      return;
+      return
     }
 
     try {
-      onChange(JSON.stringify(JSON.parse(value), null, isPrettified ? 0 : 2));
-      setIsPrettified(!isPrettified);
+      onChange(JSON.stringify(JSON.parse(value), null, isPrettified ? 0 : 2))
+      setIsPrettified(!isPrettified)
     } catch (e) {
-      console.error(e);
-      onChange(value);
+      console.error(e)
+      onChange(value)
     }
-  }, [onChange, value, isPrettified]);
+  }, [onChange, value, isPrettified])
 
   const changeAbi = useCallback(() => {
-    onChange(tempAbi);
-    setIsPrettified(false);
-    toggleModal();
-  }, [tempAbi, onChange, toggleModal]);
+    onChange(tempAbi)
+    setIsPrettified(false)
+    toggleModal()
+  }, [tempAbi, onChange, toggleModal])
 
   const handlePaste = useCallback(
     (event: ClipboardEvent<HTMLInputElement>) => {
-      event.preventDefault();
-      event.stopPropagation();
+      event.preventDefault()
+      event.stopPropagation()
 
-      const clipboardData = event.clipboardData;
-      const pastedData = clipboardData?.getData('Text') || '';
+      const clipboardData = event.clipboardData
+      const pastedData = clipboardData?.getData('Text') || ''
 
       if (value && pastedData) {
-        setTempAbi(pastedData);
-        toggleModal();
+        setTempAbi(pastedData)
+        toggleModal()
       } else {
-        onChange(pastedData);
+        onChange(pastedData)
       }
     },
     [onChange, toggleModal, value],
-  );
+  )
 
   return (
     <>
@@ -73,8 +81,8 @@ const JsonField = ({ id, name, label, value, onChange }: Props) => {
           fullWidth
           hiddenLabel={false}
           onPaste={handlePaste}
-          onChange={(event) => {
-            onChange(event.target.value);
+          onChange={event => {
+            onChange(event.target.value)
           }}
           spellCheck={false}
           showErrorsInTheLabel={false}
@@ -123,20 +131,20 @@ const JsonField = ({ id, name, label, value, onChange }: Props) => {
         />
       )}
     </>
-  );
-};
+  )
+}
 
 const isValidJSON = (value: string | undefined) => {
   if (value) {
     try {
-      JSON.parse(value);
+      JSON.parse(value)
     } catch {
-      return false;
+      return false
     }
   }
 
-  return true;
-};
+  return true
+}
 
 const IconContainerButton = ({
   tooltipLabel,
@@ -144,30 +152,31 @@ const IconContainerButton = ({
   onClick,
   error,
 }: {
-  tooltipLabel: string;
-  iconType: IconTypes;
-  onClick: () => void;
-  error: boolean;
+  tooltipLabel: string
+  iconType: IconTypes
+  onClick: () => void
+  error: boolean
 }) => (
   <Tooltip title={tooltipLabel}>
     <StyledButton size="small" color="primary" onClick={onClick}>
       <Icon size="sm" color={error ? 'error' : 'inputDefault'} type={iconType} />
     </StyledButton>
   </Tooltip>
-);
+)
 
 const JSONFieldContainer = styled.div`
   position: relative;
-`;
+`
 
 const IconContainer = styled.div<{ error: boolean }>`
   position: absolute;
   top: -10px;
   right: 15px;
-  border: 1px solid ${({ theme, error }) => (error ? theme.colors.error : theme.colors.inputDefault)};
+  border: 1px solid
+    ${({ theme, error }) => (error ? theme.colors.error : theme.colors.inputDefault)};
   border-radius: 50%;
   background-color: #fff;
-`;
+`
 
 const StyledTextField = styled(TextFieldInput)`
   && {
@@ -179,10 +188,10 @@ const StyledTextField = styled(TextFieldInput)`
       }
     }
   }
-`;
+`
 
 const StyledButton = styled(IconButton)`
   margin: 0 5px;
-`;
+`
 
-export default JsonField;
+export default JsonField
diff --git a/apps/tx-builder/src/components/forms/fields/SelectContractField.tsx b/apps/tx-builder/src/components/forms/fields/SelectContractField.tsx
index 4907f0602..528dde2fd 100644
--- a/apps/tx-builder/src/components/forms/fields/SelectContractField.tsx
+++ b/apps/tx-builder/src/components/forms/fields/SelectContractField.tsx
@@ -1,15 +1,21 @@
-import { Select } from '@gnosis.pm/safe-react-components';
-import { SelectItem } from '@gnosis.pm/safe-react-components/dist/inputs/Select';
+import { Select } from '@gnosis.pm/safe-react-components'
+import { SelectItem } from '@gnosis.pm/safe-react-components/dist/inputs/Select'
 
 type SelectContractFieldTypes = {
-  options: SelectItem[];
-  onChange: (id: string) => void;
-  value: string;
-  label: string;
-  name: string;
-};
+  options: SelectItem[]
+  onChange: (id: string) => void
+  value: string
+  label: string
+  name: string
+}
 
-const SelectContractField = ({ value, onChange, options, label, name }: SelectContractFieldTypes) => {
+const SelectContractField = ({
+  value,
+  onChange,
+  options,
+  label,
+  name,
+}: SelectContractFieldTypes) => {
   return (
     <Select
       name={name}
@@ -19,10 +25,10 @@ const SelectContractField = ({ value, onChange, options, label, name }: SelectCo
       fullWidth
       activeItemId={value}
       onItemClick={(id: string) => {
-        onChange(id);
+        onChange(id)
       }}
     />
-  );
-};
+  )
+}
 
-export default SelectContractField;
+export default SelectContractField
diff --git a/apps/tx-builder/src/components/forms/fields/TextContractField.tsx b/apps/tx-builder/src/components/forms/fields/TextContractField.tsx
index 0d9da0877..7a9bedcc1 100644
--- a/apps/tx-builder/src/components/forms/fields/TextContractField.tsx
+++ b/apps/tx-builder/src/components/forms/fields/TextContractField.tsx
@@ -1,16 +1,16 @@
-import { TextFieldInput } from '@gnosis.pm/safe-react-components';
-import { TextFieldInputProps } from '@gnosis.pm/safe-react-components/dist/inputs/TextFieldInput';
-import styled from 'styled-components';
+import { TextFieldInput } from '@gnosis.pm/safe-react-components'
+import { TextFieldInputProps } from '@gnosis.pm/safe-react-components/dist/inputs/TextFieldInput'
+import styled from 'styled-components'
 
 type TextContractFieldTypes = TextFieldInputProps & {
-  networkPrefix?: undefined | string;
-};
+  networkPrefix?: undefined | string
+}
 
 const TextContractField = ({ networkPrefix, ...props }: TextContractFieldTypes) => {
-  return <StyledTextField {...props} hiddenLabel={false} />;
-};
+  return <StyledTextField {...props} hiddenLabel={false} />
+}
 
-export default TextContractField;
+export default TextContractField
 
 const StyledTextField = styled(TextFieldInput)`
   && {
@@ -20,4 +20,4 @@ const StyledTextField = styled(TextFieldInput)`
       }
     }
   }
-`;
+`
diff --git a/apps/tx-builder/src/components/forms/fields/TextareaContractField.tsx b/apps/tx-builder/src/components/forms/fields/TextareaContractField.tsx
index 9f8e76c00..f5be176ad 100644
--- a/apps/tx-builder/src/components/forms/fields/TextareaContractField.tsx
+++ b/apps/tx-builder/src/components/forms/fields/TextareaContractField.tsx
@@ -1,10 +1,10 @@
-import { TextFieldInputProps } from '@gnosis.pm/safe-react-components/dist/inputs/TextFieldInput';
-import TextContractField from './TextContractField';
+import { TextFieldInputProps } from '@gnosis.pm/safe-react-components/dist/inputs/TextFieldInput'
+import TextContractField from './TextContractField'
 
-const DEFAULT_ROWS = 4;
+const DEFAULT_ROWS = 4
 
 const TextareaContractField = (props: TextFieldInputProps) => {
-  return <TextContractField {...props} multiline rows={props.rows || DEFAULT_ROWS} />;
-};
+  return <TextContractField {...props} multiline rows={props.rows || DEFAULT_ROWS} />
+}
 
-export default TextareaContractField;
+export default TextareaContractField
diff --git a/apps/tx-builder/src/components/forms/fields/fields.ts b/apps/tx-builder/src/components/forms/fields/fields.ts
index 5aa0e5b9e..8fd6513b7 100644
--- a/apps/tx-builder/src/components/forms/fields/fields.ts
+++ b/apps/tx-builder/src/components/forms/fields/fields.ts
@@ -1,15 +1,15 @@
 // based on https://docs.soliditylang.org/en/v0.8.11/abi-spec.html#types
-export const ADDRESS_FIELD_TYPE = 'address';
-export const BOOLEAN_FIELD_TYPE = 'bool';
-export const U_INT_FIELD_TYPE = 'uint';
-export const U_INT_256_FIELD_TYPE = 'uint256';
-export const U_INT_32_FIELD_TYPE = 'uint32';
-export const U_INT_8_FIELD_TYPE = 'uint8';
-export const INT_FIELD_TYPE = 'int';
-export const INT_256_FIELD_TYPE = 'int256';
-export const INT_32_FIELD_TYPE = 'int32';
-export const INT_8_FIELD_TYPE = 'int8';
-export const BYTES_FIELD_TYPE = 'bytes';
+export const ADDRESS_FIELD_TYPE = 'address'
+export const BOOLEAN_FIELD_TYPE = 'bool'
+export const U_INT_FIELD_TYPE = 'uint'
+export const U_INT_256_FIELD_TYPE = 'uint256'
+export const U_INT_32_FIELD_TYPE = 'uint32'
+export const U_INT_8_FIELD_TYPE = 'uint8'
+export const INT_FIELD_TYPE = 'int'
+export const INT_256_FIELD_TYPE = 'int256'
+export const INT_32_FIELD_TYPE = 'int32'
+export const INT_8_FIELD_TYPE = 'int8'
+export const BYTES_FIELD_TYPE = 'bytes'
 
 export type SolidityFieldTypes =
   | typeof ADDRESS_FIELD_TYPE
@@ -22,29 +22,29 @@ export type SolidityFieldTypes =
   | typeof INT_256_FIELD_TYPE
   | typeof INT_32_FIELD_TYPE
   | typeof INT_8_FIELD_TYPE
-  | typeof BYTES_FIELD_TYPE;
+  | typeof BYTES_FIELD_TYPE
 
 // native token amount field
-export const NATIVE_AMOUNT_FIELD_TYPE = 'nativeAmount';
+export const NATIVE_AMOUNT_FIELD_TYPE = 'nativeAmount'
 
 // selected contract method field
-export const CONTRACT_METHOD_FIELD_TYPE = 'contractMethod';
+export const CONTRACT_METHOD_FIELD_TYPE = 'contractMethod'
 
 // encoded hex data field
-export const CUSTOM_TRANSACTION_DATA_FIELD_TYPE = 'customTransactionData';
+export const CUSTOM_TRANSACTION_DATA_FIELD_TYPE = 'customTransactionData'
 
 // text field
-export const TEXT_FIELD_TYPE = 'text';
+export const TEXT_FIELD_TYPE = 'text'
 
 export type CustomFieldTypes =
   | typeof NATIVE_AMOUNT_FIELD_TYPE
   | typeof CONTRACT_METHOD_FIELD_TYPE
   | typeof CUSTOM_TRANSACTION_DATA_FIELD_TYPE
-  | typeof TEXT_FIELD_TYPE;
+  | typeof TEXT_FIELD_TYPE
 
 export const NON_SOLIDITY_TYPES = [
   TEXT_FIELD_TYPE,
   NATIVE_AMOUNT_FIELD_TYPE,
   CONTRACT_METHOD_FIELD_TYPE,
   CUSTOM_TRANSACTION_DATA_FIELD_TYPE,
-];
+]
diff --git a/apps/tx-builder/src/components/forms/validations/basicSolidityValidation.ts b/apps/tx-builder/src/components/forms/validations/basicSolidityValidation.ts
index 5fd20365f..8882299d9 100644
--- a/apps/tx-builder/src/components/forms/validations/basicSolidityValidation.ts
+++ b/apps/tx-builder/src/components/forms/validations/basicSolidityValidation.ts
@@ -1,20 +1,20 @@
-import { ValidateResult } from 'react-hook-form';
-import abiCoder, { AbiCoder } from 'web3-eth-abi';
+import { ValidateResult } from 'react-hook-form'
+import abiCoder, { AbiCoder } from 'web3-eth-abi'
 
-import { parseInputValue } from '../../../utils';
-import { NON_SOLIDITY_TYPES } from '../fields/fields';
+import { parseInputValue } from '../../../utils'
+import { NON_SOLIDITY_TYPES } from '../fields/fields'
 
 const basicSolidityValidation = (value: string, fieldType: string): ValidateResult => {
-  const isSolidityFieldType = !NON_SOLIDITY_TYPES.includes(fieldType);
+  const isSolidityFieldType = !NON_SOLIDITY_TYPES.includes(fieldType)
   if (isSolidityFieldType) {
     try {
-      const cleanValue = parseInputValue({ type: fieldType }, value);
-      const abi = abiCoder as unknown; // a bug in the web3-eth-abi types
-      (abi as AbiCoder).encodeParameter(fieldType, cleanValue);
+      const cleanValue = parseInputValue({ type: fieldType }, value)
+      const abi = abiCoder as unknown // a bug in the web3-eth-abi types
+      ;(abi as AbiCoder).encodeParameter(fieldType, cleanValue)
     } catch (error: any) {
-      return `format error. details: ${error.reason || error.toString()}`;
+      return `format error. details: ${error.reason || error.toString()}`
     }
   }
-};
+}
 
-export default basicSolidityValidation;
+export default basicSolidityValidation
diff --git a/apps/tx-builder/src/components/forms/validations/validateAddressField.ts b/apps/tx-builder/src/components/forms/validations/validateAddressField.ts
index badf288ef..677b1d058 100644
--- a/apps/tx-builder/src/components/forms/validations/validateAddressField.ts
+++ b/apps/tx-builder/src/components/forms/validations/validateAddressField.ts
@@ -1,11 +1,11 @@
-import { ValidateResult } from 'react-hook-form';
+import { ValidateResult } from 'react-hook-form'
 
-import { isValidAddress } from '../../../utils';
+import { isValidAddress } from '../../../utils'
 
 const validateAddressField = (value: string): ValidateResult => {
   if (!isValidAddress(value)) {
-    return 'Invalid address';
+    return 'Invalid address'
   }
-};
+}
 
-export default validateAddressField;
+export default validateAddressField
diff --git a/apps/tx-builder/src/components/forms/validations/validateAmountField.ts b/apps/tx-builder/src/components/forms/validations/validateAmountField.ts
index ec9be4336..7fae77d5e 100644
--- a/apps/tx-builder/src/components/forms/validations/validateAmountField.ts
+++ b/apps/tx-builder/src/components/forms/validations/validateAmountField.ts
@@ -1,21 +1,21 @@
-import { ValidateResult } from 'react-hook-form';
-import { toWei } from 'web3-utils';
+import { ValidateResult } from 'react-hook-form'
+import { toWei } from 'web3-utils'
 
-import { isInputValueValid } from '../../../utils';
+import { isInputValueValid } from '../../../utils'
 
-const INVALID_AMOUNT_ERROR = 'Invalid amount value';
+const INVALID_AMOUNT_ERROR = 'Invalid amount value'
 
 const validateAmountField = (value: string): ValidateResult => {
   if (!isInputValueValid(value)) {
-    return INVALID_AMOUNT_ERROR;
+    return INVALID_AMOUNT_ERROR
   }
 
   // should be a valid amount in wei
   try {
-    toWei(value);
+    toWei(value)
   } catch (error) {
-    return INVALID_AMOUNT_ERROR;
+    return INVALID_AMOUNT_ERROR
   }
-};
+}
 
-export default validateAmountField;
+export default validateAmountField
diff --git a/apps/tx-builder/src/components/forms/validations/validateBooleanField.ts b/apps/tx-builder/src/components/forms/validations/validateBooleanField.ts
index ae3b6180d..408c63c8c 100644
--- a/apps/tx-builder/src/components/forms/validations/validateBooleanField.ts
+++ b/apps/tx-builder/src/components/forms/validations/validateBooleanField.ts
@@ -1,13 +1,13 @@
-import { ValidateResult } from 'react-hook-form';
+import { ValidateResult } from 'react-hook-form'
 
 const validateBooleanField = (value: string): ValidateResult => {
-  const cleanValue = value?.toLowerCase();
+  const cleanValue = value?.toLowerCase()
 
-  const isValidBoolean = cleanValue === 'true' || cleanValue === 'false';
+  const isValidBoolean = cleanValue === 'true' || cleanValue === 'false'
 
   if (!isValidBoolean) {
-    return 'Invalid boolean value';
+    return 'Invalid boolean value'
   }
-};
+}
 
-export default validateBooleanField;
+export default validateBooleanField
diff --git a/apps/tx-builder/src/components/forms/validations/validateField.ts b/apps/tx-builder/src/components/forms/validations/validateField.ts
index 638e7611d..ccd7dc1f6 100644
--- a/apps/tx-builder/src/components/forms/validations/validateField.ts
+++ b/apps/tx-builder/src/components/forms/validations/validateField.ts
@@ -1,42 +1,50 @@
-import { Validate, ValidateResult } from 'react-hook-form';
-import { toWei } from 'web3-utils';
+import { Validate, ValidateResult } from 'react-hook-form'
+import { toWei } from 'web3-utils'
 import {
   ADDRESS_FIELD_TYPE,
   NATIVE_AMOUNT_FIELD_TYPE,
   BOOLEAN_FIELD_TYPE,
   CUSTOM_TRANSACTION_DATA_FIELD_TYPE,
   U_INT_FIELD_TYPE,
-} from '../fields/fields';
-import basicSolidityValidation from './basicSolidityValidation';
-import validateAddressField from './validateAddressField';
-import validateAmountField from './validateAmountField';
-import validateBooleanField from './validateBooleanField';
-import validateHexEncodedDataField from './validateHexEncodedDataField';
+} from '../fields/fields'
+import basicSolidityValidation from './basicSolidityValidation'
+import validateAddressField from './validateAddressField'
+import validateAmountField from './validateAmountField'
+import validateBooleanField from './validateBooleanField'
+import validateHexEncodedDataField from './validateHexEncodedDataField'
 
-export type ValidationFunction = (value: string, fieldType: string) => ValidateResult;
+export type ValidationFunction = (value: string, fieldType: string) => ValidateResult
 
 interface CustomValidationsType {
-  [key: string]: ValidationFunction[];
+  [key: string]: ValidationFunction[]
 }
 
 // added this validation to the amount field, because amount values in wei are uint
-const uintBasicValidation = (value: string): ValidateResult => basicSolidityValidation(toWei(value), U_INT_FIELD_TYPE);
+const uintBasicValidation = (value: string): ValidateResult =>
+  basicSolidityValidation(toWei(value), U_INT_FIELD_TYPE)
 
 const CUSTOM_VALIDATIONS: CustomValidationsType = {
   [ADDRESS_FIELD_TYPE]: [validateAddressField],
   [CUSTOM_TRANSACTION_DATA_FIELD_TYPE]: [validateHexEncodedDataField],
   [BOOLEAN_FIELD_TYPE]: [validateBooleanField],
   [NATIVE_AMOUNT_FIELD_TYPE]: [validateAmountField, uintBasicValidation],
-};
+}
 
-const validateField = (fieldType: string, validations: ValidationFunction[] = []): Validate<string> => {
+const validateField = (
+  fieldType: string,
+  validations: ValidationFunction[] = [],
+): Validate<string> => {
   return (value: string): ValidateResult =>
-    [...(CUSTOM_VALIDATIONS?.[fieldType] || []), basicSolidityValidation, ...validations].reduce<ValidateResult>(
+    [
+      ...(CUSTOM_VALIDATIONS?.[fieldType] || []),
+      basicSolidityValidation,
+      ...validations,
+    ].reduce<ValidateResult>(
       (error, validation) => {
-        return error || validation(value, fieldType);
+        return error || validation(value, fieldType)
       },
       undefined, // initially no error is present
-    );
-};
+    )
+}
 
-export default validateField;
+export default validateField
diff --git a/apps/tx-builder/src/components/forms/validations/validateHexEncodedDataField.ts b/apps/tx-builder/src/components/forms/validations/validateHexEncodedDataField.ts
index 4068a678f..e84381420 100644
--- a/apps/tx-builder/src/components/forms/validations/validateHexEncodedDataField.ts
+++ b/apps/tx-builder/src/components/forms/validations/validateHexEncodedDataField.ts
@@ -1,12 +1,12 @@
-import { isHexStrict } from 'web3-utils';
-import { ValidateResult } from 'react-hook-form';
+import { isHexStrict } from 'web3-utils'
+import { ValidateResult } from 'react-hook-form'
 
-import { getCustomDataError } from '../../../utils';
+import { getCustomDataError } from '../../../utils'
 
 const validateHexEncodedDataField = (value: string): ValidateResult => {
   if (!isHexStrict(value)) {
-    return getCustomDataError(value);
+    return getCustomDataError(value)
   }
-};
+}
 
-export default validateHexEncodedDataField;
+export default validateHexEncodedDataField
diff --git a/apps/tx-builder/src/components/forms/validations/validations.test.ts b/apps/tx-builder/src/components/forms/validations/validations.test.ts
index 49f40fcd9..4672cb385 100644
--- a/apps/tx-builder/src/components/forms/validations/validations.test.ts
+++ b/apps/tx-builder/src/components/forms/validations/validations.test.ts
@@ -1,4 +1,4 @@
-import { getInputTypeHelper } from '../../../utils';
+import { getInputTypeHelper } from '../../../utils'
 import {
   ADDRESS_FIELD_TYPE,
   BOOLEAN_FIELD_TYPE,
@@ -9,385 +9,385 @@ import {
   INT_32_FIELD_TYPE,
   INT_8_FIELD_TYPE,
   BYTES_FIELD_TYPE,
-} from '../fields/fields';
-import validateAddressField from './validateAddressField';
-import validateAmountField from './validateAmountField';
-import validateField from './validateField';
-import validateHexEncodedDataField from './validateHexEncodedDataField';
+} from '../fields/fields'
+import validateAddressField from './validateAddressField'
+import validateAmountField from './validateAmountField'
+import validateField from './validateField'
+import validateHexEncodedDataField from './validateHexEncodedDataField'
 
-const NO_ERROR_IS_PRESENT = undefined;
+const NO_ERROR_IS_PRESENT = undefined
 
 describe('form validations', () => {
   describe('validation functions', () => {
     describe('validateAddressField', () => {
       it('validates an invalid address', () => {
-        const validationResult = validateAddressField('INVALID ADDRESS VALUE');
+        const validationResult = validateAddressField('INVALID ADDRESS VALUE')
 
-        expect(validationResult).toBe('Invalid address');
-      });
+        expect(validationResult).toBe('Invalid address')
+      })
 
       it('validates a valid address', () => {
-        const validationResult = validateAddressField('0x57CB13cbef735FbDD65f5f2866638c546464E45F');
+        const validationResult = validateAddressField('0x57CB13cbef735FbDD65f5f2866638c546464E45F')
 
-        expect(validationResult).toBe(NO_ERROR_IS_PRESENT);
-      });
-    });
+        expect(validationResult).toBe(NO_ERROR_IS_PRESENT)
+      })
+    })
 
     describe('validateAmountField', () => {
       it('validates negative amount', () => {
-        const validationResult = validateAmountField('-3');
+        const validationResult = validateAmountField('-3')
 
-        expect(validationResult).toBe('Invalid amount value');
-      });
+        expect(validationResult).toBe('Invalid amount value')
+      })
 
       it('validates invalid amounts', () => {
-        const validationResult = validateAmountField('INVALID AMOUNT');
+        const validationResult = validateAmountField('INVALID AMOUNT')
 
-        expect(validationResult).toBe('Invalid amount value');
-      });
+        expect(validationResult).toBe('Invalid amount value')
+      })
 
       it('validates hexadecimal amounts', () => {
-        const validationResult = validateAmountField('0x123');
+        const validationResult = validateAmountField('0x123')
 
-        expect(validationResult).toBe('Invalid amount value');
-      });
+        expect(validationResult).toBe('Invalid amount value')
+      })
 
       it('validates valid decimal amounts', () => {
-        const validationResult = validateAmountField('3.12');
+        const validationResult = validateAmountField('3.12')
 
-        expect(validationResult).toBe(NO_ERROR_IS_PRESENT);
-      });
+        expect(validationResult).toBe(NO_ERROR_IS_PRESENT)
+      })
 
       it('validates invalid decimal amounts', () => {
-        const validationResult = validateAmountField('0.000000000000000000000000000000001');
+        const validationResult = validateAmountField('0.000000000000000000000000000000001')
 
-        expect(validationResult).toBe('Invalid amount value');
-      });
-    });
+        expect(validationResult).toBe('Invalid amount value')
+      })
+    })
 
     describe('validateHexEncodedDataField', () => {
       it('validates non hexadecimal values', () => {
-        const validationResult = validateHexEncodedDataField('INVALID HEX DATA');
+        const validationResult = validateHexEncodedDataField('INVALID HEX DATA')
 
-        expect(validationResult).toBe('Has to be a valid strict hex data (it must start with 0x)');
-      });
+        expect(validationResult).toBe('Has to be a valid strict hex data (it must start with 0x)')
+      })
 
       it('validates non hexadecimal values starting with 0x', () => {
-        const validationResult = validateHexEncodedDataField('0x INVALID HEX DATA');
+        const validationResult = validateHexEncodedDataField('0x INVALID HEX DATA')
 
-        expect(validationResult).toBe('Has to be a valid strict hex data');
-      });
+        expect(validationResult).toBe('Has to be a valid strict hex data')
+      })
 
       it('validates an invalid hexadecimal value', () => {
-        const validationResult = validateHexEncodedDataField('0x123456789ABCDEFGHI');
+        const validationResult = validateHexEncodedDataField('0x123456789ABCDEFGHI')
 
-        expect(validationResult).toBe('Has to be a valid strict hex data');
-      });
+        expect(validationResult).toBe('Has to be a valid strict hex data')
+      })
 
       it('validates a valid hexadecimal value', () => {
-        const validationResult = validateHexEncodedDataField('0x123456789ABCDEF');
+        const validationResult = validateHexEncodedDataField('0x123456789ABCDEF')
 
-        expect(validationResult).toBe(NO_ERROR_IS_PRESENT);
-      });
-    });
-  });
+        expect(validationResult).toBe(NO_ERROR_IS_PRESENT)
+      })
+    })
+  })
 
   describe('Solidity field types validations', () => {
     describe('address field type', () => {
       it('validates an invalid address', () => {
-        const addressValidations = validateField(ADDRESS_FIELD_TYPE);
+        const addressValidations = validateField(ADDRESS_FIELD_TYPE)
 
-        const validationResult = addressValidations('INVALID ADDRESS VALUE');
+        const validationResult = addressValidations('INVALID ADDRESS VALUE')
 
-        expect(validationResult).toBe('Invalid address');
-      });
+        expect(validationResult).toBe('Invalid address')
+      })
 
       it('validates a valid address', () => {
-        const addressValidations = validateField(ADDRESS_FIELD_TYPE);
+        const addressValidations = validateField(ADDRESS_FIELD_TYPE)
 
-        const validationResult = addressValidations('0x57CB13cbef735FbDD65f5f2866638c546464E45F');
+        const validationResult = addressValidations('0x57CB13cbef735FbDD65f5f2866638c546464E45F')
 
-        expect(validationResult).toBe(NO_ERROR_IS_PRESENT);
-      });
-    });
+        expect(validationResult).toBe(NO_ERROR_IS_PRESENT)
+      })
+    })
 
     describe('boolean field type', () => {
       it('validates an invalid boolean value', () => {
-        const booleanValidations = validateField(BOOLEAN_FIELD_TYPE);
+        const booleanValidations = validateField(BOOLEAN_FIELD_TYPE)
 
-        const validationResult = booleanValidations('INVALID BOOLEAN VALUE');
+        const validationResult = booleanValidations('INVALID BOOLEAN VALUE')
 
-        expect(validationResult).toBe('Invalid boolean value');
-      });
+        expect(validationResult).toBe('Invalid boolean value')
+      })
 
       it('validates an valid boolean true value', () => {
-        const booleanValidations = validateField(BOOLEAN_FIELD_TYPE);
+        const booleanValidations = validateField(BOOLEAN_FIELD_TYPE)
 
-        const validationResult = booleanValidations('TRUE');
+        const validationResult = booleanValidations('TRUE')
 
-        expect(validationResult).toBe(NO_ERROR_IS_PRESENT);
-      });
+        expect(validationResult).toBe(NO_ERROR_IS_PRESENT)
+      })
 
       it('validates an valid boolean false value', () => {
-        const booleanValidations = validateField(BOOLEAN_FIELD_TYPE);
+        const booleanValidations = validateField(BOOLEAN_FIELD_TYPE)
 
-        const validationResult = booleanValidations('false');
+        const validationResult = booleanValidations('false')
 
-        expect(validationResult).toBe(NO_ERROR_IS_PRESENT);
-      });
+        expect(validationResult).toBe(NO_ERROR_IS_PRESENT)
+      })
 
       it('validates an valid boolean capitalized False value', () => {
-        const booleanValidations = validateField(BOOLEAN_FIELD_TYPE);
+        const booleanValidations = validateField(BOOLEAN_FIELD_TYPE)
 
-        const validationResult = booleanValidations('False');
+        const validationResult = booleanValidations('False')
 
-        expect(validationResult).toBe(NO_ERROR_IS_PRESENT);
-      });
-    });
+        expect(validationResult).toBe(NO_ERROR_IS_PRESENT)
+      })
+    })
 
     describe('uint field type', () => {
       describe('uint256', () => {
         it('validates a decimal value', () => {
-          const uint256Validation = validateField(U_INT_256_FIELD_TYPE);
+          const uint256Validation = validateField(U_INT_256_FIELD_TYPE)
 
-          const validationResult = uint256Validation('123.123');
+          const validationResult = uint256Validation('123.123')
 
-          expect(validationResult).toContain('format error.');
-        });
+          expect(validationResult).toContain('format error.')
+        })
 
         it('validates a invalid number value', () => {
-          const uint256Validation = validateField(U_INT_256_FIELD_TYPE);
+          const uint256Validation = validateField(U_INT_256_FIELD_TYPE)
 
-          const validationResult = uint256Validation('INVALID NUMBER VALUE');
+          const validationResult = uint256Validation('INVALID NUMBER VALUE')
 
-          expect(validationResult).toContain('format error.');
-        });
+          expect(validationResult).toContain('format error.')
+        })
 
         it('validates a negative value', () => {
-          const uint256Validation = validateField(U_INT_256_FIELD_TYPE);
+          const uint256Validation = validateField(U_INT_256_FIELD_TYPE)
 
-          const validationResult = uint256Validation('-123');
+          const validationResult = uint256Validation('-123')
 
-          expect(validationResult).toBe('format error. details: value out-of-bounds');
-        });
+          expect(validationResult).toBe('format error. details: value out-of-bounds')
+        })
 
         it('validates a uint256 overflow value', () => {
-          const uint256Validation = validateField(U_INT_256_FIELD_TYPE);
+          const uint256Validation = validateField(U_INT_256_FIELD_TYPE)
 
           const validationResult = uint256Validation(
             '9999999999999999999999999999999999999999999999999999999999999999999999999999999',
-          );
+          )
 
-          expect(validationResult).toBe('format error. details: value out-of-bounds');
-        });
+          expect(validationResult).toBe('format error. details: value out-of-bounds')
+        })
 
         it('validates a uint256 valid value', () => {
-          const uint256Validation = validateField(U_INT_256_FIELD_TYPE);
+          const uint256Validation = validateField(U_INT_256_FIELD_TYPE)
 
-          const validationResult = uint256Validation('1234567891011121314');
+          const validationResult = uint256Validation('1234567891011121314')
 
-          expect(validationResult).toBe(NO_ERROR_IS_PRESENT);
-        });
-      });
+          expect(validationResult).toBe(NO_ERROR_IS_PRESENT)
+        })
+      })
 
       describe('uint32', () => {
         it('validates a negative value', () => {
-          const uint32Validation = validateField(U_INT_32_FIELD_TYPE);
+          const uint32Validation = validateField(U_INT_32_FIELD_TYPE)
 
-          const validationResult = uint32Validation('-123');
+          const validationResult = uint32Validation('-123')
 
-          expect(validationResult).toBe('format error. details: value out-of-bounds');
-        });
+          expect(validationResult).toBe('format error. details: value out-of-bounds')
+        })
 
         it('validates a uint32 overflow value', () => {
-          const uint32Validation = validateField(U_INT_32_FIELD_TYPE);
+          const uint32Validation = validateField(U_INT_32_FIELD_TYPE)
 
-          const validationResult = uint32Validation('4294967296');
+          const validationResult = uint32Validation('4294967296')
 
-          expect(validationResult).toBe('format error. details: value out-of-bounds');
-        });
+          expect(validationResult).toBe('format error. details: value out-of-bounds')
+        })
 
         it('validates a uint32 valid value', () => {
-          const uint32Validation = validateField(U_INT_32_FIELD_TYPE);
+          const uint32Validation = validateField(U_INT_32_FIELD_TYPE)
 
-          const validationResult = uint32Validation('4294967295');
+          const validationResult = uint32Validation('4294967295')
 
-          expect(validationResult).toBe(NO_ERROR_IS_PRESENT);
-        });
-      });
+          expect(validationResult).toBe(NO_ERROR_IS_PRESENT)
+        })
+      })
 
       describe('uint8', () => {
         it('validates a negative value', () => {
-          const uint8Validation = validateField(U_INT_8_FIELD_TYPE);
+          const uint8Validation = validateField(U_INT_8_FIELD_TYPE)
 
-          const validationResult = uint8Validation('-123');
+          const validationResult = uint8Validation('-123')
 
-          expect(validationResult).toBe('format error. details: value out-of-bounds');
-        });
+          expect(validationResult).toBe('format error. details: value out-of-bounds')
+        })
 
         it('validates a uint8 overflow value', () => {
-          const uint8Validation = validateField(U_INT_8_FIELD_TYPE);
+          const uint8Validation = validateField(U_INT_8_FIELD_TYPE)
 
-          const validationResult = uint8Validation('9999999');
+          const validationResult = uint8Validation('9999999')
 
-          expect(validationResult).toBe('format error. details: value out-of-bounds');
-        });
+          expect(validationResult).toBe('format error. details: value out-of-bounds')
+        })
 
         it('validates a uint8 valid value', () => {
-          const uint8Validation = validateField(U_INT_8_FIELD_TYPE);
+          const uint8Validation = validateField(U_INT_8_FIELD_TYPE)
 
-          const validationResult = uint8Validation('255');
+          const validationResult = uint8Validation('255')
 
-          expect(validationResult).toBe(NO_ERROR_IS_PRESENT);
-        });
-      });
-    });
+          expect(validationResult).toBe(NO_ERROR_IS_PRESENT)
+        })
+      })
+    })
 
     describe('int field type', () => {
       describe('int256', () => {
         it('validates a negative value', () => {
-          const int256Validation = validateField(INT_256_FIELD_TYPE);
+          const int256Validation = validateField(INT_256_FIELD_TYPE)
 
-          const validationResult = int256Validation('-123');
+          const validationResult = int256Validation('-123')
 
-          expect(validationResult).toBe(NO_ERROR_IS_PRESENT);
-        });
+          expect(validationResult).toBe(NO_ERROR_IS_PRESENT)
+        })
 
         it('validates a decimal value', () => {
-          const int256Validation = validateField(INT_256_FIELD_TYPE);
+          const int256Validation = validateField(INT_256_FIELD_TYPE)
 
-          const validationResult = int256Validation('123.123');
+          const validationResult = int256Validation('123.123')
 
-          expect(validationResult).toContain('format error.');
-        });
+          expect(validationResult).toContain('format error.')
+        })
 
         it('validates a invalid number value', () => {
-          const int256Validation = validateField(INT_256_FIELD_TYPE);
+          const int256Validation = validateField(INT_256_FIELD_TYPE)
 
-          const validationResult = int256Validation('INVALID NUMBER VALUE');
+          const validationResult = int256Validation('INVALID NUMBER VALUE')
 
-          expect(validationResult).toContain('format error.');
-        });
+          expect(validationResult).toContain('format error.')
+        })
 
         it('validates a int256 overflow negative value', () => {
-          const int256Validation = validateField(INT_256_FIELD_TYPE);
+          const int256Validation = validateField(INT_256_FIELD_TYPE)
 
           const validationResult = int256Validation(
             '-57896044618658097711785492504343953926634992332820282019728792003956564819969',
-          );
+          )
 
-          expect(validationResult).toBe('format error. details: value out-of-bounds');
-        });
+          expect(validationResult).toBe('format error. details: value out-of-bounds')
+        })
 
         it('validates a int256 overflow value', () => {
-          const int256Validation = validateField(INT_256_FIELD_TYPE);
+          const int256Validation = validateField(INT_256_FIELD_TYPE)
 
           const validationResult = int256Validation(
             '57896044618658097711785492504343953926634992332820282019728792003956564819968',
-          );
+          )
 
-          expect(validationResult).toBe('format error. details: value out-of-bounds');
-        });
+          expect(validationResult).toBe('format error. details: value out-of-bounds')
+        })
 
         it('validates a int256 valid value', () => {
-          const int256Validation = validateField(INT_256_FIELD_TYPE);
+          const int256Validation = validateField(INT_256_FIELD_TYPE)
 
           const validationResult = int256Validation(
             '57896044618658097711785492504343953926634992332820282019728792003956564819967',
-          );
+          )
 
-          expect(validationResult).toBe(NO_ERROR_IS_PRESENT);
-        });
-      });
+          expect(validationResult).toBe(NO_ERROR_IS_PRESENT)
+        })
+      })
 
       describe('int32', () => {
         it('validates a negative value', () => {
-          const int32Validation = validateField(INT_32_FIELD_TYPE);
+          const int32Validation = validateField(INT_32_FIELD_TYPE)
 
-          const validationResult = int32Validation('-2147483648');
+          const validationResult = int32Validation('-2147483648')
 
-          expect(validationResult).toBe(NO_ERROR_IS_PRESENT);
-        });
+          expect(validationResult).toBe(NO_ERROR_IS_PRESENT)
+        })
 
         it('validates a int32 overflow negative value', () => {
-          const int32Validation = validateField(INT_32_FIELD_TYPE);
+          const int32Validation = validateField(INT_32_FIELD_TYPE)
 
-          const validationResult = int32Validation('-2147483649');
+          const validationResult = int32Validation('-2147483649')
 
-          expect(validationResult).toBe('format error. details: value out-of-bounds');
-        });
+          expect(validationResult).toBe('format error. details: value out-of-bounds')
+        })
 
         it('validates a int32 overflow value', () => {
-          const int32Validation = validateField(INT_32_FIELD_TYPE);
+          const int32Validation = validateField(INT_32_FIELD_TYPE)
 
-          const validationResult = int32Validation('2147483648');
+          const validationResult = int32Validation('2147483648')
 
-          expect(validationResult).toBe('format error. details: value out-of-bounds');
-        });
+          expect(validationResult).toBe('format error. details: value out-of-bounds')
+        })
 
         it('validates a int32 valid value', () => {
-          const int32Validation = validateField(INT_32_FIELD_TYPE);
+          const int32Validation = validateField(INT_32_FIELD_TYPE)
 
-          const validationResult = int32Validation('2147483647');
+          const validationResult = int32Validation('2147483647')
 
-          expect(validationResult).toBe(NO_ERROR_IS_PRESENT);
-        });
-      });
+          expect(validationResult).toBe(NO_ERROR_IS_PRESENT)
+        })
+      })
 
       describe('int8', () => {
         it('validates a negative value', () => {
-          const int8Validation = validateField(INT_8_FIELD_TYPE);
+          const int8Validation = validateField(INT_8_FIELD_TYPE)
 
-          const validationResult = int8Validation('-128');
+          const validationResult = int8Validation('-128')
 
-          expect(validationResult).toBe(NO_ERROR_IS_PRESENT);
-        });
+          expect(validationResult).toBe(NO_ERROR_IS_PRESENT)
+        })
 
         it('validates a int8 overflow negative value', () => {
-          const int8Validation = validateField(INT_8_FIELD_TYPE);
+          const int8Validation = validateField(INT_8_FIELD_TYPE)
 
-          const validationResult = int8Validation('-129');
+          const validationResult = int8Validation('-129')
 
-          expect(validationResult).toBe('format error. details: value out-of-bounds');
-        });
+          expect(validationResult).toBe('format error. details: value out-of-bounds')
+        })
 
         it('validates a int8 overflow value', () => {
-          const int8Validation = validateField(INT_8_FIELD_TYPE);
+          const int8Validation = validateField(INT_8_FIELD_TYPE)
 
-          const validationResult = int8Validation('9999999');
+          const validationResult = int8Validation('9999999')
 
-          expect(validationResult).toBe('format error. details: value out-of-bounds');
-        });
+          expect(validationResult).toBe('format error. details: value out-of-bounds')
+        })
 
         it('validates a int8 valid value', () => {
-          const int8Validation = validateField(INT_8_FIELD_TYPE);
+          const int8Validation = validateField(INT_8_FIELD_TYPE)
 
-          const validationResult = int8Validation('127');
+          const validationResult = int8Validation('127')
 
-          expect(validationResult).toBe(NO_ERROR_IS_PRESENT);
-        });
-      });
-    });
+          expect(validationResult).toBe(NO_ERROR_IS_PRESENT)
+        })
+      })
+    })
 
     describe('bytes field type', () => {
       describe('bytes', () => {
         it('validates a bytes valid value', () => {
-          const bytesValidation = validateField(BYTES_FIELD_TYPE);
+          const bytesValidation = validateField(BYTES_FIELD_TYPE)
 
-          const validationResult = bytesValidation('0x123');
+          const validationResult = bytesValidation('0x123')
 
-          expect(validationResult).toBe(NO_ERROR_IS_PRESENT);
-        });
+          expect(validationResult).toBe(NO_ERROR_IS_PRESENT)
+        })
 
         it('validates an invalid value', () => {
-          const bytesValidation = validateField(BYTES_FIELD_TYPE);
+          const bytesValidation = validateField(BYTES_FIELD_TYPE)
 
-          const validationResult = bytesValidation('INVALID VALUE');
+          const validationResult = bytesValidation('INVALID VALUE')
 
-          expect(validationResult).toBe('format error. details: invalid arrayify value');
-        });
-      });
-    });
+          expect(validationResult).toBe('format error. details: invalid arrayify value')
+        })
+      })
+    })
 
     describe.only('tuple field type', () => {
       it('validates a tuple', () => {
@@ -407,18 +407,20 @@ describe('form validations', () => {
           internalType: 'struct AllocatorLimits',
           name: 'limits',
           type: 'tuple',
-        });
+        })
 
-        const tupleValidation = validateField(inputType);
+        const tupleValidation = validateField(inputType)
 
-        let validationResult = tupleValidation('[1,1]');
+        let validationResult = tupleValidation('[1,1]')
 
-        expect(validationResult).toBe(NO_ERROR_IS_PRESENT);
+        expect(validationResult).toBe(NO_ERROR_IS_PRESENT)
 
-        validationResult = tupleValidation('[1]');
+        validationResult = tupleValidation('[1]')
 
-        expect(validationResult).toContain('format error. details: TypeError: Cannot read properties of undefined');
-      });
+        expect(validationResult).toContain(
+          'format error. details: TypeError: Cannot read properties of undefined',
+        )
+      })
 
       it('validates a tuple[]', () => {
         const inputType = getInputTypeHelper({
@@ -442,22 +444,22 @@ describe('form validations', () => {
           internalType: 'struct IMetaTransactionsFeature.MetaTransactionData[]',
           name: 'mtxs',
           type: 'tuple[]',
-        });
+        })
 
-        const tupleValidation = validateField(inputType);
+        const tupleValidation = validateField(inputType)
 
         let validationResult = tupleValidation(
           '[["0x57CB13cbef735FbDD65f5f2866638c546464E45F", "0x57CB13cbef735FbDD65f5f2866638c546464E45F", 1], ["0x57CB13cbef735FbDD65f5f2866638c546464E45F", "0x57CB13cbef735FbDD65f5f2866638c546464E45F", 1]]',
-        );
+        )
 
-        expect(validationResult).toBe(NO_ERROR_IS_PRESENT);
+        expect(validationResult).toBe(NO_ERROR_IS_PRESENT)
 
         validationResult = tupleValidation(
           '["0x57CB13cbef735FbDD65f5f2866638c546464E45F", "0x57CB13cbef735FbDD65f5f2866638c546464E45F", 1], ["0x57CB13cbef735FbDD65f5f2866638c546464E45F", "0x57CB13cbef735FbDD65f5f2866638c546464E45F", 1]',
-        );
+        )
 
-        expect(validationResult).toContain('format error. details: SyntaxError: Unexpected token');
-      });
+        expect(validationResult).toContain('format error. details: SyntaxError: Unexpected token')
+      })
 
       it('validates a tuple with nested tuples', () => {
         const inputType = getInputTypeHelper({
@@ -510,18 +512,18 @@ describe('form validations', () => {
               ],
             },
           ],
-        });
+        })
 
-        const tupleValidation = validateField(inputType);
+        const tupleValidation = validateField(inputType)
 
-        let validationResult = tupleValidation('[1,[2,3],[[3,3,[5,5]],[4,4,[6,6]]]]');
+        let validationResult = tupleValidation('[1,[2,3],[[3,3,[5,5]],[4,4,[6,6]]]]')
 
-        expect(validationResult).toBe(NO_ERROR_IS_PRESENT);
+        expect(validationResult).toBe(NO_ERROR_IS_PRESENT)
 
-        validationResult = tupleValidation('[1,[2,3],[[3],[4]]]');
+        validationResult = tupleValidation('[1,[2,3],[[3],[4]]]')
 
-        expect(validationResult).toContain('format error. details: types/value length mismatch');
-      });
-    });
-  });
-});
+        expect(validationResult).toContain('format error. details: types/value length mismatch')
+      })
+    })
+  })
+})
diff --git a/apps/tx-builder/src/components/modals/DeleteBatchFromLibrary.tsx b/apps/tx-builder/src/components/modals/DeleteBatchFromLibrary.tsx
index b7e2fe0b9..3409f8a14 100644
--- a/apps/tx-builder/src/components/modals/DeleteBatchFromLibrary.tsx
+++ b/apps/tx-builder/src/components/modals/DeleteBatchFromLibrary.tsx
@@ -1,14 +1,14 @@
-import { Dot, Text, Button, GenericModal } from '@gnosis.pm/safe-react-components';
-import Box from '@material-ui/core/Box';
+import { Dot, Text, Button, GenericModal } from '@gnosis.pm/safe-react-components'
+import Box from '@material-ui/core/Box'
 
-import styled from 'styled-components';
-import { Batch } from '../../typings/models';
+import styled from 'styled-components'
+import { Batch } from '../../typings/models'
 
 type DeleteBatchFromLibraryProps = {
-  batch: Batch;
-  onClick: (batch: Batch) => void;
-  onClose: () => void;
-};
+  batch: Batch
+  onClick: (batch: Batch) => void
+  onClose: () => void
+}
 
 const DeleteBatchFromLibrary = ({ batch, onClick, onClose }: DeleteBatchFromLibraryProps) => {
   return (
@@ -24,11 +24,21 @@ const DeleteBatchFromLibrary = ({ batch, onClick, onClose }: DeleteBatchFromLibr
           </StyledModalDot>
 
           <StyledModalText size="xl">{`${batch.name} batch will be permanently deleted`}</StyledModalText>
-          <StyledModalButtonsWrapper display="flex" alignItems="center" justifyContent="center" maxWidth={'450px'}>
+          <StyledModalButtonsWrapper
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            maxWidth={'450px'}
+          >
             <Button size="md" variant="bordered" onClick={onClose}>
               Back
             </Button>
-            <Button size="md" style={{ marginLeft: 16 }} color="error" onClick={() => onClick(batch)}>
+            <Button
+              size="md"
+              style={{ marginLeft: 16 }}
+              color="error"
+              onClick={() => onClick(batch)}
+            >
               Yes, delete
             </Button>
           </StyledModalButtonsWrapper>
@@ -36,16 +46,16 @@ const DeleteBatchFromLibrary = ({ batch, onClick, onClose }: DeleteBatchFromLibr
       }
       onClose={onClose}
     />
-  );
-};
+  )
+}
 
-export default DeleteBatchFromLibrary;
+export default DeleteBatchFromLibrary
 
 const StyledModalBodyWrapper = styled.div`
   position: relative;
   padding: 24px;
   max-width: 450px;
-`;
+`
 
 const StyledModalDot = styled(Dot)`
   height: 24px;
@@ -55,12 +65,12 @@ const StyledModalDot = styled(Dot)`
 
   position: absolute;
   top: 22px;
-`;
+`
 
 const StyledModalText = styled(Text)`
   text-indent: 30px;
-`;
+`
 
 const StyledModalButtonsWrapper = styled(Box)`
   margin-top: 24px;
-`;
+`
diff --git a/apps/tx-builder/src/components/modals/DeleteBatchModal.tsx b/apps/tx-builder/src/components/modals/DeleteBatchModal.tsx
index bf17abfea..00a61cdeb 100644
--- a/apps/tx-builder/src/components/modals/DeleteBatchModal.tsx
+++ b/apps/tx-builder/src/components/modals/DeleteBatchModal.tsx
@@ -1,12 +1,12 @@
-import { Dot, Text, Button, GenericModal } from '@gnosis.pm/safe-react-components';
-import Box from '@material-ui/core/Box';
-import styled from 'styled-components';
+import { Dot, Text, Button, GenericModal } from '@gnosis.pm/safe-react-components'
+import Box from '@material-ui/core/Box'
+import styled from 'styled-components'
 
 type DeleteBatchModalProps = {
-  count: number;
-  onClick: () => void;
-  onClose: () => void;
-};
+  count: number
+  onClick: () => void
+  onClose: () => void
+}
 
 const DeleteBatchModal = ({ count, onClick, onClose }: DeleteBatchModalProps) => {
   return (
@@ -21,8 +21,15 @@ const DeleteBatchModal = ({ count, onClick, onClose }: DeleteBatchModalProps) =>
             </Text>
           </StyledModalDot>
 
-          <StyledModalText size="xl">{`transaction${count > 1 ? 's' : ''}`} will be cleared</StyledModalText>
-          <StyledModalButtonsWrapper display="flex" alignItems="center" justifyContent="center" maxWidth={'450px'}>
+          <StyledModalText size="xl">
+            {`transaction${count > 1 ? 's' : ''}`} will be cleared
+          </StyledModalText>
+          <StyledModalButtonsWrapper
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            maxWidth={'450px'}
+          >
             <Button size="md" variant="bordered" onClick={onClose}>
               Back
             </Button>
@@ -34,16 +41,16 @@ const DeleteBatchModal = ({ count, onClick, onClose }: DeleteBatchModalProps) =>
       }
       onClose={onClose}
     />
-  );
-};
+  )
+}
 
-export default DeleteBatchModal;
+export default DeleteBatchModal
 
 const StyledModalBodyWrapper = styled.div`
   position: relative;
   padding: 24px;
   max-width: 450px;
-`;
+`
 
 const StyledModalDot = styled(Dot)`
   height: 24px;
@@ -53,12 +60,12 @@ const StyledModalDot = styled(Dot)`
 
   position: absolute;
   top: 22px;
-`;
+`
 
 const StyledModalText = styled(Text)`
   text-indent: 30px;
-`;
+`
 
 const StyledModalButtonsWrapper = styled(Box)`
   margin-top: 24px;
-`;
+`
diff --git a/apps/tx-builder/src/components/modals/DeleteTransactionModal.tsx b/apps/tx-builder/src/components/modals/DeleteTransactionModal.tsx
index eb7300f7c..fd0bc20bc 100644
--- a/apps/tx-builder/src/components/modals/DeleteTransactionModal.tsx
+++ b/apps/tx-builder/src/components/modals/DeleteTransactionModal.tsx
@@ -1,16 +1,21 @@
-import { Dot, Text, Button, GenericModal } from '@gnosis.pm/safe-react-components';
-import Box from '@material-ui/core/Box';
-import styled from 'styled-components';
+import { Dot, Text, Button, GenericModal } from '@gnosis.pm/safe-react-components'
+import Box from '@material-ui/core/Box'
+import styled from 'styled-components'
 
 type DeleteTransactionModalProps = {
-  txIndex: number;
-  txDescription: string;
-  onClick: () => void;
-  onClose: () => void;
-};
+  txIndex: number
+  txDescription: string
+  onClick: () => void
+  onClose: () => void
+}
 
-const DeleteTransactionModal = ({ txIndex, txDescription, onClick, onClose }: DeleteTransactionModalProps) => {
-  const positionLabel = txIndex + 1;
+const DeleteTransactionModal = ({
+  txIndex,
+  txDescription,
+  onClick,
+  onClose,
+}: DeleteTransactionModalProps) => {
+  const positionLabel = txIndex + 1
   return (
     <GenericModal
       title={'Delete from batch?'}
@@ -24,7 +29,12 @@ const DeleteTransactionModal = ({ txIndex, txDescription, onClick, onClose }: De
           </StyledModalDot>
 
           <StyledModalText size="xl">{`${txDescription} will be permanently deleted from the batch`}</StyledModalText>
-          <StyledModalButtonsWrapper display="flex" alignItems="center" justifyContent="center" maxWidth={'450px'}>
+          <StyledModalButtonsWrapper
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            maxWidth={'450px'}
+          >
             <Button size="md" variant="bordered" onClick={onClose}>
               Back
             </Button>
@@ -36,16 +46,16 @@ const DeleteTransactionModal = ({ txIndex, txDescription, onClick, onClose }: De
       }
       onClose={onClose}
     />
-  );
-};
+  )
+}
 
-export default DeleteTransactionModal;
+export default DeleteTransactionModal
 
 const StyledModalBodyWrapper = styled.div`
   position: relative;
   padding: 24px;
   max-width: 450px;
-`;
+`
 
 const StyledModalDot = styled(Dot)`
   height: 24px;
@@ -55,12 +65,12 @@ const StyledModalDot = styled(Dot)`
 
   position: absolute;
   top: 22px;
-`;
+`
 
 const StyledModalText = styled(Text)`
   text-indent: 30px;
-`;
+`
 
 const StyledModalButtonsWrapper = styled(Box)`
   margin-top: 24px;
-`;
+`
diff --git a/apps/tx-builder/src/components/modals/SaveBatchModal.tsx b/apps/tx-builder/src/components/modals/SaveBatchModal.tsx
index 1fca70cc2..88c1f6f89 100644
--- a/apps/tx-builder/src/components/modals/SaveBatchModal.tsx
+++ b/apps/tx-builder/src/components/modals/SaveBatchModal.tsx
@@ -1,39 +1,39 @@
-import { Button, GenericModal } from '@gnosis.pm/safe-react-components';
-import Box from '@material-ui/core/Box';
-import { useForm, ValidateResult } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
-import styled from 'styled-components';
+import { Button, GenericModal } from '@gnosis.pm/safe-react-components'
+import Box from '@material-ui/core/Box'
+import { useForm, ValidateResult } from 'react-hook-form'
+import { useNavigate } from 'react-router-dom'
+import styled from 'styled-components'
 
-import { SAVE_BATCH_PATH } from '../../routes/routes';
-import { useTransactionLibrary } from '../../store';
-import { Batch } from '../../typings/models';
-import Field from '../forms/fields/Field';
-import { TEXT_FIELD_TYPE } from '../forms/fields/fields';
+import { SAVE_BATCH_PATH } from '../../routes/routes'
+import { useTransactionLibrary } from '../../store'
+import { Batch } from '../../typings/models'
+import Field from '../forms/fields/Field'
+import { TEXT_FIELD_TYPE } from '../forms/fields/fields'
 
 type SaveBatchModalProps = {
-  onClick: (name: string) => void;
-  onClose: () => void;
-};
-const BATCH_NAME_FIELD = 'batchName';
+  onClick: (name: string) => void
+  onClose: () => void
+}
+const BATCH_NAME_FIELD = 'batchName'
 
 type CreateBatchFormValuesTypes = {
-  [BATCH_NAME_FIELD]: string;
-};
+  [BATCH_NAME_FIELD]: string
+}
 
 const SaveBatchModal = ({ onClick, onClose }: SaveBatchModalProps) => {
   const { handleSubmit, control } = useForm<CreateBatchFormValuesTypes>({
     mode: 'onTouched',
-  });
+  })
 
-  const { batches } = useTransactionLibrary();
+  const { batches } = useTransactionLibrary()
 
-  const navigate = useNavigate();
+  const navigate = useNavigate()
 
   const onSubmit = (values: CreateBatchFormValuesTypes) => {
-    const { [BATCH_NAME_FIELD]: batchName } = values;
-    onClick(batchName.trim());
-    navigate(SAVE_BATCH_PATH);
-  };
+    const { [BATCH_NAME_FIELD]: batchName } = values
+    onClick(batchName.trim())
+    navigate(SAVE_BATCH_PATH)
+  }
 
   return (
     <GenericModal
@@ -63,27 +63,27 @@ const SaveBatchModal = ({ onClick, onClose }: SaveBatchModalProps) => {
       }
       onClose={onClose}
     />
-  );
-};
+  )
+}
 
-export default SaveBatchModal;
+export default SaveBatchModal
 
 const StyledModalBodyWrapper = styled.div`
   padding: 24px;
   max-width: 450px;
-`;
+`
 
 const validateBatchName = (batchName: string, batches: Batch[]): ValidateResult => {
-  const batchNames = batches.map(({ name }) => name);
-  const isBatchNameAlreadyTaken = batchNames.includes(batchName);
+  const batchNames = batches.map(({ name }) => name)
+  const isBatchNameAlreadyTaken = batchNames.includes(batchName)
 
   if (isBatchNameAlreadyTaken) {
-    return 'this Batch name is already taken';
+    return 'this Batch name is already taken'
   }
 
-  const trimmedBatchName = batchName.trim();
+  const trimmedBatchName = batchName.trim()
 
   if (!trimmedBatchName) {
-    return 'Required';
+    return 'Required'
   }
-};
+}
diff --git a/apps/tx-builder/src/components/modals/SuccessBatchCreationModal.tsx b/apps/tx-builder/src/components/modals/SuccessBatchCreationModal.tsx
index 0587d710c..22c23adb2 100644
--- a/apps/tx-builder/src/components/modals/SuccessBatchCreationModal.tsx
+++ b/apps/tx-builder/src/components/modals/SuccessBatchCreationModal.tsx
@@ -1,14 +1,14 @@
-import { Dot, Text, Button, GenericModal, Title } from '@gnosis.pm/safe-react-components';
-import Box from '@material-ui/core/Box';
-import styled from 'styled-components';
+import { Dot, Text, Button, GenericModal, Title } from '@gnosis.pm/safe-react-components'
+import Box from '@material-ui/core/Box'
+import styled from 'styled-components'
 
-import { ReactComponent as SuccessBatchSVG } from '../../assets/success-batch.svg';
+import { ReactComponent as SuccessBatchSVG } from '../../assets/success-batch.svg'
 
 type SuccessBatchCreationModalProps = {
-  count: number;
-  onClick: () => void;
-  onClose: () => void;
-};
+  count: number
+  onClick: () => void
+  onClose: () => void
+}
 
 const SuccessBatchCreationModal = ({ count, onClick, onClose }: SuccessBatchCreationModalProps) => {
   return (
@@ -16,7 +16,12 @@ const SuccessBatchCreationModal = ({ count, onClick, onClose }: SuccessBatchCrea
       title="Batch Created!"
       withoutBodyPadding
       body={
-        <StyledBodyWrapper display="flex" flexDirection={'column'} alignItems="center" justifyContent="center">
+        <StyledBodyWrapper
+          display="flex"
+          flexDirection={'column'}
+          alignItems="center"
+          justifyContent="center"
+        >
           {/* Image Success */}
           <SuccessBatchSVG />
 
@@ -44,24 +49,24 @@ const SuccessBatchCreationModal = ({ count, onClick, onClose }: SuccessBatchCrea
       }
       onClose={onClose}
     />
-  );
-};
+  )
+}
 
-export default SuccessBatchCreationModal;
+export default SuccessBatchCreationModal
 
 const StyledBodyWrapper = styled(Box)`
   padding: 50px;
-`;
+`
 
 const StyledBodyTitle = styled(Title)`
   font-size: 32px;
   margin: 16px 0;
-`;
+`
 
 const StyledTextWrapper = styled.div`
   position: relative;
   margin-bottom: 32px;
-`;
+`
 
 const StyledModalDot = styled(Dot)`
   position: absolute;
@@ -71,8 +76,8 @@ const StyledModalDot = styled(Dot)`
   top: -1px;
 
   background-color: #566976;
-`;
+`
 
 const StyledModalText = styled(Text)`
   text-indent: 28px;
-`;
+`
diff --git a/apps/tx-builder/src/components/modals/WrongChainBatchModal.tsx b/apps/tx-builder/src/components/modals/WrongChainBatchModal.tsx
index 07070d2a6..c6f79b22f 100644
--- a/apps/tx-builder/src/components/modals/WrongChainBatchModal.tsx
+++ b/apps/tx-builder/src/components/modals/WrongChainBatchModal.tsx
@@ -1,18 +1,23 @@
-import { Button, GenericModal, Icon, Text } from '@gnosis.pm/safe-react-components';
-import Box from '@material-ui/core/Box';
-import styled from 'styled-components';
+import { Button, GenericModal, Icon, Text } from '@gnosis.pm/safe-react-components'
+import Box from '@material-ui/core/Box'
+import styled from 'styled-components'
 
 type WrongChainBatchModalProps = {
-  onClick: () => void;
-  onClose: () => void;
-  fileChainId: string | undefined;
-};
+  onClick: () => void
+  onClose: () => void
+  fileChainId: string | undefined
+}
 
 const WrongChainBatchModal = ({ onClick, onClose, fileChainId }: WrongChainBatchModalProps) => {
   return (
     <GenericModal
       title={
-        <StyledContainerTitle display="flex" alignItems="center" justifyContent="center" width="100%">
+        <StyledContainerTitle
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          width="100%"
+        >
           <Icon size="md" type="alert" color="error" />
           <StyledWarningLabel>Warning</StyledWarningLabel>
         </StyledContainerTitle>
@@ -21,9 +26,15 @@ const WrongChainBatchModal = ({ onClick, onClose, fileChainId }: WrongChainBatch
       body={
         <StyledModalBodyWrapper>
           <Text size={'xl'} center>
-            This batch is from another Chain{fileChainId ? ` (${fileChainId})` : ''}!
+            This batch is from another Chain
+            {fileChainId ? ` (${fileChainId})` : ''}!
           </Text>
-          <StyleButtonContainer display="flex" alignItems="center" justifyContent="center" maxWidth={'450px'}>
+          <StyleButtonContainer
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            maxWidth={'450px'}
+          >
             <Button size="md" type="button" onClick={onClick}>
               Ok, I understand
             </Button>
@@ -32,24 +43,24 @@ const WrongChainBatchModal = ({ onClick, onClose, fileChainId }: WrongChainBatch
       }
       onClose={onClose}
     />
-  );
-};
+  )
+}
 
-export default WrongChainBatchModal;
+export default WrongChainBatchModal
 
 const StyledContainerTitle = styled(Box)`
   margin-left: 110px;
-`;
+`
 
 const StyledWarningLabel = styled.span`
   margin-left: 8px;
-`;
+`
 
 const StyledModalBodyWrapper = styled.div`
   padding: 24px;
   max-width: 450px;
-`;
+`
 
 const StyleButtonContainer = styled(Box)`
   margin-top: 24px;
-`;
+`
diff --git a/apps/tx-builder/src/global.ts b/apps/tx-builder/src/global.ts
index b7990edd5..db2e02198 100644
--- a/apps/tx-builder/src/global.ts
+++ b/apps/tx-builder/src/global.ts
@@ -1,6 +1,6 @@
-import { createGlobalStyle } from 'styled-components';
-import avertaFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-normal.woff2';
-import avertaBoldFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-bold.woff2';
+import { createGlobalStyle } from 'styled-components'
+import avertaFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-normal.woff2'
+import avertaBoldFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-bold.woff2'
 
 const GlobalStyle = createGlobalStyle`
     html {
@@ -66,6 +66,6 @@ const GlobalStyle = createGlobalStyle`
         border-radius: 20px;
         border: 3px solid #B2BBC0;
     }
-`;
+`
 
-export default GlobalStyle;
+export default GlobalStyle
diff --git a/apps/tx-builder/src/hooks/useDropZone/index.tsx b/apps/tx-builder/src/hooks/useDropZone/index.tsx
index aa5b1b366..a4deb7baf 100644
--- a/apps/tx-builder/src/hooks/useDropZone/index.tsx
+++ b/apps/tx-builder/src/hooks/useDropZone/index.tsx
@@ -1,69 +1,73 @@
-import { useState, useRef, DragEventHandler, useMemo } from 'react';
+import { useState, useRef, DragEventHandler, useMemo } from 'react'
 
 export interface DropHandlers {
-  onDragOver: DragEventHandler;
-  onDragEnter: DragEventHandler;
-  onDragLeave: DragEventHandler;
-  onDrop: DragEventHandler;
+  onDragOver: DragEventHandler
+  onDragEnter: DragEventHandler
+  onDragLeave: DragEventHandler
+  onDrop: DragEventHandler
 }
 
 const useDropZone = (
   onDrop: (file: File | null) => void,
   accept: string,
-): { isOverDropZone: Boolean; isAcceptError: Boolean; dropHandlers: DropHandlers } => {
-  const [isOverDropZone, setIsOverDropZone] = useState<Boolean>(false);
-  const [isAcceptError, setIsAcceptError] = useState<Boolean>(false);
-  const counter = useRef(0);
+): {
+  isOverDropZone: Boolean
+  isAcceptError: Boolean
+  dropHandlers: DropHandlers
+} => {
+  const [isOverDropZone, setIsOverDropZone] = useState<Boolean>(false)
+  const [isAcceptError, setIsAcceptError] = useState<Boolean>(false)
+  const counter = useRef(0)
 
   const handlers: DropHandlers = useMemo(
     () => ({
       onDragOver(event) {
-        event.preventDefault();
+        event.preventDefault()
       },
       onDragEnter(event) {
-        event.preventDefault();
-        counter.current++;
-        setIsOverDropZone(true);
+        event.preventDefault()
+        counter.current++
+        setIsOverDropZone(true)
       },
       onDragLeave(event) {
-        event.preventDefault();
-        counter.current--;
+        event.preventDefault()
+        counter.current--
         if (counter.current === 0) {
-          setIsOverDropZone(false);
+          setIsOverDropZone(false)
         }
       },
       onDrop(event) {
-        event.preventDefault();
-        counter.current = 0;
-        setIsOverDropZone(false);
-        event.persist();
+        event.preventDefault()
+        counter.current = 0
+        setIsOverDropZone(false)
+        event.persist()
 
-        const files = Array.from(event?.dataTransfer?.files ?? []);
+        const files = Array.from(event?.dataTransfer?.files ?? [])
 
         if (files.length !== 1) {
-          onDrop(null);
-          return;
+          onDrop(null)
+          return
         }
 
-        const fileName = files[0].name;
-        const fileExtension = fileName.split('.').pop();
+        const fileName = files[0].name
+        const fileExtension = fileName.split('.').pop()
 
         if (!accept.split(',').includes(`.${fileExtension}`)) {
-          onDrop(null);
-          setIsAcceptError(true);
+          onDrop(null)
+          setIsAcceptError(true)
           setTimeout(() => {
-            setIsAcceptError(false);
-          }, 2000);
-          return;
+            setIsAcceptError(false)
+          }, 2000)
+          return
         }
 
-        onDrop(files[0]);
+        onDrop(files[0])
       },
     }),
     [accept, onDrop],
-  );
+  )
 
-  return { isOverDropZone, isAcceptError, dropHandlers: handlers };
-};
+  return { isOverDropZone, isAcceptError, dropHandlers: handlers }
+}
 
-export default useDropZone;
+export default useDropZone
diff --git a/apps/tx-builder/src/hooks/useElementHeight/useElementHeight.tsx b/apps/tx-builder/src/hooks/useElementHeight/useElementHeight.tsx
index fbb222a73..8e568fda7 100644
--- a/apps/tx-builder/src/hooks/useElementHeight/useElementHeight.tsx
+++ b/apps/tx-builder/src/hooks/useElementHeight/useElementHeight.tsx
@@ -1,24 +1,24 @@
-import { RefObject, useEffect, useRef, useState } from 'react';
+import { RefObject, useEffect, useRef, useState } from 'react'
 
 type useElementHeightTypes<T extends HTMLElement> = {
-  height: number | undefined;
-  elementRef: RefObject<T>;
-};
+  height: number | undefined
+  elementRef: RefObject<T>
+}
 
 const useElementHeight = <T extends HTMLElement>(): useElementHeightTypes<T> => {
-  const elementRef = useRef<T>(null);
+  const elementRef = useRef<T>(null)
 
-  const [height, setHeight] = useState<number | undefined>();
+  const [height, setHeight] = useState<number | undefined>()
 
   useEffect(() => {
     // hack to calculate properly the height of a container
     setTimeout(() => {
-      const height = elementRef?.current?.clientHeight;
-      setHeight(height);
-    }, 10);
-  }, [elementRef]);
+      const height = elementRef?.current?.clientHeight
+      setHeight(height)
+    }, 10)
+  }, [elementRef])
 
-  return { height, elementRef };
-};
+  return { height, elementRef }
+}
 
-export default useElementHeight;
+export default useElementHeight
diff --git a/apps/tx-builder/src/hooks/useModal/useModal.tsx b/apps/tx-builder/src/hooks/useModal/useModal.tsx
index a2709ee6c..b4d7b385e 100644
--- a/apps/tx-builder/src/hooks/useModal/useModal.tsx
+++ b/apps/tx-builder/src/hooks/useModal/useModal.tsx
@@ -1,19 +1,19 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react'
 
 const useModal = (initialValue = false) => {
-  const [open, setOpen] = useState<boolean>(initialValue);
+  const [open, setOpen] = useState<boolean>(initialValue)
 
   const openModal = useCallback(() => {
-    setOpen(true);
-  }, []);
+    setOpen(true)
+  }, [])
 
   const closeModal = useCallback(() => {
-    setOpen(false);
-  }, []);
+    setOpen(false)
+  }, [])
 
   const toggleModal = useCallback(() => {
-    setOpen((open) => !open);
-  }, []);
+    setOpen(open => !open)
+  }, [])
 
   return {
     open,
@@ -22,7 +22,7 @@ const useModal = (initialValue = false) => {
     openModal,
     closeModal,
     toggleModal,
-  };
-};
+  }
+}
 
-export default useModal;
+export default useModal
diff --git a/apps/tx-builder/src/hooks/useSimulation.ts b/apps/tx-builder/src/hooks/useSimulation.ts
index bc9cbdcfc..d77f23dc2 100644
--- a/apps/tx-builder/src/hooks/useSimulation.ts
+++ b/apps/tx-builder/src/hooks/useSimulation.ts
@@ -1,42 +1,47 @@
-import { BaseTransaction } from '@gnosis.pm/safe-apps-sdk';
-import { useCallback, useState, useMemo } from 'react';
-import { TenderlySimulation } from '../lib/simulation/types';
+import { BaseTransaction } from '@gnosis.pm/safe-apps-sdk'
+import { useCallback, useState, useMemo } from 'react'
+import { TenderlySimulation } from '../lib/simulation/types'
 import {
   getBlockMaxGasLimit,
   getSimulationPayload,
   getSimulation,
   getSimulationLink,
-} from '../lib/simulation/simulation';
-import { useNetwork } from '../store/networkContext';
-import { FETCH_STATUS } from '../utils';
+} from '../lib/simulation/simulation'
+import { useNetwork } from '../store/networkContext'
+import { FETCH_STATUS } from '../utils'
 
 type UseSimulationReturn =
   | {
-      simulationRequestStatus: FETCH_STATUS.NOT_ASKED | FETCH_STATUS.ERROR | FETCH_STATUS.LOADING;
-      simulation: undefined;
-      simulateTransaction: () => void;
-      simulationLink: string;
+      simulationRequestStatus: FETCH_STATUS.NOT_ASKED | FETCH_STATUS.ERROR | FETCH_STATUS.LOADING
+      simulation: undefined
+      simulateTransaction: () => void
+      simulationLink: string
     }
   | {
-      simulationRequestStatus: FETCH_STATUS.SUCCESS;
-      simulation: TenderlySimulation;
-      simulateTransaction: () => void;
-      simulationLink: string;
-    };
+      simulationRequestStatus: FETCH_STATUS.SUCCESS
+      simulation: TenderlySimulation
+      simulateTransaction: () => void
+      simulationLink: string
+    }
 
 const useSimulation = (transactions: BaseTransaction[]): UseSimulationReturn => {
-  const [simulation, setSimulation] = useState<TenderlySimulation | undefined>();
-  const [simulationRequestStatus, setSimulationRequestStatus] = useState<FETCH_STATUS>(FETCH_STATUS.NOT_ASKED);
-  const simulationLink = useMemo(() => getSimulationLink(simulation?.simulation.id || ''), [simulation]);
-  const { safe, web3 } = useNetwork();
+  const [simulation, setSimulation] = useState<TenderlySimulation | undefined>()
+  const [simulationRequestStatus, setSimulationRequestStatus] = useState<FETCH_STATUS>(
+    FETCH_STATUS.NOT_ASKED,
+  )
+  const simulationLink = useMemo(
+    () => getSimulationLink(simulation?.simulation.id || ''),
+    [simulation],
+  )
+  const { safe, web3 } = useNetwork()
 
   const simulateTransaction = useCallback(async () => {
-    if (!web3) return;
+    if (!web3) return
 
-    setSimulationRequestStatus(FETCH_STATUS.LOADING);
+    setSimulationRequestStatus(FETCH_STATUS.LOADING)
     try {
-      const safeNonce = await web3.eth.getStorageAt(safe.safeAddress, `0x${'3'.padStart(64, '0')}`);
-      const blockGasLimit = await getBlockMaxGasLimit(web3);
+      const safeNonce = await web3.eth.getStorageAt(safe.safeAddress, `0x${'3'.padStart(64, '0')}`)
+      const blockGasLimit = await getBlockMaxGasLimit(web3)
 
       const simulationPayload = getSimulationPayload({
         chainId: safe.chainId.toString(),
@@ -45,23 +50,23 @@ const useSimulation = (transactions: BaseTransaction[]): UseSimulationReturn =>
         safeNonce,
         transactions,
         gasLimit: parseInt(blockGasLimit),
-      });
+      })
 
-      const simulationResponse = await getSimulation(simulationPayload);
-      setSimulation(simulationResponse);
-      setSimulationRequestStatus(FETCH_STATUS.SUCCESS);
+      const simulationResponse = await getSimulation(simulationPayload)
+      setSimulation(simulationResponse)
+      setSimulationRequestStatus(FETCH_STATUS.SUCCESS)
     } catch (error) {
-      console.error(error);
-      setSimulationRequestStatus(FETCH_STATUS.ERROR);
+      console.error(error)
+      setSimulationRequestStatus(FETCH_STATUS.ERROR)
     }
-  }, [safe, transactions, web3]);
+  }, [safe, transactions, web3])
 
   return {
     simulateTransaction,
     simulationRequestStatus,
     simulation,
     simulationLink,
-  } as UseSimulationReturn;
-};
+  } as UseSimulationReturn
+}
 
-export { useSimulation };
+export { useSimulation }
diff --git a/apps/tx-builder/src/index.tsx b/apps/tx-builder/src/index.tsx
index 62a3cf6bd..61fa0ffca 100644
--- a/apps/tx-builder/src/index.tsx
+++ b/apps/tx-builder/src/index.tsx
@@ -1,14 +1,14 @@
-import ReactDOM from 'react-dom';
-import { ThemeProvider } from 'styled-components';
-import { theme } from '@gnosis.pm/safe-react-components';
-import { SafeProvider } from '@gnosis.pm/safe-apps-react-sdk';
-import { BrowserRouter } from 'react-router-dom';
+import ReactDOM from 'react-dom'
+import { ThemeProvider } from 'styled-components'
+import { theme } from '@gnosis.pm/safe-react-components'
+import { SafeProvider } from '@gnosis.pm/safe-apps-react-sdk'
+import { BrowserRouter } from 'react-router-dom'
 
-import * as serviceWorker from './serviceWorker';
+import * as serviceWorker from './serviceWorker'
 
-import GlobalStyles from './global';
-import App from './App';
-import StoreProvider from './store';
+import GlobalStyles from './global'
+import App from './App'
+import StoreProvider from './store'
 
 ReactDOM.render(
   <>
@@ -24,9 +24,9 @@ ReactDOM.render(
     </ThemeProvider>
   </>,
   document.getElementById('root'),
-);
+)
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.unregister()
diff --git a/apps/tx-builder/src/lib/checksum.test.js b/apps/tx-builder/src/lib/checksum.test.js
index 0b9a6fcbc..1776be81a 100644
--- a/apps/tx-builder/src/lib/checksum.test.js
+++ b/apps/tx-builder/src/lib/checksum.test.js
@@ -1,4 +1,4 @@
-import { addChecksum, validateChecksum } from './checksum';
+import { addChecksum, validateChecksum } from './checksum'
 
 const batchFileObject = {
   version: '1.0',
@@ -55,53 +55,60 @@ const batchFileObject = {
       data: '0x42f4579000000000000000000000000049d4450977e2c95362c13d3a31a09311e0ea26a6',
     },
   ],
-};
+}
 
 test('Add checksum to BatchFile', () => {
-  const batchFileWithChecksum = addChecksum(batchFileObject);
+  const batchFileWithChecksum = addChecksum(batchFileObject)
   expect(batchFileWithChecksum.meta.checksum).toBe(
     '0x4ecbfd364aa6759983915644e73f8bd411e85a2dc306f252a387c2728c4db64c',
-  );
-});
+  )
+})
 
 test('Validate checksum in BatchFile', () => {
-  const batchFileWithChecksum = addChecksum(batchFileObject);
-  expect(validateChecksum(batchFileWithChecksum, '0x832ecdb6653751ed00b79dede73864163e46e71815b72e11e506d6399bedffc9'));
-});
+  const batchFileWithChecksum = addChecksum(batchFileObject)
+  expect(
+    validateChecksum(
+      batchFileWithChecksum,
+      '0x832ecdb6653751ed00b79dede73864163e46e71815b72e11e506d6399bedffc9',
+    ),
+  )
+})
 
 test('Checksum should remain the same when the properties order is not equal', () => {
-  const batchFileWithChecksum = addChecksum(reverseBatchFileProps(batchFileObject));
+  const batchFileWithChecksum = addChecksum(reverseBatchFileProps(batchFileObject))
   expect(batchFileWithChecksum.meta.checksum).toBe(
     '0x4ecbfd364aa6759983915644e73f8bd411e85a2dc306f252a387c2728c4db64c',
-  );
-});
+  )
+})
 
 const reverseBatchFileProps = () => {
-  const reversedProps = {};
+  const reversedProps = {}
 
   Object.keys(batchFileObject)
     .reverse()
-    .forEach((key) => {
+    .forEach(key => {
       if (key === 'meta') {
-        const metaObject = {};
+        const metaObject = {}
         Object.keys(batchFileObject[key])
           .reverse()
-          .forEach((metaObjectKey) => {
-            metaObject[metaObjectKey] = batchFileObject[key][metaObjectKey];
-          });
-        return (reversedProps[key] = metaObject);
+          .forEach(metaObjectKey => {
+            metaObject[metaObjectKey] = batchFileObject[key][metaObjectKey]
+          })
+        return (reversedProps[key] = metaObject)
       }
 
-      reversedProps[key] = batchFileObject[key];
-    });
+      reversedProps[key] = batchFileObject[key]
+    })
 
-  return reversedProps;
-};
+  return reversedProps
+}
 
 test('Validation should fail if we change transaction order', () => {
-  const batchFileWithChecksum = addChecksum(batchFileObject);
-  const batchFileObjectCopy = { ...batchFileObject };
-  batchFileObjectCopy.transactions.reverse();
-  const batchFileCopyWithChecksumAndTransactionsReversed = addChecksum(batchFileObjectCopy);
-  expect(batchFileWithChecksum.meta.checksum).not.toBe(batchFileCopyWithChecksumAndTransactionsReversed.meta.checksum);
-});
+  const batchFileWithChecksum = addChecksum(batchFileObject)
+  const batchFileObjectCopy = { ...batchFileObject }
+  batchFileObjectCopy.transactions.reverse()
+  const batchFileCopyWithChecksumAndTransactionsReversed = addChecksum(batchFileObjectCopy)
+  expect(batchFileWithChecksum.meta.checksum).not.toBe(
+    batchFileCopyWithChecksumAndTransactionsReversed.meta.checksum,
+  )
+})
diff --git a/apps/tx-builder/src/lib/checksum.ts b/apps/tx-builder/src/lib/checksum.ts
index 3ab05e9e3..86ed7d839 100644
--- a/apps/tx-builder/src/lib/checksum.ts
+++ b/apps/tx-builder/src/lib/checksum.ts
@@ -1,36 +1,39 @@
-import web3 from 'web3';
-import { BatchFile } from '../typings/models';
+import web3 from 'web3'
+import { BatchFile } from '../typings/models'
 
 // JSON spec does not allow undefined so stringify removes the prop
 // That's a problem for calculating the checksum back so this function avoid the issue
-export const stringifyReplacer = (_: string, value: any) => (value === undefined ? null : value);
+export const stringifyReplacer = (_: string, value: any) => (value === undefined ? null : value)
 
 const serializeJSONObject = (json: any): string => {
   if (Array.isArray(json)) {
-    return `[${json.map((el) => serializeJSONObject(el)).join(',')}]`;
+    return `[${json.map(el => serializeJSONObject(el)).join(',')}]`
   }
 
   if (typeof json === 'object' && json !== null) {
-    let acc = '';
-    const keys = Object.keys(json).sort();
-    acc += `{${JSON.stringify(keys, stringifyReplacer)}`;
+    let acc = ''
+    const keys = Object.keys(json).sort()
+    acc += `{${JSON.stringify(keys, stringifyReplacer)}`
 
     for (let i = 0; i < keys.length; i++) {
-      acc += `${serializeJSONObject(json[keys[i]])},`;
+      acc += `${serializeJSONObject(json[keys[i]])},`
     }
 
-    return `${acc}}`;
+    return `${acc}}`
   }
 
-  return `${JSON.stringify(json, stringifyReplacer)}`;
-};
+  return `${JSON.stringify(json, stringifyReplacer)}`
+}
 
 const calculateChecksum = (batchFile: BatchFile): string | undefined => {
-  const serialized = serializeJSONObject({ ...batchFile, meta: { ...batchFile.meta, name: null } });
-  const sha = web3.utils.sha3(serialized);
+  const serialized = serializeJSONObject({
+    ...batchFile,
+    meta: { ...batchFile.meta, name: null },
+  })
+  const sha = web3.utils.sha3(serialized)
 
-  return sha || undefined;
-};
+  return sha || undefined
+}
 
 export const addChecksum = (batchFile: BatchFile): BatchFile => {
   return {
@@ -39,13 +42,13 @@ export const addChecksum = (batchFile: BatchFile): BatchFile => {
       ...batchFile.meta,
       checksum: calculateChecksum(batchFile),
     },
-  };
-};
+  }
+}
 
 export const validateChecksum = (batchFile: BatchFile): boolean => {
-  const targetObj = { ...batchFile };
-  const checksum = targetObj.meta.checksum;
-  delete targetObj.meta.checksum;
+  const targetObj = { ...batchFile }
+  const checksum = targetObj.meta.checksum
+  delete targetObj.meta.checksum
 
-  return calculateChecksum(targetObj) === checksum;
-};
+  return calculateChecksum(targetObj) === checksum
+}
diff --git a/apps/tx-builder/src/lib/getAbi.ts b/apps/tx-builder/src/lib/getAbi.ts
index 7a34fc4f1..7c663abe3 100644
--- a/apps/tx-builder/src/lib/getAbi.ts
+++ b/apps/tx-builder/src/lib/getAbi.ts
@@ -1,5 +1,5 @@
-import axios from 'axios';
-import { ChainInfo } from '@gnosis.pm/safe-apps-sdk';
+import axios from 'axios'
+import { ChainInfo } from '@gnosis.pm/safe-apps-sdk'
 
 enum PROVIDER {
   SOURCIFY = 1,
@@ -7,56 +7,59 @@ enum PROVIDER {
 }
 
 type SourcifyResponse = {
-  name: string;
-  path: string;
-  content: string;
-};
+  name: string
+  path: string
+  content: string
+}
 
-const METADATA_FILE = 'metadata.json';
-const DEFAULT_TIMEOUT = 10000;
+const METADATA_FILE = 'metadata.json'
+const DEFAULT_TIMEOUT = 10000
 
 const getProviderURL = (chain: string, address: string, urlProvider: PROVIDER): string => {
   switch (urlProvider) {
     case PROVIDER.SOURCIFY:
-      return `https://sourcify.dev/server/files/${chain}/${address}`;
+      return `https://sourcify.dev/server/files/${chain}/${address}`
     case PROVIDER.GATEWAY:
-      return `https://safe-client.gnosis.io/v1/chains/${chain}/contracts/${address}`;
+      return `https://safe-client.gnosis.io/v1/chains/${chain}/contracts/${address}`
     default:
-      throw new Error('The Provider is not supported');
+      throw new Error('The Provider is not supported')
   }
-};
+}
 
 const getAbiFromSourcify = async (address: string, chainId: string): Promise<any> => {
-  const { data } = await axios.get<SourcifyResponse[]>(getProviderURL(chainId, address, PROVIDER.SOURCIFY), {
-    timeout: DEFAULT_TIMEOUT,
-  });
+  const { data } = await axios.get<SourcifyResponse[]>(
+    getProviderURL(chainId, address, PROVIDER.SOURCIFY),
+    {
+      timeout: DEFAULT_TIMEOUT,
+    },
+  )
 
   if (data.length) {
-    const metadata = data.find((item: SourcifyResponse) => item.name === METADATA_FILE);
-    return metadata && JSON.parse(metadata.content)?.output?.abi;
+    const metadata = data.find((item: SourcifyResponse) => item.name === METADATA_FILE)
+    return metadata && JSON.parse(metadata.content)?.output?.abi
   }
 
-  throw new Error('Contract found but could not found abi using Sourcify');
-};
+  throw new Error('Contract found but could not found abi using Sourcify')
+}
 
 const getAbiFromGateway = async (address: string, chainName: string): Promise<any> => {
   const { data } = await axios.get(getProviderURL(chainName, address, PROVIDER.GATEWAY), {
     timeout: DEFAULT_TIMEOUT,
-  });
+  })
 
   if (data) {
-    return data?.contractAbi?.abi;
+    return data?.contractAbi?.abi
   }
 
-  throw new Error('Contract found but could not found ABI using the Gateway');
-};
+  throw new Error('Contract found but could not found ABI using the Gateway')
+}
 
 const getAbi = async (address: string, chainInfo: ChainInfo): Promise<any> => {
   try {
-    return await getAbiFromSourcify(address, chainInfo.chainId);
+    return await getAbiFromSourcify(address, chainInfo.chainId)
   } catch {
-    return await getAbiFromGateway(address, chainInfo.chainId);
+    return await getAbiFromGateway(address, chainInfo.chainId)
   }
-};
+}
 
-export default getAbi;
+export default getAbi
diff --git a/apps/tx-builder/src/lib/interfaceRepository.ts b/apps/tx-builder/src/lib/interfaceRepository.ts
index 936c064b2..866ad1e05 100644
--- a/apps/tx-builder/src/lib/interfaceRepository.ts
+++ b/apps/tx-builder/src/lib/interfaceRepository.ts
@@ -1,48 +1,48 @@
-import { ChainInfo } from '@gnosis.pm/safe-apps-sdk';
-import { ContractInterface } from '../typings/models';
-import getAbi from './getAbi';
+import { ChainInfo } from '@gnosis.pm/safe-apps-sdk'
+import { ContractInterface } from '../typings/models'
+import getAbi from './getAbi'
 
 class InterfaceRepository {
-  chainInfo: ChainInfo;
+  chainInfo: ChainInfo
 
   constructor(chainInfo: ChainInfo) {
-    this.chainInfo = chainInfo;
+    this.chainInfo = chainInfo
   }
 
   private async _loadAbiFromBlockExplorer(address: string): Promise<string> {
-    return await getAbi(address, this.chainInfo);
+    return await getAbi(address, this.chainInfo)
   }
 
-  private _isMethodPayable = (m: any) => m.payable || m.stateMutability === 'payable';
+  private _isMethodPayable = (m: any) => m.payable || m.stateMutability === 'payable'
 
   async loadAbi(address: string): Promise<string> {
-    return await this._loadAbiFromBlockExplorer(address);
+    return await this._loadAbiFromBlockExplorer(address)
   }
 
   getMethods(abi: string): ContractInterface {
-    let parsedAbi;
+    let parsedAbi
 
     try {
-      parsedAbi = JSON.parse(abi);
+      parsedAbi = JSON.parse(abi)
     } catch {
-      return { methods: [] };
+      return { methods: [] }
     }
 
     if (!Array.isArray(parsedAbi)) {
-      return { methods: [] };
+      return { methods: [] }
     }
 
     const methods = parsedAbi
       .filter((e: any) => {
         if (['pure', 'view'].includes(e.stateMutability)) {
-          return false;
+          return false
         }
 
         if (e?.type.toLowerCase() === 'event') {
-          return false;
+          return false
         }
 
-        return !e.constant;
+        return !e.constant
       })
       .filter((m: any) => m.type !== 'constructor')
       .map((m: any) => {
@@ -50,13 +50,13 @@ class InterfaceRepository {
           inputs: m.inputs || [],
           name: m.name || (m.type === 'fallback' ? 'fallback' : 'receive'),
           payable: this._isMethodPayable(m),
-        };
-      });
+        }
+      })
 
-    return { methods };
+    return { methods }
   }
 }
 
-export type InterfaceRepo = InstanceType<typeof InterfaceRepository>;
+export type InterfaceRepo = InstanceType<typeof InterfaceRepository>
 
-export default InterfaceRepository;
+export default InterfaceRepository
diff --git a/apps/tx-builder/src/lib/simulation/multisend.ts b/apps/tx-builder/src/lib/simulation/multisend.ts
index a83089248..ecc8fb740 100644
--- a/apps/tx-builder/src/lib/simulation/multisend.ts
+++ b/apps/tx-builder/src/lib/simulation/multisend.ts
@@ -1,22 +1,22 @@
-import Web3 from 'web3';
-import { BaseTransaction } from '@gnosis.pm/safe-apps-sdk';
-import { getMultiSendCallOnlyDeployment } from '@gnosis.pm/safe-deployments';
+import Web3 from 'web3'
+import { BaseTransaction } from '@gnosis.pm/safe-apps-sdk'
+import { getMultiSendCallOnlyDeployment } from '@gnosis.pm/safe-deployments'
 
 const getMultiSendCallOnlyAddress = (chainId: string): string => {
-  const deployment = getMultiSendCallOnlyDeployment({ network: chainId });
+  const deployment = getMultiSendCallOnlyDeployment({ network: chainId })
 
   if (!deployment) {
-    throw new Error('MultiSendCallOnly deployment not found');
+    throw new Error('MultiSendCallOnly deployment not found')
   }
 
-  return deployment.networkAddresses[chainId];
-};
+  return deployment.networkAddresses[chainId]
+}
 
 const encodeMultiSendCall = (txs: BaseTransaction[]): string => {
-  const web3 = new Web3();
+  const web3 = new Web3()
 
   const joinedTxs = txs
-    .map((tx) =>
+    .map(tx =>
       [
         web3.eth.abi.encodeParameter('uint8', 0).slice(-2),
         web3.eth.abi.encodeParameter('address', tx.to).slice(-40),
@@ -26,7 +26,7 @@ const encodeMultiSendCall = (txs: BaseTransaction[]): string => {
         tx.data.replace(/^0x/, ''),
       ].join(''),
     )
-    .join('');
+    .join('')
 
   const encodedMultiSendCallData = web3.eth.abi.encodeFunctionCall(
     {
@@ -40,9 +40,9 @@ const encodeMultiSendCall = (txs: BaseTransaction[]): string => {
       ],
     },
     [`0x${joinedTxs}`],
-  );
+  )
 
-  return encodedMultiSendCallData;
-};
+  return encodedMultiSendCallData
+}
 
-export { encodeMultiSendCall, getMultiSendCallOnlyAddress };
+export { encodeMultiSendCall, getMultiSendCallOnlyAddress }
diff --git a/apps/tx-builder/src/lib/simulation/simulation.ts b/apps/tx-builder/src/lib/simulation/simulation.ts
index 7f9e70624..dcd26878c 100644
--- a/apps/tx-builder/src/lib/simulation/simulation.ts
+++ b/apps/tx-builder/src/lib/simulation/simulation.ts
@@ -1,26 +1,28 @@
-import axios from 'axios';
-import Web3 from 'web3';
-import { BaseTransaction } from '@gnosis.pm/safe-apps-sdk';
-import { TenderlySimulatePayload, TenderlySimulation, StateObject } from './types';
-import { encodeMultiSendCall, getMultiSendCallOnlyAddress } from './multisend';
+import axios from 'axios'
+import Web3 from 'web3'
+import { BaseTransaction } from '@gnosis.pm/safe-apps-sdk'
+import { TenderlySimulatePayload, TenderlySimulation, StateObject } from './types'
+import { encodeMultiSendCall, getMultiSendCallOnlyAddress } from './multisend'
 
-type OptionalExceptFor<T, TRequired extends keyof T = keyof T> = Partial<Pick<T, Exclude<keyof T, TRequired>>> &
-  Required<Pick<T, TRequired>>;
+type OptionalExceptFor<T, TRequired extends keyof T = keyof T> = Partial<
+  Pick<T, Exclude<keyof T, TRequired>>
+> &
+  Required<Pick<T, TRequired>>
 
 // api docs: https://www.notion.so/Simulate-API-Documentation-6f7009fe6d1a48c999ffeb7941efc104
-const TENDERLY_SIMULATE_ENDPOINT_URL = process.env.REACT_APP_TENDERLY_SIMULATE_ENDPOINT_URL || '';
-const TENDERLY_PROJECT_NAME = process.env.REACT_APP_TENDERLY_PROJECT_NAME || '';
-const TENDERLY_ORG_NAME = process.env.REACT_APP_TENDERLY_ORG_NAME || '';
+const TENDERLY_SIMULATE_ENDPOINT_URL = process.env.REACT_APP_TENDERLY_SIMULATE_ENDPOINT_URL || ''
+const TENDERLY_PROJECT_NAME = process.env.REACT_APP_TENDERLY_PROJECT_NAME || ''
+const TENDERLY_ORG_NAME = process.env.REACT_APP_TENDERLY_ORG_NAME || ''
 
 const getSimulation = async (tx: TenderlySimulatePayload): Promise<TenderlySimulation> => {
-  const response = await axios.post<TenderlySimulation>(TENDERLY_SIMULATE_ENDPOINT_URL, tx);
+  const response = await axios.post<TenderlySimulation>(TENDERLY_SIMULATE_ENDPOINT_URL, tx)
 
-  return response.data;
-};
+  return response.data
+}
 
 const getSimulationLink = (simulationId: string): string => {
-  return `https://dashboard.tenderly.co/public/${TENDERLY_ORG_NAME}/${TENDERLY_PROJECT_NAME}/simulator/${simulationId}`;
-};
+  return `https://dashboard.tenderly.co/public/${TENDERLY_ORG_NAME}/${TENDERLY_PROJECT_NAME}/simulator/${simulationId}`
+}
 
 /* We need to overwrite the threshold stored in smart contract storage to 1
  to do a proper simulation that takes transaction guards into account.
@@ -29,7 +31,7 @@ const getSimulationLink = (simulationId: string): string => {
  https://github.com/gnosis/safe-contracts/blob/main/contracts/libraries/GnosisSafeStorage.sol */
 const THRESHOLD_ONE_STORAGE_OVERRIDE = {
   [`0x${'4'.padStart(64, '0')}`]: `0x${'1'.padStart(64, '0')}`,
-};
+}
 
 const getStateOverride = (
   address: string,
@@ -42,33 +44,35 @@ const getStateOverride = (
     code,
     storage,
   },
-});
+})
 
 interface SafeTransaction {
-  to: string;
-  value: string;
-  data: string;
-  safeTxGas: string;
-  baseGas: string;
-  gasPrice: string;
-  gasToken: string;
-  refundReceiver: string;
-  nonce: string;
-  operation: string;
+  to: string
+  value: string
+  data: string
+  safeTxGas: string
+  baseGas: string
+  gasPrice: string
+  gasToken: string
+  refundReceiver: string
+  nonce: string
+  operation: string
 }
 
 interface SignedSafeTransaction extends SafeTransaction {
-  signatures: string;
+  signatures: string
 }
 
-const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000';
+const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
 
 const getBlockMaxGasLimit = async (web3: Web3): Promise<string> => {
-  const block = await web3.eth.getBlock('latest');
-  return block.gasLimit.toString();
-};
+  const block = await web3.eth.getBlock('latest')
+  return block.gasLimit.toString()
+}
 
-const buildSafeTransaction = (template: OptionalExceptFor<SafeTransaction, 'to' | 'nonce'>): SafeTransaction => {
+const buildSafeTransaction = (
+  template: OptionalExceptFor<SafeTransaction, 'to' | 'nonce'>,
+): SafeTransaction => {
   return {
     to: template.to,
     value: template.value || '0',
@@ -80,11 +84,11 @@ const buildSafeTransaction = (template: OptionalExceptFor<SafeTransaction, 'to'
     gasToken: template.gasToken || ZERO_ADDRESS,
     refundReceiver: template.refundReceiver || ZERO_ADDRESS,
     nonce: template.nonce,
-  };
-};
+  }
+}
 
 const encodeSafeExecuteTransactionCall = (tx: SignedSafeTransaction): string => {
-  const web3 = new Web3();
+  const web3 = new Web3()
 
   const encodedSafeExecuteTransactionCall = web3.eth.abi.encodeFunctionCall(
     {
@@ -115,26 +119,26 @@ const encodeSafeExecuteTransactionCall = (tx: SignedSafeTransaction): string =>
       tx.refundReceiver,
       tx.signatures,
     ],
-  );
+  )
 
-  return encodedSafeExecuteTransactionCall;
-};
+  return encodedSafeExecuteTransactionCall
+}
 
 const getPreValidatedSignature = (address: string): string => {
   return `0x000000000000000000000000${address.replace(
     '0x',
     '',
-  )}000000000000000000000000000000000000000000000000000000000000000001`;
-};
+  )}000000000000000000000000000000000000000000000000000000000000000001`
+}
 
 type SimulationTxParams = {
-  safeAddress: string;
-  safeNonce: string;
-  executionOwner: string;
-  transactions: BaseTransaction[];
-  chainId: string;
-  gasLimit: number;
-};
+  safeAddress: string
+  safeNonce: string
+  executionOwner: string
+  transactions: BaseTransaction[]
+  chainId: string
+  gasLimit: number
+}
 
 const getSingleTransactionExecutionData = (tx: SimulationTxParams): string => {
   const safeTransaction = buildSafeTransaction({
@@ -143,50 +147,52 @@ const getSingleTransactionExecutionData = (tx: SimulationTxParams): string => {
     data: tx.transactions[0].data,
     nonce: tx.safeNonce,
     operation: '0',
-  });
+  })
   const signedSafeTransaction: SignedSafeTransaction = {
     ...safeTransaction,
     signatures: getPreValidatedSignature(tx.executionOwner),
-  };
+  }
 
-  const executionTransactionData = encodeSafeExecuteTransactionCall(signedSafeTransaction);
+  const executionTransactionData = encodeSafeExecuteTransactionCall(signedSafeTransaction)
 
-  return executionTransactionData;
-};
+  return executionTransactionData
+}
 
 const getMultiSendExecutionData = (tx: SimulationTxParams): string => {
-  const safeTransactionData = encodeMultiSendCall(tx.transactions);
-  const multiSendAddress = getMultiSendCallOnlyAddress(tx.chainId);
+  const safeTransactionData = encodeMultiSendCall(tx.transactions)
+  const multiSendAddress = getMultiSendCallOnlyAddress(tx.chainId)
   const safeTransaction = buildSafeTransaction({
     to: multiSendAddress,
     value: '0',
     data: safeTransactionData,
     nonce: tx.safeNonce,
     operation: '1',
-  });
+  })
   const signedSafeTransaction: SignedSafeTransaction = {
     ...safeTransaction,
     signatures: getPreValidatedSignature(tx.executionOwner),
-  };
+  }
 
-  const executionTransactionData = encodeSafeExecuteTransactionCall(signedSafeTransaction);
+  const executionTransactionData = encodeSafeExecuteTransactionCall(signedSafeTransaction)
 
-  return executionTransactionData;
-};
+  return executionTransactionData
+}
 
 const getSimulationPayload = (tx: SimulationTxParams): TenderlySimulatePayload => {
   // we need separate functions for encoding single and multi send transactions because
   // if there's only 1 transaction in the batch, the Safe interface doesn't route it through the multisend contract
   // instead it directly calls the contract in the batch transaction
   const executionData =
-    tx.transactions.length === 1 ? getSingleTransactionExecutionData(tx) : getMultiSendExecutionData(tx);
+    tx.transactions.length === 1
+      ? getSingleTransactionExecutionData(tx)
+      : getMultiSendExecutionData(tx)
 
   const safeThresholdStateOverride = getStateOverride(
     tx.safeAddress,
     undefined,
     undefined,
     THRESHOLD_ONE_STORAGE_OVERRIDE,
-  );
+  )
 
   return {
     network_id: tx.chainId,
@@ -201,7 +207,7 @@ const getSimulationPayload = (tx: SimulationTxParams): TenderlySimulatePayload =
     },
     save: true,
     save_if_fails: true,
-  };
-};
+  }
+}
 
-export { getSimulationLink, getSimulation, getSimulationPayload, getBlockMaxGasLimit };
+export { getSimulationLink, getSimulation, getSimulationPayload, getBlockMaxGasLimit }
diff --git a/apps/tx-builder/src/lib/simulation/types.ts b/apps/tx-builder/src/lib/simulation/types.ts
index bcbd2719f..cab80d799 100644
--- a/apps/tx-builder/src/lib/simulation/types.ts
+++ b/apps/tx-builder/src/lib/simulation/types.ts
@@ -2,124 +2,124 @@
 // https://github.com/Uniswap/governance-seatbelt/blob/e2c6a0b11d1660f3bd934dab0d9df3ca6f90a1a0/types.d.ts#L123
 
 export type StateObject = {
-  balance?: string;
-  code?: string;
-  storage?: Record<string, string>;
-};
+  balance?: string
+  code?: string
+  storage?: Record<string, string>
+}
 
 type ContractObject = {
-  contractName: string;
-  source: string;
-  sourcePath: string;
+  contractName: string
+  source: string
+  sourcePath: string
   compiler: {
-    name: 'solc';
-    version: string;
-  };
+    name: 'solc'
+    version: string
+  }
   networks: Record<
     string,
     {
-      events?: Record<string, string>;
-      links?: Record<string, string>;
-      address: string;
-      transactionHash?: string;
+      events?: Record<string, string>
+      links?: Record<string, string>
+      address: string
+      transactionHash?: string
     }
-  >;
-};
+  >
+}
 
 export type TenderlySimulatePayload = {
-  network_id: string;
-  block_number?: number;
-  transaction_index?: number;
-  from: string;
-  to: string;
-  input: string;
-  gas: number;
-  gas_price?: string;
-  value?: string;
-  simulation_type?: 'full' | 'quick';
-  save?: boolean;
-  save_if_fails?: boolean;
-  state_objects?: Record<string, StateObject>;
-  contracts?: ContractObject[];
+  network_id: string
+  block_number?: number
+  transaction_index?: number
+  from: string
+  to: string
+  input: string
+  gas: number
+  gas_price?: string
+  value?: string
+  simulation_type?: 'full' | 'quick'
+  save?: boolean
+  save_if_fails?: boolean
+  state_objects?: Record<string, StateObject>
+  contracts?: ContractObject[]
   block_header?: {
-    number?: string;
-    timestamp?: string;
-  };
-  generate_access_list?: boolean;
-};
+    number?: string
+    timestamp?: string
+  }
+  generate_access_list?: boolean
+}
 
 // --- Tenderly types, Response ---
 // NOTE: These type definitions were autogenerated using https://app.quicktype.io/, so are almost
 // certainly not entirely accurate (and they have some interesting type names)
 
 export interface TenderlySimulation {
-  transaction: Transaction;
-  simulation: Simulation;
-  contracts: TenderlyContract[];
-  generated_access_list: GeneratedAccessList[];
+  transaction: Transaction
+  simulation: Simulation
+  contracts: TenderlyContract[]
+  generated_access_list: GeneratedAccessList[]
 }
 
 interface TenderlyContract {
-  id: string;
-  contract_id: string;
-  balance: string;
-  network_id: string;
-  public: boolean;
-  export: boolean;
-  verified_by: string;
-  verification_date: null;
-  address: string;
-  contract_name: string;
-  ens_domain: null;
-  type: string;
-  evm_version: string;
-  compiler_version: string;
-  optimizations_used: boolean;
-  optimization_runs: number;
-  libraries: null;
-  data: Data;
-  creation_block: number;
-  creation_tx: string;
-  creator_address: string;
-  created_at: Date;
-  number_of_watches: null;
-  language: string;
-  in_project: boolean;
-  number_of_files: number;
-  standard?: string;
-  standards?: string[];
-  token_data?: TokenData;
+  id: string
+  contract_id: string
+  balance: string
+  network_id: string
+  public: boolean
+  export: boolean
+  verified_by: string
+  verification_date: null
+  address: string
+  contract_name: string
+  ens_domain: null
+  type: string
+  evm_version: string
+  compiler_version: string
+  optimizations_used: boolean
+  optimization_runs: number
+  libraries: null
+  data: Data
+  creation_block: number
+  creation_tx: string
+  creator_address: string
+  created_at: Date
+  number_of_watches: null
+  language: string
+  in_project: boolean
+  number_of_files: number
+  standard?: string
+  standards?: string[]
+  token_data?: TokenData
 }
 
 interface Data {
-  main_contract: number;
-  contract_info: ContractInfo[];
-  abi: ABI[];
-  raw_abi: null;
+  main_contract: number
+  contract_info: ContractInfo[]
+  abi: ABI[]
+  raw_abi: null
 }
 
 interface ABI {
-  type: ABIType;
-  name: string;
-  constant: boolean;
-  anonymous: boolean;
-  inputs: SoltypeElement[];
-  outputs: Output[] | null;
+  type: ABIType
+  name: string
+  constant: boolean
+  anonymous: boolean
+  inputs: SoltypeElement[]
+  outputs: Output[] | null
 }
 
 interface SoltypeElement {
-  name: string;
-  type: SoltypeType;
-  storage_location: StorageLocation;
-  components: SoltypeElement[] | null;
-  offset: number;
-  index: string;
-  indexed: boolean;
-  simple_type?: Type;
+  name: string
+  type: SoltypeType
+  storage_location: StorageLocation
+  components: SoltypeElement[] | null
+  offset: number
+  index: string
+  indexed: boolean
+  simple_type?: Type
 }
 
 interface Type {
-  type: SimpleTypeType;
+  type: SimpleTypeType
 }
 
 enum SimpleTypeType {
@@ -156,19 +156,19 @@ enum SoltypeType {
 }
 
 interface Output {
-  name: string;
-  type: SoltypeType;
-  storage_location: StorageLocation;
-  components: SoltypeElement[] | null;
-  offset: number;
-  index: string;
-  indexed: boolean;
-  simple_type?: SimpleType;
+  name: string
+  type: SoltypeType
+  storage_location: StorageLocation
+  components: SoltypeElement[] | null
+  offset: number
+  index: string
+  indexed: boolean
+  simple_type?: SimpleType
 }
 
 interface SimpleType {
-  type: SimpleTypeType;
-  nested_type?: Type;
+  type: SimpleTypeType
+  nested_type?: Type
 }
 
 enum ABIType {
@@ -178,380 +178,380 @@ enum ABIType {
 }
 
 interface ContractInfo {
-  id: number;
-  path: string;
-  name: string;
-  source: string;
+  id: number
+  path: string
+  name: string
+  source: string
 }
 
 interface TokenData {
-  symbol: string;
-  name: string;
-  decimals: number;
+  symbol: string
+  name: string
+  decimals: number
 }
 
 interface GeneratedAccessList {
-  address: string;
-  storage_keys: string[];
+  address: string
+  storage_keys: string[]
 }
 
 interface Simulation {
-  id: string;
-  project_id: string;
-  owner_id: string;
-  network_id: string;
-  block_number: number;
-  transaction_index: number;
-  from: string;
-  to: string;
-  input: string;
-  gas: number;
-  gas_price: string;
-  value: string;
-  method: string;
-  status: boolean;
-  access_list: null;
-  queue_origin: string;
-  created_at: Date;
+  id: string
+  project_id: string
+  owner_id: string
+  network_id: string
+  block_number: number
+  transaction_index: number
+  from: string
+  to: string
+  input: string
+  gas: number
+  gas_price: string
+  value: string
+  method: string
+  status: boolean
+  access_list: null
+  queue_origin: string
+  created_at: Date
 }
 
 interface ErrorInfo {
-  error_message: string;
-  address: string;
+  error_message: string
+  address: string
 }
 
 interface Transaction {
-  hash: string;
-  block_hash: string;
-  block_number: number;
-  from: string;
-  gas: number;
-  gas_price: number;
-  gas_fee_cap: number;
-  gas_tip_cap: number;
-  cumulative_gas_used: number;
-  gas_used: number;
-  effective_gas_price: number;
-  input: string;
-  nonce: number;
-  to: string;
-  index: number;
-  error_message?: string;
-  error_info?: ErrorInfo;
-  value: string;
-  access_list: null;
-  status: boolean;
-  addresses: string[];
-  contract_ids: string[];
-  network_id: string;
-  function_selector: string;
-  transaction_info: TransactionInfo;
-  timestamp: Date;
-  method: string;
-  decoded_input: null;
+  hash: string
+  block_hash: string
+  block_number: number
+  from: string
+  gas: number
+  gas_price: number
+  gas_fee_cap: number
+  gas_tip_cap: number
+  cumulative_gas_used: number
+  gas_used: number
+  effective_gas_price: number
+  input: string
+  nonce: number
+  to: string
+  index: number
+  error_message?: string
+  error_info?: ErrorInfo
+  value: string
+  access_list: null
+  status: boolean
+  addresses: string[]
+  contract_ids: string[]
+  network_id: string
+  function_selector: string
+  transaction_info: TransactionInfo
+  timestamp: Date
+  method: string
+  decoded_input: null
 }
 
 interface TransactionInfo {
-  contract_id: string;
-  block_number: number;
-  transaction_id: string;
-  contract_address: string;
-  method: string;
-  parameters: null;
-  intrinsic_gas: number;
-  refund_gas: number;
-  call_trace: CallTrace;
-  stack_trace: null | StackTrace[];
-  logs: Log[] | null;
-  state_diff: StateDiff[];
-  raw_state_diff: null;
-  console_logs: null;
-  created_at: Date;
+  contract_id: string
+  block_number: number
+  transaction_id: string
+  contract_address: string
+  method: string
+  parameters: null
+  intrinsic_gas: number
+  refund_gas: number
+  call_trace: CallTrace
+  stack_trace: null | StackTrace[]
+  logs: Log[] | null
+  state_diff: StateDiff[]
+  raw_state_diff: null
+  console_logs: null
+  created_at: Date
 }
 
 interface StackTrace {
-  file_index: number;
-  contract: string;
-  name: string;
-  line: number;
-  error: string;
-  error_reason: string;
-  code: string;
-  op: string;
-  length: number;
+  file_index: number
+  contract: string
+  name: string
+  line: number
+  error: string
+  error_reason: string
+  code: string
+  op: string
+  length: number
 }
 
 interface CallTrace {
-  hash: string;
-  contract_name: string;
-  function_name: string;
-  function_pc: number;
-  function_op: string;
-  function_file_index: number;
-  function_code_start: number;
-  function_line_number: number;
-  function_code_length: number;
-  function_states: CallTraceFunctionState[];
-  caller_pc: number;
-  caller_op: string;
-  call_type: string;
-  from: string;
-  from_balance: string;
-  to: string;
-  to_balance: string;
-  value: string;
-  caller: Caller;
-  block_timestamp: Date;
-  gas: number;
-  gas_used: number;
-  intrinsic_gas: number;
-  input: string;
-  decoded_input: Input[];
-  state_diff: StateDiff[];
-  logs: Log[];
-  output: string;
-  decoded_output: FunctionVariableElement[];
-  network_id: string;
-  calls: CallTraceCall[];
+  hash: string
+  contract_name: string
+  function_name: string
+  function_pc: number
+  function_op: string
+  function_file_index: number
+  function_code_start: number
+  function_line_number: number
+  function_code_length: number
+  function_states: CallTraceFunctionState[]
+  caller_pc: number
+  caller_op: string
+  call_type: string
+  from: string
+  from_balance: string
+  to: string
+  to_balance: string
+  value: string
+  caller: Caller
+  block_timestamp: Date
+  gas: number
+  gas_used: number
+  intrinsic_gas: number
+  input: string
+  decoded_input: Input[]
+  state_diff: StateDiff[]
+  logs: Log[]
+  output: string
+  decoded_output: FunctionVariableElement[]
+  network_id: string
+  calls: CallTraceCall[]
 }
 
 interface Caller {
-  address: string;
-  balance: string;
+  address: string
+  balance: string
 }
 
 interface CallTraceCall {
-  hash: string;
-  contract_name: string;
-  function_name: string;
-  function_pc: number;
-  function_op: string;
-  function_file_index: number;
-  function_code_start: number;
-  function_line_number: number;
-  function_code_length: number;
-  function_states: CallTraceFunctionState[];
-  function_variables: FunctionVariableElement[];
-  caller_pc: number;
-  caller_op: string;
-  caller_file_index: number;
-  caller_line_number: number;
-  caller_code_start: number;
-  caller_code_length: number;
-  call_type: string;
-  from: string;
-  from_balance: null;
-  to: string;
-  to_balance: null;
-  value: null;
-  caller: Caller;
-  block_timestamp: Date;
-  gas: number;
-  gas_used: number;
-  input: string;
-  decoded_input: Input[];
-  output: string;
-  decoded_output: FunctionVariableElement[];
-  network_id: string;
-  calls: PurpleCall[];
+  hash: string
+  contract_name: string
+  function_name: string
+  function_pc: number
+  function_op: string
+  function_file_index: number
+  function_code_start: number
+  function_line_number: number
+  function_code_length: number
+  function_states: CallTraceFunctionState[]
+  function_variables: FunctionVariableElement[]
+  caller_pc: number
+  caller_op: string
+  caller_file_index: number
+  caller_line_number: number
+  caller_code_start: number
+  caller_code_length: number
+  call_type: string
+  from: string
+  from_balance: null
+  to: string
+  to_balance: null
+  value: null
+  caller: Caller
+  block_timestamp: Date
+  gas: number
+  gas_used: number
+  input: string
+  decoded_input: Input[]
+  output: string
+  decoded_output: FunctionVariableElement[]
+  network_id: string
+  calls: PurpleCall[]
 }
 
 interface PurpleCall {
-  hash: string;
-  contract_name: string;
-  function_name: string;
-  function_pc: number;
-  function_op: string;
-  function_file_index: number;
-  function_code_start: number;
-  function_line_number: number;
-  function_code_length: number;
-  function_states?: FluffyFunctionState[];
-  function_variables?: FunctionVariable[];
-  caller_pc: number;
-  caller_op: string;
-  caller_file_index: number;
-  caller_line_number: number;
-  caller_code_start: number;
-  caller_code_length: number;
-  call_type: string;
-  from: string;
-  from_balance: null | string;
-  to: string;
-  to_balance: null | string;
-  value: null | string;
-  caller: Caller;
-  block_timestamp: Date;
-  gas: number;
-  gas_used: number;
-  refund_gas?: number;
-  input: string;
-  decoded_input: Input[];
-  output: string;
-  decoded_output: FunctionVariable[] | null;
-  network_id: string;
-  calls: FluffyCall[] | null;
+  hash: string
+  contract_name: string
+  function_name: string
+  function_pc: number
+  function_op: string
+  function_file_index: number
+  function_code_start: number
+  function_line_number: number
+  function_code_length: number
+  function_states?: FluffyFunctionState[]
+  function_variables?: FunctionVariable[]
+  caller_pc: number
+  caller_op: string
+  caller_file_index: number
+  caller_line_number: number
+  caller_code_start: number
+  caller_code_length: number
+  call_type: string
+  from: string
+  from_balance: null | string
+  to: string
+  to_balance: null | string
+  value: null | string
+  caller: Caller
+  block_timestamp: Date
+  gas: number
+  gas_used: number
+  refund_gas?: number
+  input: string
+  decoded_input: Input[]
+  output: string
+  decoded_output: FunctionVariable[] | null
+  network_id: string
+  calls: FluffyCall[] | null
 }
 
 interface FluffyCall {
-  hash: string;
-  contract_name: string;
-  function_name?: string;
-  function_pc: number;
-  function_op: string;
-  function_file_index?: number;
-  function_code_start?: number;
-  function_line_number?: number;
-  function_code_length?: number;
-  function_states?: FluffyFunctionState[];
-  function_variables?: FunctionVariable[];
-  caller_pc: number;
-  caller_op: string;
-  caller_file_index: number;
-  caller_line_number: number;
-  caller_code_start: number;
-  caller_code_length: number;
-  call_type: string;
-  from: string;
-  from_balance: null | string;
-  to: string;
-  to_balance: null | string;
-  value: null | string;
-  caller?: Caller;
-  block_timestamp: Date;
-  gas: number;
-  gas_used: number;
-  input: string;
-  decoded_input?: FunctionVariable[];
-  output: string;
-  decoded_output: PurpleDecodedOutput[] | null;
-  network_id: string;
-  calls: TentacledCall[] | null;
-  refund_gas?: number;
+  hash: string
+  contract_name: string
+  function_name?: string
+  function_pc: number
+  function_op: string
+  function_file_index?: number
+  function_code_start?: number
+  function_line_number?: number
+  function_code_length?: number
+  function_states?: FluffyFunctionState[]
+  function_variables?: FunctionVariable[]
+  caller_pc: number
+  caller_op: string
+  caller_file_index: number
+  caller_line_number: number
+  caller_code_start: number
+  caller_code_length: number
+  call_type: string
+  from: string
+  from_balance: null | string
+  to: string
+  to_balance: null | string
+  value: null | string
+  caller?: Caller
+  block_timestamp: Date
+  gas: number
+  gas_used: number
+  input: string
+  decoded_input?: FunctionVariable[]
+  output: string
+  decoded_output: PurpleDecodedOutput[] | null
+  network_id: string
+  calls: TentacledCall[] | null
+  refund_gas?: number
 }
 
 interface TentacledCall {
-  hash: string;
-  contract_name: string;
-  function_name: string;
-  function_pc: number;
-  function_op: string;
-  function_file_index: number;
-  function_code_start: number;
-  function_line_number: number;
-  function_code_length: number;
-  function_states: PurpleFunctionState[];
-  caller_pc: number;
-  caller_op: string;
-  caller_file_index: number;
-  caller_line_number: number;
-  caller_code_start: number;
-  caller_code_length: number;
-  call_type: string;
-  from: string;
-  from_balance: null;
-  to: string;
-  to_balance: null;
-  value: null;
-  caller: Caller;
-  block_timestamp: Date;
-  gas: number;
-  gas_used: number;
-  input: string;
-  decoded_input: FunctionVariableElement[];
-  output: string;
-  decoded_output: FunctionVariable[];
-  network_id: string;
-  calls: null;
+  hash: string
+  contract_name: string
+  function_name: string
+  function_pc: number
+  function_op: string
+  function_file_index: number
+  function_code_start: number
+  function_line_number: number
+  function_code_length: number
+  function_states: PurpleFunctionState[]
+  caller_pc: number
+  caller_op: string
+  caller_file_index: number
+  caller_line_number: number
+  caller_code_start: number
+  caller_code_length: number
+  call_type: string
+  from: string
+  from_balance: null
+  to: string
+  to_balance: null
+  value: null
+  caller: Caller
+  block_timestamp: Date
+  gas: number
+  gas_used: number
+  input: string
+  decoded_input: FunctionVariableElement[]
+  output: string
+  decoded_output: FunctionVariable[]
+  network_id: string
+  calls: null
 }
 
 interface FunctionVariableElement {
-  soltype: SoltypeElement;
-  value: string;
+  soltype: SoltypeElement
+  value: string
 }
 
 interface FunctionVariable {
-  soltype: SoltypeElement;
-  value: PurpleValue | string;
+  soltype: SoltypeElement
+  value: PurpleValue | string
 }
 
 interface PurpleValue {
-  ballot: string;
-  basedOn: string;
-  configured: string;
-  currency: string;
-  cycleLimit: string;
-  discountRate: string;
-  duration: string;
-  fee: string;
-  id: string;
-  metadata: string;
-  number: string;
-  projectId: string;
-  start: string;
-  tapped: string;
-  target: string;
-  weight: string;
+  ballot: string
+  basedOn: string
+  configured: string
+  currency: string
+  cycleLimit: string
+  discountRate: string
+  duration: string
+  fee: string
+  id: string
+  metadata: string
+  number: string
+  projectId: string
+  start: string
+  tapped: string
+  target: string
+  weight: string
 }
 
 interface PurpleFunctionState {
-  soltype: SoltypeElement;
-  value: Record<string, string>;
+  soltype: SoltypeElement
+  value: Record<string, string>
 }
 
 interface PurpleDecodedOutput {
-  soltype: SoltypeElement;
-  value: boolean | PurpleValue | string;
+  soltype: SoltypeElement
+  value: boolean | PurpleValue | string
 }
 
 interface FluffyFunctionState {
-  soltype: PurpleSoltype;
-  value: Record<string, string>;
+  soltype: PurpleSoltype
+  value: Record<string, string>
 }
 
 interface PurpleSoltype {
-  name: string;
-  type: SoltypeType;
-  storage_location: StorageLocation;
-  components: null;
-  offset: number;
-  index: string;
-  indexed: boolean;
+  name: string
+  type: SoltypeType
+  storage_location: StorageLocation
+  components: null
+  offset: number
+  index: string
+  indexed: boolean
 }
 
 interface Input {
-  soltype: SoltypeElement | null;
-  value: boolean | string;
+  soltype: SoltypeElement | null
+  value: boolean | string
 }
 
 interface CallTraceFunctionState {
-  soltype: PurpleSoltype;
-  value: Record<string, string>;
+  soltype: PurpleSoltype
+  value: Record<string, string>
 }
 
 interface Log {
-  name: string | null;
-  anonymous: boolean;
-  inputs: Input[];
-  raw: LogRaw;
+  name: string | null
+  anonymous: boolean
+  inputs: Input[]
+  raw: LogRaw
 }
 
 interface LogRaw {
-  address: string;
-  topics: string[];
-  data: string;
+  address: string
+  topics: string[]
+  data: string
 }
 
 interface StateDiff {
-  soltype: SoltypeElement | null;
-  original: string | Record<string, any>;
-  dirty: string | Record<string, any>;
-  raw: RawElement[];
+  soltype: SoltypeElement | null
+  original: string | Record<string, any>
+  dirty: string | Record<string, any>
+  raw: RawElement[]
 }
 
 interface RawElement {
-  address: string;
-  key: string;
-  original: string;
-  dirty: string;
+  address: string
+  key: string
+  original: string
+  dirty: string
 }
diff --git a/apps/tx-builder/src/lib/storage.ts b/apps/tx-builder/src/lib/storage.ts
index b78e02968..ed1b6f185 100644
--- a/apps/tx-builder/src/lib/storage.ts
+++ b/apps/tx-builder/src/lib/storage.ts
@@ -1,99 +1,101 @@
-import localforage from 'localforage';
-import { BatchFile } from '../typings/models';
-import { stringifyReplacer } from './checksum';
+import localforage from 'localforage'
+import { BatchFile } from '../typings/models'
+import { stringifyReplacer } from './checksum'
 
 localforage.config({
   name: 'tx-builder',
   version: 1.0,
   storeName: 'batch_transactions',
   description: 'List of stored transactions in the Transaction Builder',
-});
+})
 
 const saveBatch = async (batchFile: BatchFile): Promise<{ id: string; batchFile: BatchFile }> => {
-  const id = uuidv4();
+  const id = uuidv4()
   try {
-    await localforage.setItem(id, batchFile);
+    await localforage.setItem(id, batchFile)
   } catch (error) {
-    console.error(error);
+    console.error(error)
   }
 
   return {
     id,
     batchFile,
-  };
-};
+  }
+}
 
 const removeBatch = async (batchId: string): Promise<void> => {
   try {
-    await localforage.removeItem(batchId);
+    await localforage.removeItem(batchId)
   } catch (error) {
-    console.error(error);
+    console.error(error)
   }
-};
+}
 
 const updateBatch = async (batchId: string, batchFile: BatchFile): Promise<void> => {
   try {
-    await localforage.setItem(batchId, batchFile);
+    await localforage.setItem(batchId, batchFile)
   } catch (error) {
-    console.error(error);
+    console.error(error)
   }
-};
+}
 
 const getBatch = async (batchId: string): Promise<BatchFile | null> => {
   try {
-    return await localforage.getItem(batchId);
+    return await localforage.getItem(batchId)
   } catch (error) {
-    console.error(error);
+    console.error(error)
   }
 
-  return null;
-};
+  return null
+}
 
 const getBatches = async () => {
-  const batches: Record<string, BatchFile> = {};
+  const batches: Record<string, BatchFile> = {}
   try {
     await localforage.iterate((batch: BatchFile, key: string) => {
-      batches[key] = batch;
-    });
+      batches[key] = batch
+    })
   } catch (error) {
-    console.error(error);
+    console.error(error)
   }
-  return batches;
-};
+  return batches
+}
 
 const downloadObjectAsJson = (batchFile: BatchFile) => {
-  const dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(batchFile, stringifyReplacer));
-  const downloadAnchorNode = document.createElement('a');
+  const dataStr =
+    'data:text/json;charset=utf-8,' +
+    encodeURIComponent(JSON.stringify(batchFile, stringifyReplacer))
+  const downloadAnchorNode = document.createElement('a')
 
-  downloadAnchorNode.setAttribute('href', dataStr);
-  downloadAnchorNode.setAttribute('download', batchFile.meta.name + '.json');
-  document.body.appendChild(downloadAnchorNode); // required for firefox
-  downloadAnchorNode.click();
-  downloadAnchorNode.remove();
-};
+  downloadAnchorNode.setAttribute('href', dataStr)
+  downloadAnchorNode.setAttribute('download', batchFile.meta.name + '.json')
+  document.body.appendChild(downloadAnchorNode) // required for firefox
+  downloadAnchorNode.click()
+  downloadAnchorNode.remove()
+}
 
 const downloadBatch = async (batchFile: BatchFile) => {
-  downloadObjectAsJson(batchFile);
-};
+  downloadObjectAsJson(batchFile)
+}
 
 const importBatch = async (file: File): Promise<BatchFile> => {
-  return new Promise((resolve) => {
-    const reader = new FileReader();
-    reader.readAsText(file);
+  return new Promise(resolve => {
+    const reader = new FileReader()
+    reader.readAsText(file)
     reader.onload = async () => {
-      const batchFile: BatchFile = JSON.parse(reader.result as string);
-      resolve(batchFile);
-    };
-  });
-};
+      const batchFile: BatchFile = JSON.parse(reader.result as string)
+      resolve(batchFile)
+    }
+  })
+}
 
 const uuidv4 = () => {
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
     var r = (Math.random() * 16) | 0,
-      v = c === 'x' ? r : (r & 0x3) | 0x8;
-    return v.toString(16);
-  });
-};
+      v = c === 'x' ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
+}
 
 const StorageManager = {
   saveBatch,
@@ -103,6 +105,6 @@ const StorageManager = {
   getBatches,
   downloadBatch,
   importBatch,
-};
+}
 
-export default StorageManager;
+export default StorageManager
diff --git a/apps/tx-builder/src/pages/CreateTransactions.tsx b/apps/tx-builder/src/pages/CreateTransactions.tsx
index 17a26c6d1..25a49cad3 100644
--- a/apps/tx-builder/src/pages/CreateTransactions.tsx
+++ b/apps/tx-builder/src/pages/CreateTransactions.tsx
@@ -1,32 +1,41 @@
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import styled from 'styled-components';
-import { Button, Tooltip } from '@gnosis.pm/safe-react-components';
-import Grid from '@material-ui/core/Grid';
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import styled from 'styled-components'
+import { Button, Tooltip } from '@gnosis.pm/safe-react-components'
+import Grid from '@material-ui/core/Grid'
 
-import TransactionsBatchList from '../components/TransactionsBatchList';
-import CreateNewBatchCard from '../components/CreateNewBatchCard';
-import { CREATE_BATCH_PATH, REVIEW_AND_CONFIRM_PATH } from '../routes/routes';
-import QuickTip from '../components/QuickTip';
-import { useNetwork, useTransactionLibrary, useTransactions } from '../store';
-import useModal from '../hooks/useModal/useModal';
-import WrongChainBatchModal from '../components/modals/WrongChainBatchModal';
+import TransactionsBatchList from '../components/TransactionsBatchList'
+import CreateNewBatchCard from '../components/CreateNewBatchCard'
+import { CREATE_BATCH_PATH, REVIEW_AND_CONFIRM_PATH } from '../routes/routes'
+import QuickTip from '../components/QuickTip'
+import { useNetwork, useTransactionLibrary, useTransactions } from '../store'
+import useModal from '../hooks/useModal/useModal'
+import WrongChainBatchModal from '../components/modals/WrongChainBatchModal'
 
 const CreateTransactions = () => {
-  const [fileName, setFileName] = useState('');
+  const [fileName, setFileName] = useState('')
 
-  const { transactions, removeAllTransactions, replaceTransaction, reorderTransactions, removeTransaction } =
-    useTransactions();
-  const { importBatch, downloadBatch, saveBatch } = useTransactionLibrary();
+  const {
+    transactions,
+    removeAllTransactions,
+    replaceTransaction,
+    reorderTransactions,
+    removeTransaction,
+  } = useTransactions()
+  const { importBatch, downloadBatch, saveBatch } = useTransactionLibrary()
 
-  const { chainInfo } = useNetwork();
+  const { chainInfo } = useNetwork()
 
-  const [quickTipOpen, setQuickTipOpen] = useState(true);
-  const [fileChainId, setFileChainId] = useState<string>();
+  const [quickTipOpen, setQuickTipOpen] = useState(true)
+  const [fileChainId, setFileChainId] = useState<string>()
 
-  const navigate = useNavigate();
+  const navigate = useNavigate()
 
-  const { open: showWrongChainModal, openModal: openWrongChainModal, closeModal: closeWrongChainModal } = useModal();
+  const {
+    open: showWrongChainModal,
+    openModal: openWrongChainModal,
+    closeModal: closeWrongChainModal,
+  } = useModal()
 
   return (
     <>
@@ -53,7 +62,11 @@ const CreateTransactions = () => {
               style={{ marginLeft: 35 }}
               variant="contained"
               color="primary"
-              onClick={() => navigate(REVIEW_AND_CONFIRM_PATH, { state: { from: CREATE_BATCH_PATH } })}
+              onClick={() =>
+                navigate(REVIEW_AND_CONFIRM_PATH, {
+                  state: { from: CREATE_BATCH_PATH },
+                })
+              }
             >
               Create Batch
             </Button>
@@ -67,13 +80,13 @@ const CreateTransactions = () => {
           <CreateNewBatchCard
             onFileSelected={async (uploadedFile: File | null) => {
               if (uploadedFile) {
-                setFileName(uploadedFile.name);
-                const batchFile = await importBatch(uploadedFile);
+                setFileName(uploadedFile.name)
+                const batchFile = await importBatch(uploadedFile)
                 // we show a modal if the batch file is from a different chain
-                const isWrongChain = batchFile.chainId !== chainInfo?.chainId;
+                const isWrongChain = batchFile.chainId !== chainInfo?.chainId
                 if (isWrongChain) {
-                  setFileChainId(batchFile.chainId);
-                  openWrongChainModal();
+                  setFileChainId(batchFile.chainId)
+                  openWrongChainModal()
                 }
               }
             }}
@@ -83,36 +96,40 @@ const CreateTransactions = () => {
 
       {/* Uploaded batch network modal */}
       {showWrongChainModal && (
-        <WrongChainBatchModal onClick={closeWrongChainModal} onClose={closeWrongChainModal} fileChainId={fileChainId} />
+        <WrongChainBatchModal
+          onClick={closeWrongChainModal}
+          onClose={closeWrongChainModal}
+          fileChainId={fileChainId}
+        />
       )}
     </>
-  );
-};
+  )
+}
 
-export default CreateTransactions;
+export default CreateTransactions
 
 const TransactionsSectionWrapper = styled(Grid)`
   position: sticky;
   top: 40px;
   align-self: flex-start;
-`;
+`
 
 const QuickTipWrapper = styled.div`
   margin-left: 35px;
   margin-top: 20px;
-`;
+`
 
 const UploadedLabel = styled.span`
   margin-left: 4px;
   color: #b2bbc0;
-`;
+`
 
 const FilenameLabel = styled.div`
   max-width: 150px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-`;
+`
 
 const FileNameTitle = ({ filename }: { filename: string }) => {
   return (
@@ -122,5 +139,5 @@ const FileNameTitle = ({ filename }: { filename: string }) => {
       </Tooltip>{' '}
       <UploadedLabel>uploaded</UploadedLabel>
     </>
-  );
-};
+  )
+}
diff --git a/apps/tx-builder/src/pages/Dashboard.tsx b/apps/tx-builder/src/pages/Dashboard.tsx
index f9c6c7cff..d0392be58 100644
--- a/apps/tx-builder/src/pages/Dashboard.tsx
+++ b/apps/tx-builder/src/pages/Dashboard.tsx
@@ -1,77 +1,77 @@
-import { ReactElement, useState, useEffect } from 'react';
-import { Outlet } from 'react-router-dom';
-import { Text, Title, Divider, AddressInput, Switch } from '@gnosis.pm/safe-react-components';
-import styled from 'styled-components';
-import InputAdornment from '@material-ui/core/InputAdornment';
-import Grid from '@material-ui/core/Grid';
-import CheckCircle from '@material-ui/icons/CheckCircle';
-
-import { isValidAddress } from '../utils';
-import AddNewTransactionForm from '../components/forms/AddNewTransactionForm';
-import JsonField from '../components/forms/fields/JsonField';
-import { ContractInterface } from '../typings/models';
-import { useNetwork } from '../store';
+import { ReactElement, useState, useEffect } from 'react'
+import { Outlet } from 'react-router-dom'
+import { Text, Title, Divider, AddressInput, Switch } from '@gnosis.pm/safe-react-components'
+import styled from 'styled-components'
+import InputAdornment from '@material-ui/core/InputAdornment'
+import Grid from '@material-ui/core/Grid'
+import CheckCircle from '@material-ui/icons/CheckCircle'
+
+import { isValidAddress } from '../utils'
+import AddNewTransactionForm from '../components/forms/AddNewTransactionForm'
+import JsonField from '../components/forms/fields/JsonField'
+import { ContractInterface } from '../typings/models'
+import { useNetwork } from '../store'
 
 const Dashboard = (): ReactElement => {
-  const [address, setAddress] = useState('');
-  const [abi, setAbi] = useState('');
-  const [isABILoading, setIsABILoading] = useState(false);
-  const [contract, setContract] = useState<ContractInterface | null>(null);
-  const [loadContractError, setLoadContractError] = useState('');
-  const [showHexEncodedData, setShowHexEncodedData] = useState<boolean>(false);
+  const [address, setAddress] = useState('')
+  const [abi, setAbi] = useState('')
+  const [isABILoading, setIsABILoading] = useState(false)
+  const [contract, setContract] = useState<ContractInterface | null>(null)
+  const [loadContractError, setLoadContractError] = useState('')
+  const [showHexEncodedData, setShowHexEncodedData] = useState<boolean>(false)
 
-  const { interfaceRepo, networkPrefix, getAddressFromDomain } = useNetwork();
+  const { interfaceRepo, networkPrefix, getAddressFromDomain } = useNetwork()
 
   // Load contract from address or ABI
   useEffect(() => {
     const loadContract = async (address: string) => {
-      setLoadContractError('');
+      setLoadContractError('')
 
       if (!address || !interfaceRepo) {
-        return;
+        return
       }
 
       try {
         if (isValidAddress(address)) {
-          setIsABILoading(true);
-          const abiResponse = await interfaceRepo.loadAbi(address);
+          setIsABILoading(true)
+          const abiResponse = await interfaceRepo.loadAbi(address)
 
           if (abiResponse) {
-            setAbi(JSON.stringify(abiResponse));
+            setAbi(JSON.stringify(abiResponse))
           } else {
-            setAbi('');
+            setAbi('')
           }
         }
       } catch (e) {
-        setAbi('');
-        setLoadContractError('No ABI found for this address');
-        console.error(e);
+        setAbi('')
+        setLoadContractError('No ABI found for this address')
+        console.error(e)
       }
-      setIsABILoading(false);
-    };
+      setIsABILoading(false)
+    }
 
-    loadContract(address);
-  }, [address, interfaceRepo]);
+    loadContract(address)
+  }, [address, interfaceRepo])
 
   useEffect(() => {
     if (!abi || !interfaceRepo) {
-      setContract(null);
-      return;
+      setContract(null)
+      return
     }
 
-    setContract(interfaceRepo.getMethods(abi));
-  }, [abi, interfaceRepo]);
+    setContract(interfaceRepo.getMethods(abi))
+  }, [abi, interfaceRepo])
 
-  const isAddressInputFieldValid = isValidAddress(address) || !address;
+  const isAddressInputFieldValid = isValidAddress(address) || !address
 
-  const contractHasMethods = contract && contract.methods.length > 0 && !isABILoading;
+  const contractHasMethods = contract && contract.methods.length > 0 && !isABILoading
 
-  const isTransferTransaction = isValidAddress(address) && !abi && !isABILoading;
-  const isContractInteractionTransaction = abi && contract && !isABILoading;
+  const isTransferTransaction = isValidAddress(address) && !abi && !isABILoading
+  const isContractInteractionTransaction = abi && contract && !isABILoading
 
-  const showNewTransactionForm = isTransferTransaction || isContractInteractionTransaction;
+  const showNewTransactionForm = isTransferTransaction || isContractInteractionTransaction
 
-  const showNoPublicMethodsWarning = contract && contract.methods.length === 0;
+  const showNoPublicMethodsWarning = contract && contract.methods.length === 0
 
   return (
     <Wrapper>
@@ -83,7 +83,10 @@ const Dashboard = (): ReactElement => {
             </Grid>
             <Grid container item xs={6} alignItems="center" justifyContent="flex-end">
               <Grid item>
-                <Switch checked={showHexEncodedData} onChange={() => setShowHexEncodedData(!showHexEncodedData)} />
+                <Switch
+                  checked={showHexEncodedData}
+                  onChange={() => setShowHexEncodedData(!showHexEncodedData)}
+                />
               </Grid>
               <Grid item>
                 <Text size="lg">Custom data</Text>
@@ -136,7 +139,11 @@ const Dashboard = (): ReactElement => {
           {showNewTransactionForm && (
             <>
               <StyledDivider />
-              <AddNewTransactionForm contract={contract} to={address} showHexEncodedData={showHexEncodedData} />
+              <AddNewTransactionForm
+                contract={contract}
+                to={address}
+                showHexEncodedData={showHexEncodedData}
+              />
             </>
           )}
         </AddNewTransactionFormWrapper>
@@ -144,10 +151,10 @@ const Dashboard = (): ReactElement => {
         <Outlet />
       </Grid>
     </Wrapper>
-  );
-};
+  )
+}
 
-export default Dashboard;
+export default Dashboard
 
 const Wrapper = styled.main`
   && {
@@ -156,12 +163,12 @@ const Wrapper = styled.main`
     max-width: 1024px;
     margin: 0 auto;
   }
-`;
+`
 
 const AddNewTransactionFormWrapper = styled(Grid)`
   border-radius: 8px;
   background-color: white;
-`;
+`
 
 const StyledTitle = styled(Title)`
   font-weight: bold;
@@ -169,22 +176,22 @@ const StyledTitle = styled(Title)`
   margin-bottom: 5px;
   line-height: 22px;
   font-size: 16px;
-`;
+`
 
 const StyledMethodWarning = styled(Text)`
   margin-top: 8px;
-`;
+`
 
 const StyledDivider = styled(Divider)`
   margin: 16px -24px 32px -24px;
-`;
+`
 
 const StyledWarningText = styled(Text)`
   margin-top: -18px;
   margin-bottom: 14px;
-`;
+`
 
 const CheckIconAddressAdornment = styled(CheckCircle)`
   color: #03ae60;
   height: 20px;
-`;
+`
diff --git a/apps/tx-builder/src/pages/EditTransactionLibrary.tsx b/apps/tx-builder/src/pages/EditTransactionLibrary.tsx
index 30a4876fd..f8b9f3d72 100644
--- a/apps/tx-builder/src/pages/EditTransactionLibrary.tsx
+++ b/apps/tx-builder/src/pages/EditTransactionLibrary.tsx
@@ -1,29 +1,34 @@
-import { useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import Grid from '@material-ui/core/Grid';
-import styled from 'styled-components';
-import { Button } from '@gnosis.pm/safe-react-components';
+import { useEffect } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import Grid from '@material-ui/core/Grid'
+import styled from 'styled-components'
+import { Button } from '@gnosis.pm/safe-react-components'
 
-import TransactionsBatchList from '../components/TransactionsBatchList';
-import { CREATE_BATCH_PATH, EDIT_BATCH_PATH, TRANSACTION_LIBRARY_PATH } from '../routes/routes';
+import TransactionsBatchList from '../components/TransactionsBatchList'
+import { CREATE_BATCH_PATH, EDIT_BATCH_PATH, TRANSACTION_LIBRARY_PATH } from '../routes/routes'
 
-import { useTransactionLibrary, useTransactions } from '../store';
-import EditableLabel from '../components/EditableLabel';
+import { useTransactionLibrary, useTransactions } from '../store'
+import EditableLabel from '../components/EditableLabel'
 
 const EditTransactionLibrary = () => {
-  const { transactions, removeAllTransactions, replaceTransaction, reorderTransactions, removeTransaction } =
-    useTransactions();
-  const { batch, downloadBatch, saveBatch, updateBatch, renameBatch } = useTransactionLibrary();
+  const {
+    transactions,
+    removeAllTransactions,
+    replaceTransaction,
+    reorderTransactions,
+    removeTransaction,
+  } = useTransactions()
+  const { batch, downloadBatch, saveBatch, updateBatch, renameBatch } = useTransactionLibrary()
 
-  const { batchId } = useParams();
+  const { batchId } = useParams()
 
-  const navigate = useNavigate();
+  const navigate = useNavigate()
 
   useEffect(() => {
     if (transactions.length === 0) {
-      navigate(CREATE_BATCH_PATH);
+      navigate(CREATE_BATCH_PATH)
     }
-  }, [transactions, navigate]);
+  }, [transactions, navigate])
 
   return (
     <TransactionsSectionWrapper item xs={12} md={6}>
@@ -31,7 +36,10 @@ const EditTransactionLibrary = () => {
         transactions={transactions}
         batchTitle={
           batch && (
-            <EditableLabel key={batch.name} onEdit={(newBatchName) => renameBatch(batch.id, newBatchName)}>
+            <EditableLabel
+              key={batch.name}
+              onEdit={newBatchName => renameBatch(batch.id, newBatchName)}
+            >
               {batch.name}
             </EditableLabel>
           )
@@ -55,22 +63,24 @@ const EditTransactionLibrary = () => {
           variant="contained"
           color="primary"
           onClick={() => {
-            const { name } = batch;
-            updateBatch(batchId, name, transactions);
-            navigate(TRANSACTION_LIBRARY_PATH, { state: { from: EDIT_BATCH_PATH } });
+            const { name } = batch
+            updateBatch(batchId, name, transactions)
+            navigate(TRANSACTION_LIBRARY_PATH, {
+              state: { from: EDIT_BATCH_PATH },
+            })
           }}
         >
           Save Batch
         </Button>
       )}
     </TransactionsSectionWrapper>
-  );
-};
+  )
+}
 
-export default EditTransactionLibrary;
+export default EditTransactionLibrary
 
 const TransactionsSectionWrapper = styled(Grid)`
   position: sticky;
   top: 40px;
   align-self: flex-start;
-`;
+`
diff --git a/apps/tx-builder/src/pages/ReviewAndConfirm.tsx b/apps/tx-builder/src/pages/ReviewAndConfirm.tsx
index 19daf8e83..815f42cad 100644
--- a/apps/tx-builder/src/pages/ReviewAndConfirm.tsx
+++ b/apps/tx-builder/src/pages/ReviewAndConfirm.tsx
@@ -1,28 +1,38 @@
-import { useEffect, useMemo, useState } from 'react';
-import { Button, ButtonLink, Card, FixedIcon, IconText, Link, Title, Loader, Text } from '@gnosis.pm/safe-react-components';
-import styled from 'styled-components';
-import { useNavigate } from 'react-router-dom';
-
-import DeleteBatchModal from '../components/modals/DeleteBatchModal';
-import TransactionsBatchList from '../components/TransactionsBatchList';
-import useModal from '../hooks/useModal/useModal';
-import { HOME_PATH } from '../routes/routes';
-import SuccessBatchCreationModal from '../components/modals/SuccessBatchCreationModal';
-import { useTransactionLibrary, useTransactions } from '../store';
-import { useSimulation } from '../hooks/useSimulation';
-import { FETCH_STATUS } from '../utils';
+import { useEffect, useMemo, useState } from 'react'
+import {
+  Button,
+  ButtonLink,
+  Card,
+  FixedIcon,
+  IconText,
+  Link,
+  Title,
+  Loader,
+  Text,
+} from '@gnosis.pm/safe-react-components'
+import styled from 'styled-components'
+import { useNavigate } from 'react-router-dom'
+
+import DeleteBatchModal from '../components/modals/DeleteBatchModal'
+import TransactionsBatchList from '../components/TransactionsBatchList'
+import useModal from '../hooks/useModal/useModal'
+import { HOME_PATH } from '../routes/routes'
+import SuccessBatchCreationModal from '../components/modals/SuccessBatchCreationModal'
+import { useTransactionLibrary, useTransactions } from '../store'
+import { useSimulation } from '../hooks/useSimulation'
+import { FETCH_STATUS } from '../utils'
 
 const ReviewAndConfirm = () => {
   const {
     open: showSuccessBatchModal,
     openModal: openSuccessBatchModal,
     closeModal: closeSuccessBatchModal,
-  } = useModal();
+  } = useModal()
   const {
     open: showDeleteBatchModal,
     openModal: openDeleteBatchModal,
     closeModal: closeDeleteBatchModal,
-  } = useModal();
+  } = useModal()
   const {
     transactions,
     removeTransaction,
@@ -30,36 +40,37 @@ const ReviewAndConfirm = () => {
     replaceTransaction,
     submitTransactions,
     reorderTransactions,
-  } = useTransactions();
-  const { downloadBatch, saveBatch } = useTransactionLibrary();
-  const rawTransactions = useMemo(() => transactions.map((t) => t.raw), [transactions]);
-  const [showSimulation, setShowSimulation] = useState<boolean>(false);
-  const { simulation, simulateTransaction, simulationRequestStatus, simulationLink } = useSimulation(rawTransactions);
-  const navigate = useNavigate();
+  } = useTransactions()
+  const { downloadBatch, saveBatch } = useTransactionLibrary()
+  const rawTransactions = useMemo(() => transactions.map(t => t.raw), [transactions])
+  const [showSimulation, setShowSimulation] = useState<boolean>(false)
+  const { simulation, simulateTransaction, simulationRequestStatus, simulationLink } =
+    useSimulation(rawTransactions)
+  const navigate = useNavigate()
 
   const clickSimulate = () => {
     simulateTransaction()
     setShowSimulation(true)
-  };
+  }
 
-  const closeSimulation = () => setShowSimulation(false);
+  const closeSimulation = () => setShowSimulation(false)
 
   const createBatch = async () => {
     try {
-      await submitTransactions();
-      openSuccessBatchModal();
+      await submitTransactions()
+      openSuccessBatchModal()
     } catch (e) {
-      console.error('Error sending transactions:', e);
+      console.error('Error sending transactions:', e)
     }
-  };
+  }
 
   useEffect(() => {
-    const hasTransactions = transactions.length > 0;
+    const hasTransactions = transactions.length > 0
 
     if (!hasTransactions) {
-      navigate(HOME_PATH);
+      navigate(HOME_PATH)
     }
-  }, [transactions, navigate]);
+  }, [transactions, navigate])
 
   return (
     <>
@@ -105,57 +116,91 @@ const ReviewAndConfirm = () => {
           </Button>
 
           {/* Simulate batch button */}
-          <Button size="md" type="button" variant="contained" color="secondary" onClick={clickSimulate}>
+          <Button
+            size="md"
+            type="button"
+            variant="contained"
+            color="secondary"
+            onClick={clickSimulate}
+          >
             Simulate
           </Button>
         </ButtonsWrapper>
 
         {/* Simulation statuses */}
         {showSimulation && (
-        <SimulationContainer>
-          <StyledButton iconType="cross" iconSize="sm" color="inputFilled" onClick={closeSimulation}>
-          </StyledButton>
-          {simulationRequestStatus === FETCH_STATUS.LOADING && (
-            <>
-              <Loader size="xs" />
-              <Text color="inputFilled" size="lg">Running simulation...</Text>
-            </>
-          )}
-
-          {simulationRequestStatus === FETCH_STATUS.SUCCESS && (
-            <>
-              {!simulation.simulation.status && (
-                <>
-                  <IconText iconSize="md" iconType="alert" iconColor="error" text="Failed" textSize="lg" color="error" />
-                  <Text color="inputFilled" size="lg">
-                    The batch failed during the simulation throwing error <b>{simulation.transaction.error_message}</b>{' '}
-                    in the contract at <b>{simulation.transaction.error_info?.address}</b>. Full simulation report is available{' '}
-                    <Link href={simulationLink} target="_blank" rel="noreferrer" size="lg">
-                      <b>on Tenderly</b>
-                    </Link>.
-                  </Text>
-                </>
-              )}
-              {simulation.simulation.status && (
-                <>
-                  <IconText iconSize="md" iconType="check" iconColor="primary" text="Success" textSize="lg" color="primary" />
-                  <Text color="inputFilled" size="lg">
-                    The batch was successfully simulated. Full simulation report is available{' '}
-                    <Link href={simulationLink} target="_blank" rel="noreferrer" size="lg">
-                      <b>on Tenderly</b>
-                    </Link>.
-                  </Text>
-                </>
-              )}
-            </>
-          )}
-        </SimulationContainer>
+          <SimulationContainer>
+            <StyledButton
+              iconType="cross"
+              iconSize="sm"
+              color="inputFilled"
+              onClick={closeSimulation}
+            ></StyledButton>
+            {simulationRequestStatus === FETCH_STATUS.LOADING && (
+              <>
+                <Loader size="xs" />
+                <Text color="inputFilled" size="lg">
+                  Running simulation...
+                </Text>
+              </>
+            )}
+
+            {simulationRequestStatus === FETCH_STATUS.SUCCESS && (
+              <>
+                {!simulation.simulation.status && (
+                  <>
+                    <IconText
+                      iconSize="md"
+                      iconType="alert"
+                      iconColor="error"
+                      text="Failed"
+                      textSize="lg"
+                      color="error"
+                    />
+                    <Text color="inputFilled" size="lg">
+                      The batch failed during the simulation throwing error{' '}
+                      <b>{simulation.transaction.error_message}</b> in the contract at{' '}
+                      <b>{simulation.transaction.error_info?.address}</b>. Full simulation report is
+                      available{' '}
+                      <Link href={simulationLink} target="_blank" rel="noreferrer" size="lg">
+                        <b>on Tenderly</b>
+                      </Link>
+                      .
+                    </Text>
+                  </>
+                )}
+                {simulation.simulation.status && (
+                  <>
+                    <IconText
+                      iconSize="md"
+                      iconType="check"
+                      iconColor="primary"
+                      text="Success"
+                      textSize="lg"
+                      color="primary"
+                    />
+                    <Text color="inputFilled" size="lg">
+                      The batch was successfully simulated. Full simulation report is available{' '}
+                      <Link href={simulationLink} target="_blank" rel="noreferrer" size="lg">
+                        <b>on Tenderly</b>
+                      </Link>
+                      .
+                    </Text>
+                  </>
+                )}
+              </>
+            )}
+          </SimulationContainer>
         )}
       </Wrapper>
 
       {/* Delete batch modal */}
       {showDeleteBatchModal && (
-        <DeleteBatchModal count={transactions.length} onClick={removeAllTransactions} onClose={closeDeleteBatchModal} />
+        <DeleteBatchModal
+          count={transactions.length}
+          onClick={removeAllTransactions}
+          onClose={closeDeleteBatchModal}
+        />
       )}
 
       {/* Success batch modal */}
@@ -163,20 +208,20 @@ const ReviewAndConfirm = () => {
         <SuccessBatchCreationModal
           count={transactions.length}
           onClick={() => {
-            removeAllTransactions();
-            closeSuccessBatchModal();
+            removeAllTransactions()
+            closeSuccessBatchModal()
           }}
           onClose={() => {
-            removeAllTransactions();
-            closeSuccessBatchModal();
+            removeAllTransactions()
+            closeSuccessBatchModal()
           }}
         />
       )}
     </>
-  );
-};
+  )
+}
 
-export default ReviewAndConfirm;
+export default ReviewAndConfirm
 
 const StyledButton = styled(ButtonLink)`
   position: absolute;
@@ -189,7 +234,7 @@ const StyledButton = styled(ButtonLink)`
     background: ${({ theme }) => theme.colors.separator};
     border-radius: 16px;
   }
-`;
+`
 
 const SimulationContainer = styled(Card)`
   box-shadow: none;
@@ -199,7 +244,7 @@ const SimulationContainer = styled(Card)`
   & > :last-child {
     margin-top: 11px;
   }
-`;
+`
 
 const Wrapper = styled.main`
   && {
@@ -208,14 +253,14 @@ const Wrapper = styled.main`
     max-width: 650px;
     margin: 0 auto;
   }
-`;
+`
 
 const StyledTitle = styled(Title)`
   margin-top: 0px;
   margin-bottom: 5px;
   font-size: 20px;
   line-height: normal;
-`;
+`
 
 const ButtonsWrapper = styled.div`
   display: flex;
@@ -230,8 +275,8 @@ const ButtonsWrapper = styled.div`
     margin-left: auto;
     margin-right: 0;
   }
-`;
+`
 
 const StyledButtonLabel = styled.span`
   margin-left: 8px;
-`;
+`
diff --git a/apps/tx-builder/src/pages/SaveTransactionLibrary.tsx b/apps/tx-builder/src/pages/SaveTransactionLibrary.tsx
index 32df8b592..5808ed672 100644
--- a/apps/tx-builder/src/pages/SaveTransactionLibrary.tsx
+++ b/apps/tx-builder/src/pages/SaveTransactionLibrary.tsx
@@ -1,26 +1,31 @@
-import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import Grid from '@material-ui/core/Grid';
-import styled from 'styled-components';
-import { Button } from '@gnosis.pm/safe-react-components';
+import { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import Grid from '@material-ui/core/Grid'
+import styled from 'styled-components'
+import { Button } from '@gnosis.pm/safe-react-components'
 
-import TransactionsBatchList from '../components/TransactionsBatchList';
-import { useTransactionLibrary, useTransactions } from '../store';
-import { CREATE_BATCH_PATH, REVIEW_AND_CONFIRM_PATH, SAVE_BATCH_PATH } from '../routes/routes';
-import EditableLabel from '../components/EditableLabel';
+import TransactionsBatchList from '../components/TransactionsBatchList'
+import { useTransactionLibrary, useTransactions } from '../store'
+import { CREATE_BATCH_PATH, REVIEW_AND_CONFIRM_PATH, SAVE_BATCH_PATH } from '../routes/routes'
+import EditableLabel from '../components/EditableLabel'
 
 const SaveTransactionLibrary = () => {
-  const { transactions, removeAllTransactions, replaceTransaction, reorderTransactions, removeTransaction } =
-    useTransactions();
-  const { downloadBatch, saveBatch, batch, renameBatch } = useTransactionLibrary();
+  const {
+    transactions,
+    removeAllTransactions,
+    replaceTransaction,
+    reorderTransactions,
+    removeTransaction,
+  } = useTransactions()
+  const { downloadBatch, saveBatch, batch, renameBatch } = useTransactionLibrary()
 
-  const navigate = useNavigate();
+  const navigate = useNavigate()
 
   useEffect(() => {
     if (transactions.length === 0) {
-      navigate(CREATE_BATCH_PATH);
+      navigate(CREATE_BATCH_PATH)
     }
-  }, [transactions, navigate]);
+  }, [transactions, navigate])
 
   return (
     <TransactionsSectionWrapper item xs={12} md={6}>
@@ -28,7 +33,10 @@ const SaveTransactionLibrary = () => {
         transactions={transactions}
         batchTitle={
           batch && (
-            <EditableLabel key={batch.name} onEdit={(newBatchName) => renameBatch(batch.id, newBatchName)}>
+            <EditableLabel
+              key={batch.name}
+              onEdit={newBatchName => renameBatch(batch.id, newBatchName)}
+            >
               {batch.name}
             </EditableLabel>
           )
@@ -50,18 +58,22 @@ const SaveTransactionLibrary = () => {
         style={{ marginLeft: 35 }}
         variant="contained"
         color="primary"
-        onClick={() => navigate(REVIEW_AND_CONFIRM_PATH, { state: { from: SAVE_BATCH_PATH } })}
+        onClick={() =>
+          navigate(REVIEW_AND_CONFIRM_PATH, {
+            state: { from: SAVE_BATCH_PATH },
+          })
+        }
       >
         Create Batch
       </Button>
     </TransactionsSectionWrapper>
-  );
-};
+  )
+}
 
-export default SaveTransactionLibrary;
+export default SaveTransactionLibrary
 
 const TransactionsSectionWrapper = styled(Grid)`
   position: sticky;
   top: 40px;
   align-self: flex-start;
-`;
+`
diff --git a/apps/tx-builder/src/pages/TransactionLibrary.tsx b/apps/tx-builder/src/pages/TransactionLibrary.tsx
index 05488ac35..27e23a750 100644
--- a/apps/tx-builder/src/pages/TransactionLibrary.tsx
+++ b/apps/tx-builder/src/pages/TransactionLibrary.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState } from 'react'
 import {
   AccordionSummary,
   Title,
@@ -11,39 +11,48 @@ import {
   FixedIcon,
   Button,
   Link,
-} from '@gnosis.pm/safe-react-components';
-import IconButton from '@material-ui/core/IconButton';
-import { useHref, useLinkClickHandler, useNavigate } from 'react-router-dom';
-import styled from 'styled-components';
+} from '@gnosis.pm/safe-react-components'
+import IconButton from '@material-ui/core/IconButton'
+import { useHref, useLinkClickHandler, useNavigate } from 'react-router-dom'
+import styled from 'styled-components'
 
-import { ReactComponent as EmptyLibrary } from '../assets/empty-library.svg';
-import DeleteBatchFromLibrary from '../components/modals/DeleteBatchFromLibrary';
-import TransactionsBatchList from '../components/TransactionsBatchList';
-import useModal from '../hooks/useModal/useModal';
-import { getEditBatchUrl, HOME_PATH, REVIEW_AND_CONFIRM_PATH, TRANSACTION_LIBRARY_PATH } from '../routes/routes';
-import { useTransactionLibrary } from '../store';
-import { Batch } from '../typings/models';
-import { Box } from '@material-ui/core';
-import EditableLabel from '../components/EditableLabel';
+import { ReactComponent as EmptyLibrary } from '../assets/empty-library.svg'
+import DeleteBatchFromLibrary from '../components/modals/DeleteBatchFromLibrary'
+import TransactionsBatchList from '../components/TransactionsBatchList'
+import useModal from '../hooks/useModal/useModal'
+import {
+  getEditBatchUrl,
+  HOME_PATH,
+  REVIEW_AND_CONFIRM_PATH,
+  TRANSACTION_LIBRARY_PATH,
+} from '../routes/routes'
+import { useTransactionLibrary } from '../store'
+import { Batch } from '../typings/models'
+import { Box } from '@material-ui/core'
+import EditableLabel from '../components/EditableLabel'
 
 const TransactionLibrary = () => {
-  const { batches, removeBatch, executeBatch, downloadBatch, renameBatch } = useTransactionLibrary();
-  const navigate = useNavigate();
-  const { open: showDeleteBatchModal, openModal: openDeleteBatchModal, closeModal: closeDeleteBatchModal } = useModal();
-  const [batchToRemove, setBatchToRemove] = useState<Batch>();
+  const { batches, removeBatch, executeBatch, downloadBatch, renameBatch } = useTransactionLibrary()
+  const navigate = useNavigate()
+  const {
+    open: showDeleteBatchModal,
+    openModal: openDeleteBatchModal,
+    closeModal: closeDeleteBatchModal,
+  } = useModal()
+  const [batchToRemove, setBatchToRemove] = useState<Batch>()
 
-  const hrefToHome = useHref(HOME_PATH);
-  const internalOnClick = useLinkClickHandler(HOME_PATH);
+  const hrefToHome = useHref(HOME_PATH)
+  const internalOnClick = useLinkClickHandler(HOME_PATH)
   const redirectToHome = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-    internalOnClick(event);
-  };
+    internalOnClick(event)
+  }
 
   return (
     <Wrapper>
       <StyledTitle size="xl">Your transaction library</StyledTitle>
 
       {batches.length > 0 ? (
-        batches.map((batch) => (
+        batches.map(batch => (
           <StyledAccordion key={batch.id} compact TransitionProps={{ unmountOnExit: true }}>
             <StyledAccordionSummary style={{ backgroundColor: 'white' }}>
               {/* transactions count  */}
@@ -55,9 +64,15 @@ const TransactionLibrary = () => {
 
               {/* editable batch name */}
               <StyledBatchTitle>
-                <Tooltip placement="top" title="Edit batch name" backgroundColor="primary" textColor="white" arrow>
+                <Tooltip
+                  placement="top"
+                  title="Edit batch name"
+                  backgroundColor="primary"
+                  textColor="white"
+                  arrow
+                >
                   <div>
-                    <EditableLabel onEdit={(newBatchName) => renameBatch(batch.id, newBatchName)}>
+                    <EditableLabel onEdit={newBatchName => renameBatch(batch.id, newBatchName)}>
                       {batch.name}
                     </EditableLabel>
                   </div>
@@ -67,7 +82,13 @@ const TransactionLibrary = () => {
               {/* batch actions  */}
               <BatchButtonsContainer>
                 {/* execute batch */}
-                <Tooltip placement="top" title="Execute batch" backgroundColor="primary" textColor="white" arrow>
+                <Tooltip
+                  placement="top"
+                  title="Execute batch"
+                  backgroundColor="primary"
+                  textColor="white"
+                  arrow
+                >
                   <div>
                     <ExecuteBatchButton
                       size="md"
@@ -75,10 +96,12 @@ const TransactionLibrary = () => {
                       aria-label="Execute batch"
                       variant="contained"
                       color="primary"
-                      onClick={async (event) => {
-                        event.stopPropagation();
-                        await executeBatch(batch);
-                        navigate(REVIEW_AND_CONFIRM_PATH, { state: { from: TRANSACTION_LIBRARY_PATH } });
+                      onClick={async event => {
+                        event.stopPropagation()
+                        await executeBatch(batch)
+                        navigate(REVIEW_AND_CONFIRM_PATH, {
+                          state: { from: TRANSACTION_LIBRARY_PATH },
+                        })
                       }}
                     >
                       <FixedIcon type={'arrowSentWhite'} />
@@ -87,12 +110,20 @@ const TransactionLibrary = () => {
                 </Tooltip>
 
                 {/* edit batch */}
-                <Tooltip placement="top" title="Edit batch" backgroundColor="primary" textColor="white" arrow>
+                <Tooltip
+                  placement="top"
+                  title="Edit batch"
+                  backgroundColor="primary"
+                  textColor="white"
+                  arrow
+                >
                   <StyledIconButton
-                    onClick={async (event) => {
-                      event.stopPropagation();
-                      await executeBatch(batch);
-                      navigate(getEditBatchUrl(batch.id), { state: { from: TRANSACTION_LIBRARY_PATH } });
+                    onClick={async event => {
+                      event.stopPropagation()
+                      await executeBatch(batch)
+                      navigate(getEditBatchUrl(batch.id), {
+                        state: { from: TRANSACTION_LIBRARY_PATH },
+                      })
                     }}
                   >
                     <Icon size="sm" type="edit" color="primary" aria-label="edit batch" />
@@ -100,11 +131,17 @@ const TransactionLibrary = () => {
                 </Tooltip>
 
                 {/* download batch */}
-                <Tooltip placement="top" title="Download batch" backgroundColor="primary" textColor="white" arrow>
+                <Tooltip
+                  placement="top"
+                  title="Download batch"
+                  backgroundColor="primary"
+                  textColor="white"
+                  arrow
+                >
                   <StyledIconButton
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      downloadBatch(batch.name, batch.transactions);
+                    onClick={event => {
+                      event.stopPropagation()
+                      downloadBatch(batch.name, batch.transactions)
                     }}
                   >
                     <Icon size="sm" type="importImg" color="primary" aria-label="Download" />
@@ -112,13 +149,19 @@ const TransactionLibrary = () => {
                 </Tooltip>
 
                 {/* delete batch */}
-                <Tooltip placement="top" title="Delete Batch" backgroundColor="primary" textColor="white" arrow>
+                <Tooltip
+                  placement="top"
+                  title="Delete Batch"
+                  backgroundColor="primary"
+                  textColor="white"
+                  arrow
+                >
                   <StyledIconButton
                     size="small"
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      setBatchToRemove(batch);
-                      openDeleteBatchModal();
+                    onClick={event => {
+                      event.stopPropagation()
+                      setBatchToRemove(batch)
+                      openDeleteBatchModal()
                     }}
                   >
                     <Icon size="sm" type="delete" color="error" aria-label="Delete Batch" />
@@ -128,7 +171,11 @@ const TransactionLibrary = () => {
             </StyledAccordionSummary>
             <AccordionDetails>
               {/* transactions batch list  */}
-              <TransactionsBatchList transactions={batch.transactions} showTransactionDetails showBatchHeader={false} />
+              <TransactionsBatchList
+                transactions={batch.transactions}
+                showTransactionDetails
+                showBatchHeader={false}
+              />
             </AccordionDetails>
           </StyledAccordion>
         ))
@@ -136,11 +183,18 @@ const TransactionLibrary = () => {
         <Box display="flex" flexDirection={'column'} alignItems={'center'} paddingTop={'128px'}>
           {/* Empty library Screen */}
           <EmptyLibrary />
-          <StyledEmptyLibraryText size="xl">You don't have any saved batches.</StyledEmptyLibraryText>
+          <StyledEmptyLibraryText size="xl">
+            You don't have any saved batches.
+          </StyledEmptyLibraryText>
           <StyledEmptyLibraryTextLink size="xl">
             Safe a batch by{' '}
             <StyledEmptyLibraryLink href={hrefToHome} onClick={redirectToHome} size="xl">
-              <StyledLinkIcon size="sm" type="bookmark" color="primary" aria-label="go to transaction list view" />
+              <StyledLinkIcon
+                size="sm"
+                type="bookmark"
+                color="primary"
+                aria-label="go to transaction list view"
+              />
               in transaction list view.
             </StyledEmptyLibraryLink>
           </StyledEmptyLibraryTextLink>
@@ -150,21 +204,21 @@ const TransactionLibrary = () => {
         <DeleteBatchFromLibrary
           batch={batchToRemove}
           onClick={(batch: Batch) => {
-            closeDeleteBatchModal();
-            removeBatch(batch.id);
-            setBatchToRemove(undefined);
+            closeDeleteBatchModal()
+            removeBatch(batch.id)
+            setBatchToRemove(undefined)
           }}
           onClose={() => {
-            closeDeleteBatchModal();
-            setBatchToRemove(undefined);
+            closeDeleteBatchModal()
+            setBatchToRemove(undefined)
           }}
         />
       )}
     </Wrapper>
-  );
-};
+  )
+}
 
-export default TransactionLibrary;
+export default TransactionLibrary
 
 const Wrapper = styled.main`
   && {
@@ -173,14 +227,14 @@ const Wrapper = styled.main`
     max-width: 650px;
     margin: 0 auto;
   }
-`;
+`
 
 const StyledTitle = styled(Title)`
   margin-top: 0px;
   margin-bottom: 16px;
   font-size: 20px;
   line-height: normal;
-`;
+`
 
 const StyledAccordion = styled(Accordion)`
   &.MuiAccordion-root {
@@ -188,7 +242,7 @@ const StyledAccordion = styled(Accordion)`
     border-radius: 8px;
     margin-bottom: 12px;
   }
-`;
+`
 
 const StyledAccordionSummary = styled(AccordionSummary)`
   height: 64px;
@@ -203,7 +257,7 @@ const StyledAccordionSummary = styled(AccordionSummary)`
       padding: 8px;
     }
   }
-`;
+`
 
 const TransactionCounterDot = styled(Dot)`
   height: 24px;
@@ -211,12 +265,12 @@ const TransactionCounterDot = styled(Dot)`
   min-width: 24px;
   background-color: #566976;
   flex-shrink: 0;
-`;
+`
 
 const StyledBatchTitle = styled.div`
   padding-left: 4px;
   min-width: 10px;
-`;
+`
 
 const BatchButtonsContainer = styled.div`
   flex-grow: 1;
@@ -226,7 +280,7 @@ const BatchButtonsContainer = styled.div`
   display: flex;
   justify-content: flex-end;
   align-items: center;
-`;
+`
 
 const ExecuteBatchButton = styled(Button)`
   &&.MuiButton-root {
@@ -235,7 +289,7 @@ const ExecuteBatchButton = styled(Button)`
     height: 32px !important;
     padding: 0;
   }
-`;
+`
 
 const StyledIconButton = styled(IconButton)`
   &.MuiIconButton-root {
@@ -243,26 +297,26 @@ const StyledIconButton = styled(IconButton)`
     margin-left: 8px;
     background-color: #f6f7f8;
   }
-`;
+`
 
 const StyledEmptyLibraryText = styled(Text)`
   max-width: 320px;
   margin-top: 32px;
   font-size: 20px;
   color: #566976;
-`;
+`
 
 const StyledEmptyLibraryTextLink = styled(Text)`
   margin-top: 8px;
   color: #566976;
   text-decoration: none;
-`;
+`
 
 const StyledLinkIcon = styled(Icon)`
   vertical-align: middle;
   margin-right: 2px;
-`;
+`
 
 const StyledEmptyLibraryLink = styled(Link)`
   text-decoration: none;
-`;
+`
diff --git a/apps/tx-builder/src/routes/routes.ts b/apps/tx-builder/src/routes/routes.ts
index 07b8b5647..1089b6fd7 100644
--- a/apps/tx-builder/src/routes/routes.ts
+++ b/apps/tx-builder/src/routes/routes.ts
@@ -1,14 +1,14 @@
-export const HOME_PATH = '/';
+export const HOME_PATH = '/'
 
-export const CREATE_BATCH_PATH = HOME_PATH;
-export const BATCH_PATH = '/batch';
-export const SAVE_BATCH_PATH = BATCH_PATH;
-export const EDIT_BATCH_PATH = `${BATCH_PATH}/:batchId`;
+export const CREATE_BATCH_PATH = HOME_PATH
+export const BATCH_PATH = '/batch'
+export const SAVE_BATCH_PATH = BATCH_PATH
+export const EDIT_BATCH_PATH = `${BATCH_PATH}/:batchId`
 
-export const REVIEW_AND_CONFIRM_PATH = '/review-and-confirm';
+export const REVIEW_AND_CONFIRM_PATH = '/review-and-confirm'
 
-export const TRANSACTION_LIBRARY_PATH = '/transaction-library';
+export const TRANSACTION_LIBRARY_PATH = '/transaction-library'
 
 export const getEditBatchUrl = (batchId: string | number) => {
-  return `${BATCH_PATH}/${batchId}`;
-};
+  return `${BATCH_PATH}/${batchId}`
+}
diff --git a/apps/tx-builder/src/serviceWorker.ts b/apps/tx-builder/src/serviceWorker.ts
index d5f0275a7..018ffc4f7 100644
--- a/apps/tx-builder/src/serviceWorker.ts
+++ b/apps/tx-builder/src/serviceWorker.ts
@@ -15,50 +15,45 @@ const isLocalhost = Boolean(
     // [::1] is the IPv6 localhost address.
     window.location.hostname === '[::1]' ||
     // 127.0.0.0/8 are considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
-);
+    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/),
+)
 
 type Config = {
-  onSuccess?: (registration: ServiceWorkerRegistration) => void;
-  onUpdate?: (registration: ServiceWorkerRegistration) => void;
-};
+  onSuccess?: (registration: ServiceWorkerRegistration) => void
+  onUpdate?: (registration: ServiceWorkerRegistration) => void
+}
 
 export function register(config?: Config) {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(
-      process.env.PUBLIC_URL,
-      window.location.href
-    );
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href)
     if (publicUrl.origin !== window.location.origin) {
       // Our service worker won't work if PUBLIC_URL is on a different origin
       // from what our page is served on. This might happen if a CDN is used to
       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-      return;
+      return
     }
 
     window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
 
       if (isLocalhost) {
         // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl, config);
+        checkValidServiceWorker(swUrl, config)
 
         // Add some additional logging to localhost, pointing developers to the
         // service worker/PWA documentation.
         navigator.serviceWorker.ready.then(() => {
           console.log(
             'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://bit.ly/CRA-PWA'
-          );
-        });
+              'worker. To learn more, visit https://bit.ly/CRA-PWA',
+          )
+        })
       } else {
         // Is not localhost. Just register service worker
-        registerValidSW(swUrl, config);
+        registerValidSW(swUrl, config)
       }
-    });
+    })
   }
 }
 
@@ -67,9 +62,9 @@ function registerValidSW(swUrl: string, config?: Config) {
     .register(swUrl)
     .then(registration => {
       registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
+        const installingWorker = registration.installing
         if (installingWorker == null) {
-          return;
+          return
         }
         installingWorker.onstatechange = () => {
           if (installingWorker.state === 'installed') {
@@ -79,41 +74,41 @@ function registerValidSW(swUrl: string, config?: Config) {
               // content until all client tabs are closed.
               console.log(
                 'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
-              );
+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.',
+              )
 
               // Execute callback
               if (config && config.onUpdate) {
-                config.onUpdate(registration);
+                config.onUpdate(registration)
               }
             } else {
               // At this point, everything has been precached.
               // It's the perfect time to display a
               // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
+              console.log('Content is cached for offline use.')
 
               // Execute callback
               if (config && config.onSuccess) {
-                config.onSuccess(registration);
+                config.onSuccess(registration)
               }
             }
           }
-        };
-      };
+        }
+      }
     })
     .catch(error => {
-      console.error('Error during service worker registration:', error);
-    });
+      console.error('Error during service worker registration:', error)
+    })
 }
 
 function checkValidServiceWorker(swUrl: string, config?: Config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl, {
-    headers: { 'Service-Worker': 'script' }
+    headers: { 'Service-Worker': 'script' },
   })
     .then(response => {
       // Ensure service worker exists, and that we really are getting a JS file.
-      const contentType = response.headers.get('content-type');
+      const contentType = response.headers.get('content-type')
       if (
         response.status === 404 ||
         (contentType != null && contentType.indexOf('javascript') === -1)
@@ -121,25 +116,23 @@ function checkValidServiceWorker(swUrl: string, config?: Config) {
         // No service worker found. Probably a different app. Reload the page.
         navigator.serviceWorker.ready.then(registration => {
           registration.unregister().then(() => {
-            window.location.reload();
-          });
-        });
+            window.location.reload()
+          })
+        })
       } else {
         // Service worker found. Proceed as normal.
-        registerValidSW(swUrl, config);
+        registerValidSW(swUrl, config)
       }
     })
     .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
-    });
+      console.log('No internet connection found. App is running in offline mode.')
+    })
 }
 
 export function unregister() {
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.ready.then(registration => {
-      registration.unregister();
-    });
+      registration.unregister()
+    })
   }
 }
diff --git a/apps/tx-builder/src/setupTests.ts b/apps/tx-builder/src/setupTests.ts
index 74b1a275a..2eb59b05d 100644
--- a/apps/tx-builder/src/setupTests.ts
+++ b/apps/tx-builder/src/setupTests.ts
@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom/extend-expect'
diff --git a/apps/tx-builder/src/store/index.tsx b/apps/tx-builder/src/store/index.tsx
index 0e83c2efc..7652fe370 100644
--- a/apps/tx-builder/src/store/index.tsx
+++ b/apps/tx-builder/src/store/index.tsx
@@ -1,7 +1,7 @@
-import TransactionsProvider from './transactionsContext';
-import TransactionLibraryProvider from './transactionLibraryContext';
-import React from 'react';
-import NetworkProvider from './networkContext';
+import TransactionsProvider from './transactionsContext'
+import TransactionLibraryProvider from './transactionLibraryContext'
+import React from 'react'
+import NetworkProvider from './networkContext'
 
 const StoreProvider: React.FC = ({ children }) => {
   return (
@@ -10,11 +10,11 @@ const StoreProvider: React.FC = ({ children }) => {
         <TransactionLibraryProvider>{children}</TransactionLibraryProvider>
       </TransactionsProvider>
     </NetworkProvider>
-  );
-};
+  )
+}
 
-export { useTransactions } from './transactionsContext';
-export { useTransactionLibrary } from './transactionLibraryContext';
-export { useNetwork } from './networkContext';
+export { useTransactions } from './transactionsContext'
+export { useTransactionLibrary } from './transactionLibraryContext'
+export { useNetwork } from './networkContext'
 
-export default StoreProvider;
+export default StoreProvider
diff --git a/apps/tx-builder/src/store/networkContext.tsx b/apps/tx-builder/src/store/networkContext.tsx
index 5eeb9745d..09d62fea4 100644
--- a/apps/tx-builder/src/store/networkContext.tsx
+++ b/apps/tx-builder/src/store/networkContext.tsx
@@ -1,67 +1,67 @@
-import { createContext, useContext, useEffect, useState } from 'react';
-import SafeAppsSDK, { ChainInfo, SafeInfo } from '@gnosis.pm/safe-apps-sdk';
-import Web3 from 'web3';
-import InterfaceRepository, { InterfaceRepo } from '../lib/interfaceRepository';
-import { CHAINS, rpcUrlGetterByNetwork } from '../utils';
-import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk';
+import { createContext, useContext, useEffect, useState } from 'react'
+import SafeAppsSDK, { ChainInfo, SafeInfo } from '@gnosis.pm/safe-apps-sdk'
+import Web3 from 'web3'
+import InterfaceRepository, { InterfaceRepo } from '../lib/interfaceRepository'
+import { CHAINS, rpcUrlGetterByNetwork } from '../utils'
+import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk'
 
 type NetworkContextProps = {
-  sdk: SafeAppsSDK;
-  safe: SafeInfo;
-  chainInfo: ChainInfo | undefined;
-  web3: Web3 | undefined;
-  interfaceRepo: InterfaceRepo | undefined;
-  networkPrefix: string | undefined;
-  nativeCurrencySymbol: string | undefined;
-  getAddressFromDomain: (name: string) => Promise<string>;
-};
-
-export const NetworkContext = createContext<NetworkContextProps | null>(null);
+  sdk: SafeAppsSDK
+  safe: SafeInfo
+  chainInfo: ChainInfo | undefined
+  web3: Web3 | undefined
+  interfaceRepo: InterfaceRepo | undefined
+  networkPrefix: string | undefined
+  nativeCurrencySymbol: string | undefined
+  getAddressFromDomain: (name: string) => Promise<string>
+}
+
+export const NetworkContext = createContext<NetworkContextProps | null>(null)
 
 const NetworkProvider: React.FC = ({ children }) => {
-  const { sdk, safe } = useSafeAppsSDK();
-  const [web3, setWeb3] = useState<Web3 | undefined>();
-  const [chainInfo, setChainInfo] = useState<ChainInfo>();
-  const [interfaceRepo, setInterfaceRepo] = useState<InterfaceRepository | undefined>();
+  const { sdk, safe } = useSafeAppsSDK()
+  const [web3, setWeb3] = useState<Web3 | undefined>()
+  const [chainInfo, setChainInfo] = useState<ChainInfo>()
+  const [interfaceRepo, setInterfaceRepo] = useState<InterfaceRepository | undefined>()
 
   useEffect(() => {
     if (!chainInfo) {
-      return;
+      return
     }
 
-    const rpcUrlGetter = rpcUrlGetterByNetwork[chainInfo.chainId as CHAINS];
+    const rpcUrlGetter = rpcUrlGetterByNetwork[chainInfo.chainId as CHAINS]
     if (!rpcUrlGetter) {
-      throw Error(`RPC URL not defined for chain id ${chainInfo.chainId}`);
+      throw Error(`RPC URL not defined for chain id ${chainInfo.chainId}`)
     }
-    const rpcUrl = rpcUrlGetter(process.env.REACT_APP_RPC_TOKEN);
+    const rpcUrl = rpcUrlGetter(process.env.REACT_APP_RPC_TOKEN)
 
-    const web3Instance = new Web3(rpcUrl);
-    const interfaceRepo = new InterfaceRepository(chainInfo);
+    const web3Instance = new Web3(rpcUrl)
+    const interfaceRepo = new InterfaceRepository(chainInfo)
 
-    setWeb3(web3Instance);
-    setInterfaceRepo(interfaceRepo);
-  }, [chainInfo]);
+    setWeb3(web3Instance)
+    setInterfaceRepo(interfaceRepo)
+  }, [chainInfo])
 
   useEffect(() => {
     const getChainInfo = async () => {
       try {
-        const chainInfo = await sdk.safe.getChainInfo();
-        setChainInfo(chainInfo);
+        const chainInfo = await sdk.safe.getChainInfo()
+        setChainInfo(chainInfo)
       } catch (error) {
-        console.error('Unable to get chain info:', error);
+        console.error('Unable to get chain info:', error)
       }
-    };
+    }
 
-    getChainInfo();
-  }, [sdk.safe]);
+    getChainInfo()
+  }, [sdk.safe])
 
-  const networkPrefix = chainInfo?.shortName;
+  const networkPrefix = chainInfo?.shortName
 
-  const nativeCurrencySymbol = chainInfo?.nativeCurrency.symbol;
+  const nativeCurrencySymbol = chainInfo?.nativeCurrency.symbol
 
   const getAddressFromDomain = (name: string): Promise<string> => {
-    return web3?.eth.ens.getAddress(name) || new Promise((resolve) => resolve(name));
-  };
+    return web3?.eth.ens.getAddress(name) || new Promise(resolve => resolve(name))
+  }
 
   return (
     <NetworkContext.Provider
@@ -78,16 +78,16 @@ const NetworkProvider: React.FC = ({ children }) => {
     >
       {children}
     </NetworkContext.Provider>
-  );
-};
+  )
+}
 
 export const useNetwork = () => {
-  const contextValue = useContext(NetworkContext);
+  const contextValue = useContext(NetworkContext)
   if (contextValue === null) {
-    throw new Error('Component must be wrapped with <TransactionProvider>');
+    throw new Error('Component must be wrapped with <TransactionProvider>')
   }
 
-  return contextValue;
-};
+  return contextValue
+}
 
-export default NetworkProvider;
+export default NetworkProvider
diff --git a/apps/tx-builder/src/store/transactionLibraryContext.tsx b/apps/tx-builder/src/store/transactionLibraryContext.tsx
index 00b5658ae..3f5c7f07e 100644
--- a/apps/tx-builder/src/store/transactionLibraryContext.tsx
+++ b/apps/tx-builder/src/store/transactionLibraryContext.tsx
@@ -1,170 +1,197 @@
-import { createContext, useCallback, useContext, useEffect, useState } from 'react';
-import { useTransactions } from './transactionsContext';
-import StorageManager from '../lib/storage';
-import { Batch, BatchFile, BatchTransaction, ProposedTransaction } from '../typings/models';
-import { ChainInfo, SafeInfo } from '@gnosis.pm/safe-apps-sdk';
-import { encodeToHexData } from '../utils';
-import { toChecksumAddress } from 'web3-utils';
-import { addChecksum, validateChecksum } from '../lib/checksum';
-import { useNetwork } from './networkContext';
+import { createContext, useCallback, useContext, useEffect, useState } from 'react'
+import { useTransactions } from './transactionsContext'
+import StorageManager from '../lib/storage'
+import { Batch, BatchFile, BatchTransaction, ProposedTransaction } from '../typings/models'
+import { ChainInfo, SafeInfo } from '@gnosis.pm/safe-apps-sdk'
+import { encodeToHexData } from '../utils'
+import { toChecksumAddress } from 'web3-utils'
+import { addChecksum, validateChecksum } from '../lib/checksum'
+import { useNetwork } from './networkContext'
 
-const packageJson = require('../../package.json');
+const packageJson = require('../../package.json')
 
 type TransactionLibraryContextProps = {
-  batches: Batch[];
-  batch?: Batch;
-  saveBatch: (name: string, transactions: ProposedTransaction[]) => void;
-  removeBatch: (batchId: string | number) => void;
-  renameBatch: (batchId: string | number, newName: string) => void;
-  updateBatch: (batchId: string | number, name: string, transactions: ProposedTransaction[]) => void;
-  downloadBatch: (name: string, transactions: ProposedTransaction[]) => void;
-  executeBatch: (batch: Batch) => void;
-  importBatch: (file: File | null) => Promise<BatchFile>;
-  hasChecksumWarning: boolean;
-  setHasChecksumWarning: (hasChecksumWarning: boolean) => void;
-};
+  batches: Batch[]
+  batch?: Batch
+  saveBatch: (name: string, transactions: ProposedTransaction[]) => void
+  removeBatch: (batchId: string | number) => void
+  renameBatch: (batchId: string | number, newName: string) => void
+  updateBatch: (batchId: string | number, name: string, transactions: ProposedTransaction[]) => void
+  downloadBatch: (name: string, transactions: ProposedTransaction[]) => void
+  executeBatch: (batch: Batch) => void
+  importBatch: (file: File | null) => Promise<BatchFile>
+  hasChecksumWarning: boolean
+  setHasChecksumWarning: (hasChecksumWarning: boolean) => void
+}
 
-export const TransactionLibraryContext = createContext<TransactionLibraryContextProps | null>(null);
+export const TransactionLibraryContext = createContext<TransactionLibraryContextProps | null>(null)
 
 const TransactionLibraryProvider: React.FC = ({ children }) => {
-  const [batches, setBatches] = useState<Batch[]>([]);
-  const [batch, setBatch] = useState<Batch>();
-  const [hasChecksumWarning, setHasChecksumWarning] = useState<boolean>(false);
-  const { resetTransactions } = useTransactions();
-  const { chainInfo, safe } = useNetwork();
+  const [batches, setBatches] = useState<Batch[]>([])
+  const [batch, setBatch] = useState<Batch>()
+  const [hasChecksumWarning, setHasChecksumWarning] = useState<boolean>(false)
+  const { resetTransactions } = useTransactions()
+  const { chainInfo, safe } = useNetwork()
 
   const loadBatches = useCallback(async (): Promise<Batch[]> => {
     if (chainInfo) {
-      const batchesRecords = await StorageManager.getBatches();
+      const batchesRecords = await StorageManager.getBatches()
       const batches: Batch[] = Object.keys(batchesRecords)
-        .filter((key) => batchesRecords[key].chainId === chainInfo.chainId) // batches filtered by chain
+        .filter(key => batchesRecords[key].chainId === chainInfo.chainId) // batches filtered by chain
         .reduce((batches: Batch[], key: string) => {
-          const batchFile = batchesRecords[key];
+          const batchFile = batchesRecords[key]
           const batch = {
             id: key,
             name: batchFile.meta.name,
             transactions: convertToProposedTransactions(batchFile, chainInfo),
-          };
+          }
 
-          return [...batches, batch];
-        }, []);
+          return [...batches, batch]
+        }, [])
 
-      setBatches(batches);
+      setBatches(batches)
 
-      return batches;
+      return batches
     }
-    return [];
-  }, [chainInfo]);
+    return []
+  }, [chainInfo])
 
   // on App init we load stored batches
   useEffect(() => {
-    loadBatches();
-  }, [loadBatches]);
+    loadBatches()
+  }, [loadBatches])
 
   useEffect(() => {
-    let id: ReturnType<typeof setTimeout>;
+    let id: ReturnType<typeof setTimeout>
 
     if (hasChecksumWarning) {
-      id = setTimeout(() => setHasChecksumWarning(false), 5000);
+      id = setTimeout(() => setHasChecksumWarning(false), 5000)
     }
 
-    return () => clearTimeout(id);
-  }, [hasChecksumWarning]);
+    return () => clearTimeout(id)
+  }, [hasChecksumWarning])
 
   const saveBatch = useCallback(
     async (name, transactions) => {
       const { id: batchId } = await StorageManager.saveBatch(
-        addChecksum(generateBatchFile({ name, description: '', transactions, chainInfo, safe })),
-      );
-      const batches = await loadBatches();
-      const batch = batches.find((batch) => batch.id === batchId);
-      setBatch(batch);
+        addChecksum(
+          generateBatchFile({
+            name,
+            description: '',
+            transactions,
+            chainInfo,
+            safe,
+          }),
+        ),
+      )
+      const batches = await loadBatches()
+      const batch = batches.find(batch => batch.id === batchId)
+      setBatch(batch)
     },
     [chainInfo, safe, loadBatches],
-  );
+  )
 
   const updateBatch = useCallback(
     async (batchId: string | number, name: string, transactions: ProposedTransaction[]) => {
-      const batch = await StorageManager.getBatch(String(batchId));
+      const batch = await StorageManager.getBatch(String(batchId))
       if (batch) {
         await StorageManager.updateBatch(
           String(batchId),
-          addChecksum(generateBatchFile({ name, description: '', transactions, chainInfo, safe })),
-        );
+          addChecksum(
+            generateBatchFile({
+              name,
+              description: '',
+              transactions,
+              chainInfo,
+              safe,
+            }),
+          ),
+        )
       }
-      const batches = await loadBatches();
-      setBatch(batches.find((batch) => batch.id === batchId));
+      const batches = await loadBatches()
+      setBatch(batches.find(batch => batch.id === batchId))
     },
     [loadBatches, chainInfo, safe],
-  );
+  )
 
   const removeBatch = useCallback(
     async (batchId: string | number) => {
-      await StorageManager.removeBatch(String(batchId));
-      await loadBatches();
-      setBatch(undefined);
+      await StorageManager.removeBatch(String(batchId))
+      await loadBatches()
+      setBatch(undefined)
     },
     [loadBatches],
-  );
+  )
 
   const renameBatch = useCallback(
     async (batchId: string | number, newName: string) => {
-      const batch = await StorageManager.getBatch(String(batchId));
-      const trimmedName = newName.trim();
+      const batch = await StorageManager.getBatch(String(batchId))
+      const trimmedName = newName.trim()
       if (batch && trimmedName) {
-        batch.meta.name = trimmedName;
-        await StorageManager.updateBatch(String(batchId), batch);
+        batch.meta.name = trimmedName
+        await StorageManager.updateBatch(String(batchId), batch)
       }
-      const batches = await loadBatches();
-      setBatch(batches.find((batch) => batch.id === batchId));
+      const batches = await loadBatches()
+      setBatch(batches.find(batch => batch.id === batchId))
     },
     [loadBatches],
-  );
+  )
 
   const downloadBatch = useCallback(
     async (name, transactions) => {
       await StorageManager.downloadBatch(
-        addChecksum(generateBatchFile({ name, description: '', transactions, chainInfo, safe })),
-      );
+        addChecksum(
+          generateBatchFile({
+            name,
+            description: '',
+            transactions,
+            chainInfo,
+            safe,
+          }),
+        ),
+      )
     },
     [chainInfo, safe],
-  );
+  )
 
   const initializeBatch = useCallback(
     (batchFile: BatchFile) => {
       if (chainInfo) {
         if (validateChecksum(batchFile)) {
-          console.info('[Checksum check] - Checksum validation success', batchFile);
+          console.info('[Checksum check] - Checksum validation success', batchFile)
         } else {
-          setHasChecksumWarning(true);
-          console.error('[Checksum check] - This file was modified since it was generated', batchFile);
+          setHasChecksumWarning(true)
+          console.error(
+            '[Checksum check] - This file was modified since it was generated',
+            batchFile,
+          )
         }
-        resetTransactions(convertToProposedTransactions(batchFile, chainInfo));
+        resetTransactions(convertToProposedTransactions(batchFile, chainInfo))
       }
-      return batchFile;
+      return batchFile
     },
     [chainInfo, resetTransactions],
-  );
+  )
 
   const executeBatch = useCallback(
     async (batch: Batch) => {
-      setBatch(batch);
-      const batchFile = await StorageManager.getBatch(batch.id as string);
+      setBatch(batch)
+      const batchFile = await StorageManager.getBatch(batch.id as string)
 
       if (batchFile) {
-        initializeBatch(batchFile);
+        initializeBatch(batchFile)
       }
     },
     [initializeBatch],
-  );
+  )
 
   const importBatch = useCallback(
-    async (file) => {
-      const batchFile = await initializeBatch(await StorageManager.importBatch(file));
-      return batchFile;
+    async file => {
+      const batchFile = await initializeBatch(await StorageManager.importBatch(file))
+      return batchFile
     },
     [initializeBatch],
-  );
+  )
 
   return (
     <TransactionLibraryContext.Provider
@@ -184,17 +211,17 @@ const TransactionLibraryProvider: React.FC = ({ children }) => {
     >
       {children}
     </TransactionLibraryContext.Provider>
-  );
-};
+  )
+}
 
 export const useTransactionLibrary = () => {
-  const contextValue = useContext(TransactionLibraryContext);
+  const contextValue = useContext(TransactionLibraryContext)
   if (contextValue === null) {
-    throw new Error('Component must be wrapped with <TransactionLibraryProvider>');
+    throw new Error('Component must be wrapped with <TransactionLibraryProvider>')
   }
 
-  return contextValue;
-};
+  return contextValue
+}
 
 const generateBatchFile = ({
   name,
@@ -203,11 +230,11 @@ const generateBatchFile = ({
   chainInfo,
   safe,
 }: {
-  name: string;
-  description: string;
-  transactions: ProposedTransaction[];
-  chainInfo: ChainInfo | undefined;
-  safe: SafeInfo;
+  name: string
+  description: string
+  transactions: ProposedTransaction[]
+  chainInfo: ChainInfo | undefined
+  safe: SafeInfo
 }): BatchFile => {
   return {
     version: '1.0',
@@ -221,8 +248,8 @@ const generateBatchFile = ({
       createdFromOwnerAddress: '',
     },
     transactions: convertToBatchTransactions(transactions),
-  };
-};
+  }
+}
 
 const convertToBatchTransactions = (transactions: ProposedTransaction[]): BatchTransaction[] => {
   return transactions.map(
@@ -233,10 +260,13 @@ const convertToBatchTransactions = (transactions: ProposedTransaction[]): BatchT
       contractMethod: description.contractMethod,
       contractInputsValues: description.contractFieldsValues,
     }),
-  );
-};
+  )
+}
 
-const convertToProposedTransactions = (batchFile: BatchFile, chainInfo: ChainInfo): ProposedTransaction[] => {
+const convertToProposedTransactions = (
+  batchFile: BatchFile,
+  chainInfo: ChainInfo,
+): ProposedTransaction[] => {
   return batchFile.transactions.map((transaction, index) => {
     if (transaction.data) {
       return {
@@ -254,12 +284,14 @@ const convertToProposedTransactions = (batchFile: BatchFile, chainInfo: ChainInf
           value: transaction.value,
           data: transaction.data || '',
         },
-      };
+      }
     }
 
     return {
       id: index,
-      contractInterface: !!transaction.contractMethod ? { methods: [transaction.contractMethod] } : null,
+      contractInterface: !!transaction.contractMethod
+        ? { methods: [transaction.contractMethod] }
+        : null,
       description: {
         to: transaction.to,
         value: transaction.value,
@@ -272,10 +304,13 @@ const convertToProposedTransactions = (batchFile: BatchFile, chainInfo: ChainInf
       raw: {
         to: toChecksumAddress(transaction.to),
         value: transaction.value,
-        data: transaction.data || encodeToHexData(transaction.contractMethod, transaction.contractInputsValues) || '0x',
+        data:
+          transaction.data ||
+          encodeToHexData(transaction.contractMethod, transaction.contractInputsValues) ||
+          '0x',
       },
-    };
-  });
-};
+    }
+  })
+}
 
-export default TransactionLibraryProvider;
+export default TransactionLibraryProvider
diff --git a/apps/tx-builder/src/store/transactionsContext.tsx b/apps/tx-builder/src/store/transactionsContext.tsx
index e0d59684c..4fcae71fd 100644
--- a/apps/tx-builder/src/store/transactionsContext.tsx
+++ b/apps/tx-builder/src/store/transactionsContext.tsx
@@ -1,63 +1,65 @@
-import { createContext, useCallback, useContext, useState } from 'react';
-import { ProposedTransaction } from '../typings/models';
-import { useNetwork } from './networkContext';
+import { createContext, useCallback, useContext, useState } from 'react'
+import { ProposedTransaction } from '../typings/models'
+import { useNetwork } from './networkContext'
 
 type TransactionContextProps = {
-  transactions: ProposedTransaction[];
-  resetTransactions: (transactions: ProposedTransaction[]) => void;
-  addTransaction: (newTransaction: ProposedTransaction) => void;
-  replaceTransaction: (newTransaction: ProposedTransaction, index: number) => void;
-  removeTransaction: (index: number) => void;
-  submitTransactions: () => void;
-  removeAllTransactions: () => void;
-  reorderTransactions: (sourceIndex: number, destinationIndex: number) => void;
-};
+  transactions: ProposedTransaction[]
+  resetTransactions: (transactions: ProposedTransaction[]) => void
+  addTransaction: (newTransaction: ProposedTransaction) => void
+  replaceTransaction: (newTransaction: ProposedTransaction, index: number) => void
+  removeTransaction: (index: number) => void
+  submitTransactions: () => void
+  removeAllTransactions: () => void
+  reorderTransactions: (sourceIndex: number, destinationIndex: number) => void
+}
 
-export const TransactionContext = createContext<TransactionContextProps | null>(null);
+export const TransactionContext = createContext<TransactionContextProps | null>(null)
 
 const TransactionsProvider: React.FC = ({ children }) => {
-  const [transactions, setTransactions] = useState<ProposedTransaction[]>([]);
-  const { sdk } = useNetwork();
+  const [transactions, setTransactions] = useState<ProposedTransaction[]>([])
+  const { sdk } = useNetwork()
 
   const resetTransactions = useCallback((transactions: ProposedTransaction[]) => {
-    setTransactions([...transactions]);
-  }, []);
+    setTransactions([...transactions])
+  }, [])
 
   const addTransaction = useCallback((newTransaction: ProposedTransaction) => {
-    setTransactions((transactions) => [...transactions, newTransaction]);
-  }, []);
+    setTransactions(transactions => [...transactions, newTransaction])
+  }, [])
 
   const replaceTransaction = useCallback((newTransaction: ProposedTransaction, index: number) => {
-    setTransactions((transactions) => {
-      transactions[index] = newTransaction;
-      return [...transactions];
-    });
-  }, []);
+    setTransactions(transactions => {
+      transactions[index] = newTransaction
+      return [...transactions]
+    })
+  }, [])
 
   const removeAllTransactions = useCallback(() => {
-    setTransactions([]);
-  }, []);
+    setTransactions([])
+  }, [])
 
   const removeTransaction = useCallback((index: number) => {
-    setTransactions((transactions) => {
-      const newTxs = transactions.slice();
-      newTxs.splice(index, 1);
-      return newTxs;
-    });
-  }, []);
+    setTransactions(transactions => {
+      const newTxs = transactions.slice()
+      newTxs.splice(index, 1)
+      return newTxs
+    })
+  }, [])
 
   const submitTransactions = useCallback(async () => {
-    await sdk.txs.send({ txs: transactions.map((transaction) => transaction.raw) });
-  }, [sdk.txs, transactions]);
+    await sdk.txs.send({
+      txs: transactions.map(transaction => transaction.raw),
+    })
+  }, [sdk.txs, transactions])
 
   const reorderTransactions = useCallback((sourceIndex, destinationIndex) => {
-    setTransactions((transactions) => {
-      const transactionToMove = transactions[sourceIndex];
-      transactions.splice(sourceIndex, 1); // we remove the transaction from the list
-      transactions.splice(destinationIndex, 0, transactionToMove); // we add the transaction in the new position
-      return transactions;
-    });
-  }, []);
+    setTransactions(transactions => {
+      const transactionToMove = transactions[sourceIndex]
+      transactions.splice(sourceIndex, 1) // we remove the transaction from the list
+      transactions.splice(destinationIndex, 0, transactionToMove) // we add the transaction in the new position
+      return transactions
+    })
+  }, [])
 
   return (
     <TransactionContext.Provider
@@ -74,16 +76,16 @@ const TransactionsProvider: React.FC = ({ children }) => {
     >
       {children}
     </TransactionContext.Provider>
-  );
-};
+  )
+}
 
 export const useTransactions = () => {
-  const contextValue = useContext(TransactionContext);
+  const contextValue = useContext(TransactionContext)
   if (contextValue === null) {
-    throw new Error('Component must be wrapped with <TransactionProvider>');
+    throw new Error('Component must be wrapped with <TransactionProvider>')
   }
 
-  return contextValue;
-};
+  return contextValue
+}
 
-export default TransactionsProvider;
+export default TransactionsProvider
diff --git a/apps/tx-builder/src/typings/custom.d.ts b/apps/tx-builder/src/typings/custom.d.ts
index 006534e23..2e323377f 100644
--- a/apps/tx-builder/src/typings/custom.d.ts
+++ b/apps/tx-builder/src/typings/custom.d.ts
@@ -1,4 +1,4 @@
 declare module '*.svg' {
-  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-  export default content;
+  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>
+  export default content
 }
diff --git a/apps/tx-builder/src/typings/fonts.d.ts b/apps/tx-builder/src/typings/fonts.d.ts
index 7bbf68bbc..85a0dfc7e 100644
--- a/apps/tx-builder/src/typings/fonts.d.ts
+++ b/apps/tx-builder/src/typings/fonts.d.ts
@@ -1,2 +1,2 @@
-declare module '*.woff';
-declare module '*.woff2';
+declare module '*.woff'
+declare module '*.woff2'
diff --git a/apps/tx-builder/src/typings/models.ts b/apps/tx-builder/src/typings/models.ts
index 6be3513d6..6c30a9b5b 100644
--- a/apps/tx-builder/src/typings/models.ts
+++ b/apps/tx-builder/src/typings/models.ts
@@ -1,63 +1,63 @@
 export interface ProposedTransaction {
-  id: number;
-  contractInterface: ContractInterface | null;
+  id: number
+  contractInterface: ContractInterface | null
   description: {
-    to: string;
-    value: string;
-    customTransactionData?: string;
-    contractMethod?: ContractMethod;
-    contractFieldsValues?: Record<string, string>;
-    contractMethodIndex?: string;
-    nativeCurrencySymbol?: string;
-    networkPrefix?: string;
-  };
-  raw: { to: string; value: string; data: string };
+    to: string
+    value: string
+    customTransactionData?: string
+    contractMethod?: ContractMethod
+    contractFieldsValues?: Record<string, string>
+    contractMethodIndex?: string
+    nativeCurrencySymbol?: string
+    networkPrefix?: string
+  }
+  raw: { to: string; value: string; data: string }
 }
 
 export interface ContractInterface {
-  methods: ContractMethod[];
+  methods: ContractMethod[]
 }
 
 export interface Batch {
-  id: number | string;
-  name: string;
-  transactions: ProposedTransaction[];
+  id: number | string
+  name: string
+  transactions: ProposedTransaction[]
 }
 
 export interface BatchFile {
-  version: string;
-  chainId: string;
-  createdAt: number;
-  meta: BatchFileMeta;
-  transactions: BatchTransaction[];
+  version: string
+  chainId: string
+  createdAt: number
+  meta: BatchFileMeta
+  transactions: BatchTransaction[]
 }
 
 export interface BatchFileMeta {
-  txBuilderVersion?: string;
-  checksum?: string;
-  createdFromSafeAddress?: string;
-  createdFromOwnerAddress?: string;
-  name: string;
-  description?: string;
+  txBuilderVersion?: string
+  checksum?: string
+  createdFromSafeAddress?: string
+  createdFromOwnerAddress?: string
+  name: string
+  description?: string
 }
 
 export interface BatchTransaction {
-  to: string;
-  value: string;
-  data?: string;
-  contractMethod?: ContractMethod;
-  contractInputsValues?: { [key: string]: string };
+  to: string
+  value: string
+  data?: string
+  contractMethod?: ContractMethod
+  contractInputsValues?: { [key: string]: string }
 }
 
 export interface ContractMethod {
-  inputs: ContractInput[];
-  name: string;
-  payable: boolean;
+  inputs: ContractInput[]
+  name: string
+  payable: boolean
 }
 
 export interface ContractInput {
-  internalType: string;
-  name: string;
-  type: string;
-  components?: ContractInput[];
+  internalType: string
+  name: string
+  type: string
+  components?: ContractInput[]
 }
diff --git a/apps/tx-builder/src/utils.ts b/apps/tx-builder/src/utils.ts
index 4160b062b..8ba0fc1f7 100644
--- a/apps/tx-builder/src/utils.ts
+++ b/apps/tx-builder/src/utils.ts
@@ -1,6 +1,6 @@
-import { AbiItem, toBN, isAddress, fromWei } from 'web3-utils';
-import abiCoder, { AbiCoder } from 'web3-eth-abi';
-import { ContractInput, ContractMethod, ProposedTransaction } from './typings/models';
+import { AbiItem, toBN, isAddress, fromWei } from 'web3-utils'
+import abiCoder, { AbiCoder } from 'web3-eth-abi'
+import { ContractInput, ContractMethod, ProposedTransaction } from './typings/models'
 
 export const enum FETCH_STATUS {
   NOT_ASKED = 'NOT_ASKED',
@@ -28,12 +28,12 @@ export enum CHAINS {
 }
 
 export const rpcUrlGetterByNetwork: {
-  [key in CHAINS]: null | ((token?: string) => string);
+  [key in CHAINS]: null | ((token?: string) => string)
 } = {
-  [CHAINS.MAINNET]: (token) => `https://mainnet.infura.io/v3/${token}`,
+  [CHAINS.MAINNET]: token => `https://mainnet.infura.io/v3/${token}`,
   [CHAINS.MORDEN]: null,
   [CHAINS.ROPSTEN]: null,
-  [CHAINS.RINKEBY]: (token) => `https://rinkeby.infura.io/v3/${token}`,
+  [CHAINS.RINKEBY]: token => `https://rinkeby.infura.io/v3/${token}`,
   [CHAINS.GOERLI]: null,
   [CHAINS.OPTIMISM]: () => 'https://mainnet.optimism.io',
   [CHAINS.KOVAN]: null,
@@ -45,134 +45,143 @@ export const rpcUrlGetterByNetwork: {
   [CHAINS.AVALANCHE]: () => 'https://api.avax.network/ext/bc/C/rpc',
   [CHAINS.VOLTA]: () => 'https://volta-rpc.energyweb.org',
   [CHAINS.AURORA]: () => 'https://mainnet.aurora.dev',
-};
+}
 
 // Same regex used for web3@1.3.6
-export const paramTypeNumber = new RegExp(/^(u?int)([0-9]*)$/);
+export const paramTypeNumber = new RegExp(/^(u?int)([0-9]*)$/)
 
 // This function is used to apply some parsing to some value types
 export const parseInputValue = (input: any, value: string): any => {
   // If there is a match with this regular expression we get an array value like the following
   // ex: ['uint16', 'uint', '16']. If no match, null is returned
-  const isNumberInput = paramTypeNumber.test(input.type);
-  const isBooleanInput = input.type === 'bool';
+  const isNumberInput = paramTypeNumber.test(input.type)
+  const isBooleanInput = input.type === 'bool'
 
   if (value.charAt(0) === '[') {
-    const parsed = JSON.parse(value.replace(/"/g, '"'));
+    const parsed = JSON.parse(value.replace(/"/g, '"'))
 
     if (input.type === 'bool[]') {
       return parsed.map((value: boolean | string) => {
         if (typeof value == 'string') {
-          return value.toLowerCase() === 'true';
+          return value.toLowerCase() === 'true'
         }
 
-        return value;
-      });
+        return value
+      })
     }
 
-    return parsed;
+    return parsed
   }
 
   if (isBooleanInput) {
-    return value.toLowerCase() === 'true';
+    return value.toLowerCase() === 'true'
   }
 
   if (isNumberInput && value) {
     // From web3 1.2.5 negative string numbers aren't correctly padded with leading 0's.
     // To fix that we pad the numeric values here as the encode function is expecting a string
     // more info here https://github.com/ChainSafe/web3.js/issues/3772
-    const bitWidth = input.type.match(paramTypeNumber)[2];
-    return toBN(value).toString(10, bitWidth);
+    const bitWidth = input.type.match(paramTypeNumber)[2]
+    return toBN(value).toString(10, bitWidth)
   }
 
-  return value;
-};
+  return value
+}
 
 export const isInputValueValid = (val: string) => {
-  const value = Number(val);
-  const isHexValue = val?.startsWith?.('0x');
-  const isNegativeValue = value < 0;
+  const value = Number(val)
+  const isHexValue = val?.startsWith?.('0x')
+  const isNegativeValue = value < 0
 
   if (isNaN(value) || isNegativeValue || isHexValue) {
-    return false;
+    return false
   }
 
-  return true;
-};
+  return true
+}
 
 export const getCustomDataError = (value: string | undefined) => {
-  return `Has to be a valid strict hex data${!value?.startsWith('0x') ? ' (it must start with 0x)' : ''}`;
-};
+  return `Has to be a valid strict hex data${
+    !value?.startsWith('0x') ? ' (it must start with 0x)' : ''
+  }`
+}
 
 export const isValidAddress = (address: string | null) => {
   if (!address) {
-    return false;
+    return false
   }
-  return isAddress(address);
-};
+  return isAddress(address)
+}
 
-const NON_VALID_CONTRACT_METHODS = ['receive', 'fallback'];
+const NON_VALID_CONTRACT_METHODS = ['receive', 'fallback']
 
-export const encodeToHexData = (contractMethod: ContractMethod | undefined, contractFieldsValues: any) => {
-  const contractMethodName = contractMethod?.name;
-  const contractFields = contractMethod?.inputs || [];
+export const encodeToHexData = (
+  contractMethod: ContractMethod | undefined,
+  contractFieldsValues: any,
+) => {
+  const contractMethodName = contractMethod?.name
+  const contractFields = contractMethod?.inputs || []
 
-  const isValidContractMethod = contractMethodName && !NON_VALID_CONTRACT_METHODS.includes(contractMethodName);
+  const isValidContractMethod =
+    contractMethodName && !NON_VALID_CONTRACT_METHODS.includes(contractMethodName)
 
   if (isValidContractMethod) {
     try {
       const parsedValues = contractFields.map((contractField: ContractInput, index) => {
-        const contractFieldName = contractField.name || index;
-        const cleanValue = contractFieldsValues[contractFieldName] || '';
+        const contractFieldName = contractField.name || index
+        const cleanValue = contractFieldsValues[contractFieldName] || ''
 
-        return parseInputValue(contractField, cleanValue);
-      });
-      const abi = abiCoder as unknown; // a bug in the web3-eth-abi types
-      const hexEncondedData = (abi as AbiCoder).encodeFunctionCall(contractMethod as AbiItem, parsedValues);
+        return parseInputValue(contractField, cleanValue)
+      })
+      const abi = abiCoder as unknown // a bug in the web3-eth-abi types
+      const hexEncondedData = (abi as AbiCoder).encodeFunctionCall(
+        contractMethod as AbiItem,
+        parsedValues,
+      )
 
-      return hexEncondedData;
+      return hexEncondedData
     } catch (error) {
-      console.log('Error encoding current form values to hex data: ', error);
+      console.log('Error encoding current form values to hex data: ', error)
     }
   }
-};
+}
 
 export const weiToEther = (wei: string) => {
-  return fromWei(wei, 'ether');
-};
+  return fromWei(wei, 'ether')
+}
 
 export const getTransactionText = (description: ProposedTransaction['description']) => {
-  const { contractMethod, customTransactionData } = description;
+  const { contractMethod, customTransactionData } = description
 
-  const isCustomHexDataTx = !!customTransactionData;
-  const isContractInteractionTx = !!contractMethod;
-  const isTokenTransferTx = !isCustomHexDataTx && !isContractInteractionTx;
+  const isCustomHexDataTx = !!customTransactionData
+  const isContractInteractionTx = !!contractMethod
+  const isTokenTransferTx = !isCustomHexDataTx && !isContractInteractionTx
 
   if (isTokenTransferTx) {
-    return 'Transfer';
+    return 'Transfer'
   }
 
   if (isCustomHexDataTx) {
-    return 'Custom hex data';
+    return 'Custom hex data'
   }
 
   if (isContractInteractionTx) {
-    return contractMethod.name;
+    return contractMethod.name
   }
 
   // empty tx description as a fallback
-  return '';
-};
+  return ''
+}
 
 export const getInputTypeHelper = (input: ContractInput): string => {
   // This code renders a helper for the input text.
   if (input.type.startsWith('tuple') && input.components) {
     return `tuple(${input.components
       .map((i: ContractInput) => {
-        return getInputTypeHelper(i);
+        return getInputTypeHelper(i)
       })
-      .toString()})${input.type.endsWith('[]') ? '[]' : ''}`;
+      .toString()})${input.type.endsWith('[]') ? '[]' : ''}`
   } else {
-    return input.type;
+    return input.type
   }
-};
+}
diff --git a/apps/wallet-connect/config-overrides.js b/apps/wallet-connect/config-overrides.js
index cfe7814f0..f4ec1f4f0 100644
--- a/apps/wallet-connect/config-overrides.js
+++ b/apps/wallet-connect/config-overrides.js
@@ -1,8 +1,8 @@
-const webpack = require('webpack');
+const webpack = require('webpack')
 
 module.exports = {
   webpack: function (config, env) {
-    const fallback = config.resolve.fallback || {};
+    const fallback = config.resolve.fallback || {}
 
     // https://github.com/ChainSafe/web3.js#web3-and-create-react-app
     Object.assign(fallback, {
@@ -15,39 +15,39 @@ module.exports = {
       url: require.resolve('url'),
       // https://stackoverflow.com/questions/68707553/uncaught-referenceerror-buffer-is-not-defined
       buffer: require.resolve('buffer'),
-    });
+    })
 
-    config.resolve.fallback = fallback;
+    config.resolve.fallback = fallback
 
     config.plugins = (config.plugins || []).concat([
       new webpack.ProvidePlugin({
         process: 'process/browser',
         Buffer: ['buffer', 'Buffer'],
       }),
-    ]);
+    ])
 
     // https://github.com/facebook/create-react-app/issues/11924
-    config.ignoreWarnings = [/to parse source map/i];
+    config.ignoreWarnings = [/to parse source map/i]
 
-    return config;
+    return config
   },
   jest: function (config) {
-    return config;
+    return config
   },
   devServer: function (configFunction) {
     return function (proxy, allowedHost) {
-      const config = configFunction(proxy, allowedHost);
+      const config = configFunction(proxy, allowedHost)
 
       config.headers = {
         'Access-Control-Allow-Origin': '*',
         'Access-Control-Allow-Methods': 'GET',
         'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
-      };
+      }
 
-      return config;
-    };
+      return config
+    }
   },
   paths: function (paths) {
-    return paths;
+    return paths
   },
-};
+}
diff --git a/apps/wallet-connect/src/App.test.tsx b/apps/wallet-connect/src/App.test.tsx
index 90d3cd797..7b38463b0 100644
--- a/apps/wallet-connect/src/App.test.tsx
+++ b/apps/wallet-connect/src/App.test.tsx
@@ -6,15 +6,15 @@ import {
   waitForElementToBeRemoved,
   findByAltText,
   findByText,
-} from '@testing-library/react';
-import App from './App';
-import { renderWithProviders } from './utils/test-helpers';
+} from '@testing-library/react'
+import App from './App'
+import { renderWithProviders } from './utils/test-helpers'
 
-const CONNECTION_INPUT_TEXT = 'QR code or connection link';
-const HELP_TITLE = 'How to connect to a Dapp?';
+const CONNECTION_INPUT_TEXT = 'QR code or connection link'
+const HELP_TITLE = 'How to connect to a Dapp?'
 
 jest.mock('@gnosis.pm/safe-apps-react-sdk', () => {
-  const originalModule = jest.requireActual('@gnosis.pm/safe-apps-react-sdk');
+  const originalModule = jest.requireActual('@gnosis.pm/safe-apps-react-sdk')
   return {
     ...originalModule,
     useSafeAppsSDK: () => ({
@@ -29,8 +29,8 @@ jest.mock('@gnosis.pm/safe-apps-react-sdk', () => {
         chainId: 4,
       },
     }),
-  };
-});
+  }
+})
 
 jest.mock('@walletconnect/client', () => {
   return function () {
@@ -43,43 +43,43 @@ jest.mock('@walletconnect/client', () => {
       },
       on: jest.fn(),
       killSession: jest.fn(),
-    };
-  };
-});
+    }
+  }
+})
 
 jest.mock('jsqr', () => {
   return function () {
     return {
       data: 'wc:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx@1?bridge=wss://safe-walletconnect.gnosis.io&key=xxxxxxxxxxx',
-    };
-  };
-});
+    }
+  }
+})
 
 describe('WalletConnect unit tests', () => {
   it('Renders Wallet Connect Safe App', () => {
-    renderWithProviders(<App />);
+    renderWithProviders(<App />)
 
-    const titleNode = screen.getByText('Wallet Connect');
+    const titleNode = screen.getByText('Wallet Connect')
 
-    expect(titleNode).toBeInTheDocument();
+    expect(titleNode).toBeInTheDocument()
 
-    const inputNode = screen.getByPlaceholderText(CONNECTION_INPUT_TEXT);
-    expect(inputNode).toBeInTheDocument();
+    const inputNode = screen.getByPlaceholderText(CONNECTION_INPUT_TEXT)
+    expect(inputNode).toBeInTheDocument()
 
-    const instructionsNode = screen.getByText(HELP_TITLE);
+    const instructionsNode = screen.getByText(HELP_TITLE)
 
-    expect(instructionsNode).toBeInTheDocument();
-  });
+    expect(instructionsNode).toBeInTheDocument()
+  })
 
   describe('URI connection', () => {
     it('Connects via onPaste valid URI', () => {
-      renderWithProviders(<App />);
+      renderWithProviders(<App />)
 
-      const instructionsNode = screen.getByText(HELP_TITLE);
+      const instructionsNode = screen.getByText(HELP_TITLE)
 
-      expect(instructionsNode).toBeInTheDocument();
+      expect(instructionsNode).toBeInTheDocument()
 
-      const inputNode = screen.getByPlaceholderText(CONNECTION_INPUT_TEXT);
+      const inputNode = screen.getByPlaceholderText(CONNECTION_INPUT_TEXT)
 
       const URIPasteEvent = {
         clipboardData: {
@@ -92,36 +92,38 @@ describe('WalletConnect unit tests', () => {
           getData: () =>
             'wc:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx@1?bridge=wss://safe-walletconnect.gnosis.io&key=xxxxxxxxxxx',
         },
-      };
+      }
 
-      const pasteEvent = createEvent.paste(inputNode, URIPasteEvent);
+      const pasteEvent = createEvent.paste(inputNode, URIPasteEvent)
 
-      fireEvent(inputNode, pasteEvent);
+      fireEvent(inputNode, pasteEvent)
 
-      expect(instructionsNode).not.toBeInTheDocument();
+      expect(instructionsNode).not.toBeInTheDocument()
 
-      const connectedNode = screen.getByText('CONNECTED');
-      expect(connectedNode).toBeInTheDocument();
+      const connectedNode = screen.getByText('CONNECTED')
+      expect(connectedNode).toBeInTheDocument()
 
-      const connectedInstructionsNode = screen.getByText('How to confirm transactions?');
-      expect(connectedInstructionsNode).toBeInTheDocument();
+      const connectedInstructionsNode = screen.getByText('How to confirm transactions?')
+      expect(connectedInstructionsNode).toBeInTheDocument()
 
-      const dappNameNode = screen.getByText('Test name');
-      expect(dappNameNode).toBeInTheDocument();
+      const dappNameNode = screen.getByText('Test name')
+      expect(dappNameNode).toBeInTheDocument()
 
-      const dappImgNode = screen.getByRole('img');
-      expect(dappImgNode).toBeInTheDocument();
-      expect(dappImgNode).toHaveStyle("background-image: url('https://cowswap.exchange/./favicon.png')");
-    });
+      const dappImgNode = screen.getByRole('img')
+      expect(dappImgNode).toBeInTheDocument()
+      expect(dappImgNode).toHaveStyle(
+        "background-image: url('https://cowswap.exchange/./favicon.png')",
+      )
+    })
 
     it('No connection is set if an invalid URI is provided', () => {
-      renderWithProviders(<App />);
+      renderWithProviders(<App />)
 
-      const instructionsNode = screen.getByText(HELP_TITLE);
+      const instructionsNode = screen.getByText(HELP_TITLE)
 
-      expect(instructionsNode).toBeInTheDocument();
+      expect(instructionsNode).toBeInTheDocument()
 
-      const inputNode = screen.getByPlaceholderText(CONNECTION_INPUT_TEXT);
+      const inputNode = screen.getByPlaceholderText(CONNECTION_INPUT_TEXT)
 
       const URIPasteEvent = {
         clipboardData: {
@@ -133,80 +135,82 @@ describe('WalletConnect unit tests', () => {
           ],
           getData: () => 'Invalid URI',
         },
-      };
+      }
 
-      const pasteEvent = createEvent.paste(inputNode, URIPasteEvent);
+      const pasteEvent = createEvent.paste(inputNode, URIPasteEvent)
 
-      fireEvent(inputNode, pasteEvent);
+      fireEvent(inputNode, pasteEvent)
 
-      const connectedNode = screen.queryByText('CONNECTED');
-      expect(connectedNode).not.toBeInTheDocument();
-    });
-  });
+      const connectedNode = screen.queryByText('CONNECTED')
+      expect(connectedNode).not.toBeInTheDocument()
+    })
+  })
 
   describe('Scan QR code connection', () => {
     it('Shows scan QR dialog', async () => {
-      renderWithProviders(<App />);
+      renderWithProviders(<App />)
 
-      const openDialogNode = await screen.findByTitle('Start your camera and scan a QR');
+      const openDialogNode = await screen.findByTitle('Start your camera and scan a QR')
 
-      expect(openDialogNode).toBeDefined();
+      expect(openDialogNode).toBeDefined()
 
-      fireEvent.click(openDialogNode);
+      fireEvent.click(openDialogNode)
 
-      const scanQRCodeDialog = await screen.findByRole('dialog');
+      const scanQRCodeDialog = await screen.findByRole('dialog')
 
-      await waitFor(() => expect(scanQRCodeDialog).toBeDefined());
-    });
+      await waitFor(() => expect(scanQRCodeDialog).toBeDefined())
+    })
 
     it('Shows Permissions error image', async () => {
       Object.defineProperty(window.HTMLMediaElement.prototype, 'play', {
         writable: true,
         value: jest.fn().mockImplementationOnce(() => {
-          throw 'Expected error, testing camera permission error...';
+          throw 'Expected error, testing camera permission error...'
         }),
-      });
+      })
 
-      renderWithProviders(<App />);
+      renderWithProviders(<App />)
 
-      const openDialogNode = await screen.findByTitle('Start your camera and scan a QR');
+      const openDialogNode = await screen.findByTitle('Start your camera and scan a QR')
 
-      expect(openDialogNode).toBeInTheDocument();
+      expect(openDialogNode).toBeInTheDocument()
 
-      fireEvent.click(openDialogNode);
+      fireEvent.click(openDialogNode)
 
-      const scanQRCodeDialog = await screen.findByRole('dialog');
+      const scanQRCodeDialog = await screen.findByRole('dialog')
 
-      expect(scanQRCodeDialog).toBeDefined();
+      expect(scanQRCodeDialog).toBeDefined()
 
-      const permissionErrorTitle = await findByText(scanQRCodeDialog, 'Check browser permissions');
+      const permissionErrorTitle = await findByText(scanQRCodeDialog, 'Check browser permissions')
 
-      expect(permissionErrorTitle).toBeDefined();
+      expect(permissionErrorTitle).toBeDefined()
 
-      const permissionErrorImg = await findByAltText(scanQRCodeDialog, 'camera permission error');
-      expect(permissionErrorImg).toBeDefined();
-    });
+      const permissionErrorImg = await findByAltText(scanQRCodeDialog, 'camera permission error')
+      expect(permissionErrorImg).toBeDefined()
+    })
 
     it('Scans valid QR code', async () => {
-      renderWithProviders(<App />);
+      renderWithProviders(<App />)
 
-      const openDialogNode = await screen.findByTitle('Start your camera and scan a QR');
+      const openDialogNode = await screen.findByTitle('Start your camera and scan a QR')
 
-      fireEvent.click(openDialogNode);
+      fireEvent.click(openDialogNode)
 
-      const scanQRCodeDialog = await screen.findByRole('dialog');
-      expect(scanQRCodeDialog).toBeDefined();
+      const scanQRCodeDialog = await screen.findByRole('dialog')
+      expect(scanQRCodeDialog).toBeDefined()
 
-      const dappNameNode = await screen.findByText('Test name');
-      expect(dappNameNode).toBeInTheDocument();
+      const dappNameNode = await screen.findByText('Test name')
+      expect(dappNameNode).toBeInTheDocument()
 
-      const dappImgNode = await screen.findByRole('img');
-      expect(dappImgNode).toBeInTheDocument();
-      expect(dappImgNode).toHaveStyle("background-image: url('https://cowswap.exchange/./favicon.png')");
-    });
+      const dappImgNode = await screen.findByRole('img')
+      expect(dappImgNode).toBeInTheDocument()
+      expect(dappImgNode).toHaveStyle(
+        "background-image: url('https://cowswap.exchange/./favicon.png')",
+      )
+    })
 
     it('Closes webcam connection by closing the dialog', async () => {
-      const stopWebcamSpy = jest.fn();
+      const stopWebcamSpy = jest.fn()
 
       const openWebcamSpy = jest.fn().mockImplementation(() => ({
         getTracks: () => [
@@ -214,14 +218,14 @@ describe('WalletConnect unit tests', () => {
             stop: stopWebcamSpy,
           },
         ],
-      }));
+      }))
 
       Object.defineProperty(window.navigator, 'mediaDevices', {
         writable: true,
         value: {
           getUserMedia: openWebcamSpy,
         },
-      });
+      })
 
       Object.defineProperty(window.HTMLCanvasElement.prototype, 'getContext', {
         writable: false,
@@ -229,49 +233,49 @@ describe('WalletConnect unit tests', () => {
           return {
             drawImage: jest.fn(),
             getImageData: jest.fn(),
-          };
+          }
         },
-      });
+      })
 
-      renderWithProviders(<App />);
+      renderWithProviders(<App />)
 
-      expect(openWebcamSpy).not.toHaveBeenCalled();
-      expect(stopWebcamSpy).not.toHaveBeenCalled();
+      expect(openWebcamSpy).not.toHaveBeenCalled()
+      expect(stopWebcamSpy).not.toHaveBeenCalled()
 
-      const openDialogNode = await screen.findByTitle('Start your camera and scan a QR');
+      const openDialogNode = await screen.findByTitle('Start your camera and scan a QR')
 
       // we open webcam dialog
-      fireEvent.click(openDialogNode);
+      fireEvent.click(openDialogNode)
 
-      const scanQRCodeDialog = await screen.findByRole('dialog');
-      expect(scanQRCodeDialog).toBeDefined();
+      const scanQRCodeDialog = await screen.findByRole('dialog')
+      expect(scanQRCodeDialog).toBeDefined()
 
       // only webcam connection should be called at this point of the test
-      expect(openWebcamSpy).toHaveBeenCalled();
-      expect(stopWebcamSpy).not.toHaveBeenCalled();
+      expect(openWebcamSpy).toHaveBeenCalled()
+      expect(stopWebcamSpy).not.toHaveBeenCalled()
 
       // we close webcam dialog
-      const closeQRCodeDialogButton = screen.getByLabelText('Close scan QR code dialog');
+      const closeQRCodeDialogButton = screen.getByLabelText('Close scan QR code dialog')
 
-      expect(closeQRCodeDialogButton).toBeInTheDocument();
-      fireEvent.click(closeQRCodeDialogButton);
+      expect(closeQRCodeDialogButton).toBeInTheDocument()
+      fireEvent.click(closeQRCodeDialogButton)
 
-      await waitForElementToBeRemoved(() => screen.queryByRole('dialog'));
+      await waitForElementToBeRemoved(() => screen.queryByRole('dialog'))
 
       // webcam connection should be closed
-      expect(stopWebcamSpy).toHaveBeenCalled();
-    });
-  });
+      expect(stopWebcamSpy).toHaveBeenCalled()
+    })
+  })
 
   describe('Disconnect WC', () => {
     it('Disconnects if user clicks on Disconnect button', () => {
-      renderWithProviders(<App />);
+      renderWithProviders(<App />)
 
-      const instructionsNode = screen.getByText(HELP_TITLE);
+      const instructionsNode = screen.getByText(HELP_TITLE)
 
-      expect(instructionsNode).toBeInTheDocument();
+      expect(instructionsNode).toBeInTheDocument()
 
-      const inputNode = screen.getByPlaceholderText(CONNECTION_INPUT_TEXT);
+      const inputNode = screen.getByPlaceholderText(CONNECTION_INPUT_TEXT)
 
       const URIPasteEvent = {
         clipboardData: {
@@ -284,21 +288,21 @@ describe('WalletConnect unit tests', () => {
           getData: () =>
             'wc:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx@1?bridge=wss://safe-walletconnect.gnosis.io&key=xxxxxxxxxxx',
         },
-      };
+      }
 
-      const pasteEvent = createEvent.paste(inputNode, URIPasteEvent);
+      const pasteEvent = createEvent.paste(inputNode, URIPasteEvent)
 
-      fireEvent(inputNode, pasteEvent);
+      fireEvent(inputNode, pasteEvent)
 
-      const disconnectButtonNode = screen.getByText('Disconnect');
-      expect(disconnectButtonNode).toBeInTheDocument();
+      const disconnectButtonNode = screen.getByText('Disconnect')
+      expect(disconnectButtonNode).toBeInTheDocument()
 
-      fireEvent.click(disconnectButtonNode);
+      fireEvent.click(disconnectButtonNode)
 
       waitFor(() => {
-        expect(inputNode).toBeInTheDocument();
-        expect(instructionsNode).toBeInTheDocument();
-      });
-    });
-  });
-});
+        expect(inputNode).toBeInTheDocument()
+        expect(instructionsNode).toBeInTheDocument()
+      })
+    })
+  })
+})
diff --git a/apps/wallet-connect/src/App.tsx b/apps/wallet-connect/src/App.tsx
index 114170061..705c5065c 100644
--- a/apps/wallet-connect/src/App.tsx
+++ b/apps/wallet-connect/src/App.tsx
@@ -1,16 +1,16 @@
-import { useState, useEffect, useCallback } from 'react';
-import styled from 'styled-components';
-import { Grid } from '@material-ui/core';
-import Container from '@material-ui/core/Container';
-import { Card, Loader } from '@gnosis.pm/safe-react-components';
-import useWalletConnect from './hooks/useWalletConnect';
-import { useApps } from './hooks/useApps';
-import AppBar from './components/AppBar';
-import Help from './components/Help';
-import Disconnected from './components/Disconnected';
-import Connected from './components/Connected';
-import Connecting from './components/Connecting';
-import WalletConnectField from './components/WalletConnectField';
+import { useState, useEffect, useCallback } from 'react'
+import styled from 'styled-components'
+import { Grid } from '@material-ui/core'
+import Container from '@material-ui/core/Container'
+import { Card, Loader } from '@gnosis.pm/safe-react-components'
+import useWalletConnect from './hooks/useWalletConnect'
+import { useApps } from './hooks/useApps'
+import AppBar from './components/AppBar'
+import Help from './components/Help'
+import Disconnected from './components/Disconnected'
+import Connected from './components/Connected'
+import Connecting from './components/Connecting'
+import WalletConnectField from './components/WalletConnectField'
 
 enum CONNECTION_STATUS {
   CONNECTED,
@@ -19,48 +19,48 @@ enum CONNECTION_STATUS {
 }
 
 const App = () => {
-  const { wcClientData, wcConnect, wcDisconnect } = useWalletConnect();
-  const { findSafeApp, openSafeApp } = useApps();
-  const [connectionStatus, setConnectionStatus] = useState(CONNECTION_STATUS.DISCONNECTED);
-  const [isNavigatingToSafeApp, setIsNavigatingToSafeApp] = useState(false);
+  const { wcClientData, wcConnect, wcDisconnect } = useWalletConnect()
+  const { findSafeApp, openSafeApp } = useApps()
+  const [connectionStatus, setConnectionStatus] = useState(CONNECTION_STATUS.DISCONNECTED)
+  const [isNavigatingToSafeApp, setIsNavigatingToSafeApp] = useState(false)
 
   const handleOpenSafeApp = useCallback(
     (url: string) => {
-      openSafeApp(url);
-      wcDisconnect();
-      setConnectionStatus(CONNECTION_STATUS.DISCONNECTED);
-      setIsNavigatingToSafeApp(true);
+      openSafeApp(url)
+      wcDisconnect()
+      setConnectionStatus(CONNECTION_STATUS.DISCONNECTED)
+      setIsNavigatingToSafeApp(true)
     },
     [openSafeApp, wcDisconnect],
-  );
+  )
 
   useEffect(() => {
     if (wcClientData) {
-      setConnectionStatus(CONNECTION_STATUS.CONNECTING);
+      setConnectionStatus(CONNECTION_STATUS.CONNECTING)
     }
-  }, [wcClientData]);
+  }, [wcClientData])
 
   useEffect(() => {
     if (!wcClientData) {
-      setConnectionStatus(CONNECTION_STATUS.DISCONNECTED);
-      return;
+      setConnectionStatus(CONNECTION_STATUS.DISCONNECTED)
+      return
     }
 
     if (connectionStatus === CONNECTION_STATUS.CONNECTING) {
-      const safeApp = findSafeApp(wcClientData.url);
+      const safeApp = findSafeApp(wcClientData.url)
 
       if (!safeApp) {
-        setConnectionStatus(CONNECTION_STATUS.CONNECTED);
+        setConnectionStatus(CONNECTION_STATUS.CONNECTED)
       }
     }
-  }, [connectionStatus, findSafeApp, wcClientData]);
+  }, [connectionStatus, findSafeApp, wcClientData])
 
   if (isNavigatingToSafeApp) {
     return (
       <StyledMainContainer>
         <Loader size="md" />
       </StyledMainContainer>
-    );
+    )
   }
 
   return (
@@ -72,7 +72,7 @@ const App = () => {
             <StyledCard>
               {connectionStatus === CONNECTION_STATUS.DISCONNECTED && (
                 <Disconnected>
-                  <WalletConnectField client={wcClientData} onConnect={(data) => wcConnect(data)} />
+                  <WalletConnectField client={wcClientData} onConnect={data => wcConnect(data)} />
                 </Disconnected>
               )}
               {connectionStatus === CONNECTION_STATUS.CONNECTING && (
@@ -86,8 +86,8 @@ const App = () => {
                 <Connected
                   client={wcClientData}
                   onDisconnect={() => {
-                    setConnectionStatus(CONNECTION_STATUS.DISCONNECTED);
-                    wcDisconnect();
+                    setConnectionStatus(CONNECTION_STATUS.DISCONNECTED)
+                    wcDisconnect()
                   }}
                 />
               )}
@@ -104,8 +104,8 @@ const App = () => {
         </StyledAppContainer>
       </StyledMainContainer>
     </>
-  );
-};
+  )
+}
 
 const StyledMainContainer = styled(Container)`
   && {
@@ -117,32 +117,32 @@ const StyledMainContainer = styled(Container)`
     align-items: center;
     flex-direction: column;
   }
-`;
+`
 
 const StyledAppContainer = styled(Grid)`
   height: 100%;
   padding-top: 45px;
-`;
+`
 
 const StyledCardContainer = styled(Grid)`
   width: 484px;
   margin-top: 45px;
-`;
+`
 
 const StyledHelpContainer = styled(Grid)`
   && {
     width: 484px;
     margin-top: 16px;
   }
-`;
+`
 
 const StyledCard = styled(Card)`
   && {
     box-shadow: none;
   }
-`;
+`
 
-export default App;
+export default App
 
 const HELP_CONNECT = {
   title: 'How to connect to a Dapp?',
@@ -153,7 +153,7 @@ const HELP_CONNECT = {
     'WalletConnect connection is established automatically.',
     'Now you can trigger transactions via the Dapp to your Safe.',
   ],
-};
+}
 
 const HELP_TRANSACTIONS = {
   title: 'How to confirm transactions?',
@@ -162,4 +162,4 @@ const HELP_TRANSACTIONS = {
     'Come back here to confirm the transaction. You will see a popup with transaction details. Review the details and submit the transaction.',
     'The transaction has to be confirmed by owners and executed just like any other Safe transaction.',
   ],
-};
+}
diff --git a/apps/wallet-connect/src/components/AppBar.tsx b/apps/wallet-connect/src/components/AppBar.tsx
index e937fef38..19c776097 100644
--- a/apps/wallet-connect/src/components/AppBar.tsx
+++ b/apps/wallet-connect/src/components/AppBar.tsx
@@ -1,8 +1,8 @@
-import MuiAppBar from '@material-ui/core/AppBar';
-import styled from 'styled-components';
-import { Icon, Link, Text } from '@gnosis.pm/safe-react-components';
+import MuiAppBar from '@material-ui/core/AppBar'
+import styled from 'styled-components'
+import { Icon, Link, Text } from '@gnosis.pm/safe-react-components'
 
-const WALLET_CONNECT_HELP = 'https://help.gnosis-safe.io/en/articles/4356253-walletconnect-safe-app';
+const WALLET_CONNECT_HELP = 'https://help.gnosis-safe.io/en/articles/4356253-walletconnect-safe-app'
 
 const AppBar = () => {
   return (
@@ -12,8 +12,8 @@ const AppBar = () => {
         <Icon size="md" type="info" />
       </Link>
     </StyledAppBar>
-  );
-};
+  )
+}
 
 const StyledAppBar = styled(MuiAppBar)`
   && {
@@ -24,12 +24,12 @@ const StyledAppBar = styled(MuiAppBar)`
     flex-direction: row;
     border-bottom: 2px solid #e8e7e6;
   }
-`;
+`
 
 const StyledAppBarText = styled(Text)`
   font-size: 20px;
   margin-left: 38px;
   margin-right: 16px;
-`;
+`
 
-export default AppBar;
+export default AppBar
diff --git a/apps/wallet-connect/src/components/Connected.tsx b/apps/wallet-connect/src/components/Connected.tsx
index 23dbc54c3..85d04cbee 100644
--- a/apps/wallet-connect/src/components/Connected.tsx
+++ b/apps/wallet-connect/src/components/Connected.tsx
@@ -1,17 +1,17 @@
-import Grid from '@material-ui/core/Grid';
-import styled from 'styled-components';
-import { IClientMeta } from '@walletconnect/types';
-import { Text, Icon, Button, Divider } from '@gnosis.pm/safe-react-components';
-import { StyledCardContainer, StyledImage } from './styles';
+import Grid from '@material-ui/core/Grid'
+import styled from 'styled-components'
+import { IClientMeta } from '@walletconnect/types'
+import { Text, Icon, Button, Divider } from '@gnosis.pm/safe-react-components'
+import { StyledCardContainer, StyledImage } from './styles'
 
 type ConnectedProps = {
-  client: IClientMeta | null;
-  onDisconnect: () => void;
-};
+  client: IClientMeta | null
+  onDisconnect: () => void
+}
 
 const Connected = ({ client, onDisconnect }: ConnectedProps) => {
   if (!client) {
-    return null;
+    return null
   }
 
   return (
@@ -44,28 +44,28 @@ const Connected = ({ client, onDisconnect }: ConnectedProps) => {
         <StyledMessage>
           <Icon type="info" color="primary" size="md" />
           <Text size="lg">
-            You need to have this WalletConnect Safe app open for transactions to pop up. You will not receive
-            transaction requests when you don't have it open.
+            You need to have this WalletConnect Safe app open for transactions to pop up. You will
+            not receive transaction requests when you don't have it open.
           </Text>
         </StyledMessage>
       </Grid>
     </StyledCardContainer>
-  );
-};
+  )
+}
 
 const StyledText = styled(Text)`
   letter-spacing: 1px;
   font-weight: bold;
   margin-bottom: 5px;
-`;
+`
 
 const StyledCenteredGridItem = styled(Grid)`
   align-self: center;
-`;
+`
 
 const StyledDivider = styled(Divider)`
   margin: 0 8px 0 0;
-`;
+`
 
 const StyledMessage = styled.div`
   padding: 20px;
@@ -78,6 +78,6 @@ const StyledMessage = styled.div`
     text-align: center;
     line-height: 22px;
   }
-`;
+`
 
-export default Connected;
+export default Connected
diff --git a/apps/wallet-connect/src/components/Connecting.tsx b/apps/wallet-connect/src/components/Connecting.tsx
index 24e8171f0..c5bb2f06b 100644
--- a/apps/wallet-connect/src/components/Connecting.tsx
+++ b/apps/wallet-connect/src/components/Connecting.tsx
@@ -1,22 +1,28 @@
-import styled from 'styled-components';
-import { IClientMeta } from '@walletconnect/types';
-import Grid from '@material-ui/core/Grid';
-import { Icon, Text, Button, Link } from '@gnosis.pm/safe-react-components';
-import { StyledBoldText, StyledCardContainer, StyledImage } from './styles';
+import styled from 'styled-components'
+import { IClientMeta } from '@walletconnect/types'
+import Grid from '@material-ui/core/Grid'
+import { Icon, Text, Button, Link } from '@gnosis.pm/safe-react-components'
+import { StyledBoldText, StyledCardContainer, StyledImage } from './styles'
 
 type ConnectingProps = {
-  client: IClientMeta | null;
-  onOpenSafeApp: () => void;
-  onKeepUsingWalletConnect: () => void;
-};
+  client: IClientMeta | null
+  onOpenSafeApp: () => void
+  onKeepUsingWalletConnect: () => void
+}
 
 const Connecting = ({ client, onOpenSafeApp, onKeepUsingWalletConnect }: ConnectingProps) => {
   if (!client) {
-    return null;
+    return null
   }
 
   return (
-    <StyledCardContainer container direction="column" alignItems="center" justifyContent="center" spacing={2}>
+    <StyledCardContainer
+      container
+      direction="column"
+      alignItems="center"
+      justifyContent="center"
+      spacing={2}
+    >
       <Grid item>
         <StyledIcon size="md" type="apps" color="primary" />
       </Grid>
@@ -29,11 +35,18 @@ const Connecting = ({ client, onOpenSafeApp, onKeepUsingWalletConnect }: Connect
 
       <Grid item>
         <StyledCenteredText size="md">
-          For better experience use Safe optimised app. It allows you to operate with an app without interruption.
+          For better experience use Safe optimised app. It allows you to operate with an app without
+          interruption.
         </StyledCenteredText>
       </Grid>
 
-      <StyledSafeAppContainer container item alignItems="center" justifyContent="center" spacing={3}>
+      <StyledSafeAppContainer
+        container
+        item
+        alignItems="center"
+        justifyContent="center"
+        spacing={3}
+      >
         <Grid item xs={2}>
           <StyledImage src={client.icons[0]} role="img" />
         </Grid>
@@ -59,8 +72,8 @@ const Connecting = ({ client, onOpenSafeApp, onKeepUsingWalletConnect }: Connect
         <StyledLink onClick={onKeepUsingWalletConnect}>Keep using WalletConnect</StyledLink>
       </Grid>
     </StyledCardContainer>
-  );
-};
+  )
+}
 
 const StyledSafeAppContainer = styled(Grid)`
   && {
@@ -69,22 +82,22 @@ const StyledSafeAppContainer = styled(Grid)`
     margin-top: 16px;
     margin-bottom: 16px;
   }
-`;
+`
 
 const StyledCenteredText = styled(Text)`
   text-align: center;
-`;
+`
 
 const StyledLink = styled(Link)`
   text-decoration: none;
   font-weight: bold;
   font-size: 0.8em;
-`;
+`
 
 const StyledIcon = styled(Icon)`
   svg {
     width: 48px;
     height: 48px;
   }
-`;
-export default Connecting;
+`
+export default Connecting
diff --git a/apps/wallet-connect/src/components/Disconnected.tsx b/apps/wallet-connect/src/components/Disconnected.tsx
index 8350a4e83..c8f2ce083 100644
--- a/apps/wallet-connect/src/components/Disconnected.tsx
+++ b/apps/wallet-connect/src/components/Disconnected.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import Grid from '@material-ui/core/Grid';
-import styled from 'styled-components';
-import { Text } from '@gnosis.pm/safe-react-components';
-import { ReactComponent as WalletConnectLogo } from '../assets/wallet-connect-logo.svg';
+import React from 'react'
+import Grid from '@material-ui/core/Grid'
+import styled from 'styled-components'
+import { Text } from '@gnosis.pm/safe-react-components'
+import { ReactComponent as WalletConnectLogo } from '../assets/wallet-connect-logo.svg'
 
 const Disconnected: React.FC = ({ children }) => {
   return (
@@ -11,20 +11,22 @@ const Disconnected: React.FC = ({ children }) => {
         <WalletConnectLogo />
       </Grid>
       <Grid item>
-        <StyledText size="xl">Connect your Safe to a dApp via the WalletConnect and trigger transactions</StyledText>
+        <StyledText size="xl">
+          Connect your Safe to a dApp via the WalletConnect and trigger transactions
+        </StyledText>
       </Grid>
       <Grid item>{children}</Grid>
     </StyledContainer>
-  );
-};
+  )
+}
 
 const StyledContainer = styled(Grid)`
   padding: 38px 30px 45px 30px;
-`;
+`
 
 const StyledText = styled(Text)`
   text-align: center;
   margin-bottom: 8px;
-`;
+`
 
-export default Disconnected;
+export default Disconnected
diff --git a/apps/wallet-connect/src/components/Help.tsx b/apps/wallet-connect/src/components/Help.tsx
index dda97164a..04a842c66 100644
--- a/apps/wallet-connect/src/components/Help.tsx
+++ b/apps/wallet-connect/src/components/Help.tsx
@@ -1,11 +1,18 @@
-import { Box } from '@material-ui/core';
-import styled from 'styled-components';
-import { Accordion, AccordionSummary, IconText, AccordionDetails, Text, Dot } from '@gnosis.pm/safe-react-components';
+import { Box } from '@material-ui/core'
+import styled from 'styled-components'
+import {
+  Accordion,
+  AccordionSummary,
+  IconText,
+  AccordionDetails,
+  Text,
+  Dot,
+} from '@gnosis.pm/safe-react-components'
 
 type HelpProps = {
-  title: string;
-  steps: string[];
-};
+  title: string
+  steps: string[]
+}
 
 const Help = ({ title, steps }: HelpProps): React.ReactElement => {
   return (
@@ -24,8 +31,8 @@ const Help = ({ title, steps }: HelpProps): React.ReactElement => {
         ))}
       </StyledAccordionDetails>
     </StyledAccordion>
-  );
-};
+  )
+}
 
 const StyledIconText = styled(IconText)`
   svg {
@@ -36,7 +43,7 @@ const StyledIconText = styled(IconText)`
   p {
     margin-left: 13px;
   }
-`;
+`
 
 const StyledAccordion = styled(Accordion)`
   && {
@@ -45,13 +52,13 @@ const StyledAccordion = styled(Accordion)`
       border: 0;
     }
   }
-`;
+`
 
 const StyledAccordionSummary = styled(AccordionSummary)`
   && {
     border: 2px solid #e2e3e3;
   }
-`;
+`
 
 const StyledAccordionDetails = styled(AccordionDetails)`
   && {
@@ -64,7 +71,7 @@ const StyledAccordionDetails = styled(AccordionDetails)`
       padding-bottom: 8px;
     }
   }
-`;
+`
 
 const StyledDot = styled(Dot)`
   min-width: 20px;
@@ -73,11 +80,11 @@ const StyledDot = styled(Dot)`
   margin-right: 20px;
   background: #f0efee;
   color: #566976;
-`;
+`
 
 const StyledDotText = styled(Text)`
   position: absolute;
   font-size: 10px;
-`;
+`
 
-export default Help;
+export default Help
diff --git a/apps/wallet-connect/src/components/ScanCode.tsx b/apps/wallet-connect/src/components/ScanCode.tsx
index f000d4c1c..bf0f10c20 100644
--- a/apps/wallet-connect/src/components/ScanCode.tsx
+++ b/apps/wallet-connect/src/components/ScanCode.tsx
@@ -1,43 +1,43 @@
-import { useEffect, useState } from 'react';
-import { IWalletConnectSession, IClientMeta } from '@walletconnect/types';
-import useWebcam from '../hooks/useWebcam';
-import useQRCode from '../hooks/useQRCode';
-import styled from 'styled-components';
-import { Loader, Title, Text } from '@gnosis.pm/safe-react-components';
-import ErrorImg from '../assets/cam-permissions.png';
+import { useEffect, useState } from 'react'
+import { IWalletConnectSession, IClientMeta } from '@walletconnect/types'
+import useWebcam from '../hooks/useWebcam'
+import useQRCode from '../hooks/useQRCode'
+import styled from 'styled-components'
+import { Loader, Title, Text } from '@gnosis.pm/safe-react-components'
+import ErrorImg from '../assets/cam-permissions.png'
 
 type WcConnectProps = {
-  uri?: string | undefined;
-  session?: IWalletConnectSession | undefined;
-};
+  uri?: string | undefined
+  session?: IWalletConnectSession | undefined
+}
 
 type Props = {
-  wcConnect: ({ uri }: WcConnectProps) => Promise<void>;
-  wcClientData: IClientMeta | null;
-};
+  wcConnect: ({ uri }: WcConnectProps) => Promise<void>
+  wcClientData: IClientMeta | null
+}
 
 function ScanCode({ wcConnect, wcClientData }: Props) {
-  const { videoRef, isLoadingWebcam, errorConnectingWebcam } = useWebcam();
+  const { videoRef, isLoadingWebcam, errorConnectingWebcam } = useWebcam()
 
-  const { QRCode } = useQRCode({ videoRef, errorConnectingWebcam });
+  const { QRCode } = useQRCode({ videoRef, errorConnectingWebcam })
 
   // this flag is needed to avoid to call multiple times to wcConnect
-  const [hasBeenCalledToConnect, setHasBeenCalledToConnect] = useState(false);
+  const [hasBeenCalledToConnect, setHasBeenCalledToConnect] = useState(false)
 
-  const isAlreadyConnected = !!wcClientData;
+  const isAlreadyConnected = !!wcClientData
 
   useEffect(() => {
     if (QRCode) {
-      const isValidWalletConnectQRCode = QRCode && QRCode.data.startsWith('wc:');
+      const isValidWalletConnectQRCode = QRCode && QRCode.data.startsWith('wc:')
 
       if (isValidWalletConnectQRCode && !isAlreadyConnected && !hasBeenCalledToConnect) {
-        wcConnect({ uri: QRCode.data });
-        setHasBeenCalledToConnect(true);
+        wcConnect({ uri: QRCode.data })
+        setHasBeenCalledToConnect(true)
       }
     }
-  }, [QRCode, wcConnect, isAlreadyConnected, hasBeenCalledToConnect]);
+  }, [QRCode, wcConnect, isAlreadyConnected, hasBeenCalledToConnect])
 
-  const showVideo = !errorConnectingWebcam && !isLoadingWebcam;
+  const showVideo = !errorConnectingWebcam && !isLoadingWebcam
 
   return (
     <>
@@ -66,10 +66,10 @@ function ScanCode({ wcConnect, wcClientData }: Props) {
       )}
       {showVideo && <StyledVideoBorder />}
     </>
-  );
+  )
 }
 
-export default ScanCode;
+export default ScanCode
 
 const StyledVideoBorder = styled.div`
   top: 0px;
@@ -92,7 +92,7 @@ const StyledVideoBorder = styled.div`
 
   background-repeat: no-repeat;
   background-size: 40px 40px;
-`;
+`
 
 const StyledLoaderContainer = styled.div`
   display: flex;
@@ -102,16 +102,16 @@ const StyledLoaderContainer = styled.div`
 
   min-width: 200px;
   min-height: 200px;
-`;
+`
 
 const StyledLoaderText = styled(Text)`
   margin-top: 12px;
-`;
+`
 
 const StyledErrorContainer = styled.div`
   padding: 20px;
-`;
+`
 
 const StyledErrorTitle = styled(Title)`
   margin-top: 0;
-`;
+`
diff --git a/apps/wallet-connect/src/components/WalletConnectField.tsx b/apps/wallet-connect/src/components/WalletConnectField.tsx
index df38c0428..b019c0285 100644
--- a/apps/wallet-connect/src/components/WalletConnectField.tsx
+++ b/apps/wallet-connect/src/components/WalletConnectField.tsx
@@ -1,105 +1,110 @@
-import { useState, useCallback, useEffect } from 'react';
-import InputAdornment from '@material-ui/core/InputAdornment';
-import IconButton from '@material-ui/core/IconButton';
-import Dialog from '@material-ui/core/Dialog';
-import { Icon, Loader, TextFieldInput, Tooltip } from '@gnosis.pm/safe-react-components';
-import { IWalletConnectSession, IClientMeta } from '@walletconnect/types';
-import styled from 'styled-components';
-import format from 'date-fns/format';
-import jsQr from 'jsqr';
-import { blobToImageData } from '../utils/images';
-import ScanCode from './ScanCode';
+import { useState, useCallback, useEffect } from 'react'
+import InputAdornment from '@material-ui/core/InputAdornment'
+import IconButton from '@material-ui/core/IconButton'
+import Dialog from '@material-ui/core/Dialog'
+import { Icon, Loader, TextFieldInput, Tooltip } from '@gnosis.pm/safe-react-components'
+import { IWalletConnectSession, IClientMeta } from '@walletconnect/types'
+import styled from 'styled-components'
+import format from 'date-fns/format'
+import jsQr from 'jsqr'
+import { blobToImageData } from '../utils/images'
+import ScanCode from './ScanCode'
 
 type WcConnectProps = {
-  uri?: string | undefined;
-  session?: IWalletConnectSession | undefined;
-};
+  uri?: string | undefined
+  session?: IWalletConnectSession | undefined
+}
 
 type WalletConnectFieldProps = {
-  client: IClientMeta | null;
-  onConnect: ({ uri }: WcConnectProps) => Promise<void>;
-};
+  client: IClientMeta | null
+  onConnect: ({ uri }: WcConnectProps) => Promise<void>
+}
 
 const WalletConnectField = ({ client, onConnect }: WalletConnectFieldProps): React.ReactElement => {
-  const [invalidQRCode, setInvalidQRCode] = useState(false);
-  const [isConnecting, setIsConnecting] = useState(false);
-  const [inputValue, setInputValue] = useState('');
-  const [openDialog, setOpenDialog] = useState(false);
+  const [invalidQRCode, setInvalidQRCode] = useState(false)
+  const [isConnecting, setIsConnecting] = useState(false)
+  const [inputValue, setInputValue] = useState('')
+  const [openDialog, setOpenDialog] = useState(false)
 
   const handleQRDialogClose = () => {
-    setOpenDialog(false);
-  };
+    setOpenDialog(false)
+  }
 
   useEffect(() => {
     if (client) {
-      setOpenDialog(false);
+      setOpenDialog(false)
     }
-  }, [client]);
+  }, [client])
 
   // WalletConnect does not provide a loading/connecting status
   // This effects simulates a connecting status, and prevents
   // the user to initiate two connections in simultaneous.
   useEffect(() => {
-    let interval: NodeJS.Timeout;
+    let interval: NodeJS.Timeout
     if (isConnecting) {
-      interval = setTimeout(() => setIsConnecting(false), 2_000);
+      interval = setTimeout(() => setIsConnecting(false), 2_000)
     }
 
-    return () => clearTimeout(interval);
-  }, [isConnecting]);
+    return () => clearTimeout(interval)
+  }, [isConnecting])
 
   const onPaste = useCallback(
     (event: React.ClipboardEvent) => {
       const connectWithUri = (data: string) => {
         if (data.startsWith('wc:')) {
-          setIsConnecting(true);
-          onConnect({ uri: data });
+          setIsConnecting(true)
+          onConnect({ uri: data })
         }
-      };
+      }
 
       const connectWithQR = (item: DataTransferItem) => {
-        const blob = item.getAsFile();
-        const reader = new FileReader();
+        const blob = item.getAsFile()
+        const reader = new FileReader()
         reader.onload = async (event: ProgressEvent<FileReader>) => {
-          const imageData = await blobToImageData(event.target?.result as string);
-          const code = jsQr(imageData.data, imageData.width, imageData.height);
+          const imageData = await blobToImageData(event.target?.result as string)
+          const code = jsQr(imageData.data, imageData.width, imageData.height)
           if (code?.data) {
-            setIsConnecting(true);
-            onConnect({ uri: code.data });
+            setIsConnecting(true)
+            onConnect({ uri: code.data })
           } else {
-            setInvalidQRCode(true);
-            setInputValue(`Screen Shot ${format(new Date(), 'yyyy-MM-dd')} at ${format(new Date(), 'hh.mm.ss')}`);
+            setInvalidQRCode(true)
+            setInputValue(
+              `Screen Shot ${format(new Date(), 'yyyy-MM-dd')} at ${format(
+                new Date(),
+                'hh.mm.ss',
+              )}`,
+            )
           }
-        };
-        reader.readAsDataURL(blob as Blob);
-      };
+        }
+        reader.readAsDataURL(blob as Blob)
+      }
 
-      setInvalidQRCode(false);
-      setInputValue('');
+      setInvalidQRCode(false)
+      setInputValue('')
 
       if (client) {
-        return;
+        return
       }
 
-      const items = event.clipboardData.items;
+      const items = event.clipboardData.items
 
       for (const index in items) {
-        const item = items[index];
+        const item = items[index]
 
         if (item.kind === 'string' && item.type === 'text/plain') {
-          connectWithUri(event.clipboardData.getData('Text'));
+          connectWithUri(event.clipboardData.getData('Text'))
         }
 
         if (item.kind === 'file') {
-          connectWithQR(item);
+          connectWithQR(item)
         }
       }
     },
     [client, onConnect],
-  );
+  )
 
   if (isConnecting) {
-    return <Loader size="md" />;
+    return <Loader size="md" />
   }
 
   return (
@@ -111,7 +116,7 @@ const WalletConnectField = ({ client, onConnect }: WalletConnectFieldProps): Rea
         placeholder="QR code or connection link"
         hiddenLabel
         value={inputValue}
-        onChange={(e) => setInputValue(e.target.value)}
+        onChange={e => setInputValue(e.target.value)}
         onPaste={onPaste}
         autoComplete="off"
         error={invalidQRCode ? 'Invalid QR code' : ''}
@@ -119,8 +124,11 @@ const WalletConnectField = ({ client, onConnect }: WalletConnectFieldProps): Rea
         InputProps={{
           startAdornment: (
             <StyledQRCodeAdorment position="start">
-              <Tooltip title="Start your camera and scan a QR" aria-label="Start your camera and scan a QR">
-                <IconButton onClick={() => setOpenDialog((open) => !open)}>
+              <Tooltip
+                title="Start your camera and scan a QR"
+                aria-label="Start your camera and scan a QR"
+              >
+                <IconButton onClick={() => setOpenDialog(open => !open)}>
                   <Icon type="qrCode" size="md" />
                 </IconButton>
               </Tooltip>
@@ -144,19 +152,19 @@ const WalletConnectField = ({ client, onConnect }: WalletConnectFieldProps): Rea
         <ScanCode wcConnect={onConnect} wcClientData={client} />
       </Dialog>
     </>
-  );
-};
+  )
+}
 
 const StyledQRCodeAdorment = styled(InputAdornment)`
   cursor: pointer;
-`;
+`
 
 const StyledCloseDialogContainer = styled.div`
   position: absolute;
   z-index: 10;
   top: 4px;
   right: 4px;
-`;
+`
 
 const StyledTextField = styled(TextFieldInput)`
   && {
@@ -204,6 +212,6 @@ const StyledTextField = styled(TextFieldInput)`
       background-color: #fff;
     }
   }
-`;
+`
 
-export default WalletConnectField;
+export default WalletConnectField
diff --git a/apps/wallet-connect/src/components/styles.ts b/apps/wallet-connect/src/components/styles.ts
index 878c79952..415eeed7b 100644
--- a/apps/wallet-connect/src/components/styles.ts
+++ b/apps/wallet-connect/src/components/styles.ts
@@ -1,18 +1,18 @@
-import Grid from '@material-ui/core/Grid';
-import styled from 'styled-components';
-import { Text } from '@gnosis.pm/safe-react-components';
+import Grid from '@material-ui/core/Grid'
+import styled from 'styled-components'
+import { Text } from '@gnosis.pm/safe-react-components'
 
 export const StyledCardContainer = styled(Grid)`
   padding: 16px 22px;
-`;
+`
 
 export const StyledImage = styled.div<{ src: string }>`
   background: url('${({ src }) => src}') no-repeat center;
   height: 60px;
   width: 60px;
   background-size: contain;
-`;
+`
 
 export const StyledBoldText = styled(Text)`
   font-weight: bold;
-`;
+`
diff --git a/apps/wallet-connect/src/global.ts b/apps/wallet-connect/src/global.ts
index ac837431f..308669d5d 100644
--- a/apps/wallet-connect/src/global.ts
+++ b/apps/wallet-connect/src/global.ts
@@ -1,6 +1,6 @@
-import { createGlobalStyle } from 'styled-components';
-import avertaFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-normal.woff2';
-import avertaBoldFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-bold.woff2';
+import { createGlobalStyle } from 'styled-components'
+import avertaFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-normal.woff2'
+import avertaBoldFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-bold.woff2'
 
 const GlobalStyle = createGlobalStyle`
     html {
@@ -27,6 +27,6 @@ const GlobalStyle = createGlobalStyle`
         src: local('Averta Bold'), url(${avertaBoldFont}) format('woff');
         font-weight: bold;
     }
-`;
+`
 
-export default GlobalStyle;
+export default GlobalStyle
diff --git a/apps/wallet-connect/src/hooks/useApps.ts b/apps/wallet-connect/src/hooks/useApps.ts
index 70061f9f5..8856714c0 100644
--- a/apps/wallet-connect/src/hooks/useApps.ts
+++ b/apps/wallet-connect/src/hooks/useApps.ts
@@ -1,53 +1,53 @@
-import { useCallback, useEffect, useState } from 'react';
-import { getSafeApps, SafeAppData, SafeAppsResponse } from '@gnosis.pm/safe-react-gateway-sdk';
-import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk';
+import { useCallback, useEffect, useState } from 'react'
+import { getSafeApps, SafeAppData, SafeAppsResponse } from '@gnosis.pm/safe-react-gateway-sdk'
+import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk'
 
-const BASE_URL = 'https://safe-client.gnosis.io';
+const BASE_URL = 'https://safe-client.gnosis.io'
 
 type UseAppsResponse = {
-  findSafeApp: (safeAddress: string) => SafeAppData | undefined;
-  openSafeApp: (safeAppAddress: string) => void;
-};
+  findSafeApp: (safeAddress: string) => SafeAppData | undefined
+  openSafeApp: (safeAppAddress: string) => void
+}
 
 export function useApps(): UseAppsResponse {
-  const { safe, sdk } = useSafeAppsSDK();
-  const [safeAppsList, setSafeAppsList] = useState<SafeAppsResponse>([]);
-  const [origin, setOrigin] = useState<string>();
-  const [networkPrefix, setNetworkPrefix] = useState<string>('');
+  const { safe, sdk } = useSafeAppsSDK()
+  const [safeAppsList, setSafeAppsList] = useState<SafeAppsResponse>([])
+  const [origin, setOrigin] = useState<string>()
+  const [networkPrefix, setNetworkPrefix] = useState<string>('')
 
   useEffect(() => {
-    (async () => {
+    ;(async () => {
       try {
-        const chainInfo = await sdk.safe.getChainInfo();
-        const environmentInfo = await sdk.safe.getEnvironmentInfo();
-        const appsList = await getSafeApps(BASE_URL, chainInfo.chainId);
+        const chainInfo = await sdk.safe.getChainInfo()
+        const environmentInfo = await sdk.safe.getEnvironmentInfo()
+        const appsList = await getSafeApps(BASE_URL, chainInfo.chainId)
 
-        setOrigin(environmentInfo.origin);
-        setSafeAppsList(appsList);
-        setNetworkPrefix(chainInfo.shortName);
+        setOrigin(environmentInfo.origin)
+        setSafeAppsList(appsList)
+        setNetworkPrefix(chainInfo.shortName)
       } catch (error) {
-        console.error('Unable to get chain info:', error);
+        console.error('Unable to get chain info:', error)
       }
-    })();
-  }, [sdk]);
+    })()
+  }, [sdk])
 
   const openSafeApp = useCallback(
     (url: string) => {
       if (origin?.length) {
-        window.parent.location.href = `${origin}/app/${networkPrefix}:${safe.safeAddress}/apps?appUrl=${url}`;
+        window.parent.location.href = `${origin}/app/${networkPrefix}:${safe.safeAddress}/apps?appUrl=${url}`
       }
     },
     [networkPrefix, origin, safe],
-  );
+  )
 
   const findSafeApp = useCallback(
     (url: string): SafeAppData | undefined => {
-      let { hostname } = new URL(url);
+      let { hostname } = new URL(url)
 
-      return safeAppsList.find((safeApp) => safeApp.url.includes(hostname));
+      return safeAppsList.find(safeApp => safeApp.url.includes(hostname))
     },
     [safeAppsList],
-  );
+  )
 
-  return { findSafeApp, openSafeApp };
+  return { findSafeApp, openSafeApp }
 }
diff --git a/apps/wallet-connect/src/hooks/useQRCode.tsx b/apps/wallet-connect/src/hooks/useQRCode.tsx
index 37323c65f..da8b4102d 100644
--- a/apps/wallet-connect/src/hooks/useQRCode.tsx
+++ b/apps/wallet-connect/src/hooks/useQRCode.tsx
@@ -1,61 +1,61 @@
-import { useEffect, useState } from 'react';
-import jsQR, { QRCode } from 'jsqr';
+import { useEffect, useState } from 'react'
+import jsQR, { QRCode } from 'jsqr'
 
 type Props = {
-  videoRef: React.RefObject<HTMLVideoElement>;
-  errorConnectingWebcam: boolean;
-};
+  videoRef: React.RefObject<HTMLVideoElement>
+  errorConnectingWebcam: boolean
+}
 
 function useQRCode({ videoRef, errorConnectingWebcam }: Props) {
-  const [QRCode, setQRCode] = useState<QRCode | null>(null);
+  const [QRCode, setQRCode] = useState<QRCode | null>(null)
 
   useEffect(() => {
     if (videoRef.current && !errorConnectingWebcam) {
-      const canvas = document.createElement('canvas');
+      const canvas = document.createElement('canvas')
       requestAnimationFrame(function QRCodeFromFrame() {
-        const QRCode = getQRCode(videoRef.current as HTMLVideoElement, canvas);
+        const QRCode = getQRCode(videoRef.current as HTMLVideoElement, canvas)
 
-        const isValidQR = QRCode && QRCode.data;
+        const isValidQR = QRCode && QRCode.data
         // if invalid QR we try to read it again until returns a valid one
         if (isValidQR) {
-          setQRCode(QRCode);
+          setQRCode(QRCode)
         } else {
-          requestAnimationFrame(QRCodeFromFrame);
+          requestAnimationFrame(QRCodeFromFrame)
         }
-      });
+      })
     }
-  }, [videoRef, errorConnectingWebcam]);
+  }, [videoRef, errorConnectingWebcam])
 
   return {
     QRCode,
-  };
+  }
 }
 
-export default useQRCode;
+export default useQRCode
 
 function getQRCode(video: HTMLVideoElement, canvas: HTMLCanvasElement) {
-  const currentFrame = video && getCurrentVideoFrame(video, canvas);
+  const currentFrame = video && getCurrentVideoFrame(video, canvas)
   if (currentFrame) {
     const QRCode = jsQR(currentFrame.data, currentFrame.width, currentFrame.height, {
       inversionAttempts: 'dontInvert',
-    });
+    })
 
     if (QRCode) {
-      return QRCode;
+      return QRCode
     }
   }
 }
 
 function getCurrentVideoFrame(video: HTMLVideoElement, canvas: HTMLCanvasElement) {
-  const isVideoReady = video && video.readyState === video.HAVE_ENOUGH_DATA;
+  const isVideoReady = video && video.readyState === video.HAVE_ENOUGH_DATA
 
   if (!isVideoReady) {
-    return;
+    return
   }
 
-  canvas.width = video.videoWidth;
-  canvas.height = video.videoHeight;
-  const canvasContext = canvas.getContext('2d');
-  canvasContext?.drawImage(video, 0, 0, canvas.width, canvas.height);
-  return canvasContext?.getImageData(0, 0, canvas.width, canvas.height);
+  canvas.width = video.videoWidth
+  canvas.height = video.videoHeight
+  const canvasContext = canvas.getContext('2d')
+  canvasContext?.drawImage(video, 0, 0, canvas.width, canvas.height)
+  return canvasContext?.getImageData(0, 0, canvas.width, canvas.height)
 }
diff --git a/apps/wallet-connect/src/hooks/useWalletConnect.tsx b/apps/wallet-connect/src/hooks/useWalletConnect.tsx
index 392ddd648..6d8aa2aef 100644
--- a/apps/wallet-connect/src/hooks/useWalletConnect.tsx
+++ b/apps/wallet-connect/src/hooks/useWalletConnect.tsx
@@ -1,61 +1,65 @@
-import { useState, useCallback, useEffect, useRef } from 'react';
-import WalletConnect from '@walletconnect/client';
-import { IClientMeta, IWalletConnectSession } from '@walletconnect/types';
-import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk';
-import { isMetaTxArray } from '../utils/transactions';
-import { areStringsEqual } from '../utils/strings';
+import { useState, useCallback, useEffect, useRef } from 'react'
+import WalletConnect from '@walletconnect/client'
+import { IClientMeta, IWalletConnectSession } from '@walletconnect/types'
+import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk'
+import { isMetaTxArray } from '../utils/transactions'
+import { areStringsEqual } from '../utils/strings'
 
 const rejectWithMessage = (connector: WalletConnect, id: number | undefined, message: string) => {
-  connector.rejectRequest({ id, error: { message } });
-};
+  connector.rejectRequest({ id, error: { message } })
+}
 
 const useWalletConnect = () => {
-  const { safe, sdk } = useSafeAppsSDK();
-  const [wcClientData, setWcClientData] = useState<IClientMeta | null>(null);
-  const [connector, setConnector] = useState<WalletConnect | undefined>();
+  const { safe, sdk } = useSafeAppsSDK()
+  const [wcClientData, setWcClientData] = useState<IClientMeta | null>(null)
+  const [connector, setConnector] = useState<WalletConnect | undefined>()
 
-  const localStorageSessionKey = useRef(`session_${safe.safeAddress}`);
+  const localStorageSessionKey = useRef(`session_${safe.safeAddress}`)
 
   const wcDisconnect = useCallback(async () => {
     try {
-      await connector?.killSession();
-      setConnector(undefined);
-      setWcClientData(null);
+      await connector?.killSession()
+      setConnector(undefined)
+      setWcClientData(null)
     } catch (error) {
-      console.log('Error trying to close WC session: ', error);
+      console.log('Error trying to close WC session: ', error)
     }
-  }, [connector]);
+  }, [connector])
 
   const wcConnect = useCallback(
     async ({ uri, session }: { uri?: string; session?: IWalletConnectSession }) => {
-      const wcConnector = new WalletConnect({ uri, session, storageId: localStorageSessionKey.current });
-      setConnector(wcConnector);
-      setWcClientData(wcConnector.peerMeta);
+      const wcConnector = new WalletConnect({
+        uri,
+        session,
+        storageId: localStorageSessionKey.current,
+      })
+      setConnector(wcConnector)
+      setWcClientData(wcConnector.peerMeta)
 
       wcConnector.on('session_request', (error, payload) => {
         if (error) {
-          throw error;
+          throw error
         }
 
         wcConnector.approveSession({
           accounts: [safe.safeAddress],
           chainId: safe.chainId,
-        });
+        })
 
-        setWcClientData(payload.params[0].peerMeta);
-      });
+        setWcClientData(payload.params[0].peerMeta)
+      })
 
       wcConnector.on('call_request', async (error, payload) => {
         if (error) {
-          throw error;
+          throw error
         }
 
         try {
-          let result = '0x';
+          let result = '0x'
 
           switch (payload.method) {
             case 'eth_sendTransaction': {
-              const txInfo = payload.params[0];
+              const txInfo = payload.params[0]
               const { safeTxHash } = await sdk.txs.send({
                 txs: [
                   {
@@ -64,90 +68,90 @@ const useWalletConnect = () => {
                     data: txInfo.data || '0x',
                   },
                 ],
-              });
+              })
 
-              result = safeTxHash;
-              break;
+              result = safeTxHash
+              break
             }
             case 'gs_multi_send': {
-              const txs = payload.params;
+              const txs = payload.params
 
               if (!isMetaTxArray(txs)) {
-                throw new Error('INVALID_TRANSACTIONS_PROVIDED');
+                throw new Error('INVALID_TRANSACTIONS_PROVIDED')
               }
 
               const { safeTxHash } = await sdk.txs.send({
-                txs: txs.map((txInfo) => ({
+                txs: txs.map(txInfo => ({
                   to: txInfo.to,
                   value: (txInfo.value || '0x0').toString(),
                   data: txInfo.data || '0x',
                 })),
-              });
+              })
 
-              result = safeTxHash;
-              break;
+              result = safeTxHash
+              break
             }
 
             case 'personal_sign': {
-              const [message, address] = payload.params;
+              const [message, address] = payload.params
 
               if (!areStringsEqual(address, safe.safeAddress)) {
-                throw new Error('The address or message hash is invalid');
+                throw new Error('The address or message hash is invalid')
               }
 
-              await sdk.txs.signMessage(message);
+              await sdk.txs.signMessage(message)
 
-              result = '0x';
-              break;
+              result = '0x'
+              break
             }
 
             case 'eth_sign': {
-              const [address, messageHash] = payload.params;
+              const [address, messageHash] = payload.params
 
               if (!areStringsEqual(address, safe.safeAddress) || !messageHash.startsWith('0x')) {
-                throw new Error('The address or message hash is invalid');
+                throw new Error('The address or message hash is invalid')
               }
 
-              await sdk.txs.signMessage(messageHash);
+              await sdk.txs.signMessage(messageHash)
 
-              result = '0x';
-              break;
+              result = '0x'
+              break
             }
             default: {
-              rejectWithMessage(wcConnector, payload.id, 'METHOD_NOT_SUPPORTED');
-              break;
+              rejectWithMessage(wcConnector, payload.id, 'METHOD_NOT_SUPPORTED')
+              break
             }
           }
 
           wcConnector.approveRequest({
             id: payload.id,
             result,
-          });
+          })
         } catch (err) {
-          rejectWithMessage(wcConnector, payload.id, (err as Error).message);
+          rejectWithMessage(wcConnector, payload.id, (err as Error).message)
         }
-      });
+      })
 
       wcConnector.on('disconnect', (error, payload) => {
         if (error) {
-          throw error;
+          throw error
         }
-        wcDisconnect();
-      });
+        wcDisconnect()
+      })
     },
     [safe, sdk, wcDisconnect],
-  );
+  )
 
   useEffect(() => {
     if (!connector) {
-      const session = localStorage.getItem(localStorageSessionKey.current);
+      const session = localStorage.getItem(localStorageSessionKey.current)
       if (session) {
-        wcConnect({ session: JSON.parse(session) });
+        wcConnect({ session: JSON.parse(session) })
       }
     }
-  }, [connector, wcConnect]);
+  }, [connector, wcConnect])
 
-  return { wcClientData, wcConnect, wcDisconnect };
-};
+  return { wcClientData, wcConnect, wcDisconnect }
+}
 
-export default useWalletConnect;
+export default useWalletConnect
diff --git a/apps/wallet-connect/src/hooks/useWebcam.tsx b/apps/wallet-connect/src/hooks/useWebcam.tsx
index 2b07be3fc..164717552 100644
--- a/apps/wallet-connect/src/hooks/useWebcam.tsx
+++ b/apps/wallet-connect/src/hooks/useWebcam.tsx
@@ -1,47 +1,47 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react'
 
 function useWebcam() {
-  const videoRef = useRef<HTMLVideoElement>(null);
+  const videoRef = useRef<HTMLVideoElement>(null)
 
-  const [isLoadingWebcam, setIsLoadingWebcam] = useState(true);
-  const [errorConnectingWebcam, setErrorConnectingWebcam] = useState(false);
+  const [isLoadingWebcam, setIsLoadingWebcam] = useState(true)
+  const [errorConnectingWebcam, setErrorConnectingWebcam] = useState(false)
 
   useEffect(() => {
-    let stream: MediaStream | null;
+    let stream: MediaStream | null
     async function getUserWebcam() {
-      setIsLoadingWebcam(true);
+      setIsLoadingWebcam(true)
       try {
         // see https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
-        stream = await navigator.mediaDevices.getUserMedia({ video: true });
+        stream = await navigator.mediaDevices.getUserMedia({ video: true })
 
         if (videoRef.current) {
-          videoRef.current.srcObject = stream;
-          videoRef.current.setAttribute('playsinline', 'true'); // required to tell iOS safari we don't want fullscreen
-          videoRef.current.play();
-          setErrorConnectingWebcam(false);
+          videoRef.current.srcObject = stream
+          videoRef.current.setAttribute('playsinline', 'true') // required to tell iOS safari we don't want fullscreen
+          videoRef.current.play()
+          setErrorConnectingWebcam(false)
         }
       } catch (error) {
-        setErrorConnectingWebcam(true);
-        console.log('Error connecting the camera: ', error);
+        setErrorConnectingWebcam(true)
+        console.log('Error connecting the camera: ', error)
       }
-      setIsLoadingWebcam(false);
+      setIsLoadingWebcam(false)
     }
 
-    getUserWebcam();
+    getUserWebcam()
 
     // closing webcam connection on unmount
     return () => {
       stream?.getTracks().forEach((track: MediaStreamTrack) => {
-        track.stop();
-      });
-    };
-  }, []);
+        track.stop()
+      })
+    }
+  }, [])
 
   return {
     videoRef,
     isLoadingWebcam,
     errorConnectingWebcam,
-  };
+  }
 }
 
-export default useWebcam;
+export default useWebcam
diff --git a/apps/wallet-connect/src/index.tsx b/apps/wallet-connect/src/index.tsx
index a5c63f6ce..50ad238e5 100644
--- a/apps/wallet-connect/src/index.tsx
+++ b/apps/wallet-connect/src/index.tsx
@@ -1,10 +1,10 @@
-import ReactDOM from 'react-dom';
-import App from './App';
-import { SafeProvider } from '@gnosis.pm/safe-apps-react-sdk';
-import { Loader, theme } from '@gnosis.pm/safe-react-components';
-import { ThemeProvider } from 'styled-components';
+import ReactDOM from 'react-dom'
+import App from './App'
+import { SafeProvider } from '@gnosis.pm/safe-apps-react-sdk'
+import { Loader, theme } from '@gnosis.pm/safe-react-components'
+import { ThemeProvider } from 'styled-components'
 
-import GlobalStyles from './global';
+import GlobalStyles from './global'
 
 ReactDOM.render(
   <>
@@ -16,4 +16,4 @@ ReactDOM.render(
     </ThemeProvider>
   </>,
   document.getElementById('root'),
-);
+)
diff --git a/apps/wallet-connect/src/setupTests.ts b/apps/wallet-connect/src/setupTests.ts
index 244afab9b..68e3e8b74 100644
--- a/apps/wallet-connect/src/setupTests.ts
+++ b/apps/wallet-connect/src/setupTests.ts
@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom/extend-expect'
 
 Object.defineProperty(window.navigator, 'mediaDevices', {
   writable: true,
@@ -12,17 +12,17 @@ Object.defineProperty(window.navigator, 'mediaDevices', {
       ],
     }),
   },
-});
+})
 
 Object.defineProperty(window.HTMLMediaElement.prototype, 'play', {
   writable: true,
   value: jest.fn(),
-});
+})
 
 Object.defineProperty(window.HTMLVideoElement.prototype, 'readyState', {
   writable: false,
   value: window.HTMLVideoElement.prototype.HAVE_ENOUGH_DATA,
-});
+})
 
 Object.defineProperty(window.HTMLCanvasElement.prototype, 'getContext', {
   writable: false,
@@ -34,8 +34,8 @@ Object.defineProperty(window.HTMLCanvasElement.prototype, 'getContext', {
           data: 'image test data',
           width: 450,
           height: 450,
-        };
+        }
       }),
-    };
+    }
   },
-});
+})
diff --git a/apps/wallet-connect/src/typings/custom.d.ts b/apps/wallet-connect/src/typings/custom.d.ts
index 16ef5c298..2e323377f 100644
--- a/apps/wallet-connect/src/typings/custom.d.ts
+++ b/apps/wallet-connect/src/typings/custom.d.ts
@@ -1,4 +1,4 @@
 declare module '*.svg' {
-    const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-    export default content;
-  }
\ No newline at end of file
+  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>
+  export default content
+}
diff --git a/apps/wallet-connect/src/typings/fonts.d.ts b/apps/wallet-connect/src/typings/fonts.d.ts
index 7bbf68bbc..85a0dfc7e 100644
--- a/apps/wallet-connect/src/typings/fonts.d.ts
+++ b/apps/wallet-connect/src/typings/fonts.d.ts
@@ -1,2 +1,2 @@
-declare module '*.woff';
-declare module '*.woff2';
+declare module '*.woff'
+declare module '*.woff2'
diff --git a/apps/wallet-connect/src/utils/images.ts b/apps/wallet-connect/src/utils/images.ts
index fda9f49f7..57f8f58bb 100644
--- a/apps/wallet-connect/src/utils/images.ts
+++ b/apps/wallet-connect/src/utils/images.ts
@@ -1,20 +1,20 @@
 const blobToImageData = async (blob: string) => {
   return new Promise<HTMLImageElement>((resolve, reject) => {
-    let img = new Image();
-    img.src = blob;
-    img.onload = () => resolve(img);
-    img.onerror = (err) => reject(err);
-  }).then((img) => {
-    let canvas = document.createElement('canvas');
-    canvas.width = img.width;
-    canvas.height = img.height;
-    let ctx = canvas.getContext('2d');
+    let img = new Image()
+    img.src = blob
+    img.onload = () => resolve(img)
+    img.onerror = err => reject(err)
+  }).then(img => {
+    let canvas = document.createElement('canvas')
+    canvas.width = img.width
+    canvas.height = img.height
+    let ctx = canvas.getContext('2d')
 
-    if (!ctx) throw new Error('Could not generate context from canvas');
+    if (!ctx) throw new Error('Could not generate context from canvas')
 
-    ctx.drawImage(img, 0, 0);
-    return ctx.getImageData(0, 0, img.width, img.height); // some browsers synchronously decode image here
-  });
-};
+    ctx.drawImage(img, 0, 0)
+    return ctx.getImageData(0, 0, img.width, img.height) // some browsers synchronously decode image here
+  })
+}
 
-export { blobToImageData };
+export { blobToImageData }
diff --git a/apps/wallet-connect/src/utils/strings.ts b/apps/wallet-connect/src/utils/strings.ts
index a957a5786..de6a74bf2 100644
--- a/apps/wallet-connect/src/utils/strings.ts
+++ b/apps/wallet-connect/src/utils/strings.ts
@@ -1,2 +1,2 @@
 export const areStringsEqual = (string1: string, string2: string): boolean =>
-  string1.toLowerCase() === string2.toLowerCase();
+  string1.toLowerCase() === string2.toLowerCase()
diff --git a/apps/wallet-connect/src/utils/test-helpers.tsx b/apps/wallet-connect/src/utils/test-helpers.tsx
index 6f4498966..e99211227 100644
--- a/apps/wallet-connect/src/utils/test-helpers.tsx
+++ b/apps/wallet-connect/src/utils/test-helpers.tsx
@@ -1,8 +1,8 @@
-import { render } from '@testing-library/react';
-import { ThemeProvider } from 'styled-components';
-import { theme } from '@gnosis.pm/safe-react-components';
+import { render } from '@testing-library/react'
+import { ThemeProvider } from 'styled-components'
+import { theme } from '@gnosis.pm/safe-react-components'
 
-import GlobalStyles from '../global';
+import GlobalStyles from '../global'
 
 function renderWithProviders(ui: JSX.Element) {
   return render(
@@ -10,7 +10,7 @@ function renderWithProviders(ui: JSX.Element) {
       <GlobalStyles />
       <ThemeProvider theme={theme}>{ui}</ThemeProvider>
     </>,
-  );
+  )
 }
 
-export { renderWithProviders };
+export { renderWithProviders }
diff --git a/apps/wallet-connect/src/utils/transactions.ts b/apps/wallet-connect/src/utils/transactions.ts
index 058381b2f..3180ea8ac 100644
--- a/apps/wallet-connect/src/utils/transactions.ts
+++ b/apps/wallet-connect/src/utils/transactions.ts
@@ -1,46 +1,46 @@
 // Type for gs_multi_send transaction, taken from https://github.com/gnosis/contract-proxy-kit/blob/master/src/utils/transactions.ts#L31
-export type NumberLike = number | string | bigint;
+export type NumberLike = number | string | bigint
 
 export interface MetaTx {
-  to: string;
-  value?: NumberLike;
-  data?: string;
+  to: string
+  value?: NumberLike
+  data?: string
 }
 
 function isDecimalString(value: string): boolean {
-  return !value.match(/^[0-9]*$/);
+  return !value.match(/^[0-9]*$/)
 }
 
 function isHexString(value: string, length?: number) {
   if (typeof value !== 'string' || !value.match(/^0x[0-9A-Fa-f]*$/)) {
-    return false;
+    return false
   }
 
   if (length && value.length !== 2 + 2 * length) {
-    return false;
+    return false
   }
 
-  return true;
+  return true
 }
 
 function isNumberLike(object: any): object is MetaTx {
-  if (typeof object === 'string' && !isHexString(object) && !isDecimalString(object)) return false;
-  return typeof object in ['number', 'string', 'bigint'];
+  if (typeof object === 'string' && !isHexString(object) && !isDecimalString(object)) return false
+  return typeof object in ['number', 'string', 'bigint']
 }
 
 export function isMetaTx(object: any): object is MetaTx {
-  if (typeof object.to !== 'string') return false;
-  if (object.value && isNumberLike(object.value)) return false;
-  if (object.data && !isHexString(object.data)) return false;
+  if (typeof object.to !== 'string') return false
+  if (object.value && isNumberLike(object.value)) return false
+  if (object.data && !isHexString(object.data)) return false
   // Make sure that operation is not set to avoid unexpected behaviour
-  if (typeof object.operation !== 'undefined') return false;
-  return true;
+  if (typeof object.operation !== 'undefined') return false
+  return true
 }
 
 export function isMetaTxArray(object: any): object is MetaTx[] {
-  if (!Array.isArray(object)) return false;
+  if (!Array.isArray(object)) return false
   for (let tx of object) {
-    if (!isMetaTx(tx)) return false;
+    if (!isMetaTx(tx)) return false
   }
-  return true;
+  return true
 }
diff --git a/package.json b/package.json
index c3ffc9c05..ffc12db57 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "test:coverage": "yarn workspaces run test --coverage --watchAll=false",
     "deploy:pr": "yarn workspaces run deploy:pr",
     "deploy:s3": "yarn workspaces run deploy:s3",
+    "format": "prettier --ignore-path .gitignore --write './apps/**/*.{js,jsx,ts,tsx}'",
     "lint:check": "eslint './apps/**/*.{js,jsx,ts,tsx}'",
     "lint:fix": "yarn lint:check --fix",
     "start:compound": "yarn workspace compound start",
@@ -37,12 +38,12 @@
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^14.0.0",
     "@types/jest": "^27.4.1",
-    "@types/node": "^17.0.23",
+    "@types/node": "^17.0.29",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
-    "@types/styled-components": "^5.1.24",
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
-    "@typescript-eslint/parser": "^5.17.0",
+    "@types/styled-components": "^5.1.25",
+    "@typescript-eslint/eslint-plugin": "^5.21.0",
+    "@typescript-eslint/parser": "^5.21.0",
     "assert": "^2.0.0",
     "babel-eslint": "10.1.0",
     "buffer": "^6.0.3",
@@ -50,20 +51,21 @@
     "crypto-browserify": "^3.12.0",
     "cz-conventional-changelog": "^3.3.0",
     "dotenv-cli": "^5.1.0",
-    "eslint": "^8.12.0",
+    "eslint": "^8.14.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-config-react-app": "^7.0.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.4.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
     "git-cz": "^4.8.0",
     "https-browserify": "^1.0.0",
     "husky": "7.0.4",
+    "lint-staged": "^12.4.1",
     "os-browserify": "^0.3.0",
-    "prettier": "^2.6.1",
+    "prettier": "^2.6.2",
     "process": "^0.11.10",
     "react-app-rewired": "^2.1.6",
     "stream-browserify": "^3.0.0",
@@ -75,5 +77,11 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
+  },
+  "lint-staged": {
+    "./apps/**/*.{js,jsx,ts,tsx}": [
+      "eslint --fix",
+      "prettier --ignore-path .gitignore --write"
+    ]
   }
 }
diff --git a/yarn.lock b/yarn.lock
index fb429fa19..5985f5f83 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -43,38 +43,12 @@
   dependencies:
     "@babel/highlight" "^7.16.7"
 
-"@babel/compat-data@^7.13.11", "@babel/compat-data@^7.16.4", "@babel/compat-data@^7.16.8", "@babel/compat-data@^7.17.0":
-  version "7.17.0"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.0.tgz#86850b8597ea6962089770952075dcaabb8dba34"
-  integrity sha512-392byTlpGWXMv4FbyWw3sAZ/FrW/DrwqLGXpy0mbyNe9Taqv1mg9yON5/o0cnr8XYCkFTZbC1eV+c+LAROgrng==
-
-"@babel/compat-data@^7.17.7":
+"@babel/compat-data@^7.13.11", "@babel/compat-data@^7.16.8", "@babel/compat-data@^7.17.0", "@babel/compat-data@^7.17.7":
   version "7.17.7"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.7.tgz#078d8b833fbbcc95286613be8c716cef2b519fa2"
   integrity sha512-p8pdE6j0a29TNGebNm7NzYZWB3xVZJBZ7XGs42uAKzQo8VQ3F0By/cQCtUEABwIqw5zo6WA4NbmxsfzADzMKnQ==
 
-"@babel/core@^7.1.0", "@babel/core@^7.12.3", "@babel/core@^7.16.0", "@babel/core@^7.7.2", "@babel/core@^7.7.5":
-  version "7.17.5"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.17.5.tgz#6cd2e836058c28f06a4ca8ee7ed955bbf37c8225"
-  integrity sha512-/BBMw4EvjmyquN5O+t5eh0+YqB3XXJkYD2cjKpYtWOfFy4lQ4UozNSmxAcWT8r2XtZs0ewG+zrfsqeR15i1ajA==
-  dependencies:
-    "@ampproject/remapping" "^2.1.0"
-    "@babel/code-frame" "^7.16.7"
-    "@babel/generator" "^7.17.3"
-    "@babel/helper-compilation-targets" "^7.16.7"
-    "@babel/helper-module-transforms" "^7.16.7"
-    "@babel/helpers" "^7.17.2"
-    "@babel/parser" "^7.17.3"
-    "@babel/template" "^7.16.7"
-    "@babel/traverse" "^7.17.3"
-    "@babel/types" "^7.17.0"
-    convert-source-map "^1.7.0"
-    debug "^4.1.0"
-    gensync "^1.0.0-beta.2"
-    json5 "^2.1.2"
-    semver "^6.3.0"
-
-"@babel/core@^7.11.1", "@babel/core@^7.8.0":
+"@babel/core@^7.1.0", "@babel/core@^7.11.1", "@babel/core@^7.12.3", "@babel/core@^7.16.0", "@babel/core@^7.7.2", "@babel/core@^7.7.5", "@babel/core@^7.8.0":
   version "7.17.8"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.17.8.tgz#3dac27c190ebc3a4381110d46c80e77efe172e1a"
   integrity sha512-OdQDV/7cRBtJHLSOBqqbYNkOcydOgnX59TZx4puf41fzcVtN3e/4yqY8lMQsK+5X2lJtAdmA+6OHqsj1hBJ4IQ==
@@ -104,16 +78,7 @@
     eslint-visitor-keys "^2.1.0"
     semver "^6.3.0"
 
-"@babel/generator@^7.17.3", "@babel/generator@^7.7.2":
-  version "7.17.3"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.3.tgz#a2c30b0c4f89858cb87050c3ffdfd36bdf443200"
-  integrity sha512-+R6Dctil/MgUsZsZAkYgK+ADNSZzJRRy0TvY65T71z/CR854xHQ1EweBYXdfT+HNeN7w0cSJJEzgxZMv40pxsg==
-  dependencies:
-    "@babel/types" "^7.17.0"
-    jsesc "^2.5.1"
-    source-map "^0.5.0"
-
-"@babel/generator@^7.17.7":
+"@babel/generator@^7.17.3", "@babel/generator@^7.17.7", "@babel/generator@^7.7.2":
   version "7.17.7"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.7.tgz#8da2599beb4a86194a3b24df6c085931d9ee45ad"
   integrity sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==
@@ -137,17 +102,7 @@
     "@babel/helper-explode-assignable-expression" "^7.16.7"
     "@babel/types" "^7.16.7"
 
-"@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.16.7.tgz#06e66c5f299601e6c7da350049315e83209d551b"
-  integrity sha512-mGojBwIWcwGD6rfqgRXVlVYmPAv7eOpIemUG3dGnDdCY4Pae70ROij3XmfrH6Fa1h1aiDylpglbZyktfzyo/hA==
-  dependencies:
-    "@babel/compat-data" "^7.16.4"
-    "@babel/helper-validator-option" "^7.16.7"
-    browserslist "^4.17.5"
-    semver "^6.3.0"
-
-"@babel/helper-compilation-targets@^7.17.7":
+"@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.16.7", "@babel/helper-compilation-targets@^7.17.7":
   version "7.17.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.7.tgz#a3c2924f5e5f0379b356d4cfb313d1414dc30e46"
   integrity sha512-UFzlz2jjd8kroj0hmCFV5zr+tQPi1dpC2cRsDV/3IEW8bJfCPrPpmcSN6ZS8RqIq4LXcmpipCQFPddyFA5Yc7w==
@@ -243,21 +198,7 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
-"@babel/helper-module-transforms@^7.16.7":
-  version "7.17.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.17.6.tgz#3c3b03cc6617e33d68ef5a27a67419ac5199ccd0"
-  integrity sha512-2ULmRdqoOMpdvkbT8jONrZML/XALfzxlb052bldftkicAUy8AxSCkD5trDPQcwHNmolcl7wP6ehNqMlyUw6AaA==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.16.7"
-    "@babel/helper-module-imports" "^7.16.7"
-    "@babel/helper-simple-access" "^7.16.7"
-    "@babel/helper-split-export-declaration" "^7.16.7"
-    "@babel/helper-validator-identifier" "^7.16.7"
-    "@babel/template" "^7.16.7"
-    "@babel/traverse" "^7.17.3"
-    "@babel/types" "^7.17.0"
-
-"@babel/helper-module-transforms@^7.17.7":
+"@babel/helper-module-transforms@^7.16.7", "@babel/helper-module-transforms@^7.17.7":
   version "7.17.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.17.7.tgz#3943c7f777139e7954a5355c815263741a9c1cbd"
   integrity sha512-VmZD99F3gNTYB7fJRDTi+u6l/zxY0BE6OIxPSU7a50s6ZUQkHwSDmV92FfM+oCG0pZRVojGYhkR8I0OGeCVREw==
@@ -303,14 +244,7 @@
     "@babel/traverse" "^7.16.7"
     "@babel/types" "^7.16.7"
 
-"@babel/helper-simple-access@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.16.7.tgz#d656654b9ea08dbb9659b69d61063ccd343ff0f7"
-  integrity sha512-ZIzHVyoeLMvXMN/vok/a4LWRy8G2v205mNP0XOuf9XRLyX5/u9CnVulUtDgUTama3lT+bf/UqucuZjqiGuTS1g==
-  dependencies:
-    "@babel/types" "^7.16.7"
-
-"@babel/helper-simple-access@^7.17.7":
+"@babel/helper-simple-access@^7.16.7", "@babel/helper-simple-access@^7.17.7":
   version "7.17.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.17.7.tgz#aaa473de92b7987c6dfa7ce9a7d9674724823367"
   integrity sha512-txyMCGroZ96i+Pxr3Je3lzEJjqwaRC9buMUgtomcrLe5Nd0+fk1h0LLA+ixUF5OW7AhHuQ7Es1WcQJZmZsz2XA==
@@ -351,15 +285,6 @@
     "@babel/traverse" "^7.16.8"
     "@babel/types" "^7.16.8"
 
-"@babel/helpers@^7.17.2":
-  version "7.17.2"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.17.2.tgz#23f0a0746c8e287773ccd27c14be428891f63417"
-  integrity sha512-0Qu7RLR1dILozr/6M0xgj+DFPmi6Bnulgm9M8BVa9ZCWxDqlSnqt3cf8IDPB5m45sVXUZ0kuQAgUrdSFFH79fQ==
-  dependencies:
-    "@babel/template" "^7.16.7"
-    "@babel/traverse" "^7.17.0"
-    "@babel/types" "^7.17.0"
-
 "@babel/helpers@^7.17.8":
   version "7.17.8"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.17.8.tgz#288450be8c6ac7e4e44df37bcc53d345e07bc106"
@@ -378,12 +303,7 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.16.7", "@babel/parser@^7.17.3", "@babel/parser@^7.7.0":
-  version "7.17.3"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.3.tgz#b07702b982990bf6fdc1da5049a23fece4c5c3d0"
-  integrity sha512-7yJPvPV+ESz2IUTPbOL+YkIGyCqOyNIzdguKQuJGnH7bg1WTIifuM21YqokFt/THWh1AkCRn9IgoykTRCBVpzA==
-
-"@babel/parser@^7.17.8":
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.16.7", "@babel/parser@^7.17.3", "@babel/parser@^7.17.8", "@babel/parser@^7.7.0":
   version "7.17.8"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.8.tgz#2817fb9d885dd8132ea0f8eb615a6388cca1c240"
   integrity sha512-BoHhDJrJXqcg+ZL16Xv39H9n+AqJ4pcDrQBGZN+wHxIysrLZ3/ECwCBUch/1zUNhnsXULcONU3Ei5Hmkfk6kiQ==
@@ -1122,14 +1042,7 @@
     core-js-pure "^3.20.2"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.8", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
-  version "7.17.2"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941"
-  integrity sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
-"@babel/runtime@^7.11.2":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.8", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.17.8"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.8.tgz#3e56e4aff81befa55ac3ac6a0967349fd1c5bca2"
   integrity sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA==
@@ -1145,7 +1058,7 @@
     "@babel/parser" "^7.16.7"
     "@babel/types" "^7.16.7"
 
-"@babel/traverse@^7.13.0", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8", "@babel/traverse@^7.17.0", "@babel/traverse@^7.17.3", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.2":
+"@babel/traverse@^7.13.0", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8", "@babel/traverse@^7.17.3", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.2":
   version "7.17.3"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.3.tgz#0ae0f15b27d9a92ba1f2263358ea7c4e7db47b57"
   integrity sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==
@@ -1406,10 +1319,10 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
-"@eslint/eslintrc@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.2.1.tgz#8b5e1c49f4077235516bc9ec7d41378c0f69b8c6"
-  integrity sha512-bxvbYnBPN1Gibwyp6NrpnFzA3YtRL3BBAyEAFVIpNTm2Rn4Vy87GA5M4aSn3InRrlsbX5N0GW7XIx+U4SAEKdQ==
+"@eslint/eslintrc@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.2.2.tgz#4989b9e8c0216747ee7cca314ae73791bb281aae"
+  integrity sha512-lTVWHs7O2hjBFZunXTZYnYqtB9GakA1lnxIf+gKq2nY5gxkkNi/lQvveW6t8gFdOHTg6nG50Xs95PrLqVpcaLg==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
@@ -1820,22 +1733,15 @@
     react-media "^1.10.0"
     web3-utils "^1.6.0"
 
-"@gnosis.pm/safe-react-components@^1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@gnosis.pm/safe-react-components/-/safe-react-components-1.1.3.tgz#6c27043b9e7d0a3cf9e7c754b92bba10b7a3e0d5"
-  integrity sha512-OjgF5NTT7IjGkjp/kB4SLfN5gcyAg3yHDD505c4B+yUZ14RgwlF+cbDCKylC40uPRGl/pBrUlRbKOV8E6Y1L6w==
+"@gnosis.pm/safe-react-components@^1.1.4":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@gnosis.pm/safe-react-components/-/safe-react-components-1.1.4.tgz#4db12424bd0227fa28148230d231e61cd145ebe6"
+  integrity sha512-OrVP54gc05dY1H6PrVk/vz6Fg0yFrCoNB9FER+s/1q/nnVMCkeW6/qA3Cr87O9MOmTql/gy+PO9jQJXYvRkYvg==
   dependencies:
     react-media "^1.10.0"
     web3-utils "^1.6.0"
 
-"@gnosis.pm/safe-react-gateway-sdk@^2.10.0":
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/@gnosis.pm/safe-react-gateway-sdk/-/safe-react-gateway-sdk-2.10.0.tgz#88e2307d21d548ea43dde8fa33630d3539e39741"
-  integrity sha512-P0A6XgjpEwCzZpk0vjLOYuaOmXL020khJF9FQRwCYPrllPUzrGjpm5gdqExNdnefrrDUKeWUumkucoXqBaMblA==
-  dependencies:
-    cross-fetch "^3.1.5"
-
-"@gnosis.pm/safe-react-gateway-sdk@^2.10.1":
+"@gnosis.pm/safe-react-gateway-sdk@^2.10.0", "@gnosis.pm/safe-react-gateway-sdk@^2.10.1":
   version "2.10.1"
   resolved "https://registry.yarnpkg.com/@gnosis.pm/safe-react-gateway-sdk/-/safe-react-gateway-sdk-2.10.1.tgz#62f4abf733855e734aa1eab4be4778ccd08fe689"
   integrity sha512-uIosTEqmoxhCy7WS8sIzXde2nJQwzC+KfNoeDQVeLZtEpnRZQ7R+N/qDtORMUJfKeyc8cIwkKXmVc2DRgSRxOQ==
@@ -3038,12 +2944,7 @@
     jest-matcher-utils "^27.0.0"
     pretty-format "^27.0.0"
 
-"@types/json-schema@*", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
-  version "7.0.9"
-  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
-  integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
-
-"@types/json-schema@^7.0.4":
+"@types/json-schema@*", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
   version "7.0.11"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
   integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
@@ -3068,21 +2969,16 @@
   resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
   integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
 
-"@types/node@*", "@types/node@>=12":
-  version "17.0.21"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.21.tgz#864b987c0c68d07b4345845c3e63b75edd143644"
-  integrity sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==
+"@types/node@*", "@types/node@>=12", "@types/node@^17.0.29":
+  version "17.0.29"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.29.tgz#7f2e1159231d4a077bb660edab0fde373e375a3d"
+  integrity sha512-tx5jMmMFwx7wBwq/V7OohKDVb/JwJU5qCVkeLMh1//xycAJ/ESuw9aJ9SEtlCZDYi2pBfe4JkisSoAtbOsBNAA==
 
 "@types/node@^12.12.6":
   version "12.20.46"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.46.tgz#7e49dee4c54fd19584e6a9e0da5f3dc2e9136bc7"
   integrity sha512-cPjLXj8d6anFPzFvOPxS3fvly3Shm5nTfl6g8X5smexixbuGUf7hfr21J5tX9JW+UPStp/5P5R8qrKL5IyVJ+A==
 
-"@types/node@^17.0.23":
-  version "17.0.23"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.23.tgz#3b41a6e643589ac6442bdbd7a4a3ded62f33f7da"
-  integrity sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw==
-
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
@@ -3132,14 +3028,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@*":
-  version "17.0.13"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.13.tgz#a3323b974ee4280070982b3112351bb1952a7809"
-  integrity sha512-wEP+B8hzvy6ORDv1QBhcQia4j6ea4SFIBttHYpXKPFZRviBvknq0FRh3VrIxeXUmsPkwuXVZrVGG7KUVONmXCQ==
-  dependencies:
-    "@types/react" "*"
-
-"@types/react-dom@^17.0.14":
+"@types/react-dom@*", "@types/react-dom@^17.0.14":
   version "17.0.14"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.14.tgz#c8f917156b652ddf807711f5becbd2ab018dea9f"
   integrity sha512-H03xwEP1oXmSfl3iobtmQ/2dHF5aBHr8aUMwyGZya6OW45G+xtdzmq6HkncefiBt5JU8DVyaWl/nWZbjZCnzAQ==
@@ -3170,16 +3059,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*":
-  version "17.0.39"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.39.tgz#d0f4cde092502a6db00a1cded6e6bf2abb7633ce"
-  integrity sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@^17.0.43":
+"@types/react@*", "@types/react@^17.0.43":
   version "17.0.43"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.43.tgz#4adc142887dd4a2601ce730bc56c3436fdb07a55"
   integrity sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==
@@ -3239,10 +3119,10 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
   integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
 
-"@types/styled-components@^5.1.24":
-  version "5.1.24"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.24.tgz#b52ae677f03ea8a6018aa34c6c96b7018b7a3571"
-  integrity sha512-mz0fzq2nez+Lq5IuYammYwWgyLUE6OMAJTQL9D8hFLP4Pkh7gVYJii/VQWxq8/TK34g/OrkehXaFNdcEKcItug==
+"@types/styled-components@^5.1.25":
+  version "5.1.25"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.25.tgz#0177c4ab5fa7c6ed0565d36f597393dae3f380ad"
+  integrity sha512-fgwl+0Pa8pdkwXRoVPP9JbqF0Ivo9llnmsm+7TCI330kbPIFd9qv1Lrhr37shf4tnxCOSu+/IgqM7uJXLWZZNQ==
   dependencies:
     "@types/hoist-non-react-statics" "*"
     "@types/react" "*"
@@ -3279,14 +3159,14 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@^5.17.0", "@typescript-eslint/eslint-plugin@^5.5.0":
-  version "5.17.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.17.0.tgz#704eb4e75039000531255672bf1c85ee85cf1d67"
-  integrity sha512-qVstvQilEd89HJk3qcbKt/zZrfBZ+9h2ynpAGlWjWiizA7m/MtLT9RoX6gjtpE500vfIg8jogAkDzdCxbsFASQ==
+"@typescript-eslint/eslint-plugin@^5.21.0", "@typescript-eslint/eslint-plugin@^5.5.0":
+  version "5.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.21.0.tgz#bfc22e0191e6404ab1192973b3b4ea0461c1e878"
+  integrity sha512-fTU85q8v5ZLpoZEyn/u1S2qrFOhi33Edo2CZ0+q1gDaWWm0JuPh3bgOyU8lM0edIEYgKLDkPFiZX2MOupgjlyg==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.17.0"
-    "@typescript-eslint/type-utils" "5.17.0"
-    "@typescript-eslint/utils" "5.17.0"
+    "@typescript-eslint/scope-manager" "5.21.0"
+    "@typescript-eslint/type-utils" "5.21.0"
+    "@typescript-eslint/utils" "5.21.0"
     debug "^4.3.2"
     functional-red-black-tree "^1.0.1"
     ignore "^5.1.8"
@@ -3301,14 +3181,14 @@
   dependencies:
     "@typescript-eslint/utils" "5.17.0"
 
-"@typescript-eslint/parser@^5.17.0", "@typescript-eslint/parser@^5.5.0":
-  version "5.17.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.17.0.tgz#7def77d5bcd8458d12d52909118cf3f0a45f89d5"
-  integrity sha512-aRzW9Jg5Rlj2t2/crzhA2f23SIYFlF9mchGudyP0uiD6SenIxzKoLjwzHbafgHn39dNV/TV7xwQkLfFTZlJ4ig==
+"@typescript-eslint/parser@^5.21.0", "@typescript-eslint/parser@^5.5.0":
+  version "5.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.21.0.tgz#6cb72673dbf3e1905b9c432175a3c86cdaf2071f"
+  integrity sha512-8RUwTO77hstXUr3pZoWZbRQUxXcSXafZ8/5gpnQCfXvgmP9gpNlRGlWzvfbEQ14TLjmtU8eGnONkff8U2ui2Eg==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.17.0"
-    "@typescript-eslint/types" "5.17.0"
-    "@typescript-eslint/typescript-estree" "5.17.0"
+    "@typescript-eslint/scope-manager" "5.21.0"
+    "@typescript-eslint/types" "5.21.0"
+    "@typescript-eslint/typescript-estree" "5.21.0"
     debug "^4.3.2"
 
 "@typescript-eslint/scope-manager@5.17.0":
@@ -3319,12 +3199,20 @@
     "@typescript-eslint/types" "5.17.0"
     "@typescript-eslint/visitor-keys" "5.17.0"
 
-"@typescript-eslint/type-utils@5.17.0":
-  version "5.17.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.17.0.tgz#1c4549d68c89877662224aabb29fbbebf5fc9672"
-  integrity sha512-3hU0RynUIlEuqMJA7dragb0/75gZmwNwFf/QJokWzPehTZousP/MNifVSgjxNcDCkM5HI2K22TjQWUmmHUINSg==
+"@typescript-eslint/scope-manager@5.21.0":
+  version "5.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.21.0.tgz#a4b7ed1618f09f95e3d17d1c0ff7a341dac7862e"
+  integrity sha512-XTX0g0IhvzcH/e3393SvjRCfYQxgxtYzL3UREteUneo72EFlt7UNoiYnikUtmGVobTbhUDByhJ4xRBNe+34kOQ==
   dependencies:
-    "@typescript-eslint/utils" "5.17.0"
+    "@typescript-eslint/types" "5.21.0"
+    "@typescript-eslint/visitor-keys" "5.21.0"
+
+"@typescript-eslint/type-utils@5.21.0":
+  version "5.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.21.0.tgz#ff89668786ad596d904c21b215e5285da1b6262e"
+  integrity sha512-MxmLZj0tkGlkcZCSE17ORaHl8Th3JQwBzyXL/uvC6sNmu128LsgjTX0NIzy+wdH2J7Pd02GN8FaoudJntFvSOw==
+  dependencies:
+    "@typescript-eslint/utils" "5.21.0"
     debug "^4.3.2"
     tsutils "^3.21.0"
 
@@ -3333,6 +3221,11 @@
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.17.0.tgz#861ec9e669ffa2aa9b873dd4d28d9b1ce26d216f"
   integrity sha512-AgQ4rWzmCxOZLioFEjlzOI3Ch8giDWx8aUDxyNw9iOeCvD3GEYAB7dxWGQy4T/rPVe8iPmu73jPHuaSqcjKvxw==
 
+"@typescript-eslint/types@5.21.0":
+  version "5.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.21.0.tgz#8cdb9253c0dfce3f2ab655b9d36c03f72e684017"
+  integrity sha512-XnOOo5Wc2cBlq8Lh5WNvAgHzpjnEzxn4CJBwGkcau7b/tZ556qrWXQz4DJyChYg8JZAD06kczrdgFPpEQZfDsA==
+
 "@typescript-eslint/typescript-estree@5.17.0":
   version "5.17.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.17.0.tgz#a7cba7dfc8f9cc2ac78c18584e684507df4f2488"
@@ -3346,7 +3239,20 @@
     semver "^7.3.5"
     tsutils "^3.21.0"
 
-"@typescript-eslint/utils@5.17.0", "@typescript-eslint/utils@^5.13.0":
+"@typescript-eslint/typescript-estree@5.21.0":
+  version "5.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.21.0.tgz#9f0c233e28be2540eaed3df050f0d54fb5aa52de"
+  integrity sha512-Y8Y2T2FNvm08qlcoSMoNchh9y2Uj3QmjtwNMdRQkcFG7Muz//wfJBGBxh8R7HAGQFpgYpdHqUpEoPQk+q9Kjfg==
+  dependencies:
+    "@typescript-eslint/types" "5.21.0"
+    "@typescript-eslint/visitor-keys" "5.21.0"
+    debug "^4.3.2"
+    globby "^11.0.4"
+    is-glob "^4.0.3"
+    semver "^7.3.5"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/utils@5.17.0":
   version "5.17.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.17.0.tgz#549a9e1d491c6ccd3624bc3c1b098f5cfb45f306"
   integrity sha512-DVvndq1QoxQH+hFv+MUQHrrWZ7gQ5KcJzyjhzcqB1Y2Xes1UQQkTRPUfRpqhS8mhTWsSb2+iyvDW1Lef5DD7vA==
@@ -3358,6 +3264,18 @@
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
+"@typescript-eslint/utils@5.21.0", "@typescript-eslint/utils@^5.13.0":
+  version "5.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.21.0.tgz#51d7886a6f0575e23706e5548c7e87bce42d7c18"
+  integrity sha512-q/emogbND9wry7zxy7VYri+7ydawo2HDZhRZ5k6yggIvXa7PvBbAAZ4PFH/oZLem72ezC4Pr63rJvDK/sTlL8Q==
+  dependencies:
+    "@types/json-schema" "^7.0.9"
+    "@typescript-eslint/scope-manager" "5.21.0"
+    "@typescript-eslint/types" "5.21.0"
+    "@typescript-eslint/typescript-estree" "5.21.0"
+    eslint-scope "^5.1.1"
+    eslint-utils "^3.0.0"
+
 "@typescript-eslint/visitor-keys@5.17.0":
   version "5.17.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.17.0.tgz#52daae45c61b0211b4c81b53a71841911e479128"
@@ -3366,6 +3284,14 @@
     "@typescript-eslint/types" "5.17.0"
     eslint-visitor-keys "^3.0.0"
 
+"@typescript-eslint/visitor-keys@5.21.0":
+  version "5.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.21.0.tgz#453fb3662409abaf2f8b1f65d515699c888dd8ae"
+  integrity sha512-SX8jNN+iHqAF0riZQMkm7e8+POXa/fXw5cxL+gjpyP+FI+JVNhii53EmQgDAfDcBpFekYSlO0fGytMQwRiMQCA==
+  dependencies:
+    "@typescript-eslint/types" "5.21.0"
+    eslint-visitor-keys "^3.0.0"
+
 "@virtuoso.dev/react-urx@^0.2.12":
   version "0.2.13"
   resolved "https://registry.yarnpkg.com/@virtuoso.dev/react-urx/-/react-urx-0.2.13.tgz#e2cfc42d259d2a002695e7517d34cb97b64ee9c4"
@@ -3821,7 +3747,7 @@ ansi-escapes@^3.2.0:
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
   integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
 
-ansi-escapes@^4.2.1, ansi-escapes@^4.3.1:
+ansi-escapes@^4.2.1, ansi-escapes@^4.3.0, ansi-escapes@^4.3.1:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
   integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
@@ -3872,6 +3798,11 @@ ansi-styles@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
   integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
 
+ansi-styles@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.1.0.tgz#87313c102b8118abd57371afab34618bf7350ed3"
+  integrity sha512-VbqNsoz55SYGczauuup0MFUyXNQviSpFTj1RQtFzmQLk18qbVSpTFFGMT293rmDaQuKCT6InmbuEyUne4mTuxQ==
+
 anymatch@^3.0.3, anymatch@~3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
@@ -4011,6 +3942,11 @@ ast-types-flow@^0.0.7:
   resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
   integrity sha1-9wtzXGvKGlycItmCw+Oef+ujva0=
 
+astral-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
+  integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
+
 async-limiter@~1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
@@ -4494,18 +4430,7 @@ browserify-sign@^4.0.0:
     readable-stream "^3.6.0"
     safe-buffer "^5.2.0"
 
-browserslist@^4.0.0, browserslist@^4.17.5, browserslist@^4.19.1:
-  version "4.20.0"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.0.tgz#35951e3541078c125d36df76056e94738a52ebe9"
-  integrity sha512-bnpOoa+DownbciXj0jVGENf8VYQnE2LNWomhYuCsMmmx9Jd9lwq0WXODuwpSsp8AVdKM2/HorrzxAfbKvWTByQ==
-  dependencies:
-    caniuse-lite "^1.0.30001313"
-    electron-to-chromium "^1.4.76"
-    escalade "^3.1.1"
-    node-releases "^2.0.2"
-    picocolors "^1.0.0"
-
-browserslist@^4.14.5, browserslist@^4.16.6, browserslist@^4.18.1, browserslist@^4.20.2:
+browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.16.6, browserslist@^4.17.5, browserslist@^4.18.1, browserslist@^4.19.1, browserslist@^4.20.2:
   version "4.20.2"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.2.tgz#567b41508757ecd904dab4d1c646c612cd3d4f88"
   integrity sha512-CQOBCqp/9pDvDbx3xfMi+86pr4KXIf2FDkTTdeuYw8OxS9t898LA1Khq57gtufFILXpfgsSx5woNgsBgvGjpsA==
@@ -4680,12 +4605,7 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001313:
-  version "1.0.30001313"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001313.tgz#a380b079db91621e1b7120895874e2fd62ed2e2f"
-  integrity sha512-rI1UN0koZUiKINjysQDuRi2VeSCce3bYJNmDcj3PIKREiAmjakugBul1QSkg/fPrlULYl6oWfGg3PbgOSY9X4Q==
-
-caniuse-lite@^1.0.30001317:
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001317:
   version "1.0.30001322"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001322.tgz#2e4c09d11e1e8f852767dab287069a8d0c29d623"
   integrity sha512-neRmrmIrCGuMnxGSoh+x7zYtQFFgnSY2jaomjU56sCkTA6JINqQrxutF459JpWcWRajvoyn95sOXq4Pqrnyjew==
@@ -4848,6 +4768,22 @@ cli-spinners@2.6.1, cli-spinners@^2.5.0:
   resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.6.1.tgz#adc954ebe281c37a6319bfa401e6dd2488ffb70d"
   integrity sha512-x/5fWmGMnbKQAaNwN+UZlV79qBLM9JFnJuJ03gIi5whrob0xV0ofNVHy9DhwGdsMJQc2OKv0oGmLzvaqvAVv+g==
 
+cli-truncate@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-2.1.0.tgz#c39e28bf05edcde5be3b98992a22deed5a2b93c7"
+  integrity sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==
+  dependencies:
+    slice-ansi "^3.0.0"
+    string-width "^4.2.0"
+
+cli-truncate@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-3.1.0.tgz#3f23ab12535e3d73e839bb43e73c9de487db1389"
+  integrity sha512-wfOBkjXteqSnI59oPcJkcPl/ZmwvMMOj340qUIY1SKZCv0B9Cf4D4fAucRkIKQmsIuYK3x1rrgU7MeGRruiuiA==
+  dependencies:
+    slice-ansi "^5.0.0"
+    string-width "^5.0.0"
+
 cli-width@^2.0.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.1.tgz#b0433d0b4e9c847ef18868a4ef16fd5fc8271c48"
@@ -4941,7 +4877,7 @@ colord@^2.9.1:
   resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.2.tgz#25e2bacbbaa65991422c07ea209e2089428effb1"
   integrity sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ==
 
-colorette@^2.0.10:
+colorette@^2.0.10, colorette@^2.0.16:
   version "2.0.16"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.16.tgz#713b9af84fdb000139f04546bd4a93f62a5085da"
   integrity sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==
@@ -5741,10 +5677,10 @@ debug@2.6.9, debug@^2.2.0, debug@^2.6.0, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2:
-  version "4.3.3"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
-  integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==
+debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
   dependencies:
     ms "2.1.2"
 
@@ -5755,13 +5691,6 @@ debug@^3.1.1, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.3.3:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
-  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
-  dependencies:
-    ms "2.1.2"
-
 decamelize-keys@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
@@ -6155,6 +6084,11 @@ duplexer@^0.1.2:
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
   integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
 
+eastasianwidth@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
+  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
+
 ecc-jsbn@~0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
@@ -6175,11 +6109,6 @@ ejs@^3.1.5, ejs@^3.1.6:
   dependencies:
     jake "^10.6.1"
 
-electron-to-chromium@^1.4.76:
-  version "1.4.76"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.76.tgz#a0494baedaf51094b1c172999919becd9975a934"
-  integrity sha512-3Vftv7cenJtQb+k00McEBZ2vVmZ/x+HEF7pcZONZIkOsESqAqVuACmBxMv0JhzX7u0YltU0vSqRqgBSTAhFUjA==
-
 electron-to-chromium@^1.4.84:
   version "1.4.101"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.101.tgz#71f3a10065146d7445ba5d4c06ba2cc063b0817a"
@@ -6377,10 +6306,10 @@ eslint-config-prettier@^8.5.0:
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz#5a81680ec934beca02c7b1a61cf8ca34b66feab1"
   integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
 
-eslint-config-react-app@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-7.0.0.tgz#0fa96d5ec1dfb99c029b1554362ab3fa1c3757df"
-  integrity sha512-xyymoxtIt1EOsSaGag+/jmcywRuieQoA2JbPCjnw9HukFj9/97aGPoZVFioaotzk1K5Qt9sHO5EutZbkrAXS0g==
+eslint-config-react-app@^7.0.0, eslint-config-react-app@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz#73ba3929978001c5c86274c017ea57eb5fa644b4"
+  integrity sha512-K6rNzvkIeHaTd8m/QEh1Zko0KI7BACWkkneSs6s9cKZC/J27X3eZR6Upt1jkmZ/4FK+XUOPPxMEN7+lbUXfSlA==
   dependencies:
     "@babel/core" "^7.16.0"
     "@babel/eslint-parser" "^7.16.3"
@@ -6405,7 +6334,7 @@ eslint-import-resolver-node@^0.3.6:
     debug "^3.2.7"
     resolve "^1.20.0"
 
-eslint-module-utils@^2.7.2:
+eslint-module-utils@^2.7.3:
   version "2.7.3"
   resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz#ad7e3a10552fdd0642e1e55292781bd6e34876ee"
   integrity sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==
@@ -6421,24 +6350,24 @@ eslint-plugin-flowtype@^8.0.3:
     lodash "^4.17.21"
     string-natural-compare "^3.0.1"
 
-eslint-plugin-import@^2.25.3, eslint-plugin-import@^2.25.4:
-  version "2.25.4"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.25.4.tgz#322f3f916a4e9e991ac7af32032c25ce313209f1"
-  integrity sha512-/KJBASVFxpu0xg1kIBn9AUa8hQVnszpwgE7Ld0lKAlx7Ie87yzEzCgSkekt+le/YVhiaosO4Y14GDAOc41nfxA==
+eslint-plugin-import@^2.25.3, eslint-plugin-import@^2.26.0:
+  version "2.26.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz#f812dc47be4f2b72b478a021605a59fc6fe8b88b"
+  integrity sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==
   dependencies:
     array-includes "^3.1.4"
     array.prototype.flat "^1.2.5"
     debug "^2.6.9"
     doctrine "^2.1.0"
     eslint-import-resolver-node "^0.3.6"
-    eslint-module-utils "^2.7.2"
+    eslint-module-utils "^2.7.3"
     has "^1.0.3"
-    is-core-module "^2.8.0"
+    is-core-module "^2.8.1"
     is-glob "^4.0.3"
-    minimatch "^3.0.4"
+    minimatch "^3.1.2"
     object.values "^1.1.5"
-    resolve "^1.20.0"
-    tsconfig-paths "^3.12.0"
+    resolve "^1.22.0"
+    tsconfig-paths "^3.14.1"
 
 eslint-plugin-jest@^25.3.0:
   version "25.7.0"
@@ -6472,15 +6401,10 @@ eslint-plugin-prettier@^4.0.0:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
-eslint-plugin-react-hooks@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz#318dbf312e06fab1c835a4abef00121751ac1172"
-  integrity sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==
-
-eslint-plugin-react-hooks@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.4.0.tgz#71c39e528764c848d8253e1aa2c7024ed505f6c4"
-  integrity sha512-U3RVIfdzJaeKDQKEJbz5p3NW8/L80PCATJAfuojwbaEL+gBjfGdhUcGde+WGUW46Q5sr/NgxevsIiDtNXrvZaQ==
+eslint-plugin-react-hooks@^4.3.0, eslint-plugin-react-hooks@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.5.0.tgz#5f762dfedf8b2cf431c689f533c9d3fa5dcf25ad"
+  integrity sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw==
 
 eslint-plugin-react@^7.27.1, eslint-plugin-react@^7.29.4:
   version "7.29.4"
@@ -6558,12 +6482,12 @@ eslint-webpack-plugin@^3.1.1:
     normalize-path "^3.0.0"
     schema-utils "^3.1.1"
 
-eslint@^8.12.0, eslint@^8.3.0:
-  version "8.12.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.12.0.tgz#c7a5bd1cfa09079aae64c9076c07eada66a46e8e"
-  integrity sha512-it1oBL9alZg1S8UycLm5YDMAkIhtH6FtAzuZs6YvoGVldWjbS08BkAdb/ymP9LlAyq8koANu32U7Ib/w+UNh8Q==
+eslint@^8.14.0, eslint@^8.3.0:
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.14.0.tgz#62741f159d9eb4a79695b28ec4989fcdec623239"
+  integrity sha512-3/CE4aJX7LNEiE3i6FeodHmI/38GZtWCsAtsymScmzYapx8q1nVVb+eLcLSzATmCPXw5pT4TqVs1E0OmxAd9tw==
   dependencies:
-    "@eslint/eslintrc" "^1.2.1"
+    "@eslint/eslintrc" "^1.2.2"
     "@humanwhocodes/config-array" "^0.9.2"
     ajv "^6.10.0"
     chalk "^4.0.0"
@@ -6787,7 +6711,7 @@ evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
     md5.js "^1.3.4"
     safe-buffer "^5.1.1"
 
-execa@^5.0.0:
+execa@^5.0.0, execa@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
   integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
@@ -8086,7 +8010,7 @@ is-ci@^3.0.0:
   dependencies:
     ci-info "^3.2.0"
 
-is-core-module@^2.2.0, is-core-module@^2.5.0, is-core-module@^2.8.0, is-core-module@^2.8.1:
+is-core-module@^2.2.0, is-core-module@^2.5.0, is-core-module@^2.8.1:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
   integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==
@@ -8120,6 +8044,11 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
+is-fullwidth-code-point@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz#fae3167c729e7463f8461ce512b080a49268aa88"
+  integrity sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==
+
 is-function@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.2.tgz#4f097f30abf6efadac9833b17ca5dc03f8144e08"
@@ -9032,14 +8961,7 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.2:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.0.tgz#2dfefe720c6ba525d9ebd909950f0515316c89a3"
-  integrity sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==
-  dependencies:
-    minimist "^1.2.5"
-
-json5@^2.2.0:
+json5@^2.1.2, json5@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
   integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
@@ -9244,6 +9166,11 @@ lie@3.1.1:
   dependencies:
     immediate "~3.0.5"
 
+lilconfig@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.4.tgz#f4507d043d7058b380b6a8f5cb7bcd4b34cee082"
+  integrity sha512-bfTIN7lEsiooCocSISTWXkiWJkRqtL9wYtYy+8EK3Y41qh3mpwPU0ycTOgjdY9ErwXCc8QyrQp82bdL0Xkm9yA==
+
 lilconfig@^2.0.3, lilconfig@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.5.tgz#19e57fd06ccc3848fd1891655b5a447092225b25"
@@ -9254,6 +9181,40 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+lint-staged@^12.4.1:
+  version "12.4.1"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.4.1.tgz#63fa27bfc8a33515f6902f63f6670864f1fb233c"
+  integrity sha512-PTXgzpflrQ+pODQTG116QNB+Q6uUTDg5B5HqGvNhoQSGt8Qy+MA/6zSnR8n38+sxP5TapzeQGTvoKni0KRS8Vg==
+  dependencies:
+    cli-truncate "^3.1.0"
+    colorette "^2.0.16"
+    commander "^8.3.0"
+    debug "^4.3.3"
+    execa "^5.1.1"
+    lilconfig "2.0.4"
+    listr2 "^4.0.1"
+    micromatch "^4.0.4"
+    normalize-path "^3.0.0"
+    object-inspect "^1.12.0"
+    pidtree "^0.5.0"
+    string-argv "^0.3.1"
+    supports-color "^9.2.1"
+    yaml "^1.10.2"
+
+listr2@^4.0.1:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/listr2/-/listr2-4.0.5.tgz#9dcc50221583e8b4c71c43f9c7dfd0ef546b75d5"
+  integrity sha512-juGHV1doQdpNT3GSTs9IUN43QJb7KHdF9uqg7Vufs/tG9VTzpFphqF4pm/ICdAABGQxsyNn9CiYA3StkI6jpwA==
+  dependencies:
+    cli-truncate "^2.1.0"
+    colorette "^2.0.16"
+    log-update "^4.0.0"
+    p-map "^4.0.0"
+    rfdc "^1.3.0"
+    rxjs "^7.5.5"
+    through "^2.3.8"
+    wrap-ansi "^7.0.0"
+
 little-state-machine@^4.1.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/little-state-machine/-/little-state-machine-4.2.3.tgz#1599d9a280577e48b41abb50e6e6073bf022c33e"
@@ -9373,6 +9334,16 @@ log-symbols@^4.1.0:
     chalk "^4.1.0"
     is-unicode-supported "^0.1.0"
 
+log-update@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/log-update/-/log-update-4.0.0.tgz#589ecd352471f2a1c0c570287543a64dfd20e0a1"
+  integrity sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==
+  dependencies:
+    ansi-escapes "^4.3.0"
+    cli-cursor "^3.1.0"
+    slice-ansi "^4.0.0"
+    wrap-ansi "^6.2.0"
+
 longest@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-2.0.1.tgz#781e183296aa94f6d4d916dc335d0d17aefa23f8"
@@ -9544,24 +9515,12 @@ miller-rabin@^4.0.0:
     bn.js "^4.0.0"
     brorand "^1.0.1"
 
-mime-db@1.51.0:
-  version "1.51.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.51.0.tgz#d9ff62451859b18342d960850dc3cfb77e63fb0c"
-  integrity sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==
-
 mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
   version "1.52.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
 
-mime-types@^2.1.12, mime-types@^2.1.16, mime-types@^2.1.27, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24, mime-types@~2.1.34:
-  version "2.1.34"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.34.tgz#5a712f9ec1503511a945803640fafe09d3793c24"
-  integrity sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==
-  dependencies:
-    mime-db "1.51.0"
-
-mime-types@^2.1.31:
+mime-types@^2.1.12, mime-types@^2.1.16, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24, mime-types@~2.1.34:
   version "2.1.35"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
@@ -9640,12 +9599,12 @@ minimist-options@4.1.0:
     is-plain-obj "^1.1.0"
     kind-of "^6.0.3"
 
-minimist@1.2.5, minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
+minimist@1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
-minimist@^1.2.6:
+minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
@@ -9972,7 +9931,7 @@ object-hash@^2.2.0:
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5"
   integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==
 
-object-inspect@^1.11.0, object-inspect@^1.9.0:
+object-inspect@^1.11.0, object-inspect@^1.12.0, object-inspect@^1.9.0:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.0.tgz#6e2c120e868fd1fd18cb4f18c31741d0d6e776f0"
   integrity sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==
@@ -10396,6 +10355,11 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatc
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
+pidtree@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.5.0.tgz#ad5fbc1de78b8a5f99d6fbdd4f6e4eee21d1aca1"
+  integrity sha512-9nxspIM7OpZuhBxPg73Zvyq7j1QMPMPsGKTqRc2XOaFQauDvoNz9fM1Wdkjmeo7l9GXOZiRs97sPkuayl39wjA==
+
 pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -10997,10 +10961,10 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier@^2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.1.tgz#d472797e0d7461605c1609808e27b80c0f9cfe17"
-  integrity sha512-8UVbTBYGwN37Bs9LERmxCPjdvPxlEowx2urIL6urHzdb3SDq4B/Z6xLFCblrSnE4iKWcS6ziJ3aOYrc1kz/E2A==
+prettier@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.2.tgz#e26d71a18a74c3d0f0597f55f01fb6c06c206032"
+  integrity sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==
 
 pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
   version "5.6.0"
@@ -11743,6 +11707,11 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
+rfdc@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.3.0.tgz#d0b7c441ab2720d05dc4cf26e01c89631d9da08b"
+  integrity sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==
+
 rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
@@ -12113,6 +12082,32 @@ slash@^4.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
   integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
 
+slice-ansi@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-3.0.0.tgz#31ddc10930a1b7e0b67b08c96c2f49b77a789787"
+  integrity sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==
+  dependencies:
+    ansi-styles "^4.0.0"
+    astral-regex "^2.0.0"
+    is-fullwidth-code-point "^3.0.0"
+
+slice-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
+  integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==
+  dependencies:
+    ansi-styles "^4.0.0"
+    astral-regex "^2.0.0"
+    is-fullwidth-code-point "^3.0.0"
+
+slice-ansi@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-5.0.0.tgz#b73063c57aa96f9cd881654b15294d95d285c42a"
+  integrity sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==
+  dependencies:
+    ansi-styles "^6.0.0"
+    is-fullwidth-code-point "^4.0.0"
+
 sockjs@^0.3.21:
   version "0.3.24"
   resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce"
@@ -12343,6 +12338,11 @@ strict-uri-encode@^2.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
   integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
 
+string-argv@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da"
+  integrity sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==
+
 string-convert@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
@@ -12386,6 +12386,15 @@ string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
+string-width@^5.0.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
+  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
+  dependencies:
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
+
 string.prototype.matchall@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.6.tgz#5abb5dabc94c7b0ea2380f65ba610b3a544b15fa"
@@ -12571,6 +12580,11 @@ supports-color@^8.0.0:
   dependencies:
     has-flag "^4.0.0"
 
+supports-color@^9.2.1:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-9.2.2.tgz#502acaf82f2b7ee78eb7c83dcac0f89694e5a7bb"
+  integrity sha512-XC6g/Kgux+rJXmwokjm9ECpD6k/smUoS5LKlUCcsYr4IY3rW0XyAympon2RmxGrlnZURMpg5T18gWDP9CsHXFA==
+
 supports-hyperlinks@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.2.0.tgz#4f77b42488765891774b70c79babd87f9bd594bb"
@@ -12781,7 +12795,7 @@ through2@^4.0.0:
   dependencies:
     readable-stream "3"
 
-through@2, "through@>=2.2.7 <3", through@^2.3.6:
+through@2, "through@>=2.2.7 <3", through@^2.3.6, through@^2.3.8:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
@@ -12919,17 +12933,7 @@ ts-node@^10.6.0:
     v8-compile-cache-lib "^3.0.0"
     yn "3.1.1"
 
-tsconfig-paths@^3.12.0:
-  version "3.13.0"
-  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.13.0.tgz#f3e9b8f6876698581d94470c03c95b3a48c0e3d7"
-  integrity sha512-nWuffZppoaYK0vQ1SQmkSsQzJoHA4s6uzdb2waRpD806x9yfq153AdVsWz4je2qZcW+pENrMQXbGQ3sMCkXuhw==
-  dependencies:
-    "@types/json5" "^0.0.29"
-    json5 "^1.0.1"
-    minimist "^1.2.0"
-    strip-bom "^3.0.0"
-
-tsconfig-paths@^3.9.0:
+tsconfig-paths@^3.14.1, tsconfig-paths@^3.9.0:
   version "3.14.1"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a"
   integrity sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==
@@ -13047,12 +13051,7 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^4.4.3:
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.2.tgz#fe12d2727b708f4eef40f51598b3398baa9611d4"
-  integrity sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==
-
-typescript@^4.5.3, typescript@^4.6.3:
+typescript@^4.4.3, typescript@^4.5.3, typescript@^4.6.3:
   version "4.6.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.3.tgz#eefeafa6afdd31d725584c67a0eaba80f6fc6c6c"
   integrity sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==