From a79a86e5ccc25206d4bd66a594f687da0044fb26 Mon Sep 17 00:00:00 2001 From: nicolas Date: Tue, 5 May 2020 14:24:46 -0300 Subject: [PATCH] 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 --- .../components/Apps/confirmTransactions.js | 8 ++++-- src/routes/safe/components/Apps/index.jsx | 28 +++++++++++-------- .../safe/components/Layout/Tabs/index.jsx | 2 +- src/routes/safe/components/Layout/index.jsx | 2 +- src/utils/url.js | 20 +++++++++++++ 5 files changed, 45 insertions(+), 15 deletions(-) create mode 100644 src/utils/url.js diff --git a/src/routes/safe/components/Apps/confirmTransactions.js b/src/routes/safe/components/Apps/confirmTransactions.js index dd672e6c..77f932fe 100644 --- a/src/routes/safe/components/Apps/confirmTransactions.js +++ b/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, openModal: () => void, closeModal: () => void, onConfirm: () => void, ) => { - const title = + const title = const body = ( <> @@ -49,7 +53,7 @@ const confirmTransactions = ( Value
Ether - {tx.value} ETH + {humanReadableBalance(tx.value, 18)} ETH
diff --git a/src/routes/safe/components/Apps/index.jsx b/src/routes/safe/components/Apps/index.jsx index 258c4f5f..241fca86 100644 --- a/src/routes/safe/components/Apps/index.jsx +++ b/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 && } ) @@ -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 diff --git a/src/routes/safe/components/Layout/Tabs/index.jsx b/src/routes/safe/components/Layout/Tabs/index.jsx index e40672b3..2b58a5e7 100644 --- a/src/routes/safe/components/Layout/Tabs/index.jsx +++ b/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' && ( { wrapInSuspense(, null)} /> wrapInSuspense(, null)} /> - {!process.env.REACT_APP_APPS_DISABLED && ( + {process.env.REACT_APP_APPS_DISABLED !== 'true' && ( { + 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 + } +}