v1.9.5 (#771)

* Bug: Invalid V in signature with eth_sign (#728)

* Fix invalid V with metamask/ledger

* DONT FORGET TO REVERT BEFORE MERGING: test deployment

* DONT FORGET TO REVERT BEFORE MERGING 2: test deployment

* Revert "DONT FORGET TO REVERT BEFORE MERGING 2: test deployment"

This reverts commit 8331f2a.

* Revert "DONT FORGET TO REVERT BEFORE MERGING: test deployment"

This reverts commit 03b81e3.

* BUG: Only injected providers are cached as last used provider (#733)

* cache every used provider, not only injected one

* package json update

* (Fix) Adapt app to back-end changes (#736)

* refactor: Set success status to `201` (CREATED)

* refactor: return `null` when there's no latestTx

* (Fix) Transaction not automatically executed (#716)

* feature: action/reducer to UPDATE_SAFE_NONCE

* refactor: when processing txs returned from backend, extract latest tx nonce value and store it in the safe's state

* chore: update `yarn.lock`

* refactor: `UPDATE_SAFE_THRESHOLD` and `UPDATE_SAFE_NONCE` discarded in favor of `UPDATE_SAFE`

* refactor: use `SAFE_REDUCER_ID` constant

* refactor: remove `updateSafeNonce` file

* (Fix) Change the order of the upgrade methods lookup (#740)

* fix: change the order of the upgrade methods lookup

The `isUpgradeTransaction` method was looking for the methods in an wrong order (#599).
The proper order was set in #610, but `isUpgradeTransaction` wasn't updated.

* fix: contract upgrade version lookup

* Feature: Use eth_sign for hardware wallets connected via onboard.js (#742)

* Use eth_sign for hardware wallets

* install onboard.js with fix from forked repo

* rebuild yarn.lock to fix cached onboard

* update bnc-onboard

* update package json (#743)

* (Fix) Properly decode threshold value in tx details (#749)

* fix: Display new threshold value when changing its value

There was a typo for the `changeThreshold` action

fixes #746

* refactor: use a constant for safe methods names

* fix: check for `decimals` method in transferredTokens (#748)

Previously we were looking for `decimals` hash in the contract `code`.
There are some contracts like USDC who happen to be behind a FiatTokenProxy, making it upgradable.
By directly calling the `decimals()` method, we interact with the contract and can be sure that the `decimals()` method is present.

fixes #678

* Bug #747: Don't use getLastTxNonce to fetch safe nonce (#750)

* don't use getLastTxNonce to fetch safe nonce

* fetch safe nonce in checkAndUpdateSafe

* checkAndUpdateSafe refactor

* remove nonce update logic from UPDATE_SAFE reducer

* handle the case when localSafe returns undefined

* handle the case when localSafe returns undefined in buildTransactionFrom

* bump package json version to 1.9.4

* Issue-595: Apps config from Manifest (#715)

* getting apps info from its manifest

* Consume app info from manifest in Apps list, Transactions and Toast

* fixes

* navigate to TX Tab with an app makes a TX

* (Fix) If backend returns `null` for addresses the Transaction ca… (#718)

This tends to solve any possible issue that there may be in the tx execution for the `gasToken` and `refundReceiver` nullish values.

fixes #573

* #751 fix - Replaces decimals from backend with decimals from blockchain (#755)

* Replaces decimals from backend with decimals from blockchain

* Removes fetching again token info from blockchain
Fixs decimals cast, now we force to move from bignumber to number
For data already wrong stored as string we remove it to force fetching again the decimals

* Fixs missing symbol

* Add description comment

* Added Unilogin provider + support for legacy paths (#719)

* Added unilogin provier + support for legacy path

* Bump onboardjs version

* fallback to displaying custom tx when we fail to fetch token info (#767)

Co-authored-by: Fernando <[email protected]>
Co-authored-by: nicolas <[email protected]>
Co-authored-by: Agustin Pane <[email protected]>
Co-authored-by: Mati Dastugue <[email protected]>

.env.example

@@ -25,4 +25,7 @@ REACT_APP_LATEST_SAFE_VERSION=
 REACT_APP_APP_VERSION=$npm_package_version
 
 # all environments
-REACT_APP_INFURA_TOKEN=
+REACT_APP_INFURA_TOKEN=
+
+# For Apps
+REACT_APP_GNOSIS_APPS_URL=http://localhost:3002

package.json

@@ -1,6 +1,6 @@
 {
   "name": "safe-react",
-  "version": "1.9.4",
+  "version": "1.9.5",
   "description": "Allowing crypto users manage funds in a safer way",
   "homepage": "https://github.com/gnosis/safe-react#readme",
   "bugs": {

src/components-v2/feedback/Loader/index.jsx

@@ -7,13 +7,17 @@ const Wrapper = styled.div`
   display: flex;
   height: 100%;
   width: 100%;
-  justify-content: center;
+  justify-content: ${({ centered }) => (centered ? 'center' : 'start')};
   align-items: center;
 `
+type Props = {
+  size?: number,
+  centered: boolean,
+}
 
-const Loader = () => (
-  <Wrapper>
-    <CircularProgress size={60} />
+const Loader = ({ centered = true, size }: Props) => (
+  <Wrapper centered={centered}>
+    <CircularProgress size={size || 60} />
   </Wrapper>
 )
 

src/components-v2/layouts/ListContentLayout/Layout.jsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 export const Wrapper = styled.div`
   display: grid;
   grid-template-columns: 245px auto;
-  grid-template-rows: 62px auto 25px;
+  grid-template-rows: 62px 500px 25px;
   min-height: 500px;
 
   .background {

src/components/ConnectButton/index.jsx

@@ -48,7 +48,13 @@ export const onboard = new Onboard({
     description: 'Please select a wallet to connect to Gnosis Safe Multisig',
     wallets,
   },
-  walletCheck: [{ checkName: 'connect' }, transactionDataCheck(), { checkName: 'network' }, { checkName: 'accounts' }],
+  walletCheck: [
+    { checkName: 'derivationPath' },
+    { checkName: 'connect' },
+    transactionDataCheck(),
+    { checkName: 'network' },
+    { checkName: 'accounts' },
+  ],
 })
 
 export const onboardUser = async () => {

src/logic/notifications/notificationBuilder.js

@@ -7,7 +7,7 @@ import { NOTIFICATIONS, type Notification } from './notificationTypes'
 
 import closeSnackbarAction from '~/logic/notifications/store/actions/closeSnackbar'
 import { TX_NOTIFICATION_TYPES } from '~/logic/safe/transactions'
-import { getAppInfo } from '~/routes/safe/components/Apps/appsList'
+import { getAppInfoFromOrigin } from '~/routes/safe/components/Apps/utils'
 import { store } from '~/store'
 
 export type NotificationsQueue = {
@@ -27,7 +27,7 @@ const setNotificationOrigin = (notification: Notification, origin: string): Noti
     return notification
   }
 
-  const appInfo = getAppInfo(origin)
+  const appInfo = getAppInfoFromOrigin(origin)
   return { ...notification, message: `${appInfo.name}: ${notification.message}` }
 }
 

src/logic/tokens/store/actions/fetchTokens.js

@@ -128,7 +128,7 @@ export const getTokenInfos = async (tokenAddress: string) => {
     address: tokenAddress,
     name: name ? name : tokenSymbol,
     symbol: tokenSymbol,
-    decimals: tokenDecimals,
+    decimals: tokenDecimals.toNumber(),
     logoUri: '',
   })
   const newTokens = tokens.set(tokenAddress, savedToken)

src/logic/tokens/store/actions/loadActiveTokens.js

@@ -11,8 +11,11 @@ import { type GlobalState } from '~/store/index'
 const loadActiveTokens = () => async (dispatch: ReduxDispatch<GlobalState>) => {
   try {
     const tokens: Map<string, TokenProps> = await getActiveTokens()
+    // The filter of strings was made because of the issue #751. Please see: https://github.com/gnosis/safe-react/pull/755#issuecomment-612969340
     const tokenRecordsList: List<Token> = List(
-      Object.values(tokens).map((token: TokenProps): Token => makeToken(token)),
+      Object.values(tokens)
+        .filter((t) => typeof t.decimals !== 'string')
+        .map((token: TokenProps): Token => makeToken(token)),
     )
 
     dispatch(saveTokens(tokenRecordsList))

src/logic/wallets/utils/walletList.js

@@ -47,7 +47,7 @@ const wallets = [
   },
   { walletName: 'authereum', desktop: false },
   { walletName: 'torus', desktop: true },
-
+  { walletName: 'unilogin', desktop: true },
   { walletName: 'coinbase', desktop: false },
   { walletName: 'opera', desktop: false },
   { walletName: 'operaTouch', desktop: false },

src/routes/safe/components/Apps/index.jsx

@@ -3,9 +3,9 @@ import { withSnackbar } from 'notistack'
 import React, { useCallback, useEffect, useState } from 'react'
 import styled from 'styled-components'
 
-import appsList from './appsList'
 import confirmTransactions from './confirmTransactions'
 import sendTransactions from './sendTransactions'
+import { GNOSIS_APPS_URL, getAppInfoFromUrl } from './utils'
 
 import { ListContentLayout as LCL, Loader } from '~/components-v2'
 import ButtonLink from '~/components/layout/ButtonLink'
@@ -47,7 +47,9 @@ function Apps({
   safeName,
   web3,
 }: Props) {
-  const [selectedApp, setSelectedApp] = useState('1')
+  const [appsList, setAppsList] = useState([])
+  const [selectedApp, setSelectedApp] = useState()
+  const [loading, setLoading] = useState(true)
   const [appIsLoading, setAppIsLoading] = useState(true)
   const [iframeEl, setframeEl] = useState(null)
 
@@ -115,6 +117,7 @@ function Apps({
     }
   }, [])
 
+  // handle messages from iframe
   useEffect(() => {
     const onIframeMessage = async ({ data, origin }) => {
       if (origin === window.origin) {
@@ -128,13 +131,45 @@ function Apps({
 
       handleIframeMessage(data)
     }
+
     window.addEventListener('message', onIframeMessage)
 
     return () => {
       window.removeEventListener('message', onIframeMessage)
     }
-  }, [])
+  })
+
+  // Load apps list
+  useEffect(() => {
+    const loadApps = async () => {
+      const appsUrl = process.env.REACT_APP_GNOSIS_APPS_URL ? process.env.REACT_APP_GNOSIS_APPS_URL : GNOSIS_APPS_URL
+      const staticAppsList = [`${appsUrl}/compound`, `${appsUrl}/uniswap`]
+
+      const list = [...staticAppsList]
+      const apps = []
+      for (let index = 0; index < list.length; index++) {
+        try {
+          const appUrl = list[index]
+          const appInfo = await getAppInfoFromUrl(appUrl)
+          const app = { url: appUrl, ...appInfo }
+
+          app.id = JSON.stringify({ url: app.url, name: app.name })
+          apps.push(app)
+        } catch (error) {
+          console.error(error)
+        }
+      }
 
+      setAppsList([...apps])
+      setLoading(false)
+    }
+
+    if (!appsList.length) {
+      loadApps()
+    }
+  }, [appsList])
+
+  // on iframe change
   useEffect(() => {
     const onIframeLoaded = () => {
       setAppIsLoading(false)
@@ -175,12 +210,16 @@ function Apps({
           ref={iframeRef}
           shouldDisplay={!appIsLoading}
           src={getSelectedApp().url}
-          title="app"
+          title={getSelectedApp().name}
         />
       </>
     )
   }
 
+  if (loading || !appsList.length) {
+    return <Loader />
+  }
+
   return (
     <LCL.Wrapper>
       <LCL.Nav>
@@ -199,7 +238,7 @@ function Apps({
           size="lg"
           testId="manage-tokens-btn"
         >
-          {getSelectedApp().providedBy.name}
+          {selectedApp && getSelectedApp().providedBy.name}
         </ButtonLink>
       </LCL.Footer>
     </LCL.Wrapper>

src/routes/safe/components/Apps/sendTransactions.js

@@ -50,7 +50,7 @@ const sendTransactions = (
     enqueueSnackbar,
     closeSnackbar,
     operation: DELEGATE_CALL,
-    navigateToTransactionsTab: false,
+    // navigateToTransactionsTab: false,
     origin,
   })
 }

src/routes/safe/components/Apps/utils.js

@@ -0,0 +1,36 @@
+// @flow
+import axios from 'axios'
+
+import appsIconSvg from '~/routes/safe/components/Transactions/TxsTable/TxType/assets/appsIcon.svg'
+
+export const GNOSIS_APPS_URL = 'https://gnosis-apps.netlify.com'
+
+export const getAppInfoFromOrigin = (origin: string) => {
+  try {
+    return JSON.parse(origin)
+  } catch (error) {
+    console.error(`Impossible to parse TX origin: ${origin}`)
+    return null
+  }
+}
+
+export const getAppInfoFromUrl = async (appUrl: string) => {
+  try {
+    const appInfo = await axios.get(`${appUrl}/manifest.json`)
+    const res = { url: appUrl, ...appInfo.data, iconUrl: appsIconSvg }
+    if (appInfo.data.iconPath) {
+      try {
+        const iconInfo = await axios.get(`${appUrl}/${appInfo.data.iconPath}`)
+        if (/image\/\w/gm.test(iconInfo.headers['content-type'])) {
+          res.iconUrl = `${appUrl}/${appInfo.data.iconPath}`
+        }
+      } catch (error) {
+        console.error(`It was not possible to fetch icon from app ${res.name}`)
+      }
+    }
+    return res
+  } catch (error) {
+    console.error(`It was not possible to fetch app from ${appUrl}`)
+    return null
+  }
+}

src/routes/safe/components/Transactions/TxsTable/TxType/index.jsx

@@ -1,13 +1,13 @@
 // @flow
-import * as React from 'react'
+import React, { useEffect, useState } from 'react'
 
 import CustomTxIcon from './assets/custom.svg'
 import IncomingTxIcon from './assets/incoming.svg'
 import OutgoingTxIcon from './assets/outgoing.svg'
 import SettingsTxIcon from './assets/settings.svg'
 
-import { IconText } from '~/components-v2'
-import { getAppInfo } from '~/routes/safe/components/Apps/appsList'
+import { IconText, Loader } from '~/components-v2'
+import { getAppInfoFromOrigin, getAppInfoFromUrl } from '~/routes/safe/components/Apps/utils'
 import { type TransactionType } from '~/routes/safe/store/models/transaction'
 
 const typeToIcon = {
@@ -31,9 +31,29 @@ const typeToLabel = {
 }
 
 const TxType = ({ origin, txType }: { txType: TransactionType, origin: string | null }) => {
-  const iconUrl = txType === 'third-party-app' ? getAppInfo(origin).iconUrl : typeToIcon[txType]
-  const text = txType === 'third-party-app' ? getAppInfo(origin).name : typeToLabel[txType]
+  const isThirdPartyApp = txType === 'third-party-app'
+  const [loading, setLoading] = useState(true)
+  const [appInfo, setAppInfo] = useState()
 
-  return <IconText iconUrl={iconUrl} text={text} />
+  useEffect(() => {
+    const getAppInfo = async () => {
+      const parsedOrigin = getAppInfoFromOrigin(origin)
+      const appInfo = await getAppInfoFromUrl(parsedOrigin.url)
+      setAppInfo(appInfo)
+      setLoading(false)
+    }
+
+    if (!isThirdPartyApp) {
+      return
+    }
+
+    getAppInfo()
+  }, [txType])
+
+  if (!isThirdPartyApp) {
+    return <IconText iconUrl={typeToIcon[txType]} text={typeToLabel[txType]} />
+  }
+
+  return loading ? <Loader centered={false} size={20} /> : <IconText iconUrl={appInfo.iconUrl} text={appInfo.name} />
 }
 export default TxType