Issue 796 (#807)

* consume gnosis componentes from npm

* set safe-apps url from environment variable

* fix apps padding and border radius

* Apps updates

* update disclaimer

* fix Loader in TXList

* Fix invalid origin

Co-authored-by: Agustín Longoni <agustin.longoni@altoros.com>

package.json

@@ -137,8 +137,8 @@
   "dependencies": {
     "@gnosis.pm/safe-contracts": "1.1.1-dev.2",
     "@gnosis.pm/util-contracts": "2.0.6",    
+    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#a057248",   
     "@ledgerhq/hw-transport-node-hid": "5.12.0",    
-    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#71e6fed",
     "@material-ui/core": "4.9.10",
     "@material-ui/icons": "4.9.1",
     "@material-ui/lab": "4.0.0-alpha.39",

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: 500px;
+  grid-template-rows: 514px;
   min-height: 525px;
 
   .background {
@@ -33,6 +33,7 @@ export const Menu = styled.div.attrs(() => ({ className: 'background' }))`
 export const Content = styled.div.attrs(() => ({ className: 'background' }))`
   grid-column: 2;
   border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
   background-color: white;
 `
 

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

@@ -26,6 +26,8 @@ const APPS_STORAGE_KEY = 'APPS_STORAGE_KEY'
 const APPS_LEGAL_DISCLAIMER_STORAGE_KEY = 'APPS_LEGAL_DISCLAIMER_STORAGE_KEY'
 
 const StyledIframe = styled.iframe`
+  padding: 24px;
+  box-sizing: border-box;
   width: 100%;
   height: 100%;
   display: ${(props) => (props.shouldDisplay ? 'block' : 'none')};
@@ -36,7 +38,6 @@ const Centered = styled.div`
   justify-content: center;
   flex-direction: column;
 `
-
 const operations = {
   SEND_TRANSACTIONS: 'SEND_TRANSACTIONS',
   ON_SAFE_INFO: 'ON_SAFE_INFO',
@@ -151,7 +152,7 @@ function Apps({ closeModal, closeSnackbar, enqueueSnackbar, openModal }: Props)
                 <a href="https://gnosis-safe.io/terms" rel="noopener noreferrer" target="_blank">
                   Terms
                 </a>{' '}
-                and this Disclaimer, and agree to be bound by .
+                and this Disclaimer, and agree to be bound by them.
               </Text>
             </>
           }

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

@@ -3,10 +3,12 @@ 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.app'
-
-const appsUrl = process.env.REACT_APP_GNOSIS_APPS_URL ? process.env.REACT_APP_GNOSIS_APPS_URL : GNOSIS_APPS_URL
-export const staticAppsList = [{ url: `${appsUrl}/compound`, disabled: false }]
+export const staticAppsList = [
+  { url: `${process.env.REACT_APP_GNOSIS_APPS_URL}/compound`, disabled: false },
+  { url: `${process.env.REACT_APP_GNOSIS_APPS_URL}/uniswap`, disabled: false },
+  { url: `${process.env.REACT_APP_GNOSIS_APPS_URL}/nexus-mutual`, disabled: false },
+  { url: `${process.env.REACT_APP_GNOSIS_APPS_URL}/ens`, disabled: false },
+]
 
 export const getAppInfoFromOrigin = (origin: string) => {
   try {
@@ -18,13 +20,17 @@ export const getAppInfoFromOrigin = (origin: string) => {
 }
 
 export const getAppInfoFromUrl = async (appUrl: string) => {
+  let res = { id: undefined, url: cleanedUpAppUrl, name: 'unknown', iconUrl: appsIconSvg, error: true }
+
+  if (!appUrl) {
+    return res
+  }
+
   let cleanedUpAppUrl = appUrl.trim()
   if (cleanedUpAppUrl.substr(-1) === '/') {
     cleanedUpAppUrl = cleanedUpAppUrl.substr(0, cleanedUpAppUrl.length - 1)
   }
 
-  let res = { id: undefined, url: cleanedUpAppUrl, name: 'unknown', iconUrl: appsIconSvg, error: true }
-
   try {
     const appInfo = await axios.get(`${cleanedUpAppUrl}/manifest.json`)
 

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

@@ -40,6 +40,7 @@ const TxType = ({ origin, txType }: { txType: TransactionType, origin: string |
       const parsedOrigin = getAppInfoFromOrigin(origin)
       if (!parsedOrigin) {
         setForceCustom(true)
+        setLoading(false)
         return
       }
       const appInfo = await getAppInfoFromUrl(parsedOrigin.url)
@@ -52,7 +53,7 @@ const TxType = ({ origin, txType }: { txType: TransactionType, origin: string |
     }
 
     getAppInfo()
-  }, [txType])
+  }, [origin, txType])
 
   if (forceCustom || !origin) {
     return <IconText iconUrl={typeToIcon[txType]} text={typeToLabel[txType]} />