Merge branch 'serenity' into euphoria

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
-    "typescript.tsdk": "node_modules\\typescript\\lib",
-    "editor.formatOnSave": true
+  "typescript.tsdk": "node_modules\\typescript\\lib",
+  "editor.formatOnSave": true
 }

src/App/index.tsx

@@ -1,41 +1,36 @@
-import { useContext, useEffect, useState } from 'react'
 import { makeStyles } from '@material-ui/core/styles'
 import { SnackbarProvider } from 'notistack'
+import { useContext, useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import styled from 'styled-components'
 
 import AlertIcon from 'src/assets/icons/alert.svg'
 import CheckIcon from 'src/assets/icons/check.svg'
 import ErrorIcon from 'src/assets/icons/error.svg'
 import InfoIcon from 'src/assets/icons/info.svg'
-import AppLayout from 'src/layout'
-import { SafeListSidebar, SafeListSidebarContext } from 'src/components/SafeListSidebar'
 import CookiesBanner from 'src/components/CookiesBanner'
+import Modal from 'src/components/Modal'
 import Notifier from 'src/components/Notifier'
+import { SafeListSidebar, SafeListSidebarContext } from 'src/components/SafeListSidebar'
 import Img from 'src/components/layout/Img'
-import { currentSafeWithNames } from 'src/logic/safe/store/selectors'
+import AppLayout from 'src/layout'
 import { currentCurrencySelector } from 'src/logic/currencyValues/store/selectors'
-import Modal from 'src/components/Modal'
-import SendModal from 'src/routes/safe/components/Balances/SendModal'
-import { useLoadSafe } from 'src/logic/safe/hooks/useLoadSafe'
 import useConnectWallet from 'src/logic/hooks/useConnectWallet'
-import { useSafeScheduledUpdates } from 'src/logic/safe/hooks/useSafeScheduledUpdates'
+import { useLoadSafe } from 'src/logic/safe/hooks/useLoadSafe'
 import useSafeActions from 'src/logic/safe/hooks/useSafeActions'
+import { useSafeScheduledUpdates } from 'src/logic/safe/hooks/useSafeScheduledUpdates'
+import { currentSafeWithNames } from 'src/logic/safe/store/selectors'
 import { formatAmountInUsFormat } from 'src/logic/tokens/utils/formatAmount'
 import { grantedSelector } from 'src/utils/safeUtils/selector'
 
-import ReceiveModal from './ReceiveModal'
-import TermModal from './TermModal'
+import { ConnectWalletModal } from 'src/components/ConnectWalletModal'
 import { useSidebarItems } from 'src/layout/Sidebar/useSidebarItems'
 import useAddressBookSync from 'src/logic/addressBook/hooks/useAddressBookSync'
 import { extractSafeAddress, extractSafeId } from 'src/routes/routes'
-import loadSafesFromStorage from 'src/logic/safe/store/actions/loadSafesFromStorage'
-import loadCurrentSessionFromStorage from 'src/logic/currentSession/store/actions/loadCurrentSessionFromStorage'
-import { ConnectWalletModal } from 'src/components/ConnectWalletModal'
+import TermModal from './TermModal'
 
 import TermContext from 'src/logic/TermContext'
 import { fetchAllValidator } from 'src/logic/validator/store/actions'
-import { fetchAllDelegations } from 'src/logic/delegation/store/actions'
 
 const notificationStyles = {
   success: {
@@ -79,16 +74,16 @@ const App: React.FC = ({ children }) => {
   const termContext = useContext(TermContext)
   const TermState = termContext?.term || false
   const { name: safeName, totalFiatBalance: currentSafeBalance } = useSelector(currentSafeWithNames)
-  const addressFromUrl = extractSafeAddress()
-  const safeIdFromUrl = extractSafeId()
+  const safeAddress = extractSafeAddress()
+  const safeId = extractSafeId()
   const { safeActionsState, onShow, onHide, showSendFunds, hideSendFunds } = useSafeActions()
   const { connectWalletState, onConnectWalletShow, onConnectWalletHide } = useConnectWallet()
   const currentCurrency = useSelector(currentCurrencySelector)
   const granted = useSelector(grantedSelector)
   const sidebarItems = useSidebarItems()
   const dispatch = useDispatch()
-  useLoadSafe(addressFromUrl, safeIdFromUrl) // load initially
-  useSafeScheduledUpdates(addressFromUrl, safeIdFromUrl) // load every X seconds
+  useLoadSafe(safeAddress, safeId) // load initially
+  useSafeScheduledUpdates(safeAddress, safeId) // load every X seconds
   useAddressBookSync()
 
   const sendFunds = safeActionsState.sendFunds
@@ -103,11 +98,7 @@ const App: React.FC = ({ children }) => {
     termContext?.SetTerm(false)
   }
 
-  // Load the Safes from LS just once,
-  // they'll be reloaded on network change
   useEffect(() => {
-    dispatch(loadSafesFromStorage())
-    dispatch(loadCurrentSessionFromStorage())
     dispatch(fetchAllValidator())
   }, [dispatch])
 
@@ -133,7 +124,7 @@ const App: React.FC = ({ children }) => {
           <Notifier />
           <AppLayout
             sidebarItems={sidebarItems}
-            safeAddress={addressFromUrl}
+            safeAddress={safeAddress}
             safeName={safeName}
             balance={balance}
             granted={granted}
@@ -150,25 +141,6 @@ const App: React.FC = ({ children }) => {
             onClose={onConnectWalletHide}
           ></ConnectWalletModal>
 
-          <SendModal
-            activeScreenType="chooseTxType"
-            isOpen={sendFunds.isOpen}
-            onClose={hideSendFunds}
-            selectedToken={sendFunds.selectedToken}
-          />
-
-          {addressFromUrl && (
-            <Modal
-              description="Receive Tokens Form"
-              handleClose={onReceiveHide}
-              open={safeActionsState.showReceive}
-              paperClassName="receive-modal"
-              title="Receive Tokens"
-            >
-              <ReceiveModal onClose={onReceiveHide} safeAddress={addressFromUrl} safeName={safeName} />
-            </Modal>
-          )}
-
           <Modal description="Term Tokens Form" handleClose={onTermHide} open={TermState} title="Term Tokens">
             <TermModal onClose={onTermHide} valueTerm={termContext?.valueTerm} />
           </Modal>

src/components/AddressInfo/index.tsx

@@ -62,7 +62,7 @@ const DEFAULT_PROPS: AddressEx = {
   name: null,
   logoUri: null,
 }
-export const useKnownAddress = (props: AddressEx | null = DEFAULT_PROPS): AddressEx & { isInAddressBook: boolean } => {
+const useKnownAddress = (props: AddressEx | null = DEFAULT_PROPS): AddressEx & { isInAddressBook: boolean } => {
   const recipientName = useSelector((state) => addressBookEntryName(state, { address: props?.value || '' }))
 
   // Undefined known address

src/components/Button/index.tsx

@@ -9,7 +9,7 @@ export const OutlinedButton = ({ children, ...rest }) => {
     </OutlinedButtonWrap>
   )
 }
-export const OutlinedButtonWrap = styled.button<{ disabled?: boolean }>`
+const OutlinedButtonWrap = styled.button<{ disabled?: boolean }>`
   cursor: pointer;
   border: 1px solid transparent;
   background-image: ${borderLinear};
@@ -77,10 +77,17 @@ export const OutlinedButtonWrap = styled.button<{ disabled?: boolean }>`
     }
   }
 `
-
-export const OutlinedNeutralButton = styled.button<{ disabled?: boolean; color?: string }>`
+export const OutlinedNeutralButton = ({ children, ...rest }) => {
+  return (
+    <OutlinedNeutralButtonWrap {...rest}>
+      <div>{children}</div>
+    </OutlinedNeutralButtonWrap>
+  )
+}
+const OutlinedNeutralButtonWrap = styled.button<{ disabled?: boolean; color?: string }>`
   background: transparent;
   cursor: pointer;
+  padding: 0 !important;
   border: 1px solid ${(props) => (props.color ? props.color : '#717582')};
   border-radius: 8px;
   font-weight: 400;
@@ -91,40 +98,54 @@ export const OutlinedNeutralButton = styled.button<{ disabled?: boolean; color?:
   letter-spacing: 0.01em;
   color: ${(props) => (props.color ? props.color : '#fff')};
   white-space: nowrap;
-  padding: 10px 24px;
-  > i,
-  img,
-  svg,
-  .icon {
-    margin: 0px 8px 0px 0px;
-  }
+
   &:disabled {
     cursor: not-allowed;
     pointer-events: unset;
-    background: #494c58;
+    color: #717582;
+    > div {
+      background: #131419;
+    }
   }
+  > div {
+    padding: 10px 24px;
+    border-radius: 8px;
+    display: flex;
+    > i,
+    img,
+    svg,
+    .icon {
+      margin: 0px 8px 0px 0px;
+    }
+  }
+
   &:not(:disabled)&:hover {
-    background: #363843;
+    > div {
+      background: #363843;
+    }
   }
   &:active {
-    background: #24262e;
-  }
-  &.loading {
-    pointer-events: unset;
-    background: #24262e;
+    > div {
+      background: #24262e;
+    }
   }
+
   &.small {
     font-size: 12px;
     line-height: 16px;
-    padding: 8px 16px;
-    > i,
-    img,
-    svg,
-    .icon {
-      margin: 0px 6px 0px 0px;
+    > div {
+      padding: 8px 16px;
+      border-radius: 8px;
+      > i,
+      img,
+      svg,
+      .icon {
+        margin: 0px 6px 0px 0px;
+      }
     }
   }
 `
+
 export const TextButton = styled(Button)`
   border: none;
   padding: 0 !important;