Merge pull request #545 from OasisDEX/dev

Release 2.1.1

.github/workflows/aws-staging.yaml

@@ -64,6 +64,7 @@ jobs:
                      --build-arg ETHERSCAN_API_KEY=${{ secrets.ETHERSCAN_API_KEY }} \
                      --build-arg BLOCKNATIVE_API_KEY=${{ secrets.BLOCKNATIVE_STAGING_API_KEY }} \
                      --build-arg SHOW_BUILD_INFO=1 \
+                     --build-arg NODE_ENV=production \
                      --cache-from=$ECR_REGISTRY/$ECR_REPO_NAME:$LATEST_TAG \
                      -t $ECR_REGISTRY/$ECR_REPO_NAME:$SHA_TAG \
                      -t $ECR_REGISTRY/$ECR_REPO_NAME:$LATEST_TAG \

Dockerfile

@@ -19,6 +19,7 @@ ARG SHOW_BUILD_INFO
 ARG ETHERSCAN_API_KEY
 ARG BLOCKNATIVE_API_KEY
 ARG INFURA_PROJECT_ID
+ARG NODE_ENV
 
 ENV COMMIT_SHA=$COMMIT_SHA \
     API_HOST=$API_HOST \
@@ -28,7 +29,8 @@ ENV COMMIT_SHA=$COMMIT_SHA \
     BLOCKNATIVE_API_KEY=$BLOCKNATIVE_API_KEY \
     INFURA_PROJECT_ID=$INFURA_PROJECT_ID \
     USE_TERMS_OF_SERVICE=1 \
-    SHOW_BUILD_INFO=$SHOW_BUILD_INFO
+    SHOW_BUILD_INFO=$SHOW_BUILD_INFO \
+    NODE_ENV=$NODE_ENV
 
 COPY . .
 

components/Layouts.tsx

@@ -10,6 +10,7 @@ import { BackgroundLight } from 'theme/BackgroundLight'
 import { BackgroundLighter } from 'theme/BackgroundLighter'
 
 import { GenericAnnouncement } from './Announcement'
+import { ModalTrezorMetamaskEIP1559 } from './Modal'
 
 interface BasicLayoutProps extends WithChildren {
   header: JSX.Element
@@ -92,6 +93,7 @@ export function AppLayout({ children }: WithChildren) {
         header={<AppHeader />}
       >
         {children}
+        <ModalTrezorMetamaskEIP1559 />
       </WithAnnouncementLayout>
     </>
   )

components/Modal.tsx

@@ -2,12 +2,28 @@ import { Global } from '@emotion/core'
 // @ts-ignore
 import { Icon } from '@makerdao/dai-ui-icons'
 import { ModalProps } from 'helpers/modalHook'
+import { useObservable } from 'helpers/observableHook'
 import { WithChildren } from 'helpers/types'
-import { useTranslation } from 'next-i18next'
+import { Trans, 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'
+import {
+  Box,
+  Button,
+  Card,
+  Container,
+  Flex,
+  Grid,
+  Heading,
+  IconButton,
+  SxStyleProp,
+  Text,
+} from 'theme-ui'
+
+import { useAppContext } from './AppContextProvider'
+import { disconnect } from './connectWallet/ConnectWallet'
+import { AppLink } from './Links'
 
 interface ModalCloseIconProps extends ModalProps<WithChildren> {
   sx?: SxStyleProp
@@ -88,20 +104,15 @@ function overflowClickHandler(onClick: () => void, event: MouseEvent) {
 }
 
 // Helper component to compensate jumping of window upon opening Modal
-export function ModalHTMLOverflow({ close }: { close: () => void }) {
+export function ModalHTMLOverflow() {
   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)
     }
   }, [])
 
@@ -116,9 +127,31 @@ export function ModalHTMLOverflow({ close }: { close: () => void }) {
   ) : null
 }
 
-function ModalWrapper({ children, close }: WithChildren & { close: () => void }) {
+function ModalWrapper({
+  children,
+  id,
+  close,
+  sxWrapper,
+  omitHTMLOverflow,
+}: WithChildren & {
+  close: () => void
+  id?: string
+  sxWrapper?: SxStyleProp
+  omitHTMLOverflow?: boolean
+}) {
+  useEffect(() => {
+    const curriedOverflowClickHandler = curry(overflowClickHandler)(close)
+
+    document.body.addEventListener('click', curriedOverflowClickHandler)
+
+    return () => {
+      document.body.removeEventListener('click', curriedOverflowClickHandler)
+    }
+  }, [])
+
   return (
     <Box
+      id={id}
       sx={{
         position: 'fixed',
         width: '100%',
@@ -131,17 +164,26 @@ function ModalWrapper({ children, close }: WithChildren & { close: () => void })
         display: 'block',
         bg: '#00000080',
         overflow: 'auto',
+        ...sxWrapper,
       }}
     >
-      <ModalHTMLOverflow close={close} />
+      {!omitHTMLOverflow && <ModalHTMLOverflow />}
       {children}
     </Box>
   )
 }
 
-export function Modal({ children, variant, sx, close }: ModalProps) {
+export function Modal({
+  children,
+  variant,
+  sx,
+  sxWrapper,
+  close,
+  id,
+  omitHTMLOverflow,
+}: ModalProps) {
   return (
-    <ModalWrapper close={close}>
+    <ModalWrapper {...{ close, id, sxWrapper, omitHTMLOverflow }}>
       <Flex
         sx={{
           justifyContent: 'center',
@@ -186,3 +228,75 @@ export function ModalErrorMessage({ message }: { message: string }) {
     </Box>
   )
 }
+
+export const MODAL_CONTAINER_TREZOR_METAMASK_EIP1559 = 'trezor-metamask-eip1559'
+
+export function ModalTrezorMetamaskEIP1559() {
+  const { web3Context$ } = useAppContext()
+  const web3Context = useObservable(web3Context$)
+
+  function close() {
+    const modal = document.getElementById(MODAL_CONTAINER_TREZOR_METAMASK_EIP1559)
+
+    if (modal) {
+      modal.style.display = 'none'
+      document.documentElement.style.overflow = 'auto'
+    }
+  }
+
+  function disconnectHandler() {
+    disconnect(web3Context)
+    close()
+  }
+
+  return (
+    <Modal
+      id={MODAL_CONTAINER_TREZOR_METAMASK_EIP1559}
+      close={close}
+      sx={{ maxWidth: '450px', mx: 'auto' }}
+      sxWrapper={{ display: 'none', zIndex: 'modalOnMobilePanel' }}
+      omitHTMLOverflow
+    >
+      <Grid sx={{ p: 4, fontSize: 2 }}>
+        <Heading>
+          <Trans i18nKey="modal-trezor-eip1559-title" />
+        </Heading>
+        <ModalCloseIcon close={close} />
+        <Box>
+          <Trans
+            i18nKey="modal-trezor-eip1559-paragraph1"
+            components={[
+              <AppLink
+                sx={{ fontSize: 'inherit' }}
+                href="https://github.com/MetaMask/metamask-extension/issues/12130"
+              />,
+            ]}
+          />
+        </Box>
+        <Box>
+          <Trans
+            i18nKey="modal-trezor-eip1559-paragraph2"
+            components={[<AppLink sx={{ fontSize: 'inherit' }} href="https://legacy.oasis.app/" />]}
+          />
+        </Box>
+        <Box>
+          <Trans
+            i18nKey="modal-trezor-eip1559-paragraph3"
+            components={[
+              <Button
+                variant="textual"
+                sx={{
+                  textAlign: 'left',
+                  p: 0,
+                  verticalAlign: 'baseline',
+                  fontSize: 'inherit',
+                }}
+                onClick={disconnectHandler}
+              />,
+            ]}
+          />
+        </Box>
+      </Grid>
+    </Modal>
+  )
+}

components/vault/VaultFormContainer.tsx

@@ -49,7 +49,7 @@ export function VaultFormContainer({
       >
         {breakpoint === 0 && (
           <Box>
-            {vaultFormOpened && <ModalHTMLOverflow close={onClose} />}
+            {vaultFormOpened && <ModalHTMLOverflow />}
             <Box
               sx={{
                 display: ['flex', 'none'],

features/content/support/en.ts

@@ -69,6 +69,11 @@ export const content: ContentTypeSupport = {
           answer: `The minimum Vault Debt, also called Dust, is the minimum amount of Dai you must generate to open a new Vault, and maintain. This minimum Vault Debt value is set and can be adjusted at any time by Maker Governance. If the minimum is increased to a value above your current Debt, then you will experience reduced functionality of your Vault until you increase it to above the minimum again. Read more about minimum Vaul Debt [here](https://kb.oasis.app/help/minimum-vault-debt-dust).`,
         },
 
+        {
+          question: "What is ‘Dai available’? Why can't I borrow more Dai?",
+          answer: `The Maker protocol sets an upper limit for for    borrowing against each Vault type: the Debt Ceiling. Dai available represents the maximum amount of Dai all Vault owners can generate against that Vault type until the Debt Ceiling is reached. This Debt Ceiling should not be confused with the Dai available to generate seen in your Vault page. That amount represents the maximum amount of Dai you can borrow based on your current Vault state. In case the Debt Ceiling is reached no more Dai can be generated unless the debt ceiling is lifted or someone payback their debt. The Maker protocol updates the debt ceiling regularly but if you can’t generate more Dai because the Debt Ceiling has been reached please check back in a few hours.`,
+        },
+
         {
           question: 'What is the next price and how do you know?',
           answer: `Within the Maker Protocol, there are always two prices for the collateral, the current price and the next price. To protect the system and users from ‘bad actors’ and flash crashes, the Maker Protocol uses an ‘Oracle Security Module’. This means that all prices that go into the system are delayed by one hour, and only updated once per hour - roughly on the hour. The next price is the price that will come into the system as the ‘Current Price’. It is the Current Price that your Vault is always measured against, so you can only be liquidated once the ‘Current Price’ goes below your  ‘Liquidation Price’. This also means you have up to one hour to react if there is a big price drop and the next price is below your Liquidation Price. You can read more about the Oracle Security Module [here](https://kb.oasis.app/help/the-oracle-security-module).`,
@@ -98,12 +103,12 @@ export const content: ContentTypeSupport = {
         {
           question: 'What is ‘Multiply’?',
           answer:
-            'Oasis Multiply, allows users to borrow Dai and increase their exposure to their selected collateral by creating Multiply Positions that immediately swap the borrowed Dai for more collateral in the same transaction. This is similar to margin positions but without the need to borrow funds from a centralised counterparty. Oasis Multiply is built on top of the Maker Protocol, 1Inch Dex Aggregator and Aave.',
+            'Oasis Multiply, allows users to borrow Dai and increase their exposure to their selected collateral by creating Multiply Positions that immediately swap the borrowed Dai for more collateral in the same transaction. This is similar to margin positions but without the need to borrow funds from a centralised counterparty. Oasis Multiply is built on top of the Maker Protocol and 1Inch Dex Aggregator.',
         },
         {
           question: 'What are the fees for Multiply?',
           answer:
-            'Oasis.app applies a fee of 0.2% for each token swap that takes place within a Multiply transaction. These actions may also incur an additional flashloan fee of 0.09% that goes to Aave in case their liquidity is needed for the action. Multiply Positions will pay an ongoing stability fee to the Maker Protocol like every Maker Vault. As usual Ethereum gas fees may apply depending on the network conditions. Standard actions in all Vaults are, as always, free.',
+            'Oasis.app applies a fee of 0.2% for each token swap that takes place within a Multiply transaction. Flashloans use Maker Flash Mint Module for borrowing Dai which is free. Multiply Positions will pay an ongoing stability fee to the Maker Protocol like every Maker Vault. As usual Ethereum gas fees may apply depending on the network conditions. Standard actions in all Vaults are, as always, free.',
         },
         {
           question: 'How are swaps done?',
@@ -181,13 +186,18 @@ export const content: ContentTypeSupport = {
         {
           question: 'Is Oasis Secure?',
           answer:
-            'Security is our top priority. We stringently follow the best security practices, and regularly conduct smart contract and code audits. In addition, Oasis code is open-source, giving everyone in the community the ability to pressure test and audit the core technology.',
+            'Security is our top priority. We stringently follow the best security practices, and regularly conduct smart contract and code audits. In addition, Oasis code is open-source, giving everyone in the community the ability to pressure test and audit the core technology. You can check our [documentation](https://kb.oasis.app/help/smart-contracts-and-documentation) page where you will find links to our codebase, smart contracts addresses and code and the audit reports.',
         },
         {
           question: 'Can Oasis access the funds in my account or wallet?',
           answer:
             'No. With Dai, you - and only you - have access and control over your Dai. Dai uses blockchain technology to ensure the highest level of trust and transparency, and because of the way blockchain technology works, you ultimately get to decide just how secure you want it to be. This does mean you are your own security ultimately, so it is very important you keep access to your Dai and Oasis account secure.',
         },
+        {
+          question: 'I’ve found a bug? Where can I report issues?',
+          answer:
+            'In case you think you have found a bug critical or not, you can reach us by emailing Support@oasis.app and we will review your report with the highest priority.',
+        },
       ],
     },
     {

features/manageMultiplyVault/tests/manageMultiplyVault.test.ts

@@ -13,6 +13,11 @@ import { zero } from 'helpers/zero'
 import { of, Subject } from 'rxjs'
 import { map } from 'rxjs/operators'
 
+// @ts-ignore
+global.document = {
+  getElementById: () => null,
+}
+
 describe('manageMultiplyVault', () => {
   describe('manageMultiplyVault$', () => {
     describe('adjust position', () => {

features/openMultiplyVault/components/OpenMultiplyVaultView.tsx

@@ -52,7 +52,7 @@ function OpenMultiplyVaultTitle({
       </WithVaultFormStepIndicator>
       <Text variant="paragraph3" sx={{ color: 'text.subtitle', lineHeight: '22px' }}>
         {isEditingStage
-          ? t('vault-form.subtext.edit')
+          ? t('vault-form.subtext.edit-multiply')
           : isProxyStage
           ? t('vault-form.subtext.proxy')
           : isAllowanceStage

helpers/form.ts → helpers/form.tsx

@@ -2,12 +2,14 @@ import { TxMeta, TxState, TxStatus } from '@oasisdex/transactions'
 import { amountFromWei } from '@oasisdex/utils'
 import { BigNumber } from 'bignumber.js'
 import { TxHelpers, TxHelpers$ } from 'components/AppContext'
+import { MODAL_CONTAINER_TREZOR_METAMASK_EIP1559 } from 'components/Modal'
 import { combineLatest, Observable, of } from 'rxjs'
 import { takeWhileInclusive } from 'rxjs-take-while-inclusive'
 import { catchError, first, flatMap, map, startWith, switchMap } from 'rxjs/operators'
 import { OmitProperties, ValueOf } from 'ts-essentials'
 
 import { GasPriceParams, Ticker } from '../blockchain/prices'
+import { ErrorTxState } from '@oasisdex/transactions/lib/src/types'
 
 export enum FormStage {
   idle = 'idle',
@@ -234,6 +236,16 @@ export function transactionToX<X, Y extends TxMeta>(
             case TxStatus.CancelledByTheUser:
             case TxStatus.Failure:
             case TxStatus.Error:
+              const modal = document.getElementById(MODAL_CONTAINER_TREZOR_METAMASK_EIP1559)
+
+              if (
+                (txState as ErrorTxState).error?.message?.includes('params specify an EIP-1559') &&
+                modal
+              ) {
+                modal.style.display = 'block'
+                document.documentElement.style.overflow = 'hidden'
+              }
+
               return isFunction(fiascoX) ? fiascoX(txState) : of(fiascoX)
             case TxStatus.Propagating:
             case TxStatus.WaitingForConfirmation:

helpers/modalHook.tsx

@@ -3,6 +3,7 @@ import * as ReactDOM from 'react-dom'
 
 export interface WithClose {
   close: () => void
+  id?: string
 }
 
 export type ModalProps<T = any> = T & WithClose

package.json

@@ -1,6 +1,6 @@
 {
   "name": "oasis-borrow",
-  "version": "2.0.2",
+  "version": "2.1.1",
   "license": "Apache-2.0",
   "scripts": {
     "start": "ts-node --project ./tsconfig.dev.json -r tsconfig-paths/register -r dotenv-flow/config ./server/server.ts",

public/locales/en/common.json

@@ -583,7 +583,8 @@
     "subtext": {
       "collateral": "Deposit or withdraw from your Vault. Save gas by combining transactions.",
       "dai": "Generate DAI from the collateral in your vault, or payback DAI. Save gas by combining transactions.",
-      "edit": "Simulate your vault by configuring the amount of collateral to deposit, and slide your multiply factor.",
+      "edit": "Simulate your vault by configuring the amount of collateral to deposit, and DAI to generate.",
+      "edit-multiply": "Simulate your vault by configuring the amount of collateral to deposit, and slide your multiply factor.",
       "proxy": "With your smart proxy multiple actions can be performed in one transaction for your Vault. This proxy only needs to be set up once.",
       "allowance": "Specify an allowance to set a maximum on the amount of tokens the vault contracts can interact with.",
       "daiAllowance": "Specify an allowance to set a maximum on the amount of tokens the vault contracts can interact with.",
@@ -633,5 +634,9 @@
       "subtext": "Borrow up to {{maxBorrow}} DAI for every $100,000 worth of {{token}}",
       "button": "Borrow against {{token}}"
     }
-  }
+  },
+  "modal-trezor-eip1559-title": "Trezor with Metamask does not support EIP-1559",
+  "modal-trezor-eip1559-paragraph1": "Oasis.app has recently updated all transactions to support EIP-1559. Doing EIP-1559 transactions with Trezor through metamask is currently not supported, see <0>here</0>.",
+  "modal-trezor-eip1559-paragraph2": "You can continue to use Metamask with Trezor with legacy transactions on our environment here: <0>legacy.oasis.app</0>.",
+  "modal-trezor-eip1559-paragraph3": "Alternatively, if you have a Model T Trezor you can <0>connect</0> directly to Oasis.app."
 }

theme/index.tsx

@@ -755,6 +755,7 @@ const oasisBaseTheme = {
     mobileMenu: 3,
     modal: 4,
     cookie: 5,
+    modalOnMobilePanel: 5,
   },
   grids: {
     vaultContainer: {