Merge pull request #458 from OasisDEX/dev

Release 2.0.1

components/Modal.tsx

@@ -4,6 +4,7 @@ import { Icon } from '@makerdao/dai-ui-icons'
 import { ModalProps } from 'helpers/modalHook'
 import { WithChildren } from 'helpers/types'
 import { useTranslation } from 'next-i18next'
+import { curry } from 'ramda'
 import React, { useCallback, useEffect, useState } from 'react'
 import { TRANSITIONS } from 'theme'
 import { Box, Card, Container, Flex, IconButton, SxStyleProp, Text } from 'theme-ui'
@@ -54,15 +55,53 @@ export function ModalCloseIcon({ close, sx, size = 26, color = 'onSurface' }: Mo
   )
 }
 
+// This will recursively look down to every single child of the target element.
+function iterateAllNodes(target: Node, container: Node[] = [], id = 0) {
+  let nodes = [...container, target]
+  target.childNodes.forEach((node) => {
+    if (node.childNodes.length) {
+      nodes = [...iterateAllNodes(node, nodes, ++id)]
+    } else {
+      nodes.push(node)
+    }
+  })
+
+  return nodes
+}
+
+// The logic is as follows:
+// Whenever we click on an element, the event.target is the element where the event was fired on.
+// If the modal container id is part of the children then that means we clicked outside of it.
+// If the modal container is is not part of the chilren then that means we clicked inside of it.
+function overflowClickHandler(onClick: () => void, event: MouseEvent) {
+  event.stopPropagation()
+  if (event.target) {
+    const hasClickedOnOverlay = iterateAllNodes(event.target as Node).find(
+      (node: any) => node.id === 'modalContainer',
+    )
+    if (hasClickedOnOverlay) {
+      if (onClick) {
+        onClick()
+      }
+    }
+  }
+}
+
 // Helper component to compensate jumping of window upon opening Modal
-export function ModalHTMLOverflow() {
+export function ModalHTMLOverflow({ close }: { close: () => void }) {
   const [compensateWidth, setCompensateWidth] = useState(false)
+
   useEffect(() => {
     document.body.style.width = `${document.body.clientWidth}px`
     setCompensateWidth(true)
 
+    const curriedOverflowClickHandler = curry(overflowClickHandler)(close)
+
+    document.body.addEventListener('click', curriedOverflowClickHandler)
+
     return () => {
       document.body.removeAttribute('style')
+      document.body.removeEventListener('click', curriedOverflowClickHandler)
     }
   }, [])
 
@@ -80,7 +119,6 @@ export function ModalHTMLOverflow() {
 function ModalWrapper({ children, close }: WithChildren & { close: () => void }) {
   return (
     <Box
-      onClick={close}
       sx={{
         position: 'fixed',
         width: '100%',
@@ -95,7 +133,7 @@ function ModalWrapper({ children, close }: WithChildren & { close: () => void })
         overflow: 'auto',
       }}
     >
-      <ModalHTMLOverflow />
+      <ModalHTMLOverflow close={close} />
       {children}
     </Box>
   )
@@ -113,8 +151,8 @@ export function Modal({ children, variant, sx, close }: ModalProps) {
           ...sx,
         }}
       >
-        <Container variant={variant || 'modalHalf'} m="auto" py={2}>
-          <Card p={0} sx={{ position: 'relative' }}>
+        <Container id="modalContainer" variant={variant || 'modalHalf'} m="auto" py={2}>
+          <Card id="modalCard" p={0} sx={{ position: 'relative' }}>
             {children}
           </Card>
         </Container>

components/vault/VaultFormContainer.tsx

@@ -26,6 +26,8 @@ export function VaultFormContainer({
     }
   }, [])
 
+  const onClose = () => setVaultFormOpened(false)
+
   return (
     <VaultFormPortal mobile={breakpoint === 0}>
       <Box
@@ -47,7 +49,7 @@ export function VaultFormContainer({
       >
         {breakpoint === 0 && (
           <Box>
-            {vaultFormOpened && <ModalHTMLOverflow />}
+            {vaultFormOpened && <ModalHTMLOverflow close={onClose} />}
             <Box
               sx={{
                 display: ['flex', 'none'],
@@ -58,7 +60,7 @@ export function VaultFormContainer({
               }}
             >
               <ModalCloseIcon
-                close={() => setVaultFormOpened(false)}
+                close={onClose}
                 sx={{ top: 0, right: 0, color: 'primary', position: 'relative' }}
                 size={3}
               />

features/account/Account.tsx

@@ -169,7 +169,7 @@ export function AccountModal({ close }: ModalProps) {
   const { account, connectionKind } = web3Context
 
   return (
-    <Modal close={close} sx={{ maxWidth: '530px', margin: '0px auto' }}>
+    <Modal id="AccountModal" close={close} sx={{ maxWidth: '530px', margin: '0px auto' }}>
       <ModalCloseIcon {...{ close }} />
       <Grid gap={2} pt={3} mt={1}>
         <Box

features/careers/listings/example-careers/smart-contract-engineer.mdx

@@ -19,4 +19,4 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 
 <br/>
 
-**If that sounds interesting to you, we would love to learn more about you. Please send an email to [work@oazo.com](mailto:work@oazo.com).**
+**If that sounds interesting to you, we would love to learn more about you. Please send an email to [work@oasis.app](mailto:work@oasis.app).**

features/careers/listings/full-stack-developer.mdx

@@ -8,7 +8,7 @@ export const meta = {
 Oazo is the company behind Oasis.app, the front-end to access Maker Protocol and create Dai. Oasis Borrow aims to be the most trusted entry point to the Maker Protocol. The long term mission is to allow users to simply and easily deploy their capital into DeFi and manage it in one trusted place.
 
 ## The team
-We are a team of enthusiastic professionals focused on building and spreading innovative fintech solutions for Web 3.0 and DeFi. You can decide to either work remotely or from our fantastic offices in Warsaw. The team is mostly allocated across Europe. 
+We are a team of enthusiastic professionals focused on building and spreading innovative fintech solutions for Web 3.0 and DeFi. You can decide to either work remotely or from our fantastic offices in Warsaw. The team is mostly allocated across Europe.
 
 ## The technology
 Our software is coded in JavaScript and TypeScript using RX.js, React (including hooks), Postgres, SQL, NoSQL, GraphQL. While creating our apps, we also use blockchain-related technologies: Ethereum blockchain principles, Solidity, test-nets, and contract deployment scripts.
@@ -46,4 +46,4 @@ We are looking for a talented Full-Stack Developer with a few years of coding ex
 
 <br/>
 
-**If this sounds like this could be the role for you, we would love to hear from you! Please reach out to [work@oasis.app](mailto:work@oazo.com).**
+**If this sounds like this could be the role for you, we would love to hear from you! Please reach out to [work@oasis.app](mailto:work@oasis.app).**

features/manageVault/ManageVaultButton.tsx

@@ -184,7 +184,10 @@ export function ManageVaultButton(props: ManageVaultState) {
           trackEvents()
           handleProgress(e)
         }}
-        disabled={!canProgress || !ALLOWED_MULTIPLY_TOKENS.includes(vault.token)}
+        disabled={
+          !canProgress ||
+          (stage === 'multiplyTransitionEditing' && !ALLOWED_MULTIPLY_TOKENS.includes(vault.token))
+        }
       >
         {isLoadingStage ? (
           <Flex sx={{ justifyContent: 'center', alignItems: 'center' }}>

features/openVaultOverview/SelectVaultTypeModal.tsx

@@ -38,13 +38,15 @@ export function SelectVaultTypeModal({ ilk, token, liquidationRatio, close }: Mo
               token,
             })}
           </Text>
-          <AppLink
-            variant="primary"
-            href={`/vaults/open-multiply/${ilk}`}
-            sx={{ display: 'block', textAlign: 'center', mb: 3 }}
-          >
-            {t('select-vault-type.multiply.button', { token })}
-          </AppLink>
+          <Box onClick={close}>
+            <AppLink
+              variant="primary"
+              href={`/vaults/open-multiply/${ilk}`}
+              sx={{ display: 'block', textAlign: 'center', mb: 3 }}
+            >
+              {t('select-vault-type.multiply.button', { token })}
+            </AppLink>
+          </Box>
         </Box>
         <Divider />
 
@@ -58,13 +60,15 @@ export function SelectVaultTypeModal({ ilk, token, liquidationRatio, close }: Mo
               token,
             })}
           </Text>
-          <AppLink
-            variant="primary"
-            href={`/vaults/open/${ilk}`}
-            sx={{ display: 'block', textAlign: 'center' }}
-          >
-            {t('select-vault-type.borrow.button', { token })}
-          </AppLink>
+          <Box onClick={close}>
+            <AppLink
+              variant="primary"
+              href={`/vaults/open/${ilk}`}
+              sx={{ display: 'block', textAlign: 'center' }}
+            >
+              {t('select-vault-type.borrow.button', { token })}
+            </AppLink>
+          </Box>
         </Box>
       </Grid>
     </Modal>