Merge pull request #846 from yieldprotocol/feat/tokenWrapNext

Token Wrapping/unwrapping
yieldprotocol · May 12, 2022 · b81745d · b81745d
2 parents 6f76a63 + 712b46c
commit b81745d
Show file tree

Hide file tree

Showing 56 changed files with 661 additions and 1,103 deletions.
diff --git a/src/components/ActiveTransaction.tsx b/src/components/ActiveTransaction.tsx
@@ -23,20 +23,23 @@ const InfoBlock = ({
 }) => (
   <>
     {full ? (
-      <Box 
-        direction="column" 
-        align="center" 
-        justify="center" 
-        pad={{ vertical: 'large' }}
-      >
-        <Box gap='small'>
-          <Box direction="row" gap="medium" alignSelf='start'>
+      <Box direction="column" align="center" justify="center" pad={{ vertical: 'large' }}>
+        <Box gap="small">
+          <Box direction="row" gap="medium" alignSelf="start">
             {icon}
             <Text size="large"> {title}</Text>
           </Box>
-          <Box direction="row" gap="medium" fill='horizontal' alignContent='end'>
-            <Box fill align='end' ><Text size="small" weight='lighter'>{subTitle}</Text></Box>
-            {button && <Box flex={false} alignSelf="end">{button}</Box>}
+          <Box direction="row" gap="medium" fill="horizontal" alignContent="end">
+            <Box fill align="end">
+              <Text size="small" weight="lighter">
+                {subTitle}
+              </Text>
+            </Box>
+            {button && (
+              <Box flex={false} alignSelf="end">
+                {button}
+              </Box>
+            )}
           </Box>
         </Box>
       </Box>
@@ -47,8 +50,11 @@ const InfoBlock = ({
           <Box gap="xsmall">
             <Text size="medium">{title}</Text>
             <Box direction="row" gap="xsmall">
-
-            <Box fill align='end' ><Text size="small" weight='lighter'>{subTitle}</Text></Box>
+              <Box fill align="end">
+                <Text size="small" weight="lighter">
+                  {subTitle}
+                </Text>
+              </Box>
             </Box>
             <Box alignSelf="end">{button}</Box>
           </Box>
@@ -79,10 +85,10 @@ const ActiveTransaction = ({
   const activeProcess = txProcess;
 
   return (
-    <Box pad={pad ? { vertical: 'medium' } : undefined} align={full ? 'center': undefined } >
+    <Box pad={pad ? { vertical: 'medium' } : undefined} align={full ? 'center' : undefined}>
       {!full && (activeProcess?.stage === ProcessStage.PROCESS_INACTIVE || !activeProcess) && (
-        <Box justify="between" direction="row" pad="xsmall" >
-          <Text size="xsmall"> Review Transaction </Text>
+        <Box justify="between" direction="row" pad="xsmall">
+          <Text size="xsmall">Review Transaction</Text>
           {!full && <CancelButton action={cancelAction ? () => cancelAction() : () => null} />}
         </Box>
       )}
@@ -91,7 +97,8 @@ const ActiveTransaction = ({
         background={full ? undefined : 'gradient-transparent'}
         round="xsmall"
         pad={full ? { horizontal: 'large' } : 'small'}
-        height={full? undefined: { min:'100px' } }
+        height={full ? undefined : { min: '100px' }}
+        fill
       >
         {(activeProcess?.stage === ProcessStage.PROCESS_INACTIVE || !activeProcess) && (
           <>

diff --git a/src/components/Connect.tsx b/src/components/Connect.tsx
@@ -3,7 +3,7 @@ import { Box, ResponsiveContext, Text } from 'grommet';
 import { ChainContext } from '../contexts/ChainContext';
 import BackButton from './buttons/BackButton';
 import Disclaimer from './Disclaimer';
-import { SettingsContext } from '../contexts/SettingsContext';
+import { Settings, SettingsContext } from '../contexts/SettingsContext';
 import { ISettingsContext } from '../types';
 import GeneralButton from './buttons/GeneralButton';
 import YieldMark from './logos/YieldMark';
@@ -69,10 +69,12 @@ const Connect = ({ setSettingsOpen, setConnectOpen }: any) => {
       </Box>
 
       {disclaimerChecked === false && (
-        <Disclaimer
-          checked={disclaimerChecked}
-          onChange={(event: any) => updateSetting('disclaimerChecked', event.target.checked)}
-        />
+        <Box border={{ color: 'brand' }} round="small" pad="medium">
+          <Disclaimer
+            checked={disclaimerChecked}
+            onChange={(event: any) => updateSetting(Settings.DISCLAIMER_CHECKED, event.target.checked)}
+          />
+        </Box>
       )}
       <Box pad="medium" gap={mobile ? 'large' : 'small'}>
         {[...CONNECTORS.keys()].map((name: string) => {

diff --git a/src/components/CurrencyToggle.tsx b/src/components/CurrencyToggle.tsx
@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import { Box, Text } from 'grommet';
-import { SettingsContext } from '../contexts/SettingsContext';
+import { Settings, SettingsContext } from '../contexts/SettingsContext';
 import { ISettingsContext } from '../types';
 
 const CurrencyToggle = () => {
@@ -17,7 +17,7 @@ const CurrencyToggle = () => {
         // border={dashCurrency === 'USDC' ? undefined : { color: 'lightgrey' }}
         background={dashCurrency === 'USDC' ? 'gradient-transparent' : undefined}
         round={{ corner: 'left' }}
-        onClick={() => updateSetting('dashCurrency', 'USDC')}
+        onClick={() => updateSetting(Settings.DASH_CURRENCY, 'USDC')}
         align="center"
         justify="center"
         elevation={dashCurrency === 'USDC' ? 'xsmall' : 'small'}
@@ -30,7 +30,7 @@ const CurrencyToggle = () => {
         // border={dashCurrency === 'ETH' ? undefined : { color: 'lightgrey' }}
         background={dashCurrency === 'ETH' ? 'gradient-transparent' : undefined}
         round={{ corner: 'right' }}
-        onClick={() => updateSetting('dashCurrency', 'ETH')}
+        onClick={() => updateSetting(Settings.DASH_CURRENCY, 'ETH')}
         align="center"
         justify="center"
         elevation={dashCurrency === 'ETH' ? 'xsmall' : 'small'}

diff --git a/src/components/DashboardSettings.tsx b/src/components/DashboardSettings.tsx
@@ -2,7 +2,7 @@ import { useState, useContext } from 'react';
 import { Button, DropButton, Text, Box } from 'grommet';
 import { FiMoreVertical } from 'react-icons/fi';
 import { ActionType } from '../types';
-import { SettingsContext } from '../contexts/SettingsContext';
+import { Settings, SettingsContext } from '../contexts/SettingsContext';
 
 const DashboardSettings = ({ actionType }: { actionType: string }) => {
   const {
@@ -18,7 +18,7 @@ const DashboardSettings = ({ actionType }: { actionType: string }) => {
         <Box gap="xxsmall">
           <Button
             onClick={() => {
-              updateSetting('dashHideEmptyVaults', !dashHideEmptyVaults);
+              updateSetting(Settings.DASH_HIDE_EMPTY_VAULTS, !dashHideEmptyVaults);
               setSettingsOpen(false);
             }}
             plain

diff --git a/src/components/YieldBalances.tsx b/src/components/YieldBalances.tsx
@@ -52,7 +52,7 @@ const Balances = () => {
   return (
     <Box pad="small" justify="center" align="start" gap="xsmall">
       <Balance image={selectedBase?.image} balance={baseBalance} loading={assetsLoading} />
-      {path === 'borrow' && selectedBase?.id !== selectedIlk?.id && selectedIlk?.idToUse !== WETH && (
+      {path === 'borrow' && selectedBase?.id !== selectedIlk?.id && selectedIlk?.proxyId !== WETH && (
         <Balance image={selectedIlk?.image} balance={ilkBalance} loading={assetsLoading} />
       )}
     </Box>

diff --git a/src/components/YieldSettings.tsx b/src/components/YieldSettings.tsx
@@ -1,6 +1,6 @@
 import { useContext, useState } from 'react';
 import { Anchor, Box, Collapsible, ResponsiveContext, Text, Tip } from 'grommet';
-import { FiChevronUp, FiChevronDown, FiExternalLink, FiX } from 'react-icons/fi';
+import { FiChevronUp, FiChevronDown, FiExternalLink } from 'react-icons/fi';
 import { ChainContext } from '../contexts/ChainContext';
 import { abbreviateHash, clearCachedItems } from '../utils/appUtils';
 import YieldAvatar from './YieldAvatar';
@@ -14,6 +14,7 @@ import ApprovalSetting from './settings/ApprovalSetting';
 import ThemeSetting from './settings/ThemeSetting';
 import GeneralButton from './buttons/GeneralButton';
 import NetworkSetting from './settings/NetworkSetting';
+import UnwrapSetting from './settings/UnwrapSetting';
 import BackButton from './buttons/BackButton';
 
 const YieldSettings = ({ setSettingsOpen, setConnectOpen }: any) => {
@@ -56,12 +57,6 @@ const YieldSettings = ({ setSettingsOpen, setConnectOpen }: any) => {
       <Box gap="small" pad="medium" background="gradient-transparent" flex={false}>
         {mobile && <BackButton action={() => setSettingsOpen(false)} />}
 
-        {/* {!mobile && (
-          <Box fill='horizontal' style={{ position: 'absolute', top:'0px' }} >
-            <BackButton action={() => setSettingsOpen(false)} />
-          </Box>
-        )} */}
-
         {!mobile && (
           <Box gap="small" style={{ position: 'fixed' }} margin={{ left: '-60px', top: '10%' }} animation="slideLeft">
             <YieldAvatar address={account} size={7} />
@@ -126,6 +121,7 @@ const YieldSettings = ({ setSettingsOpen, setConnectOpen }: any) => {
       <Box pad="medium" gap="medium" flex={false}>
         <ThemeSetting />
         <ApprovalSetting />
+        <UnwrapSetting />
         <SlippageSetting />
       </Box>
 

diff --git a/src/components/buttons/BackButton.tsx b/src/components/buttons/BackButton.tsx
@@ -4,9 +4,9 @@ import { FiChevronLeft } from 'react-icons/fi';
 import styled from 'styled-components';
 
 const StyledButton = styled(Button)`
-  -webkit-transition: transform 0.3s ease-in-out;
-  -moz-transition: transform 0.3s ease-in-out;
-  transition: transform 0.3s ease-in-out;
+  -webkit-transition: transform 0.5s ease-in-out;
+  -moz-transition: transform 0.5s ease-in-out;
+  transition: transform 0.5s ease-in-out;
   padding: 0;
   :hover {
     transform: scale(1.25);
@@ -22,21 +22,18 @@ function BackButton({ action }: { action: () => void }) {
   return (
     <Box align="center" direction="row">
       <StyledButton
-
         color="grey"
         onClick={() => action()}
         icon={
-          <Avatar 
-          onMouseEnter={() => setHover(true)}
-          onMouseLeave={() => setHover(false)}
-
-          size="2em" 
-          pad="xsmall" 
-          elevation="xsmall"
-
+          <Avatar
+            onMouseEnter={() => setHover(true)}
+            onMouseLeave={() => setHover(false)}
+            size="2em"
+            pad="xsmall"
+            elevation={hover ? 'small' : undefined}
           >
-            {hover && <Text size="0.5em" weight='lighter'> Back </Text>}
-            {!hover &&  <FiChevronLeft />}
+            {hover && <Text color='text' size="0.5em" weight='lighter'> Back </Text>}
+            {!hover &&   <Text color='text'><FiChevronLeft /> </Text>}
           </Avatar>
         }
       />

diff --git a/src/components/buttons/NextButton.tsx b/src/components/buttons/NextButton.tsx
@@ -4,24 +4,32 @@ import styled from 'styled-components';
 import { useColorScheme } from '../../hooks/useColorScheme';
 
 const StyledButton = styled(Button)`
-
   -webkit-transition: transform 0.2s ease-in-out;
   -moz-transition: transform 0.2s ease-in-out;
   transition: transform 0.2s ease-in-out;
 
   border: 2px solid transparent;
   border-radius: 100px;
-  
-  background: 
-  ${(props: any) => ( props.errorLabel 
+
+  background: ${(props: any) =>
+    props.errorLabel
       ? `linear-gradient(${props.background},${props.background}) padding-box, #F87171 border-box`
-      : `linear-gradient(${props.background}, ${props.background}) padding-box, -webkit-linear-gradient(135deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82) border-box`
-      )};
-  
+      : `linear-gradient(${props.background}, ${props.background}) padding-box, -webkit-linear-gradient(135deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82) border-box`};
+
   :hover:enabled {
     transform: scale(1.02);
     box-shadow: none;
-    background: -webkit-linear-gradient(135deg, #f7953380, #f3705580, #ef4e7b80, #a166ab80, #5073b880, #1098ad80, #07b39b80, #6fba8280);
+    background: -webkit-linear-gradient(
+      135deg,
+      #f7953380,
+      #f3705580,
+      #ef4e7b80,
+      #a166ab80,
+      #5073b880,
+      #1098ad80,
+      #07b39b80,
+      #6fba8280
+    );
   }
 
   :active:enabled {
@@ -32,54 +40,36 @@ const StyledButton = styled(Button)`
     transform: scale(0.9);
     opacity: ${(props: any) => (props.errorLabel ? '0.8 !important' : '0.2 !important')};
   }
-
 `;
 
-// ${(props: any) => ( 
-//   props.theme.dark  
-//   ? 'linear-gradient(135deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82) border-box' 
-//   : 'linear-gradient(135deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82) border-box'
-//   )};
-// border: 2px solid transparent;
-// border-radius: 100px;
-// :hover {
-//     transform: scale(1.02);
-//     border: 2px solid #ffffff00;
-// } 
-//   :disabled {
-//     box-shadow: none;
-//     opacity: ${(props: any) => (props.errorLabel ? '0.8 !important' : '0.2 !important')};
-//   }
-
 const NextButton = (props: any) => {
-
   const theme = useColorScheme();
 
   return (
-  <Box>
-    <StyledButton
-      {...props}
-      color={props.errorLabel ? 'red' : undefined}
-      background= { theme === 'dark' ? '#181818' : '#FEFEFE' }
-      label={
-        props.errorLabel ? (
-          <Box direction="row" gap="small" align="center" fill justify="center">
-            <Text color="red">
-              <FiAlertTriangle style={{ verticalAlign: 'middle' }} />
-            </Text>
-            <Text color="red" size="xsmall">
-              {props.errorLabel}
-            </Text>
-          </Box>
-        ) : (
-          <Box>
-          <Text color="text" > {props.label} </Text>
-          {/* <FiFastForward />  */}
-          </Box>
-        )
-      }
-    />
-  </Box>)
+    <Box>
+      <StyledButton
+        {...props}
+        color={props.errorLabel ? 'red' : undefined}
+        background={theme === 'dark' ? '#181818' : '#FEFEFE'}
+        label={
+          props.errorLabel ? (
+            <Box direction="row" gap="small" align="center" fill justify="center">
+              <Text color="red">
+                <FiAlertTriangle style={{ verticalAlign: 'middle' }} />
+              </Text>
+              <Text color="red" size="xsmall">
+                {props.errorLabel}
+              </Text>
+            </Box>
+          ) : (
+            <Box>
+              <Text color="text"> {props.label} </Text>
+            </Box>
+          )
+        }
+      />
+    </Box>
+  );
 };
 
 export default NextButton;
diff --git a/src/components/logos/3CRVMark.tsx → src/components/logos/CVX3CRVMark.tsx b/src/components/logos/3CRVMark.tsx → src/components/logos/CVX3CRVMark.tsx
@@ -26,7 +26,7 @@ const TinyNum = styled(Box)`
   color: black;
 `;
 
-const TriCRVCVXMark = () => {
+const CVX3CRVMark = () => {
   const { pathname } = useRouter();
   const isDash = pathname.includes('dashboard');
   const bottomStackSize = isDash ? '16px' : '24px';
@@ -45,4 +45,4 @@ const TriCRVCVXMark = () => {
   );
 };
 
-export default TriCRVCVXMark;
+export default CVX3CRVMark;
diff --git a/src/components/logos/WrappedTokenMark.tsx b/src/components/logos/WrappedTokenMark.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Avatar, Box } from 'grommet';
+
+const WrappedTokenMark = ({ tokenMark }: any) => (
+  <Box direction="row" align="center">
+    <Avatar border={{ color: '#444444' }} size='xsmall' alignContent='center' pad='2px'>
+    {/* <Avatar border={{ color: '#444444' }} pad='2px'> */}
+     {tokenMark}
+    {/* </Avatar>  */}
+    </Avatar>
+  </Box>
+);
+
+export default WrappedTokenMark;
diff --git a/src/components/positionItems/LendItem.tsx b/src/components/positionItems/LendItem.tsx
@@ -28,7 +28,7 @@ function LendItem({
   }: { userState: IUserContextState; userActions: IUserContextActions } = useContext(UserContext) as IUserContext;
   const { fyTokenMarketValue } = useLendHelpers(series!, '0');
   const seriesBase: IAsset = assetMap.get(series.baseId)!;
-  const isSelectedBaseAndSeries = series.baseId === seriesBase.id && series.id === selectedSeries?.id;
+  const isSelectedBaseAndSeries = series.baseId === seriesBase.proxyId && series.id === selectedSeries?.id;
 
   const handleSelect = (_series: ISeries) => {
     userActions.setSelectedBase(selectedBase);