Apps fixes (#871)

* Fix 850

* Fix 853

* Apps flag using string value

* Fix unresponsive app when switching to another app

* Fix Apps send TX

* Confirmation Modal, correct app name

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

@@ -1,4 +1,5 @@
 // @flow
+import { BigNumber } from 'bignumber.js'
 import React from 'react'
 import styled from 'styled-components'
 
@@ -8,6 +9,8 @@ import Heading from '~/components/layout/Heading'
 import Img from '~/components/layout/Img'
 import { getEthAsToken } from '~/logic/tokens/utils/tokenHelpers'
 
+const humanReadableBalance = (balance, decimals) => BigNumber(balance).times(`1e-${decimals}`).toFixed()
+
 const Wrapper = styled.div`
   margin-bottom: 15px;
 `
@@ -28,13 +31,14 @@ const confirmTransactions = (
   safeAddress: string,
   safeName: string,
   ethBalance: string,
+  nameApp: string,
   iconApp: string,
   txs: Array<any>,
   openModal: () => void,
   closeModal: () => void,
   onConfirm: () => void,
 ) => {
-  const title = <ModalTitle iconUrl={iconApp} title="Compound" />
+  const title = <ModalTitle iconUrl={iconApp} title={nameApp} />
 
   const body = (
     <>
@@ -49,7 +53,7 @@ const confirmTransactions = (
                   <Heading tag="h3">Value</Heading>
                   <div className="value-section">
                     <Img alt="Ether" height={40} src={getEthAsToken('0').logoUri} />
-                    <Bold>{tx.value} ETH</Bold>
+                    <Bold>{humanReadableBalance(tx.value, 18)} ETH</Bold>
                   </div>
                 </div>
                 <div className="section">

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

@@ -21,6 +21,7 @@ import {
   safeParamAddressFromStateSelector,
 } from '~/routes/safe/store/selectors'
 import { loadFromStorage, saveToStorage } from '~/utils/storage'
+import { isSameHref } from '~/utils/url'
 
 const APPS_STORAGE_KEY = 'APPS_STORAGE_KEY'
 const APPS_LEGAL_DISCLAIMER_STORAGE_KEY = 'APPS_LEGAL_DISCLAIMER_STORAGE_KEY'
@@ -30,7 +31,6 @@ const StyledIframe = styled.iframe`
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  display: ${(props) => (props.shouldDisplay ? 'block' : 'none')};
 `
 const Centered = styled.div`
   display: flex;
@@ -68,7 +68,8 @@ function Apps({ closeModal, closeSnackbar, enqueueSnackbar, openModal }: Props)
   const getSelectedApp = () => appList.find((e) => e.id === selectedApp)
 
   const sendMessageToIframe = (messageId, data) => {
-    iframeEl.contentWindow.postMessage({ messageId, data }, getSelectedApp().url)
+    const app = getSelectedApp()
+    iframeEl.contentWindow.postMessage({ messageId, data }, app.url)
   }
 
   const handleIframeMessage = async (data) => {
@@ -89,6 +90,7 @@ function Apps({ closeModal, closeSnackbar, enqueueSnackbar, openModal }: Props)
           safeAddress,
           safeName,
           ethBalance,
+          getSelectedApp().name,
           getSelectedApp().iconUrl,
           data.data,
           openModal,
@@ -172,16 +174,18 @@ function Apps({ closeModal, closeSnackbar, enqueueSnackbar, openModal }: Props)
       )
     }
 
+    const app = getSelectedApp()
+
     return (
       <>
         {appIsLoading && <Loader />}
         <StyledIframe
           frameBorder="0"
-          id="iframeId"
+          id={`iframe-${app.name}`}
           ref={iframeRef}
           shouldDisplay={!appIsLoading}
-          src={getSelectedApp().url}
-          title={getSelectedApp().name}
+          src={app.url}
+          title={app.name}
         />
       </>
     )
@@ -250,8 +254,9 @@ function Apps({ closeModal, closeSnackbar, enqueueSnackbar, openModal }: Props)
         return
       }
 
-      if (!getSelectedApp().url.includes(origin)) {
-        console.error(`ThirdPartyApp: A message from was received from an unknown origin ${origin}`)
+      const app = getSelectedApp()
+      if (!app.url.includes(origin)) {
+        console.error(`ThirdPartyApp: A message was received from an unknown origin ${origin}`)
         return
       }
 
@@ -263,7 +268,7 @@ function Apps({ closeModal, closeSnackbar, enqueueSnackbar, openModal }: Props)
     return () => {
       window.removeEventListener('message', onIframeMessage)
     }
-  })
+  }, [selectedApp])
 
   // load legalDisclaimer
   useEffect(() => {
@@ -276,7 +281,7 @@ function Apps({ closeModal, closeSnackbar, enqueueSnackbar, openModal }: Props)
     }
 
     checkLegalDisclaimer()
-  })
+  }, [])
 
   // Load apps list
   useEffect(() => {
@@ -333,7 +338,8 @@ function Apps({ closeModal, closeSnackbar, enqueueSnackbar, openModal }: Props)
       })
     }
 
-    if (!iframeEl) {
+    const app = getSelectedApp()
+    if (!iframeEl || !selectedApp || !isSameHref(iframeEl.src, app.url)) {
       return
     }
 
@@ -342,7 +348,7 @@ function Apps({ closeModal, closeSnackbar, enqueueSnackbar, openModal }: Props)
     return () => {
       iframeEl.removeEventListener('load', onIframeLoaded)
     }
-  }, [iframeEl])
+  }, [iframeEl, selectedApp])
 
   if (loading) {
     return <Loader />

src/routes/safe/components/Layout/Tabs/index.jsx

@@ -100,7 +100,7 @@ const TabsComponent = (props: Props) => {
         label={labelTransactions}
         value={`${match.url}/transactions`}
       />
-      {!process.env.REACT_APP_APPS_DISABLED && (
+      {process.env.REACT_APP_APPS_DISABLED !== 'true' && (
         <Tab
           classes={{
             selected: classes.tabWrapperSelected,

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

@@ -91,7 +91,7 @@ const Layout = (props: Props) => {
       <Switch>
         <Route exact path={`${match.path}/balances/:assetType?`} render={() => wrapInSuspense(<Balances />, null)} />
         <Route exact path={`${match.path}/transactions`} render={() => wrapInSuspense(<TxsTable />, null)} />
-        {!process.env.REACT_APP_APPS_DISABLED && (
+        {process.env.REACT_APP_APPS_DISABLED !== 'true' && (
           <Route
             exact
             path={`${match.path}/apps`}

src/utils/url.js

@@ -0,0 +1,20 @@
+// @flow
+
+export const isValid = (url: string, protocolsAllowed = ['https:', 'http:']): boolean => {
+  try {
+    const urlInfo = new URL(url)
+    return protocolsAllowed.includes(urlInfo.protocol)
+  } catch (error) {
+    return false
+  }
+}
+
+export const isSameHref = (url1: string, url2: string) => {
+  try {
+    const a = new URL(url1)
+    const b = new URL(url2)
+    return a.href === b.href
+  } catch (error) {
+    return false
+  }
+}