diff --git a/src/components/CookiesBanner/index.jsx b/src/components/CookiesBanner/index.jsx
index f857685b..b8dcd88e 100644
--- a/src/components/CookiesBanner/index.jsx
+++ b/src/components/CookiesBanner/index.jsx
@@ -30,7 +30,7 @@ const useStyles = makeStyles({
padding: '27px 15px',
position: 'fixed',
width: '100%',
- zIndex: '5',
+ zIndex: '15',
},
content: {
maxWidth: '100%',
diff --git a/src/components/Root/index.js b/src/components/Root/index.js
index 8dac4d82..399c541f 100644
--- a/src/components/Root/index.js
+++ b/src/components/Root/index.js
@@ -4,7 +4,7 @@ import 'babel-polyfill'
import { theme as styledTheme } from '@gnosis.pm/safe-react-components'
import { MuiThemeProvider } from '@material-ui/core/styles'
import { ConnectedRouter } from 'connected-react-router'
-import React, { Suspense } from 'react'
+import React from 'react'
import { hot } from 'react-hot-loader/root'
import { Provider } from 'react-redux'
import { ThemeProvider } from 'styled-components'
@@ -15,6 +15,7 @@ import PageFrame from '../layout/PageFrame'
import AppRoutes from '~/routes'
import { history, store } from '~/store'
import theme from '~/theme/mui'
+import { wrapInSuspense } from '~/utils/wrapInSuspense'
import './index.scss'
import './OnboardCustom.scss'
@@ -24,11 +25,7 @@ const Root = () => (
-
- }>
-
-
-
+ {wrapInSuspense(, )}
diff --git a/src/logic/addressBook/store/selectors/index.js b/src/logic/addressBook/store/selectors/index.js
index edef7837..36c73f6b 100644
--- a/src/logic/addressBook/store/selectors/index.js
+++ b/src/logic/addressBook/store/selectors/index.js
@@ -1,7 +1,6 @@
/* eslint-disable import/named */
// @flow
import { List, Map } from 'immutable'
-import { useSelector } from 'react-redux'
import { Selector, createSelector } from 'reselect'
import type { AddressBook } from '~/logic/addressBook/model/addressBook'
@@ -35,15 +34,3 @@ export const getAddressBookListSelector: Selector {
- if (!userAddress) {
- return null
- }
- const addressBook = useSelector(getAddressBook)
- const result = addressBook.filter((addressBookItem) => addressBookItem.address === userAddress)
- if (result.size > 0) {
- return result.get(0).name
- }
- return null
-}
diff --git a/src/logic/addressBook/utils/index.js b/src/logic/addressBook/utils/index.js
index 52d98617..cfd3b864 100644
--- a/src/logic/addressBook/utils/index.js
+++ b/src/logic/addressBook/utils/index.js
@@ -38,7 +38,7 @@ export const getNameFromAddressBook = (userAddress: string): string | null => {
return null
}
const addressBook = useSelector(getAddressBook)
- return getNameFromAdbk(addressBook, userAddress)
+ return addressBook ? getNameFromAdbk(addressBook, userAddress) : null
}
export const getOwnersWithNameFromAddressBook = (addressBook: AddressBook, ownerList: List) => {
diff --git a/src/logic/collectibles/store/actions/fetchCollectibles.js b/src/logic/collectibles/store/actions/fetchCollectibles.js
index 0ed61a56..7e326bec 100644
--- a/src/logic/collectibles/store/actions/fetchCollectibles.js
+++ b/src/logic/collectibles/store/actions/fetchCollectibles.js
@@ -1,4 +1,5 @@
// @flow
+import { batch } from 'react-redux'
import type { Dispatch } from 'redux'
import { getNetwork } from '~/config'
@@ -13,8 +14,10 @@ const fetchCollectibles = () => async (dispatch: Dispatch, getState
const source = getConfiguredSource()
const collectibles = await source.fetchAllUserCollectiblesByCategoryAsync(safeAddress, network)
- dispatch(addNftAssets(collectibles.nftAssets))
- dispatch(addNftTokens(collectibles.nftTokens))
+ batch(() => {
+ dispatch(addNftAssets(collectibles.nftAssets))
+ dispatch(addNftTokens(collectibles.nftTokens))
+ })
}
export default fetchCollectibles
diff --git a/src/logic/contracts/generateBatchRequests.js b/src/logic/contracts/generateBatchRequests.js
new file mode 100644
index 00000000..6a0d31b8
--- /dev/null
+++ b/src/logic/contracts/generateBatchRequests.js
@@ -0,0 +1,58 @@
+// @flow
+import { getWeb3 } from '~/logic/wallets/getWeb3'
+
+/**
+ * Generates a batch request for grouping RPC calls
+ * @param {object} args
+ * @param {object} args.abi - contract ABI
+ * @param {string} args.address - contract address
+ * @param {object|undefined} args.batch - not required. If set, batch must be initialized outside (web3.BatchRequest)
+ * @param {object|undefined} args.context - not required. Can be any object, to be added to the batch response
+ * @param {array<{ args: [any], method: string, type: 'eth'|undefined } | string>} args.methods - methods to be called
+ * @returns {Promise<[*]>}
+ */
+const generateBatchRequests = ({ abi, address, batch, context, methods }) => {
+ const web3 = getWeb3()
+ const contractInstance = new web3.eth.Contract(abi, address)
+ const localBatch = batch ? null : new web3.BatchRequest()
+
+ const values = methods.map((methodObject) => {
+ let method, type, args = []
+
+ if (typeof methodObject === 'string') {
+ method = methodObject
+ } else {
+ ;({ method, type, args = [] } = methodObject)
+ }
+
+ return new Promise((resolve) => {
+ const resolver = (error, result) => {
+ if (error) {
+ resolve(null)
+ } else {
+ resolve(result)
+ }
+ }
+
+ try {
+ let request
+ if (type !== undefined) {
+ request = web3[type][method].request(...args, resolver)
+ } else {
+ request = contractInstance.methods[method](...args).call.request(resolver)
+ }
+ batch ? batch.add(request) : localBatch.add(request)
+ } catch (e) {
+ resolve(null)
+ }
+ })
+ })
+
+ localBatch && localBatch.execute()
+
+ const returnValues = context ? [context, ...values] : values
+
+ return Promise.all(returnValues)
+}
+
+export default generateBatchRequests
diff --git a/src/logic/contracts/methodIds.js b/src/logic/contracts/methodIds.js
index a946cf38..1f8d6eab 100644
--- a/src/logic/contracts/methodIds.js
+++ b/src/logic/contracts/methodIds.js
@@ -53,8 +53,8 @@ const METHOD_TO_ID = {
'0x694e80c3': SAFE_METHODS_NAMES.CHANGE_THRESHOLD,
}
-export const decodeParamsFromSafeMethod = async (data: string) => {
- const web3 = await getWeb3()
+export const decodeParamsFromSafeMethod = (data: string) => {
+ const web3 = getWeb3()
const [methodId, params] = [data.slice(0, 10), data.slice(10)]
switch (methodId) {
diff --git a/src/logic/contracts/safeContracts.js b/src/logic/contracts/safeContracts.js
index c82c94fe..7e53953c 100644
--- a/src/logic/contracts/safeContracts.js
+++ b/src/logic/contracts/safeContracts.js
@@ -3,7 +3,7 @@ import contract from 'truffle-contract'
import ProxyFactorySol from '@gnosis.pm/safe-contracts/build/contracts/GnosisSafeProxyFactory.json'
import GnosisSafeSol from '@gnosis.pm/safe-contracts/build/contracts/GnosisSafe.json'
import SafeProxy from '@gnosis.pm/safe-contracts/build/contracts/GnosisSafeProxy.json'
-import { ensureOnce } from '~/utils/singleton'
+import { ensureOnce, ensureOnceAsync } from '~/utils/singleton'
import { simpleMemoize } from '~/components/forms/validator'
import { getWeb3, getNetworkIdFrom } from '~/logic/wallets/getWeb3'
import { calculateGasOf, calculateGasPrice } from '~/logic/wallets/ethTransactions'
@@ -95,13 +95,12 @@ export const estimateGasForDeployingSafe = async (
return gas * parseInt(gasPrice, 10)
}
-export const getGnosisSafeInstanceAt = async (safeAddress: string) => {
+export const getGnosisSafeInstanceAt = simpleMemoize(async (safeAddress: string) => {
const web3 = getWeb3()
const GnosisSafe = await getGnosisSafeContract(web3)
const gnosisSafe = await GnosisSafe.at(safeAddress)
-
return gnosisSafe
-}
+})
const cleanByteCodeMetadata = (bytecode: string): string => {
const metaData = 'a165'
diff --git a/src/logic/currencyValues/api/fetchTokenCurrenciesBalances.js b/src/logic/currencyValues/api/fetchTokenCurrenciesBalances.js
index b3c15e0b..7fa21013 100644
--- a/src/logic/currencyValues/api/fetchTokenCurrenciesBalances.js
+++ b/src/logic/currencyValues/api/fetchTokenCurrenciesBalances.js
@@ -10,7 +10,11 @@ const fetchTokenCurrenciesBalances = (safeAddress: string) => {
const apiUrl = getTxServiceHost()
const url = `${apiUrl}safes/${safeAddress}/balances/usd/`
- return axios.get(url)
+ return axios.get(url, {
+ params: {
+ limit: 3000,
+ },
+ })
}
export default fetchTokenCurrenciesBalances
diff --git a/src/logic/currencyValues/store/actions/fetchCurrencySelectedValue.js b/src/logic/currencyValues/store/actions/fetchCurrencySelectedValue.js
index 9dd73823..c4129f9a 100644
--- a/src/logic/currencyValues/store/actions/fetchCurrencySelectedValue.js
+++ b/src/logic/currencyValues/store/actions/fetchCurrencySelectedValue.js
@@ -1,37 +1,21 @@
// @flow
-import { List } from 'immutable'
import { Dispatch as ReduxDispatch } from 'redux'
import fetchCurrenciesRates from '~/logic/currencyValues/api/fetchCurrenciesRates'
-import { setCurrencyBalances } from '~/logic/currencyValues/store/actions/setCurrencyBalances'
+import { setCurrencyRate } from '~/logic/currencyValues/store/actions/setCurrencyRate'
import { AVAILABLE_CURRENCIES } from '~/logic/currencyValues/store/model/currencyValues'
-import { currencyValuesListSelector } from '~/logic/currencyValues/store/selectors'
import type { GlobalState } from '~/store'
// eslint-disable-next-line max-len
-const fetchCurrencySelectedValue = (currencyValueSelected: AVAILABLE_CURRENCIES) => async (
+const fetchCurrencySelectedValue = (currencyValueSelected: $Keys) => async (
dispatch: ReduxDispatch,
- getState: Function,
) => {
- const state = getState()
- const currencyBalancesList = currencyValuesListSelector(state)
- const selectedCurrencyRateInBaseCurrency = await fetchCurrenciesRates(AVAILABLE_CURRENCIES.USD, currencyValueSelected)
-
- const newList = []
- for (const currencyValue of currencyBalancesList) {
- const { balanceInBaseCurrency } = currencyValue
-
- const balanceInSelectedCurrency = balanceInBaseCurrency * selectedCurrencyRateInBaseCurrency
-
- const updatedValue = currencyValue.merge({
- currencyName: currencyValueSelected,
- balanceInSelectedCurrency,
- })
-
- newList.push(updatedValue)
+ if (AVAILABLE_CURRENCIES.USD === currencyValueSelected) {
+ return dispatch(setCurrencyRate('1'))
}
- dispatch(setCurrencyBalances(List(newList)))
+ const selectedCurrencyRateInBaseCurrency = await fetchCurrenciesRates(AVAILABLE_CURRENCIES.USD, currencyValueSelected)
+ dispatch(setCurrencyRate(selectedCurrencyRateInBaseCurrency))
}
export default fetchCurrencySelectedValue
diff --git a/src/logic/currencyValues/store/actions/fetchCurrencyValues.js b/src/logic/currencyValues/store/actions/fetchCurrencyValues.js
index 8ad14f95..d71b18c0 100644
--- a/src/logic/currencyValues/store/actions/fetchCurrencyValues.js
+++ b/src/logic/currencyValues/store/actions/fetchCurrencyValues.js
@@ -1,43 +1,32 @@
// @flow
-import { List } from 'immutable'
+import { batch } from 'react-redux'
import type { Dispatch as ReduxDispatch } from 'redux'
-import fetchTokenCurrenciesBalances from '~/logic/currencyValues/api/fetchTokenCurrenciesBalances'
import fetchCurrencySelectedValue from '~/logic/currencyValues/store/actions/fetchCurrencySelectedValue'
import { CURRENCY_SELECTED_KEY } from '~/logic/currencyValues/store/actions/saveCurrencySelected'
-import { setCurrencyBalances } from '~/logic/currencyValues/store/actions/setCurrencyBalances'
+import { setCurrencyRate } from '~/logic/currencyValues/store/actions/setCurrencyRate'
import { setCurrencySelected } from '~/logic/currencyValues/store/actions/setCurrencySelected'
-import { AVAILABLE_CURRENCIES, makeBalanceCurrency } from '~/logic/currencyValues/store/model/currencyValues'
+import { AVAILABLE_CURRENCIES } from '~/logic/currencyValues/store/model/currencyValues'
import type { GlobalState } from '~/store'
import { loadFromStorage } from '~/utils/storage'
-export const fetchCurrencyValues = (safeAddress: string) => async (dispatch: ReduxDispatch) => {
+export const fetchCurrencyValues = () => async (dispatch: ReduxDispatch) => {
try {
- const tokensFetched = await fetchTokenCurrenciesBalances(safeAddress)
-
- // eslint-disable-next-line max-len
- const currencyList = List(
- tokensFetched.data
- .filter((currencyBalance) => currencyBalance.balanceUsd)
- .map((currencyBalance) => {
- const { balanceUsd, tokenAddress } = currencyBalance
- return makeBalanceCurrency({
- currencyName: balanceUsd ? AVAILABLE_CURRENCIES.USD : null,
- tokenAddress,
- balanceInBaseCurrency: balanceUsd,
- balanceInSelectedCurrency: balanceUsd,
- })
- }),
- )
-
- dispatch(setCurrencyBalances(currencyList))
const currencyStored = await loadFromStorage(CURRENCY_SELECTED_KEY)
+
if (!currencyStored) {
- return dispatch(setCurrencySelected(AVAILABLE_CURRENCIES.USD))
+ return batch(() => {
+ dispatch(setCurrencySelected(AVAILABLE_CURRENCIES.USD))
+ dispatch(setCurrencyRate(1))
+ })
}
+
const { currencyValueSelected } = currencyStored
- dispatch(fetchCurrencySelectedValue(currencyValueSelected))
- dispatch(setCurrencySelected(currencyValueSelected))
+
+ batch(() => {
+ dispatch(setCurrencySelected(currencyValueSelected))
+ dispatch(fetchCurrencySelectedValue(currencyValueSelected))
+ })
} catch (err) {
console.error('Error fetching tokens price list', err)
}
diff --git a/src/logic/currencyValues/store/actions/setCurrencyRate.js b/src/logic/currencyValues/store/actions/setCurrencyRate.js
new file mode 100644
index 00000000..c0cee64c
--- /dev/null
+++ b/src/logic/currencyValues/store/actions/setCurrencyRate.js
@@ -0,0 +1,12 @@
+// @flow
+import { createAction } from 'redux-actions'
+
+import type { CurrencyValuesProps } from '~/logic/currencyValues/store/model/currencyValues'
+
+export const SET_CURRENCY_RATE = 'SET_CURRENCY_RATE'
+
+// eslint-disable-next-line max-len
+export const setCurrencyRate = createAction(
+ SET_CURRENCY_RATE,
+ (currencyRate: string): CurrencyValuesProps => ({ currencyRate }),
+)
diff --git a/src/logic/currencyValues/store/actions/setCurrencySelected.js b/src/logic/currencyValues/store/actions/setCurrencySelected.js
index f8426f34..be0f1c2b 100644
--- a/src/logic/currencyValues/store/actions/setCurrencySelected.js
+++ b/src/logic/currencyValues/store/actions/setCurrencySelected.js
@@ -9,5 +9,5 @@ export const SET_CURRENT_CURRENCY = 'SET_CURRENT_CURRENCY'
// eslint-disable-next-line max-len
export const setCurrencySelected = createAction(
SET_CURRENT_CURRENCY,
- (currencyValueSelected: AVAILABLE_CURRENCIES): CurrencyValuesProps => ({ currencyValueSelected }),
+ (currencyValueSelected: $Keys): CurrencyValuesProps => ({ currencyValueSelected }),
)
diff --git a/src/logic/currencyValues/store/model/currencyValues.js b/src/logic/currencyValues/store/model/currencyValues.js
index a2d07581..f9d813a9 100644
--- a/src/logic/currencyValues/store/model/currencyValues.js
+++ b/src/logic/currencyValues/store/model/currencyValues.js
@@ -39,7 +39,7 @@ export const AVAILABLE_CURRENCIES = {
}
export type BalanceCurrencyType = {
- currencyName: AVAILABLE_CURRENCIES,
+ currencyName: $Keys,
tokenAddress: string,
balanceInBaseCurrency: string,
balanceInSelectedCurrency: string,
@@ -53,7 +53,8 @@ export const makeBalanceCurrency = Record({
})
export type CurrencyValuesProps = {
- currencyValueSelected: AVAILABLE_CURRENCIES,
+ currencyValueSelected: $Keys,
+ currencyRate: string,
currencyValuesList: BalanceCurrencyType[],
}
diff --git a/src/logic/currencyValues/store/reducer/currencyValues.js b/src/logic/currencyValues/store/reducer/currencyValues.js
index 8d24aff6..2d690fcd 100644
--- a/src/logic/currencyValues/store/reducer/currencyValues.js
+++ b/src/logic/currencyValues/store/reducer/currencyValues.js
@@ -2,8 +2,8 @@
import { Map } from 'immutable'
import { type ActionType, handleActions } from 'redux-actions'
-import { SET_CURRENCY_BALANCES } from '../actions/setCurrencyBalances'
-
+import { SET_CURRENCY_BALANCES } from '~/logic/currencyValues/store/actions/setCurrencyBalances'
+import { SET_CURRENCY_RATE } from '~/logic/currencyValues/store/actions/setCurrencyRate'
import { SET_CURRENT_CURRENCY } from '~/logic/currencyValues/store/actions/setCurrencySelected'
import type { State } from '~/logic/tokens/store/reducer/tokens'
@@ -11,19 +11,20 @@ export const CURRENCY_VALUES_KEY = 'currencyValues'
export default handleActions(
{
+ [SET_CURRENCY_RATE]: (state: State, action: ActionType): State => {
+ const { currencyRate } = action.payload
+
+ return state.set('currencyRate', currencyRate)
+ },
[SET_CURRENCY_BALANCES]: (state: State, action: ActionType): State => {
const { currencyBalances } = action.payload
- const newState = state.set('currencyBalances', currencyBalances)
-
- return newState
+ return state.set('currencyBalances', currencyBalances)
},
[SET_CURRENT_CURRENCY]: (state: State, action: ActionType): State => {
const { currencyValueSelected } = action.payload
- const newState = state.set('currencyValueSelected', currencyValueSelected)
-
- return newState
+ return state.set('currencyValueSelected', currencyValueSelected)
},
},
Map(),
diff --git a/src/logic/currencyValues/store/selectors/index.js b/src/logic/currencyValues/store/selectors/index.js
index 35d4c3f1..429bfef5 100644
--- a/src/logic/currencyValues/store/selectors/index.js
+++ b/src/logic/currencyValues/store/selectors/index.js
@@ -7,4 +7,7 @@ import { type GlobalState } from '~/store'
export const currencyValuesListSelector = (state: GlobalState) =>
state[CURRENCY_VALUES_KEY].get('currencyBalances') ? state[CURRENCY_VALUES_KEY].get('currencyBalances') : List([])
+
export const currentCurrencySelector = (state: GlobalState) => state[CURRENCY_VALUES_KEY].get('currencyValueSelected')
+
+export const currencyRateSelector = (state: GlobalState) => state[CURRENCY_VALUES_KEY].get('currencyRate')
diff --git a/src/logic/tokens/store/actions/activateAssetsByBalance.js b/src/logic/tokens/store/actions/activateAssetsByBalance.js
index 3cffa977..61811460 100644
--- a/src/logic/tokens/store/actions/activateAssetsByBalance.js
+++ b/src/logic/tokens/store/actions/activateAssetsByBalance.js
@@ -17,9 +17,14 @@ const activateAssetsByBalance = (safeAddress: string) => async (
getState: GetState,
) => {
try {
- await dispatch(fetchCollectibles())
const state = getState()
const safes = safesMapSelector(state)
+
+ if (safes.size === 0) {
+ return
+ }
+
+ await dispatch(fetchCollectibles())
const availableAssets = nftAssetsSelector(state)
const alreadyActiveAssets = safeActiveAssetsSelectorBySafe(safeAddress, safes)
const blacklistedAssets = safeBlacklistedAssetsSelectorBySafe(safeAddress, safes)
diff --git a/src/logic/tokens/store/actions/activateTokensByBalance.js b/src/logic/tokens/store/actions/activateTokensByBalance.js
deleted file mode 100644
index da377195..00000000
--- a/src/logic/tokens/store/actions/activateTokensByBalance.js
+++ /dev/null
@@ -1,61 +0,0 @@
-// @flow
-import { Set } from 'immutable'
-import type { Dispatch as ReduxDispatch } from 'redux'
-
-import fetchTokenBalanceList from '~/logic/tokens/api/fetchTokenBalanceList'
-import updateActiveTokens from '~/routes/safe/store/actions/updateActiveTokens'
-import updateSafe from '~/routes/safe/store/actions/updateSafe'
-import {
- safeActiveTokensSelectorBySafe,
- safeBlacklistedTokensSelectorBySafe,
- safesMapSelector,
-} from '~/routes/safe/store/selectors'
-import { type GetState, type GlobalState } from '~/store'
-
-const activateTokensByBalance = (safeAddress: string) => async (
- dispatch: ReduxDispatch,
- getState: GetState,
-) => {
- try {
- const result = await fetchTokenBalanceList(safeAddress)
- const safes = safesMapSelector(getState())
- const alreadyActiveTokens = safeActiveTokensSelectorBySafe(safeAddress, safes)
- const blacklistedTokens = safeBlacklistedTokensSelectorBySafe(safeAddress, safes)
-
- // addresses: potentially active tokens by balance
- // balances: tokens' balance returned by the backend
- const { addresses, balances } = result.data.reduce(
- (acc, { balance, tokenAddress }) => ({
- addresses: [...acc.addresses, tokenAddress],
- balances: [[tokenAddress, balance]],
- }),
- {
- addresses: [],
- balances: [],
- },
- )
-
- // update balance list for the safe
- dispatch(
- updateSafe({
- address: safeAddress,
- balances: Set(balances),
- }),
- )
-
- // active tokens by balance, excluding those already blacklisted and the `null` address
- const activeByBalance = addresses.filter((address) => address !== null && !blacklistedTokens.includes(address))
-
- // need to persist those already active tokens, despite its balances
- const activeTokens = alreadyActiveTokens.toSet().union(activeByBalance)
-
- // update list of active tokens
- dispatch(updateActiveTokens(safeAddress, activeTokens))
- } catch (err) {
- console.error('Error fetching active token list', err)
- }
-
- return null
-}
-
-export default activateTokensByBalance
diff --git a/src/logic/tokens/store/actions/fetchSafeTokens.js b/src/logic/tokens/store/actions/fetchSafeTokens.js
new file mode 100644
index 00000000..276a9ae2
--- /dev/null
+++ b/src/logic/tokens/store/actions/fetchSafeTokens.js
@@ -0,0 +1,100 @@
+// @flow
+import { BigNumber } from 'bignumber.js'
+import { List, Map } from 'immutable'
+import { batch } from 'react-redux'
+import type { Dispatch as ReduxDispatch } from 'redux'
+
+import fetchTokenCurrenciesBalances from '~/logic/currencyValues/api/fetchTokenCurrenciesBalances'
+import { setCurrencyBalances } from '~/logic/currencyValues/store/actions/setCurrencyBalances'
+import { AVAILABLE_CURRENCIES, makeBalanceCurrency } from '~/logic/currencyValues/store/model/currencyValues'
+import { CURRENCY_VALUES_KEY } from '~/logic/currencyValues/store/reducer/currencyValues'
+import addTokens from '~/logic/tokens/store/actions/saveTokens'
+import { makeToken } from '~/logic/tokens/store/model/token'
+import { TOKEN_REDUCER_ID } from '~/logic/tokens/store/reducer/tokens'
+import updateSafe from '~/routes/safe/store/actions/updateSafe'
+import { SAFE_REDUCER_ID } from '~/routes/safe/store/reducer/safe'
+import { type GetState, type GlobalState } from '~/store'
+
+const humanReadableBalance = (balance, decimals) => BigNumber(balance).times(`1e-${decimals}`).toFixed()
+const noFunc = () => {}
+const updateSafeValue = (address) => (valueToUpdate) => updateSafe({ address, ...valueToUpdate })
+
+const fetchSafeTokens = (safeAddress: string) => async (dispatch: ReduxDispatch, getState: GetState) => {
+ try {
+ const state = getState()
+ const safe = state[SAFE_REDUCER_ID].getIn([SAFE_REDUCER_ID, safeAddress])
+ const currentTokens = state[TOKEN_REDUCER_ID]
+
+ if (!safe) {
+ return
+ }
+
+ const result = await fetchTokenCurrenciesBalances(safeAddress)
+ const currentEthBalance = safe.get('ethBalance')
+ const safeBalances = safe.get('balances')
+ const alreadyActiveTokens = safe.get('activeTokens')
+ const blacklistedTokens = safe.get('blacklistedTokens')
+ const currencyValues = state[CURRENCY_VALUES_KEY]
+ const storedCurrencyBalances = currencyValues.get('currencyBalances')
+
+ const { balances, currencyList, ethBalance, tokens } = result.data.reduce(
+ (acc, { balance, balanceUsd, token, tokenAddress }) => {
+ if (tokenAddress === null) {
+ acc.ethBalance = humanReadableBalance(balance, 18)
+ } else {
+ acc.balances = acc.balances.merge({ [tokenAddress]: humanReadableBalance(balance, token.decimals) })
+
+ if (currentTokens && !currentTokens.get(tokenAddress)) {
+ acc.tokens = acc.tokens.push(makeToken({ address: tokenAddress, ...token }))
+ }
+ }
+
+ acc.currencyList = acc.currencyList.push(
+ makeBalanceCurrency({
+ currencyName: balanceUsd ? AVAILABLE_CURRENCIES.USD : null,
+ tokenAddress,
+ balanceInBaseCurrency: balanceUsd,
+ balanceInSelectedCurrency: balanceUsd,
+ }),
+ )
+
+ return acc
+ },
+ {
+ balances: Map(),
+ currencyList: List(),
+ ethBalance: '0',
+ tokens: List(),
+ },
+ )
+
+ // need to persist those already active tokens, despite its balances
+ const activeTokens = alreadyActiveTokens.toSet().union(
+ // active tokens by balance, excluding those already blacklisted and the `null` address
+ balances.keySeq().toSet().subtract(blacklistedTokens),
+ )
+
+ const update = updateSafeValue(safeAddress)
+ const updateActiveTokens = activeTokens.equals(alreadyActiveTokens) ? noFunc : update({ activeTokens })
+ const updateBalances = balances.equals(safeBalances) ? noFunc : update({ balances })
+ const updateEthBalance = ethBalance === currentEthBalance ? noFunc : update({ ethBalance })
+
+ const updateCurrencies = currencyList.equals(storedCurrencyBalances) ? noFunc : setCurrencyBalances(currencyList)
+
+ const updateTokens = tokens.size === 0 ? noFunc : addTokens(tokens)
+
+ batch(() => {
+ dispatch(updateActiveTokens)
+ dispatch(updateBalances)
+ dispatch(updateEthBalance)
+ dispatch(updateCurrencies)
+ dispatch(updateTokens)
+ })
+ } catch (err) {
+ console.error('Error fetching active token list', err)
+ }
+
+ return null
+}
+
+export default fetchSafeTokens
diff --git a/src/logic/tokens/store/actions/fetchTokens.js b/src/logic/tokens/store/actions/fetchTokens.js
index fdff81a6..1971bb0f 100644
--- a/src/logic/tokens/store/actions/fetchTokens.js
+++ b/src/logic/tokens/store/actions/fetchTokens.js
@@ -38,7 +38,10 @@ const createERC721TokenContract = async () => {
return erc721Token
}
-const OnlyBalanceToken = {
+// For the `batchRequest` of balances, we're just using the `balanceOf` method call.
+// So having a simple ABI only with `balanceOf` prevents errors
+// when instantiating non-standard ERC-20 Tokens.
+export const OnlyBalanceToken = {
contractName: 'OnlyBalanceToken',
abi: [
{
@@ -82,23 +85,12 @@ const OnlyBalanceToken = {
],
}
-// For the `batchRequest` of balances, we're just using the `balanceOf` method call.
-// So having a simple ABI only with `balanceOf` prevents errors
-// when instantiating non-standard ERC-20 Tokens.
-const createOnlyBalanceToken = () => {
- const web3 = getWeb3()
- const contract = new web3.eth.Contract(OnlyBalanceToken.abi)
- return contract
-}
-
export const getHumanFriendlyToken = ensureOnce(createHumanFriendlyTokenContract)
export const getStandardTokenContract = ensureOnce(createStandardTokenContract)
export const getERC721TokenContract = ensureOnce(createERC721TokenContract)
-export const getOnlyBalanceToken = ensureOnce(createOnlyBalanceToken)
-
export const containsMethodByHash = async (contractAddress: string, methodHash: string) => {
const web3 = getWeb3()
const byteCode = await web3.eth.getCode(contractAddress)
diff --git a/src/logic/tokens/utils/alternativeAbi.js b/src/logic/tokens/utils/alternativeAbi.js
index c6a8abfb..074ff62c 100644
--- a/src/logic/tokens/utils/alternativeAbi.js
+++ b/src/logic/tokens/utils/alternativeAbi.js
@@ -23,7 +23,7 @@ export const ALTERNATIVE_TOKEN_ABI = [
outputs: [
{
name: '',
- type: 'bytes32',
+ type: 'string',
},
],
payable: false,
diff --git a/src/routes/index.js b/src/routes/index.js
index 46e78d99..2e274dcf 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -1,30 +1,32 @@
// @flow
import React, { useEffect, useState } from 'react'
-import { connect } from 'react-redux'
+import { useSelector } from 'react-redux'
import { Redirect, Route, Switch, withRouter } from 'react-router-dom'
import { LOAD_ADDRESS, OPEN_ADDRESS, SAFELIST_ADDRESS, SAFE_PARAM_ADDRESS, WELCOME_ADDRESS } from './routes'
-import Welcome from './welcome/container'
import Loader from '~/components/Loader'
import { defaultSafeSelector } from '~/routes/safe/store/selectors'
-import { withTracker } from '~/utils/googleAnalytics'
+import { useAnalytics } from '~/utils/googleAnalytics'
-const Safe = React.lazy(() => import('./safe/container'))
+const Welcome = React.lazy(() => import('./welcome/container'))
const Open = React.lazy(() => import('./open/container/Open'))
+const Safe = React.lazy(() => import('./safe/container'))
+
const Load = React.lazy(() => import('./load/container/Load'))
const SAFE_ADDRESS = `${SAFELIST_ADDRESS}/:${SAFE_PARAM_ADDRESS}`
type RoutesProps = {
- defaultSafe?: string,
location: Object,
}
-const Routes = ({ defaultSafe, location }: RoutesProps) => {
+const Routes = ({ location }: RoutesProps) => {
const [isInitialLoad, setInitialLoad] = useState(true)
+ const defaultSafe = useSelector(defaultSafeSelector)
+ const { trackPage } = useAnalytics()
useEffect(() => {
if (location.pathname !== '/') {
@@ -32,6 +34,11 @@ const Routes = ({ defaultSafe, location }: RoutesProps) => {
}
}, [])
+ useEffect(() => {
+ const page = location.pathname + location.search
+ trackPage(page)
+ }, [location.pathname, trackPage])
+
return (
{
return
}
- setInitialLoad(false)
if (defaultSafe) {
return
}
@@ -54,17 +60,13 @@ const Routes = ({ defaultSafe, location }: RoutesProps) => {
return
}}
/>
-
-
-
-
+
+
+
+
)
}
-// $FlowFixMe
-export default connect(
- (state) => ({ defaultSafe: defaultSafeSelector(state) }),
- null,
-)(withRouter(Routes))
+export default withRouter(Routes)
diff --git a/src/routes/safe/components/AddressBook/index.jsx b/src/routes/safe/components/AddressBook/index.jsx
index 10ebc8f7..1b776314 100644
--- a/src/routes/safe/components/AddressBook/index.jsx
+++ b/src/routes/safe/components/AddressBook/index.jsx
@@ -53,12 +53,13 @@ const AddressBookTable = ({ classes }: Props) => {
const columns = generateColumns()
const autoColumns = columns.filter((c) => !c.custom)
const dispatch = useDispatch()
+ const safesList = useSelector(safesListSelector)
+ const entryAddressToEditOrCreateNew = useSelector(addressBookQueryParamsSelector)
const addressBook = useSelector(getAddressBookListSelector)
const [selectedEntry, setSelectedEntry] = useState(null)
const [editCreateEntryModalOpen, setEditCreateEntryModalOpen] = useState(false)
const [deleteEntryModalOpen, setDeleteEntryModalOpen] = useState(false)
const [sendFundsModalOpen, setSendFundsModalOpen] = useState(false)
- const entryAddressToEditOrCreateNew = useSelector(addressBookQueryParamsSelector)
useEffect(() => {
if (entryAddressToEditOrCreateNew) {
@@ -86,8 +87,6 @@ const AddressBookTable = ({ classes }: Props) => {
}
}, [addressBook])
- const safesList = useSelector(safesListSelector)
-
const newEntryModalHandler = (entry: AddressBookEntry) => {
setEditCreateEntryModalOpen(false)
dispatch(addAddressBookEntry(makeAddressBookEntry(entry)))
@@ -160,7 +159,8 @@ const AddressBookTable = ({ classes }: Props) => {
className={classes.editEntryButton}
onClick={() => {
setSelectedEntry({
- entry: { ...row, isOwnerAddress: userOwner },
+ entry: row,
+ isOwnerAddress: userOwner,
})
setEditCreateEntryModalOpen(true)
}}
diff --git a/src/routes/safe/components/Apps/index.jsx b/src/routes/safe/components/Apps/index.jsx
index 37d0eec1..4b30eda0 100644
--- a/src/routes/safe/components/Apps/index.jsx
+++ b/src/routes/safe/components/Apps/index.jsx
@@ -2,7 +2,8 @@
import { Card, FixedDialog, FixedIcon, IconText, Menu, Text, Title } from '@gnosis.pm/safe-react-components'
import { withSnackbar } from 'notistack'
import React, { useCallback, useEffect, useState } from 'react'
-import { withRouter } from 'react-router-dom'
+import { useDispatch, useSelector } from 'react-redux'
+import { useHistory } from 'react-router-dom'
import styled from 'styled-components'
import ManageApps from './ManageApps'
@@ -11,7 +12,14 @@ import sendTransactions from './sendTransactions'
import { getAppInfoFromUrl, staticAppsList } from './utils'
import { ListContentLayout as LCL, Loader } from '~/components-v2'
+import { networkSelector } from '~/logic/wallets/store/selectors'
import { SAFELIST_ADDRESS } from '~/routes/routes'
+import { grantedSelector } from '~/routes/safe/container/selector'
+import {
+ safeEthBalanceSelector,
+ safeNameSelector,
+ safeParamAddressFromStateSelector,
+} from '~/routes/safe/store/selectors'
import { loadFromStorage, saveToStorage } from '~/utils/storage'
const APPS_STORAGE_KEY = 'APPS_STORAGE_KEY'
@@ -35,40 +43,26 @@ const operations = {
}
type Props = {
- web3: any,
- safeAddress: String,
- safeName: String,
- ethBalance: String,
- history: Object,
- network: String,
- granted: Boolean,
- createTransaction: any,
enqueueSnackbar: Function,
closeSnackbar: Function,
openModal: () => {},
closeModal: () => {},
}
-function Apps({
- closeModal,
- closeSnackbar,
- createTransaction,
- enqueueSnackbar,
- ethBalance,
- granted,
- history,
- network,
- openModal,
- safeAddress,
- safeName,
- web3,
-}: Props) {
+function Apps({ closeModal, closeSnackbar, enqueueSnackbar, openModal }: Props) {
const [appList, setAppList] = useState([])
const [legalDisclaimerAccepted, setLegalDisclaimerAccepted] = useState(false)
const [selectedApp, setSelectedApp] = useState()
const [loading, setLoading] = useState(true)
const [appIsLoading, setAppIsLoading] = useState(true)
const [iframeEl, setIframeEl] = useState(null)
+ const history = useHistory()
+ const granted = useSelector(grantedSelector)
+ const safeName = useSelector(safeNameSelector)
+ const safeAddress = useSelector(safeParamAddressFromStateSelector)
+ const network = useSelector(networkSelector)
+ const ethBalance = useSelector(safeEthBalanceSelector)
+ const dispatch = useDispatch()
const getSelectedApp = () => appList.find((e) => e.id === selectedApp)
@@ -87,15 +81,7 @@ function Apps({
const onConfirm = async () => {
closeModal()
- await sendTransactions(
- web3,
- createTransaction,
- safeAddress,
- data.data,
- enqueueSnackbar,
- closeSnackbar,
- getSelectedApp().id,
- )
+ await sendTransactions(dispatch, safeAddress, data.data, enqueueSnackbar, closeSnackbar, getSelectedApp().id)
}
confirmTransactions(
@@ -408,4 +394,4 @@ function Apps({
)
}
-export default withSnackbar(withRouter(Apps))
+export default withSnackbar(Apps)
diff --git a/src/routes/safe/components/Apps/sendTransactions.js b/src/routes/safe/components/Apps/sendTransactions.js
index 5a9d7c61..278686d4 100644
--- a/src/routes/safe/components/Apps/sendTransactions.js
+++ b/src/routes/safe/components/Apps/sendTransactions.js
@@ -1,5 +1,7 @@
// @flow
import { DELEGATE_CALL } from '~/logic/safe/transactions/send'
+import { getWeb3 } from '~/logic/wallets/getWeb3'
+import createTransaction from '~/routes/safe/store/actions/createTransaction'
const multiSendAddress = '0xB522a9f781924eD250A11C54105E51840B138AdD'
const multiSendAbi = [
@@ -15,14 +17,14 @@ const multiSendAbi = [
]
const sendTransactions = (
- web3: any,
- createTransaction: any,
+ dispatch: Function,
safeAddress: String,
txs: Array,
enqueueSnackbar: Function,
closeSnackbar: Function,
origin: string,
) => {
+ const web3 = getWeb3()
const multiSend = new web3.eth.Contract(multiSendAbi, multiSendAddress)
const encodeMultiSendCalldata = multiSend.methods
@@ -41,17 +43,19 @@ const sendTransactions = (
)
.encodeABI()
- return createTransaction({
- safeAddress,
- to: multiSendAddress,
- valueInWei: 0,
- txData: encodeMultiSendCalldata,
- notifiedTransaction: 'STANDARD_TX',
- enqueueSnackbar,
- closeSnackbar,
- operation: DELEGATE_CALL,
- // navigateToTransactionsTab: false,
- origin,
- })
+ return dispatch(
+ createTransaction({
+ safeAddress,
+ to: multiSendAddress,
+ valueInWei: 0,
+ txData: encodeMultiSendCalldata,
+ notifiedTransaction: 'STANDARD_TX',
+ enqueueSnackbar,
+ closeSnackbar,
+ operation: DELEGATE_CALL,
+ // navigateToTransactionsTab: false,
+ origin,
+ }),
+ )
}
export default sendTransactions
diff --git a/src/routes/safe/components/Balances/Coins/index.jsx b/src/routes/safe/components/Balances/Coins/index.jsx
index 5f2c20eb..315b34db 100644
--- a/src/routes/safe/components/Balances/Coins/index.jsx
+++ b/src/routes/safe/components/Balances/Coins/index.jsx
@@ -6,6 +6,7 @@ import { makeStyles } from '@material-ui/core/styles'
import CallMade from '@material-ui/icons/CallMade'
import CallReceived from '@material-ui/icons/CallReceived'
import classNames from 'classnames/bind'
+import { List } from 'immutable'
import React from 'react'
import { useSelector } from 'react-redux'
@@ -16,7 +17,11 @@ import type { Column } from '~/components/Table/TableHead'
import { cellWidth } from '~/components/Table/TableHead'
import Button from '~/components/layout/Button'
import Row from '~/components/layout/Row'
-import { currencyValuesListSelector, currentCurrencySelector } from '~/logic/currencyValues/store/selectors'
+import {
+ currencyRateSelector,
+ currencyValuesListSelector,
+ currentCurrencySelector,
+} from '~/logic/currencyValues/store/selectors'
import { BALANCE_ROW_TEST_ID } from '~/routes/safe/components/Balances'
import AssetTableCell from '~/routes/safe/components/Balances/AssetTableCell'
import type { BalanceRow } from '~/routes/safe/components/Balances/dataFetcher'
@@ -42,10 +47,15 @@ const Coins = (props: Props) => {
const columns = generateColumns()
const autoColumns = columns.filter((c) => !c.custom)
const currencySelected = useSelector(currentCurrencySelector)
+ const currencyRate = useSelector(currencyRateSelector)
const activeTokens = useSelector(extendedSafeTokensSelector)
const currencyValues = useSelector(currencyValuesListSelector)
const granted = useSelector(grantedSelector)
- const filteredData = getBalanceData(activeTokens, currencySelected, currencyValues)
+ const [filteredData, setFilteredData] = React.useState(List())
+
+ React.useMemo(() => {
+ setFilteredData(getBalanceData(activeTokens, currencySelected, currencyValues, currencyRate))
+ }, [currencySelected, currencyRate, activeTokens.hashCode(), currencyValues.hashCode()])
return (
diff --git a/src/routes/safe/components/Balances/Receive/index.jsx b/src/routes/safe/components/Balances/Receive/index.jsx
index 3c970b4d..03657944 100644
--- a/src/routes/safe/components/Balances/Receive/index.jsx
+++ b/src/routes/safe/components/Balances/Receive/index.jsx
@@ -4,6 +4,7 @@ import { withStyles } from '@material-ui/core/styles'
import Close from '@material-ui/icons/Close'
import QRCode from 'qrcode.react'
import * as React from 'react'
+import { useSelector } from 'react-redux'
import CopyBtn from '~/components/CopyBtn'
import EtherscanBtn from '~/components/EtherscanBtn'
@@ -14,6 +15,7 @@ import Col from '~/components/layout/Col'
import Hairline from '~/components/layout/Hairline'
import Paragraph from '~/components/layout/Paragraph'
import Row from '~/components/layout/Row'
+import { safeNameSelector, safeParamAddressFromStateSelector } from '~/routes/safe/store/selectors'
import { lg, md, screenSm, secondaryText, sm } from '~/theme/variables'
import { copyToClipboard } from '~/utils/clipboard'
@@ -75,53 +77,55 @@ const styles = () => ({
type Props = {
onClose: () => void,
classes: Object,
- safeName: string,
- safeAddress: string,
}
-const Receive = ({ classes, onClose, safeAddress, safeName }: Props) => (
- <>
-
-
- Receive funds
-
-
-
-
-
-
-
- This is the address of your Safe. Deposit funds by scanning the QR code or copying the address below. Only send
- ETH and ERC-20 tokens to this address!
-
-
-
- {safeName}
-
-
-
-
-
-
- {
- copyToClipboard(safeAddress)
- }}
- >
- {safeAddress}
+const Receive = ({ classes, onClose }: Props) => {
+ const safeAddress = useSelector(safeParamAddressFromStateSelector)
+ const safeName = useSelector(safeNameSelector)
+ return (
+ <>
+
+
+ Receive funds
-
-
-
-
-
-
-
-
-
-)
+
+
+
+
+
+
+ This is the address of your Safe. Deposit funds by scanning the QR code or copying the address below. Only send
+ ETH and ERC-20 tokens to this address!
+
+
+
+ {safeName}
+
+
+
+
+
+
+ {
+ copyToClipboard(safeAddress)
+ }}
+ >
+ {safeAddress}
+
+
+
+
+
+
+
+
+
+
+ )
+}
export default withStyles(styles)(Receive)
diff --git a/src/routes/safe/components/Balances/dataFetcher.js b/src/routes/safe/components/Balances/dataFetcher.js
index 13ea18c5..15fd7d40 100644
--- a/src/routes/safe/components/Balances/dataFetcher.js
+++ b/src/routes/safe/components/Balances/dataFetcher.js
@@ -1,4 +1,5 @@
// @flow
+import { BigNumber } from 'bignumber.js'
import { List } from 'immutable'
import { type Column } from '~/components/Table/TableHead'
@@ -23,38 +24,38 @@ export type BalanceRow = SortRow
// eslint-disable-next-line max-len
const getTokenPriceInCurrency = (
token: Token,
- currencySelected: typeof AVAILABLE_CURRENCIES,
+ currencySelected: $Keys,
currencyValues: List,
+ currencyRate: string,
): string => {
if (!currencySelected) {
return ''
}
- // eslint-disable-next-line no-restricted-syntax
- for (const tokenPriceIterator of currencyValues) {
- const { balanceInSelectedCurrency, currencyName, tokenAddress } = tokenPriceIterator
- if (token.address === tokenAddress && currencySelected === currencyName) {
- const balance = balanceInSelectedCurrency
- ? parseFloat(balanceInSelectedCurrency, 10).toFixed(2)
- : balanceInSelectedCurrency
- return `${balance} ${currencySelected}`
- }
- // ETH token
+ const currencyValue = currencyValues.find(({ tokenAddress }) => {
if (token.address === ETH_ADDRESS && !tokenAddress) {
- const balance = balanceInSelectedCurrency
- ? parseFloat(balanceInSelectedCurrency, 10).toFixed(2)
- : balanceInSelectedCurrency
- return `${balance} ${currencySelected}`
+ return true
}
+
+ return token.address === tokenAddress
+ })
+
+ if (!currencyValue) {
+ return ''
}
- return null
+
+ const { balanceInBaseCurrency } = currencyValue
+ const balance = BigNumber(balanceInBaseCurrency).times(currencyRate).toFixed(2)
+
+ return `${balance} ${currencySelected}`
}
// eslint-disable-next-line max-len
export const getBalanceData = (
activeTokens: List,
- currencySelected: string,
+ currencySelected: $Keys,
currencyValues: List,
+ currencyRate: string,
): List => {
const rows = activeTokens.map((token: Token) => ({
[BALANCE_TABLE_ASSET_ID]: {
@@ -66,7 +67,7 @@ export const getBalanceData = (
[BALANCE_TABLE_BALANCE_ID]: `${formatAmount(token.balance)} ${token.symbol}`,
[buildOrderFieldFrom(BALANCE_TABLE_BALANCE_ID)]: Number(token.balance),
[FIXED]: token.get('symbol') === 'ETH',
- [BALANCE_TABLE_VALUE_ID]: getTokenPriceInCurrency(token, currencySelected, currencyValues),
+ [BALANCE_TABLE_VALUE_ID]: getTokenPriceInCurrency(token, currencySelected, currencyValues, currencyRate),
}))
return rows
diff --git a/src/routes/safe/components/Balances/index.jsx b/src/routes/safe/components/Balances/index.jsx
index d89f25c9..e6fb1532 100644
--- a/src/routes/safe/components/Balances/index.jsx
+++ b/src/routes/safe/components/Balances/index.jsx
@@ -1,7 +1,7 @@
// @flow
import { withStyles } from '@material-ui/core/styles'
-import { List } from 'immutable'
-import * as React from 'react'
+import React, { useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
import Receive from './Receive'
import Tokens from './Tokens'
@@ -13,14 +13,15 @@ import Col from '~/components/layout/Col'
import Divider from '~/components/layout/Divider'
import Link from '~/components/layout/Link'
import Row from '~/components/layout/Row'
-import type { BalanceCurrencyType } from '~/logic/currencyValues/store/model/currencyValues'
-import { type Token } from '~/logic/tokens/store/model/token'
import { SAFELIST_ADDRESS } from '~/routes/routes'
-import Coins from '~/routes/safe/components/Balances/Coins'
-import Collectibles from '~/routes/safe/components/Balances/Collectibles'
import SendModal from '~/routes/safe/components/Balances/SendModal'
import DropdownCurrency from '~/routes/safe/components/DropdownCurrency'
+import { useFetchTokens } from '~/routes/safe/container/Hooks/useFetchTokens'
+import { safeFeaturesEnabledSelector, safeParamAddressFromStateSelector } from '~/routes/safe/store/selectors'
import { history } from '~/store'
+import { wrapInSuspense } from '~/utils/wrapInSuspense'
+const Collectibles = React.lazy(() => import('~/routes/safe/components/Balances/Collectibles'))
+const Coins = React.lazy(() => import('~/routes/safe/components/Balances/Coins'))
export const MANAGE_TOKENS_BUTTON_TEST_ID = 'manage-tokens-btn'
export const BALANCE_ROW_TEST_ID = 'balance-row'
@@ -37,71 +38,52 @@ type State = {
}
type Props = {
- activateTokensByBalance: Function,
- activateAssetsByBalance: Function,
- activeTokens: List,
- blacklistedTokens: List,
classes: Object,
- createTransaction: Function,
- currencySelected: string,
- currencyValues: BalanceCurrencyType[],
- ethBalance: string,
- featuresEnabled: string[],
- fetchCurrencyValues: Function,
- fetchTokens: Function,
- granted: boolean,
- safeAddress: string,
- safeName: string,
- tokens: List,
}
type Action = 'Token' | 'Send' | 'Receive' | 'ManageCollectibleModal'
-class Balances extends React.Component {
- constructor(props) {
- super(props)
- this.state = {
- erc721Enabled: false,
- subMenuOptions: [],
- showToken: false,
- showManageCollectibleModal: false,
- sendFunds: {
- isOpen: false,
- selectedToken: undefined,
- },
- showCoins: true,
- showCollectibles: false,
- showReceive: false,
- }
- props.fetchTokens()
- }
+const INITIAL_STATE: State = {
+ erc721Enabled: false,
+ subMenuOptions: [],
+ showToken: false,
+ showManageCollectibleModal: false,
+ sendFunds: {
+ isOpen: false,
+ selectedToken: undefined,
+ },
+ showCoins: true,
+ showCollectibles: false,
+ showReceive: false,
+}
- static isCoinsLocation = /\/balances\/?$/
- static isCollectiblesLocation = /\/balances\/collectibles$/
+export const COINS_LOCATION_REGEX = /\/balances\/?$/
+export const COLLECTIBLES_LOCATION_REGEX = /\/balances\/collectibles$/
- componentDidMount(): void {
- const { activateAssetsByBalance, activateTokensByBalance, fetchCurrencyValues, safeAddress } = this.props
- fetchCurrencyValues(safeAddress)
- activateTokensByBalance(safeAddress)
- activateAssetsByBalance(safeAddress)
+const Balances = (props: Props) => {
+ const [state, setState] = useState(INITIAL_STATE)
- const showCollectibles = Balances.isCollectiblesLocation.test(history.location.pathname)
- const showCoins = Balances.isCoinsLocation.test(history.location.pathname)
+ const address = useSelector(safeParamAddressFromStateSelector)
+ const featuresEnabled = useSelector(safeFeaturesEnabledSelector)
+
+ useFetchTokens()
+
+ useEffect(() => {
+ const showCollectibles = COLLECTIBLES_LOCATION_REGEX.test(history.location.pathname)
+ const showCoins = COINS_LOCATION_REGEX.test(history.location.pathname)
+ const subMenuOptions = [{ enabled: showCoins, legend: 'Coins', url: `${SAFELIST_ADDRESS}/${address}/balances` }]
if (!showCollectibles && !showCoins) {
- history.replace(`${SAFELIST_ADDRESS}/${this.props.safeAddress}/balances`)
+ history.replace(`${SAFELIST_ADDRESS}/${address}/balances`)
}
- const subMenuOptions = [
- { enabled: showCoins, legend: 'Coins', url: `${SAFELIST_ADDRESS}/${this.props.safeAddress}/balances` },
- ]
- const erc721Enabled = this.props.featuresEnabled.includes('ERC721')
+ const erc721Enabled = featuresEnabled && featuresEnabled.includes('ERC721')
if (erc721Enabled) {
subMenuOptions.push({
enabled: showCollectibles,
legend: 'Collectibles',
- url: `${SAFELIST_ADDRESS}/${this.props.safeAddress}/balances/collectibles`,
+ url: `${SAFELIST_ADDRESS}/${address}/balances/collectibles`,
})
} else {
if (showCollectibles) {
@@ -109,124 +91,129 @@ class Balances extends React.Component {
}
}
- this.setState({
+ setState((prevState) => ({
+ ...prevState,
showCoins,
showCollectibles,
erc721Enabled,
subMenuOptions,
- })
+ }))
+ }, [history.location.pathname, featuresEnabled])
+
+ const onShow = (action: Action) => {
+ setState((prevState) => ({ ...prevState, [`show${action}`]: true }))
}
- onShow = (action: Action) => () => {
- this.setState(() => ({ [`show${action}`]: true }))
+ const onHide = (action: Action) => {
+ setState((prevState) => ({ ...prevState, [`show${action}`]: false }))
}
- onHide = (action: Action) => () => {
- this.setState(() => ({ [`show${action}`]: false }))
- }
-
- showSendFunds = (tokenAddress: string) => {
- this.setState({
+ const showSendFunds = (tokenAddress: string) => {
+ setState((prevState) => ({
+ ...prevState,
sendFunds: {
isOpen: true,
selectedToken: tokenAddress,
},
- })
+ }))
}
- hideSendFunds = () => {
- this.setState({
+ const hideSendFunds = () => {
+ setState((prevState) => ({
+ ...prevState,
sendFunds: {
isOpen: false,
selectedToken: undefined,
},
- })
+ }))
}
- render() {
- const {
- erc721Enabled,
- sendFunds,
- showCoins,
- showCollectibles,
- showManageCollectibleModal,
- showReceive,
- showToken,
- subMenuOptions,
- } = this.state
- const { activeTokens, classes, createTransaction, ethBalance, safeAddress, safeName } = this.props
+ const {
+ assetDivider,
+ assetTab,
+ assetTabActive,
+ assetTabs,
+ controls,
+ manageTokensButton,
+ receiveModal,
+ tokenControls,
+ } = props.classes
+ const {
+ erc721Enabled,
+ sendFunds,
+ showCoins,
+ showCollectibles,
+ showManageCollectibleModal,
+ showReceive,
+ showToken,
+ subMenuOptions,
+ } = state
- return (
- <>
-
-
- {subMenuOptions.length > 1 &&
- subMenuOptions.map(({ enabled, legend, url }, index) => (
-
- {index > 0 && }
-
- {legend}
-
-
- ))}
-
-
- {showCoins && }
-
- Manage List
-
-
-
-
-
-
- {showCoins && }
- {erc721Enabled && showCollectibles && }
-
-
-
-
-
- )
- }
+ return (
+ <>
+
+
+ {subMenuOptions.length > 1 &&
+ subMenuOptions.map(({ enabled, legend, url }, index) => (
+
+ {index > 0 && }
+
+ {legend}
+
+
+ ))}
+
+
+ {showCoins && }
+ onShow('ManageCollectibleModal') : () => onShow('Token')}
+ size="lg"
+ testId="manage-tokens-btn"
+ >
+ Manage List
+
+ onHide('ManageCollectibleModal') : () => onHide('Token')}
+ open={showToken || showManageCollectibleModal}
+ title="Manage List"
+ >
+ onHide('ManageCollectibleModal') : () => onHide('Token')}
+ safeAddress={address}
+ />
+
+
+
+ {showCoins && wrapInSuspense( onShow('Receive')} showSendFunds={showSendFunds} />)}
+ {erc721Enabled && showCollectibles && wrapInSuspense()}
+
+ onHide('Receive')}
+ open={showReceive}
+ paperClassName={receiveModal}
+ title="Receive Tokens"
+ >
+ onHide('Receive')} />
+
+
+ )
}
export default withStyles(styles)(Balances)
diff --git a/src/routes/safe/components/Layout.jsx b/src/routes/safe/components/Layout.jsx
deleted file mode 100644
index 3a34bacd..00000000
--- a/src/routes/safe/components/Layout.jsx
+++ /dev/null
@@ -1,399 +0,0 @@
-// @flow
-import Badge from '@material-ui/core/Badge'
-import Tab from '@material-ui/core/Tab'
-import Tabs from '@material-ui/core/Tabs'
-import { withStyles } from '@material-ui/core/styles'
-import CallMade from '@material-ui/icons/CallMade'
-import CallReceived from '@material-ui/icons/CallReceived'
-import classNames from 'classnames/bind'
-import React, { useState } from 'react'
-import { Redirect, Route, Switch, withRouter } from 'react-router-dom'
-
-import { type Actions } from '../container/actions'
-
-import Balances from './Balances'
-import Receive from './Balances/Receive'
-import Settings from './Settings'
-import Transactions from './Transactions'
-import { AddressBookIcon } from './assets/AddressBookIcon'
-import { AppsIcon } from './assets/AppsIcon'
-import { BalancesIcon } from './assets/BalancesIcon'
-import { SettingsIcon } from './assets/SettingsIcon'
-import { TransactionsIcon } from './assets/TransactionsIcon'
-import { styles } from './style'
-
-import { GenericModal } from '~/components-v2'
-import CopyBtn from '~/components/CopyBtn'
-import EtherscanBtn from '~/components/EtherscanBtn'
-import Identicon from '~/components/Identicon'
-import Modal from '~/components/Modal'
-import NoSafe from '~/components/NoSafe'
-import Block from '~/components/layout/Block'
-import Button from '~/components/layout/Button'
-import Hairline from '~/components/layout/Hairline'
-import Heading from '~/components/layout/Heading'
-import Paragraph from '~/components/layout/Paragraph'
-import Row from '~/components/layout/Row'
-import { getEtherScanLink, getWeb3 } from '~/logic/wallets/getWeb3'
-import AddressBookTable from '~/routes/safe/components/AddressBook'
-import SendModal from '~/routes/safe/components/Balances/SendModal'
-import { type SelectorProps } from '~/routes/safe/container/selector'
-import { border } from '~/theme/variables'
-
-export const BALANCES_TAB_BTN_TEST_ID = 'balances-tab-btn'
-export const SETTINGS_TAB_BTN_TEST_ID = 'settings-tab-btn'
-export const TRANSACTIONS_TAB_BTN_TEST_ID = 'transactions-tab-btn'
-export const ADDRESS_BOOK_TAB_BTN_TEST_ID = 'address-book-tab-btn'
-export const SAFE_VIEW_NAME_HEADING_TEST_ID = 'safe-name-heading'
-
-const Apps = React.lazy(() => import('./Apps'))
-
-type Props = SelectorProps &
- Actions & {
- classes: Object,
- granted: boolean,
- sendFunds: Object,
- showReceive: boolean,
- onShow: Function,
- onHide: Function,
- showSendFunds: Function,
- hideSendFunds: Function,
- match: Object,
- location: Object,
- history: Object,
- fetchCurrencyValues: Function,
- updateAddressBookEntry: Function,
- }
-
-const Layout = (props: Props) => {
- const {
- activateAssetsByBalance,
- activateTokensByBalance,
- activeTokens,
- addressBook,
- blacklistedTokens,
- cancellationTransactions,
- classes,
- createTransaction,
- currencySelected,
- currencyValues,
- fetchCurrencyValues,
- fetchTokens,
- granted,
- hideSendFunds,
- location,
- match,
- network,
- onHide,
- onShow,
- processTransaction,
- provider,
- safe,
- sendFunds,
- showReceive,
- showSendFunds,
- tokens,
- transactions,
- updateAddressBookEntry,
- updateSafe,
- userAddress,
- } = props
-
- const [modal, setModal] = useState({
- isOpen: false,
- title: null,
- body: null,
- footer: null,
- onClose: null,
- })
-
- const handleCallToRouter = (_, value) => {
- const { history } = props
-
- history.push(value)
- }
-
- if (!safe) {
- return
- }
-
- const { address, ethBalance, featuresEnabled, name } = safe
- const etherScanLink = getEtherScanLink('address', address)
- const web3Instance = getWeb3()
-
- const openGenericModal = (modalConfig) => {
- setModal({ ...modalConfig, isOpen: true })
- }
-
- const closeGenericModal = () => {
- if (modal.onClose) {
- modal.onClose()
- }
-
- setModal({
- isOpen: false,
- title: null,
- body: null,
- footer: null,
- onClose: null,
- })
- }
-
- const labelAddressBook = (
- <>
-
- Address Book
-
- )
-
- const labelApps = (
- <>
-
- Apps
-
- )
-
- const labelSettings = (
- <>
-
-
- Settings
-
-
- )
- const labelBalances = (
- <>
-
- Assets
-
- )
- const labelTransactions = (
- <>
-
- Transactions
-
- )
-
- const renderAppsTab = () => (
-
-
-
- )
-
- const tabsValue = () => {
- const balanceLocation = `${match.url}/balances`
- const isInBalance = new RegExp(`^${balanceLocation}.*$`)
- const { pathname } = location
-
- if (isInBalance.test(pathname)) {
- return balanceLocation
- }
-
- return pathname
- }
-
- return (
- <>
-
-
-
-
-
-
- {name}
-
- {!granted && Read Only}
-
-
-
- {address}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {process.env.REACT_APP_ENV !== 'production' && (
-
- )}
-
-
-
-
-
- (
-
- )}
- />
- (
-
- )}
- />
-
- (
-
- )}
- />
- } />
-
-
-
-
-
-
-
- {modal.isOpen && }
-
- )
-}
-
-export default withStyles(styles)(withRouter(Layout))
diff --git a/src/routes/safe/components/Layout/Header/index.jsx b/src/routes/safe/components/Layout/Header/index.jsx
new file mode 100644
index 00000000..728cf493
--- /dev/null
+++ b/src/routes/safe/components/Layout/Header/index.jsx
@@ -0,0 +1,82 @@
+// @flow
+import { withStyles } from '@material-ui/core/styles'
+import CallMade from '@material-ui/icons/CallMade'
+import CallReceived from '@material-ui/icons/CallReceived'
+import classNames from 'classnames/bind'
+import React from 'react'
+import { useSelector } from 'react-redux'
+
+import { styles } from './style'
+
+import CopyBtn from '~/components/CopyBtn'
+import EtherscanBtn from '~/components/EtherscanBtn'
+import Identicon from '~/components/Identicon'
+import Block from '~/components/layout/Block'
+import Button from '~/components/layout/Button'
+import Heading from '~/components/layout/Heading'
+import Paragraph from '~/components/layout/Paragraph'
+import Row from '~/components/layout/Row'
+import { SAFE_VIEW_NAME_HEADING_TEST_ID } from '~/routes/safe/components/Layout'
+import { grantedSelector } from '~/routes/safe/container/selector'
+import { safeNameSelector, safeParamAddressFromStateSelector } from '~/routes/safe/store/selectors'
+
+type Props = {
+ classes: Object,
+ showSendFunds: Function,
+ onShow: Function,
+}
+
+const LayoutHeader = (props: Props) => {
+ const { classes, onShow, showSendFunds } = props
+ const address = useSelector(safeParamAddressFromStateSelector)
+ const granted = useSelector(grantedSelector)
+ const name = useSelector(safeNameSelector)
+ if (!address) return null
+
+ return (
+
+
+
+
+
+
+ {name}
+
+ {!granted && Read Only}
+
+
+
+ {address}
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+export default withStyles(styles)(LayoutHeader)
diff --git a/src/routes/safe/components/style.js b/src/routes/safe/components/Layout/Header/style.js
similarity index 73%
rename from src/routes/safe/components/style.js
rename to src/routes/safe/components/Layout/Header/style.js
index b21c13db..36e48e87 100644
--- a/src/routes/safe/components/style.js
+++ b/src/routes/safe/components/Layout/Header/style.js
@@ -1,5 +1,5 @@
// @flow
-import { screenSm, secondary, secondaryText, sm, smallFontSize, xs } from '~/theme/variables'
+import { screenSm, secondaryText, sm, smallFontSize, xs } from '~/theme/variables'
export const styles = () => ({
container: {
@@ -34,19 +34,6 @@ export const styles = () => ({
user: {
justifyContent: 'left',
},
- receiveModal: {
- height: 'auto',
- maxWidth: 'calc(100% - 30px)',
- minHeight: '544px',
- overflow: 'hidden',
- },
- open: {
- paddingLeft: sm,
- width: 'auto',
- '&:hover': {
- cursor: 'pointer',
- },
- },
readonly: {
backgroundColor: secondaryText,
borderRadius: xs,
@@ -99,22 +86,6 @@ export const styles = () => ({
leftIcon: {
marginRight: sm,
},
- tabWrapper: {
- display: 'flex',
- flexDirection: 'row',
- '& svg': {
- display: 'block',
- marginRight: '5px',
- },
- '& .fill': {
- fill: 'rgba(0, 0, 0, 0.54)',
- },
- },
- tabWrapperSelected: {
- '& .fill': {
- fill: secondary,
- },
- },
nameText: {
overflowWrap: 'break-word',
wordBreak: 'break-word',
diff --git a/src/routes/safe/components/Layout/Tabs/SettingsTab/index.jsx b/src/routes/safe/components/Layout/Tabs/SettingsTab/index.jsx
new file mode 100644
index 00000000..9379bdcb
--- /dev/null
+++ b/src/routes/safe/components/Layout/Tabs/SettingsTab/index.jsx
@@ -0,0 +1,30 @@
+// @flow
+import Badge from '@material-ui/core/Badge'
+import React from 'react'
+import { useSelector } from 'react-redux'
+
+import { SettingsIcon } from '~/routes/safe/components/assets/SettingsIcon'
+import { grantedSelector } from '~/routes/safe/container/selector'
+import { safeNeedsUpdateSelector } from '~/routes/safe/store/selectors'
+
+const SettingsTab = () => {
+ const needsUpdate = useSelector(safeNeedsUpdateSelector)
+ const granted = useSelector(grantedSelector)
+
+ return (
+ <>
+
+
+ Settings
+
+
+ )
+}
+
+export default SettingsTab
diff --git a/src/routes/safe/components/Layout/Tabs/index.jsx b/src/routes/safe/components/Layout/Tabs/index.jsx
new file mode 100644
index 00000000..3ade3bd6
--- /dev/null
+++ b/src/routes/safe/components/Layout/Tabs/index.jsx
@@ -0,0 +1,135 @@
+// @flow
+import Tab from '@material-ui/core/Tab'
+import Tabs from '@material-ui/core/Tabs'
+import { withStyles } from '@material-ui/core/styles'
+import React from 'react'
+import { withRouter } from 'react-router-dom'
+
+import { styles } from './style'
+
+import {
+ ADDRESS_BOOK_TAB_BTN_TEST_ID,
+ BALANCES_TAB_BTN_TEST_ID,
+ SETTINGS_TAB_BTN_TEST_ID,
+ TRANSACTIONS_TAB_BTN_TEST_ID,
+} from '~/routes/safe/components/Layout'
+import SettingsTab from '~/routes/safe/components/Layout/Tabs/SettingsTab'
+import { AddressBookIcon } from '~/routes/safe/components/assets/AddressBookIcon'
+import { AppsIcon } from '~/routes/safe/components/assets/AppsIcon'
+import { BalancesIcon } from '~/routes/safe/components/assets/BalancesIcon'
+import { TransactionsIcon } from '~/routes/safe/components/assets/TransactionsIcon'
+
+type Props = {
+ classes: Object,
+ match: Object,
+ history: Object,
+ location: Object,
+}
+
+const TabsComponent = (props: Props) => {
+ const { classes, location, match } = props
+
+ const handleCallToRouter = (_, value) => {
+ const { history } = props
+
+ history.push(value)
+ }
+
+ const tabsValue = () => {
+ const balanceLocation = `${match.url}/balances`
+ const isInBalance = new RegExp(`^${balanceLocation}.*$`)
+ const { pathname } = location
+
+ if (isInBalance.test(pathname)) {
+ return balanceLocation
+ }
+
+ return pathname
+ }
+
+ const labelBalances = (
+ <>
+
+ Assets
+
+ )
+
+ const labelAddressBook = (
+ <>
+
+ Address Book
+
+ )
+
+ const labelApps = (
+ <>
+
+ Apps
+
+ )
+
+ const labelTransactions = (
+ <>
+
+ Transactions
+
+ )
+ return (
+
+
+
+ {process.env.REACT_APP_ENV !== 'production' && (
+
+ )}
+
+ }
+ value={`${match.url}/settings`}
+ />
+
+ )
+}
+export default withStyles(styles)(withRouter(TabsComponent))
diff --git a/src/routes/safe/components/Layout/Tabs/style.js b/src/routes/safe/components/Layout/Tabs/style.js
new file mode 100644
index 00000000..9a098b31
--- /dev/null
+++ b/src/routes/safe/components/Layout/Tabs/style.js
@@ -0,0 +1,21 @@
+// @flow
+import { secondary } from '~/theme/variables'
+
+export const styles = () => ({
+ tabWrapper: {
+ display: 'flex',
+ flexDirection: 'row',
+ '& svg': {
+ display: 'block',
+ marginRight: '5px',
+ },
+ '& .fill': {
+ fill: 'rgba(0, 0, 0, 0.54)',
+ },
+ },
+ tabWrapperSelected: {
+ '& .fill': {
+ fill: secondary,
+ },
+ },
+})
diff --git a/src/routes/safe/components/Layout/index.jsx b/src/routes/safe/components/Layout/index.jsx
new file mode 100644
index 00000000..39912905
--- /dev/null
+++ b/src/routes/safe/components/Layout/index.jsx
@@ -0,0 +1,126 @@
+// @flow
+import { makeStyles } from '@material-ui/core/styles'
+import React, { useState } from 'react'
+import { useSelector } from 'react-redux'
+import { Redirect, Route, Switch, withRouter } from 'react-router-dom'
+
+import Receive from '../Balances/Receive'
+
+import { styles } from './style'
+
+import { GenericModal } from '~/components-v2'
+import Modal from '~/components/Modal'
+import NoSafe from '~/components/NoSafe'
+import Hairline from '~/components/layout/Hairline'
+import { providerNameSelector } from '~/logic/wallets/store/selectors'
+import SendModal from '~/routes/safe/components/Balances/SendModal'
+import LayoutHeader from '~/routes/safe/components/Layout/Header'
+import TabsComponent from '~/routes/safe/components/Layout/Tabs'
+import { safeParamAddressFromStateSelector } from '~/routes/safe/store/selectors'
+import { border } from '~/theme/variables'
+import { wrapInSuspense } from '~/utils/wrapInSuspense'
+
+export const BALANCES_TAB_BTN_TEST_ID = 'balances-tab-btn'
+export const SETTINGS_TAB_BTN_TEST_ID = 'settings-tab-btn'
+export const TRANSACTIONS_TAB_BTN_TEST_ID = 'transactions-tab-btn'
+export const ADDRESS_BOOK_TAB_BTN_TEST_ID = 'address-book-tab-btn'
+export const SAFE_VIEW_NAME_HEADING_TEST_ID = 'safe-name-heading'
+
+const Apps = React.lazy(() => import('../Apps'))
+const Settings = React.lazy(() => import('../Settings'))
+const Balances = React.lazy(() => import('../Balances'))
+const TxsTable = React.lazy(() => import('~/routes/safe/components/Transactions/TxsTable'))
+const AddressBookTable = React.lazy(() => import('~/routes/safe/components/AddressBook'))
+
+type Props = {
+ classes: Object,
+ sendFunds: Object,
+ showReceive: boolean,
+ onShow: Function,
+ onHide: Function,
+ showSendFunds: Function,
+ hideSendFunds: Function,
+ match: Object,
+ location: Object,
+ history: Object,
+}
+
+const useStyles = makeStyles(styles)
+
+const Layout = (props: Props) => {
+ const classes = useStyles()
+ const { hideSendFunds, match, onHide, onShow, sendFunds, showReceive, showSendFunds } = props
+
+ const [modal, setModal] = useState({
+ isOpen: false,
+ title: null,
+ body: null,
+ footer: null,
+ onClose: null,
+ })
+
+ const safeAddress = useSelector(safeParamAddressFromStateSelector)
+ const provider = useSelector(providerNameSelector)
+ if (!safeAddress) {
+ return
+ }
+
+ const openGenericModal = (modalConfig) => {
+ setModal({ ...modalConfig, isOpen: true })
+ }
+
+ const closeGenericModal = () => {
+ if (modal.onClose) {
+ modal.onClose()
+ }
+
+ setModal({
+ isOpen: false,
+ title: null,
+ body: null,
+ footer: null,
+ onClose: null,
+ })
+ }
+
+ return (
+ <>
+
+
+
+
+ wrapInSuspense(, null)} />
+ wrapInSuspense(, null)} />
+ {process.env.REACT_APP_ENV !== 'production' && (
+ wrapInSuspense(, null)}
+ />
+ )}
+ wrapInSuspense(, null)} />
+ wrapInSuspense(, null)} />
+
+
+
+
+
+
+
+ {modal.isOpen && }
+
+ )
+}
+
+export default withRouter(Layout)
diff --git a/src/routes/safe/components/Layout/style.js b/src/routes/safe/components/Layout/style.js
new file mode 100644
index 00000000..0e48bc0f
--- /dev/null
+++ b/src/routes/safe/components/Layout/style.js
@@ -0,0 +1,24 @@
+// @flow
+import { screenSm, sm } from '~/theme/variables'
+
+export const styles = () => ({
+ receiveModal: {
+ height: 'auto',
+ maxWidth: 'calc(100% - 30px)',
+ minHeight: '544px',
+ overflow: 'hidden',
+ },
+ receive: {
+ borderRadius: '4px',
+ marginLeft: sm,
+ width: '50%',
+
+ '& > span': {
+ fontSize: '14px',
+ },
+ [`@media (min-width: ${screenSm}px)`]: {
+ minWidth: '95px',
+ width: 'auto',
+ },
+ },
+})
diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/index.jsx b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/index.jsx
index 1939aeb9..e76e1a4d 100644
--- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/index.jsx
+++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/index.jsx
@@ -3,7 +3,7 @@ import { withStyles } from '@material-ui/core/styles'
import { List } from 'immutable'
import { withSnackbar } from 'notistack'
import React, { useEffect, useState } from 'react'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
import OwnerForm from './screens/OwnerForm'
import ReviewAddOwner from './screens/Review'
@@ -13,7 +13,10 @@ import Modal from '~/components/Modal'
import { addOrUpdateAddressBookEntry } from '~/logic/addressBook/store/actions/addOrUpdateAddressBookEntry'
import { getGnosisSafeInstanceAt } from '~/logic/contracts/safeContracts'
import { TX_NOTIFICATION_TYPES } from '~/logic/safe/transactions'
+import addSafeOwner from '~/routes/safe/store/actions/addSafeOwner'
+import createTransaction from '~/routes/safe/store/actions/createTransaction'
import { type Owner } from '~/routes/safe/store/models/owner'
+import { safeOwnersSelector, safeParamAddressFromStateSelector } from '~/routes/safe/store/selectors'
const styles = () => ({
biggerModalWindow: {
@@ -28,12 +31,6 @@ type Props = {
onClose: () => void,
classes: Object,
isOpen: boolean,
- safeAddress: string,
- safeName: string,
- owners: List,
- threshold: number,
- addSafeOwner: Function,
- createTransaction: Function,
enqueueSnackbar: Function,
closeSnackbar: Function,
}
@@ -45,43 +42,34 @@ export const sendAddOwner = async (
ownersOld: List,
enqueueSnackbar: Function,
closeSnackbar: Function,
- createTransaction: Function,
- addSafeOwner: Function,
+ dispatch: Function,
) => {
const gnosisSafe = await getGnosisSafeInstanceAt(safeAddress)
const txData = gnosisSafe.contract.methods.addOwnerWithThreshold(values.ownerAddress, values.threshold).encodeABI()
- const txHash = await createTransaction({
- safeAddress,
- to: safeAddress,
- valueInWei: 0,
- txData,
- notifiedTransaction: TX_NOTIFICATION_TYPES.SETTINGS_CHANGE_TX,
- enqueueSnackbar,
- closeSnackbar,
- })
+ const txHash = await dispatch(
+ createTransaction({
+ safeAddress,
+ to: safeAddress,
+ valueInWei: 0,
+ txData,
+ notifiedTransaction: TX_NOTIFICATION_TYPES.SETTINGS_CHANGE_TX,
+ enqueueSnackbar,
+ closeSnackbar,
+ }),
+ )
if (txHash) {
- addSafeOwner({ safeAddress, ownerName: values.ownerName, ownerAddress: values.ownerAddress })
+ dispatch(addSafeOwner({ safeAddress, ownerName: values.ownerName, ownerAddress: values.ownerAddress }))
}
}
-const AddOwner = ({
- addSafeOwner,
- classes,
- closeSnackbar,
- createTransaction,
- enqueueSnackbar,
- isOpen,
- onClose,
- owners,
- safeAddress,
- safeName,
- threshold,
-}: Props) => {
- const dispatch = useDispatch()
+const AddOwner = ({ classes, closeSnackbar, enqueueSnackbar, isOpen, onClose }: Props) => {
const [activeScreen, setActiveScreen] = useState('selectOwner')
const [values, setValues] = useState