Disable oz xdai

.travis.yml

@@ -1,4 +1,4 @@
-if: (branch = development) OR (branch = master) OR (type = pull_request) OR (tag IS present)
+if: (branch = development) OR (branch = master) OR (feature/#1353-xDai-compatibility) OR (type = pull_request) OR (tag IS present)
 sudo: required
 dist: bionic
 language: node_js
@@ -16,6 +16,10 @@ matrix:
     - env:
         - REACT_APP_NETWORK='rinkeby'
         - REACT_APP_GNOSIS_APPS_URL=${REACT_APP_GNOSIS_APPS_URL_STAGING}
+    - env:
+        - REACT_APP_NETWORK='xdai'
+        - STAGING_BUCKET_NAME=${STAGING_XDAI_BUCKET_NAME}
+      if: ((branch = master OR branch = feature/#1353-xDai-compatibility) AND NOT type = pull_request) OR tag IS present
 cache:
   yarn: true
 before_script:
@@ -62,7 +66,9 @@ deploy:
     upload-dir: current/app
     region: $AWS_DEFAULT_REGION
     on:
-      branch: master
+      # branch: master
+      all_branches: true
+      condition: $TRAVIS_BRANCH =~ ^(master|feature/#1353-xDai-compatibility)$
 
     # Prepare production deployment
   - provider: s3

package.json

@@ -61,8 +61,7 @@
       "src/**/*.{js,jsx,ts,tsx}",
       "!src/**/*.{.test.*}",
       "!src/**/test/**/*",
-      "!src/**/assets/**",
-      "!src/config/**/*"
+      "!src/**/assets/**"
     ]
   },
   "productName": "Safe Multisig",
@@ -166,7 +165,7 @@
   "dependencies": {
     "@gnosis.pm/safe-apps-sdk": "0.4.0",
     "@gnosis.pm/safe-contracts": "1.1.1-dev.2",
-    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#1bf397f",
+    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#70e57bdd1e0fd5dfdf5768076577c1e000b5fe28",
     "@gnosis.pm/util-contracts": "2.0.6",
     "@ledgerhq/hw-transport-node-hid": "5.22.0",
     "@material-ui/core": "4.11.0",

src/components/AddressInfo/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import styled from 'styled-components'
 
 import CopyBtn from 'src/components/CopyBtn'
 import EtherscanBtn from 'src/components/EtherscanBtn'
@@ -8,6 +7,7 @@ import Block from 'src/components/layout/Block'
 import Bold from 'src/components/layout/Bold'
 import Paragraph from 'src/components/layout/Paragraph'
 import { border, xs } from 'src/theme/variables'
+import styled from 'styled-components'
 
 const Wrapper = styled.div`
   display: flex;
@@ -59,7 +59,7 @@ const AddressInfo = ({ ethBalance, safeAddress, safeName }: Props): React.ReactE
             {safeAddress}
           </Paragraph>
           <CopyBtn content={safeAddress} />
-          <EtherscanBtn type="address" value={safeAddress} />
+          <EtherscanBtn value={safeAddress} />
         </div>
         {ethBalance && (
           <StyledBlock>

src/components/App/ReceiveModal.tsx

@@ -2,7 +2,7 @@ import IconButton from '@material-ui/core/IconButton'
 import { createStyles, makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import QRCode from 'qrcode.react'
-import * as React from 'react'
+import React, { ReactElement } from 'react'
 
 import CopyBtn from 'src/components/CopyBtn'
 import EtherscanBtn from 'src/components/EtherscanBtn'
@@ -13,9 +13,11 @@ import Col from 'src/components/layout/Col'
 import Hairline from 'src/components/layout/Hairline'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
-import { lg, md, screenSm, secondaryText, sm } from 'src/theme/variables'
+import { border, fontColor, lg, md, screenSm, secondaryText, sm } from 'src/theme/variables'
 import { copyToClipboard } from 'src/utils/clipboard'
+import { getNetworkInfo } from 'src/config'
 
+const networkInfo = getNetworkInfo()
 const useStyles = makeStyles(
   createStyles({
     heading: {
@@ -35,6 +37,12 @@ const useStyles = makeStyles(
       borderRadius: '6px',
       border: `1px solid ${secondaryText}`,
     },
+    networkInfo: {
+      backgroundColor: `${networkInfo?.backgroundColor ?? border}`,
+      color: `${networkInfo?.textColor ?? fontColor}`,
+      padding: md,
+      marginBottom: 0,
+    },
     annotation: {
       margin: lg,
       marginBottom: 0,
@@ -79,7 +87,7 @@ type Props = {
   safeName: string
 }
 
-const ReceiveModal = ({ onClose, safeAddress, safeName }: Props) => {
+const ReceiveModal = ({ onClose, safeAddress, safeName }: Props): ReactElement => {
   const classes = useStyles()
 
   return (
@@ -93,6 +101,9 @@ const ReceiveModal = ({ onClose, safeAddress, safeName }: Props) => {
         </IconButton>
       </Row>
       <Hairline />
+      <Paragraph className={classes.networkInfo} noMargin size="lg" weight="bolder">
+        {networkInfo.label} Network only send {networkInfo.label} assets to this Safe.
+      </Paragraph>
       <Paragraph className={classes.annotation} noMargin size="lg">
         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!
@@ -115,7 +126,7 @@ const ReceiveModal = ({ onClose, safeAddress, safeName }: Props) => {
             {safeAddress}
           </Paragraph>
           <CopyBtn content={safeAddress} />
-          <EtherscanBtn type="address" value={safeAddress} />
+          <EtherscanBtn value={safeAddress} />
         </Block>
       </Col>
       <Hairline />

src/components/App/index.tsx

@@ -16,8 +16,8 @@ import CookiesBanner from 'src/components/CookiesBanner'
 import Notifier from 'src/components/Notifier'
 import Backdrop from 'src/components/layout/Backdrop'
 import Img from 'src/components/layout/Img'
-import { getNetwork } from 'src/config'
-import { ETHEREUM_NETWORK } from 'src/logic/wallets/getWeb3'
+import { getNetworkId } from 'src/config'
+import { ETHEREUM_NETWORK } from 'src/config/networks/network.d'
 import { networkSelector } from 'src/logic/wallets/store/selectors'
 import { SAFELIST_ADDRESS, WELCOME_ADDRESS } from 'src/routes/routes'
 import { safeNameSelector, safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
@@ -26,11 +26,11 @@ import SendModal from 'src/routes/safe/components/Balances/SendModal'
 import { useLoadSafe } from 'src/logic/safe/hooks/useLoadSafe'
 import { useSafeScheduledUpdates } from 'src/logic/safe/hooks/useSafeScheduledUpdates'
 import useSafeActions from 'src/logic/safe/hooks/useSafeActions'
-import { currentCurrencySelector, safeFiatBalancesTotalSelector } from 'src/logic/currencyValues/store/selectors/index'
+import { currentCurrencySelector, safeFiatBalancesTotalSelector } from 'src/logic/currencyValues/store/selectors'
 import { formatAmountInUsFormat } from 'src/logic/tokens/utils/formatAmount'
 import { grantedSelector } from 'src/routes/safe/container/selector'
 
-import Receive from './ReceiveModal'
+import ReceiveModal from './ReceiveModal'
 import { useSidebarItems } from 'src/components/AppLayout/Sidebar/useSidebarItems'
 
 const notificationStyles = {
@@ -46,6 +46,12 @@ const notificationStyles = {
   info: {
     background: '#fff',
   },
+  receiveModal: {
+    height: 'auto',
+    maxWidth: 'calc(100% - 30px)',
+    minHeight: '544px',
+    overflow: 'hidden',
+  },
 }
 
 const Frame = styled.div`
@@ -55,7 +61,7 @@ const Frame = styled.div`
   max-width: 100%;
 `
 
-const desiredNetwork = getNetwork()
+const desiredNetwork = getNetworkId()
 
 const useStyles = makeStyles(notificationStyles)
 
@@ -67,7 +73,7 @@ const App: React.FC = ({ children }) => {
   const matchSafe = useRouteMatch({ path: `${SAFELIST_ADDRESS}`, strict: false })
   const history = useHistory()
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
-  const safeName = useSelector(safeNameSelector)
+  const safeName = useSelector(safeNameSelector) ?? ''
   const { safeActionsState, onShow, onHide, showSendFunds, hideSendFunds } = useSafeActions()
   const currentSafeBalance = useSelector(safeFiatBalancesTotalSelector)
   const currentCurrency = useSelector(currentCurrencySelector)
@@ -77,7 +83,7 @@ const App: React.FC = ({ children }) => {
   useLoadSafe(safeAddress)
   useSafeScheduledUpdates(safeAddress)
 
-  const sendFunds = safeActionsState.sendFunds as { isOpen: boolean; selectedToken: string }
+  const sendFunds = safeActionsState.sendFunds
   const formattedTotalBalance = currentSafeBalance ? formatAmountInUsFormat(currentSafeBalance) : ''
   const balance =
     !!formattedTotalBalance && !!currentCurrency ? `${formattedTotalBalance} ${currentCurrency}` : undefined
@@ -138,10 +144,11 @@ const App: React.FC = ({ children }) => {
             <Modal
               description="Receive Tokens Form"
               handleClose={onReceiveHide}
-              open={safeActionsState.showReceive as boolean}
+              open={safeActionsState.showReceive}
+              paperClassName={classes.receiveModal}
               title="Receive Tokens"
             >
-              <Receive onClose={onReceiveHide} safeAddress={safeAddress} safeName={safeName} />
+              <ReceiveModal onClose={onReceiveHide} safeAddress={safeAddress} safeName={safeName} />
             </Modal>
           )}
         </>

src/components/AppLayout/Header/components/CircleDot.tsx

@@ -1,86 +1,27 @@
-import { withStyles } from '@material-ui/core/styles'
-import Dot from '@material-ui/icons/FiberManualRecord'
 import * as React from 'react'
+import { getNetworkInfo } from 'src/config'
 
-import Block from 'src/components/layout/Block'
-import Img from 'src/components/layout/Img'
-import { border, fancy, screenSm, warning } from 'src/theme/variables'
-
-const key = require('../assets/key.svg')
-const triangle = require('../assets/triangle.svg')
-
-const styles = () => ({
-  root: {
-    display: 'none',
-    [`@media (min-width: ${screenSm}px)`]: {
-      display: 'flex',
-    },
-  },
-  dot: {
-    position: 'relative',
-    backgroundColor: '#ffffff',
-    color: fancy,
-  },
-  key: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: border,
-  },
-  warning: {
-    position: 'relative',
-    top: '-2px',
-  },
-})
-
-const buildKeyStyleFrom = (size, center, dotSize) => ({
-  width: `${size}px`,
-  height: `${size}px`,
-  marginLeft: center ? `${dotSize}px` : 'none',
-  borderRadius: `${size}px`,
-})
-
-const buildDotStyleFrom = (size, top, right, mode) => ({
-  width: `${size}px`,
-  height: `${size}px`,
-  borderRadius: `${size}px`,
-  top: `${top}px`,
-  right: `${right}px`,
-  color: mode === 'error' ? fancy : warning,
-})
+type Props = {
+  className: string
+}
 
-const KeyRing = ({
-  center = false,
-  circleSize,
-  classes,
-  dotRight,
-  dotSize,
-  dotTop,
-  hideDot = false,
-  keySize,
-  mode,
-}) => {
-  const keyStyle = buildKeyStyleFrom(circleSize, center, dotSize)
-  const dotStyle = buildDotStyleFrom(dotSize, dotTop, dotRight, mode)
-  const isWarning = mode === 'warning'
-  const img = isWarning ? triangle : key
+export const CircleDot = (props: Props): React.ReactElement => {
+  const networkInfo = getNetworkInfo()
 
   return (
-    <>
-      <Block className={classes.root}>
-        <Block className={classes.key} style={keyStyle}>
-          <Img
-            alt="Status connection"
-            className={isWarning ? classes.warning : undefined}
-            height={keySize}
-            src={img}
-            width={isWarning ? keySize + 2 : keySize}
-          />
-        </Block>
-        {!hideDot && <Dot className={classes.dot} style={dotStyle} />}
-      </Block>
-    </>
+    <div className={props.className}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
+        <circle
+          cx="208"
+          cy="203"
+          r="3"
+          fill="none"
+          fillRule="evenodd"
+          stroke={networkInfo?.backgroundColor ?? '#FF685E'}
+          strokeWidth="3"
+          transform="translate(-203 -198)"
+        />
+      </svg>
+    </div>
   )
 }
-
-export default withStyles(styles as any)(KeyRing)