Compound (#3187)

* add new experimental settings for eth js bridge

* [WIP] compound first screens

* empty states for active accounts and closed loans

* (Lending): add in manage lending asset modal + some points of entry

* (Lending): add base terms and conditions modal - todo: open it only if terms not validated before a flow and redirect to given flow once validated

* (Lending): information steps + terms added

* (Lending): enable information steps + terms added + selecte account

* add empty state to history

* (Lending): SelectAccountStep updated

* (Lending): enable flow modal boilerplate added

* wip supply flow

* (Lending): enable flow ui added

* (Lending): fix import

* supply flow amount step

* supply flow confirmation step

* (Lending): withdraw flow added - TODO retrieve withdrawable balance and update UI accordingly

* (Lending): remove header exchange account action for now

* confirmation fixes

* (Lending): manage modal updated with new reenable flow

* (Lending): updated noLimit -> useallAmount in tx bridge

* ETHjs rework

* rates table

* ethjs iteration

* bump deps

* (Lending): add account lending summary UI

* finish withdraw flow

* fix flow wip

* fix flow issues

* wen compound

* (Modal): header title issue fix

* fix modal header spacing issue

* compound operations history

* fix enable flow + remove console.log

* remove extra fields in operationdetails for compound

* update live-common

* better description of experimental

* fix lend info coming back every time

* fix gross apy font size

* LL-3683 fix ui + add fees + show eth balance

* LL-3691 fix ui select account enabled indicator

* LL-3674 terms modal condition updated

* LL-3691 fix ui select account enabled indicator

* LL-3693 dashboard manage supply flow updated

* LL-3675 add token currency icon - needs live common bump

* pixel polish

* pixel polish + removal of send/receive sidebar nav

* (Lending): add high fees warning modal + ui polish

* fix ui

* LL-3700 lending dashboard tables align

* LL-3695 Supply flow step 1 selector fixes

* revert removal of send-receive navbar items

* LL-3692 fix banner messages and action in modal manage lend

* various fixes and pixel push

* compound fixes

* Integrate latest ethjs evolution

* fixes with lastest live-common

* fix history list of compound ops

* fix: remove error on retry enable and supply

* bump live-common

* fix tx updater in supply

* bump live-common

* bump live-common

* info modal when lending with no eth accounts

* hide error on gasFieldPrice on supply flow

* load compound rates even without eth accounts

* bump live-common

* yarn.lock file

* LL-3762 (Dashboard): rates lend button disabled if totalBalance is zero

* LL-3766 (EnableFlow): remove view details cta on success screen

* update wording

* change warning logic

* bump live-common

* (Ethereum): add specific warning messages for tx modes

* fix badge in select account

* (Add account): move learn more into tokentips to not have cta leakage

* fix last wording

Co-authored-by: LFBarreto <lfb.access@gmail.com>
Co-authored-by: Gaëtan Renaudeau <renaudeau.gaetan@gmail.com>

.gitignore

@@ -116,5 +116,7 @@ dist
 src/renderer/generated/
 tests/specs/__image_snapshots__/__diff_output__
 tests/tmp
+
+# Yalc
 .yalc
 yalc.lock

package.json

@@ -44,7 +44,7 @@
  "@ledgerhq/hw-transport-http": "^5.26.0",
  "@ledgerhq/hw-transport-node-hid-singleton": "^5.26.0",
  "@ledgerhq/ledger-core": "6.9.1",
- "@ledgerhq/live-common": "^15.5.0-ethjs.6",
+ "@ledgerhq/live-common": "15.5.0-beta.8",
  "@ledgerhq/logs": "^5.26.0",
  "@tippyjs/react": "^4.0.2",
  "@trust/keyto": "^1.0.1",

src/renderer/Default.js

@@ -14,6 +14,7 @@ import Manager from "~/renderer/screens/manager";
 import Exchange from "~/renderer/screens/exchange";
 import Account from "~/renderer/screens/account";
 import Asset from "~/renderer/screens/asset";
+import Lend from "~/renderer/screens/lend";
 import Box from "~/renderer/components/Box/Box";
 import ListenDevices from "~/renderer/components/ListenDevices";
 import ExportLogsButton from "~/renderer/components/ExportLogsButton";
@@ -99,6 +100,7 @@ const Default = () => {
  <Route path="/settings" render={props => <Settings {...props} />} />
  <Route path="/accounts" render={props => <Accounts {...props} />} />
  <Route path="/manager" render={props => <Manager {...props} />} />
+ <Route path="/lend" render={props => <Lend {...props} />} />
  <Route path="/exchange" render={props => <Exchange {...props} />} />
  <Route
  path="/account/:parentId/:id"

src/renderer/ModalsLayer.js

@@ -28,30 +28,39 @@ const BackDrop: ThemedComponent<{ state: string }> = styled.div.attrs(({ state }
  transition: opacity 200ms cubic-bezier(0.3, 1, 0.5, 0.8);
 `;
 
-const ModalsLayer = ({ visibleModals }: *) => (
- <Transition
- in={visibleModals.length > 0}
- appear
- mountOnEnter
- unmountOnExit
- timeout={{
- appear: 100,
- enter: 100,
- exit: 200,
- }}
- >
- {state => (
- <BackDrop state={state}>
- {/* {// Will only render at the end of december
+const ModalsLayer = ({ visibleModals }: *) => {
+ const filteredModals = visibleModals.filter(
+ ({ name, MODAL_SHOW_ONCE }) => !MODAL_SHOW_ONCE || !global.sessionStorage.getItem(name),
+ );
+ filteredModals.forEach(
+ ({ name, MODAL_SHOW_ONCE }) =>
+ MODAL_SHOW_ONCE && global.sessionStorage.setItem(name, Date.now()),
+ );
+ return (
+ <Transition
+ in={filteredModals.length > 0}
+ appear
+ mountOnEnter
+ unmountOnExit
+ timeout={{
+ appear: 100,
+ enter: 100,
+ exit: 200,
+ }}
+ >
+ {state => (
+ <BackDrop state={state}>
+ {/* {// Will only render at the end of december
  isSnowTime() ? <Snow numFlakes={200} /> : null} */}
- {visibleModals.map(({ name, ...data }, i) => {
- const ModalComponent = modals[name];
- return <ModalComponent key={name} name={name} {...data} />;
- })}
- </BackDrop>
- )}
- </Transition>
-);
+ {filteredModals.map(({ name, ...data }, i) => {
+ const ModalComponent = modals[name];
+ return <ModalComponent key={name} name={name} {...data} />;
+ })}
+ </BackDrop>
+ )}
+ </Transition>
+ );
+};
 
 const visibleModalsSelector = createSelector(modalsStateSelector, state =>
  Object.keys(state)

src/renderer/actions/general.js

@@ -4,6 +4,7 @@ import type { BigNumber } from "bignumber.js";
 import type { OutputSelector } from "reselect";
 import { createSelector } from "reselect";
 import type { Currency, AccountLikeArray, Account } from "@ledgerhq/live-common/lib/types";
+import { findCompoundToken } from "@ledgerhq/live-common/lib/currencies";
 import { isAccountDelegating } from "@ledgerhq/live-common/lib/families/tezos/bakers";
 import {
  nestedSortAccounts,
@@ -65,6 +66,14 @@ export const flattenSortAccountsSelector: OutputSelector<
  AccountLikeArray,
 > = createSelector(accountsSelector, sortAccountsComparatorSelector, flattenSortAccounts);
 
+export const flattenSortAccountsCompoundOnlySelector: OutputSelector<
+ State,
+ void,
+ AccountLikeArray,
+> = createSelector(flattenSortAccountsSelector, accounts =>
+ accounts.filter(acc => (accounts.type === "TokenAccount" ? !!findCompoundToken(acc) : false)),
+);
+
 export const flattenSortAccountsEnforceHideEmptyTokenSelector: OutputSelector<
  State,
  void,

src/renderer/actions/settings.js

@@ -106,6 +106,10 @@ export const setDeepLinkUrl = (url: ?string) => ({
  payload: url,
 });
 
+export const setFirstTimeLend = () => ({
+ type: "SET_FIRST_TIME_LEND",
+});
+
 export const setSwapProviders = (swapProviders?: AvailableProvider[]) => ({
  type: "SETTINGS_SET_SWAP_PROVIDERS",
  swapProviders,

src/renderer/components/BadgeLabel.js

@@ -0,0 +1,38 @@
+// @flow
+import React from "react";
+import styled from "styled-components";
+import type { ThemedComponent } from "~/renderer/styles/StyleProvider";
+import Box from "./Box/Box";
+import Text from "./Text";
+
+type Props = {
+ children?: React$Node,
+ uppercase?: boolean,
+ innerStyle?: any,
+};
+
+const Container: ThemedComponent<{}> = styled(Box).attrs(() => ({
+ px: 2,
+ my: 1,
+ borderRadius: 4,
+ bg: "blueTransparentBackground",
+}))`
+ display: inline-block;
+`;
+
+const TextContainer: ThemedComponent<{ uppercase: boolean }> = styled(Text).attrs(() => ({
+ ff: "Inter|Bold",
+ fontSize: 2,
+ color: "wallet",
+}))`
+ text-transform: ${p => (p.uppercase ? "uppercase" : "initial")};
+`;
+
+const BadgeLabel = ({ children, uppercase = true, innerStyle = {} }: Props) =>
+ children ? (
+ <Container style={innerStyle ? { ...innerStyle } : {}}>
+ <TextContainer uppercase={uppercase}>{children}</TextContainer>
+ </Container>
+ ) : null;
+
+export default BadgeLabel;

src/renderer/components/CryptoCurrencyIcon.js

@@ -1,7 +1,7 @@
 // @flow
 import React from "react";
 import styled, { withTheme } from "styled-components";
-import { getCryptoCurrencyIcon } from "@ledgerhq/live-common/lib/react";
+import { getCryptoCurrencyIcon, getTokenCurrencyIcon } from "@ledgerhq/live-common/lib/react";
 import type { Currency } from "@ledgerhq/live-common/lib/types";
 import { getCurrencyColor } from "~/renderer/getCurrencyColor";
 import { mix } from "~/renderer/styles/helpers";
@@ -60,10 +60,16 @@ const CryptoCurrencyIcon = ({ currency, circle, size, overrideColor, inactive, t
  return null;
  }
  if (currency.type === "TokenCurrency") {
+ const TokenIconCurrency = getTokenCurrencyIcon && getTokenCurrencyIcon(currency);
+
  return (
  <TokenIconWrapper>
  <TokenIcon circle={circle} color={color} size={size}>
- {currency.ticker[0]}
+ {TokenIconCurrency ? (
+ <TokenIconCurrency size={size * 0.55} color={color} />
+ ) : (
+ currency.ticker[0]
+ )}
  </TokenIcon>
  </TokenIconWrapper>
  );

src/renderer/components/FeeSliderField.js

@@ -21,7 +21,7 @@ type Props = {
  value: BigNumber,
  onChange: BigNumber => void,
  unit: Unit,
- error: Error,
+ error: ?Error,
  defaultValue: BigNumber,
 };
 

src/renderer/components/InfoBox.js

@@ -11,24 +11,31 @@ import { FakeLink } from "./Link";
 type Props = {
  children: React$Node,
  onLearnMore?: () => void,
+ learnMoreLabel?: React$Node,
  horizontal?: boolean,
 };
 
-export default function InfoBox({ children: description, onLearnMore, horizontal = true }: Props) {
+export default function InfoBox({
+ children: description,
+ onLearnMore,
+ learnMoreLabel,
+ horizontal = true,
+}: Props) {
  const { t } = useTranslation();
+ const label = learnMoreLabel || t("common.learnMore");
  return (
  <Container>
  <InfoCircle size={16} />
- <Box flex="1" margin={2} ml={16} horizontal={horizontal}>
- <Box flex="1">
- <Text ff="Inter|Regular" fontSize={3}>
+ <Box flex="1" margin={2} ml={16} horizontal={horizontal} alignItems="center">
+ <Box flex="1" style={{ wordBreak: "break-all" }}>
+ <Text ff="Inter|Regular" fontSize={3} style={{ wordBreak: "break-word" }}>
  {description}
  </Text>
  </Box>
  {onLearnMore && (
  <Box>
  <Text ff="Inter|SemiBold" fontSize={3}>
- <FakeLink onClick={onLearnMore}>{t("common.learnMore")}</FakeLink>
+ <FakeLink onClick={onLearnMore}>{label}</FakeLink>
  </Text>
  </Box>
  )}

src/renderer/components/InputCurrency.js

@@ -61,6 +61,7 @@ type Props = {
  onChangeUnit: Unit => void,
  locale: string,
  forwardedRef: ?ElementRef<any>,
+ placeholder?: string,
 };
 
 type State = {
@@ -191,7 +192,15 @@ class InputCurrency extends PureComponent<Props, State> {
  };
 
  render() {
- const { renderRight, showAllDigits, unit, subMagnitude, locale, ...rest } = this.props;
+ const {
+ renderRight,
+ showAllDigits,
+ unit,
+ subMagnitude,
+ locale,
+ placeholder,
+ ...rest
+ } = this.props;
  const { displayValue } = this.state;
 
  return (
@@ -207,7 +216,8 @@ class InputCurrency extends PureComponent<Props, State> {
  placeholder={
  displayValue
  ? ""
- : format(unit, BigNumber(0), {
+ : placeholder ||
+ format(unit, BigNumber(0), {
  locale,
  isFocused: false,
  showAllDigits,

src/renderer/components/MainSideBar/index.js

@@ -12,7 +12,7 @@ import { sidebarCollapsedSelector, lastSeenDeviceSelector } from "~/renderer/red
 import { isNavigationLocked } from "~/renderer/reducers/application";
 
 import { openModal } from "~/renderer/actions/modals";
-import { setSidebarCollapsed } from "~/renderer/actions/settings";
+import { setFirstTimeLend, setSidebarCollapsed } from "~/renderer/actions/settings";
 
 import useExperimental from "~/renderer/hooks/useExperimental";
 
@@ -25,6 +25,7 @@ import IconReceive from "~/renderer/icons/Receive";
 import IconSend from "~/renderer/icons/Send";
 import IconExchange from "~/renderer/icons/Exchange";
 import IconChevron from "~/renderer/icons/ChevronRight";
+import IconLending from "~/renderer/icons/Lending";
 import IconExperimental from "~/renderer/icons/Experimental";
 import IconSwap from "~/renderer/icons/Swap";
 
@@ -182,6 +183,7 @@ const MainSideBar = () => {
  const noAccounts = useSelector(accountsSelector).length === 0;
  const hasStarredAccounts = useSelector(starredAccountsSelector).length > 0;
  const displayBlueDot = useManagerBlueDot(lastSeenDevice);
+ const firstTimeLend = useSelector(state => state.settings.firstTimeLend);
 
  const handleCollapse = useCallback(() => {
  dispatch(setSidebarCollapsed(!collapsed));
@@ -212,6 +214,13 @@ const MainSideBar = () => {
  push("/exchange");
  }, [push]);
 
+ const handleClickLend = useCallback(() => {
+ if (firstTimeLend) {
+ dispatch(setFirstTimeLend());
+ }
+ push("/lend");
+ }, [push, firstTimeLend, dispatch]);
+
  const handleClickSwap = useCallback(() => {
  push("/swap");
  }, [push]);
@@ -306,6 +315,16 @@ const MainSideBar = () => {
  isActive={location.pathname === "/swap"}
  collapsed={secondAnim}
  />
+ <SideBarListItem
+ id={"lend"}
+ label={t("sidebar.lend")}
+ icon={IconLending}
+ iconActiveColor="wallet"
+ onClick={handleClickLend}
+ isActive={location.pathname === "/lend"}
+ collapsed={secondAnim}
+ NotifComponent={firstTimeLend ? <Dot collapsed={collapsed} /> : null}
+ />
  <SideBarListItem
  id={"manager"}
  label={t("sidebar.manager")}

src/renderer/components/Modal/ModalBody.js

@@ -11,6 +11,7 @@ import type { RenderProps } from ".";
 type Props = {
  title?: React$Node,
  subTitle?: React$Node,
+ headerStyle?: *,
  onBack?: void => void,
  onClose?: void => void,
  render?: (?RenderProps) => any,
@@ -37,6 +38,7 @@ class ModalBody extends PureComponent<Props> {
  onClose,
  title,
  subTitle,
+ headerStyle,
  render,
  renderFooter,
  renderProps,
@@ -46,10 +48,9 @@ class ModalBody extends PureComponent<Props> {
 
  // For `renderFooter` returning falsy values, we need to resolve first.
  const renderedFooter = renderFooter && renderFooter(renderProps);
-
  return (
  <>
- <ModalHeader subTitle={subTitle} onBack={onBack} onClose={onClose}>
+ <ModalHeader subTitle={subTitle} onBack={onBack} onClose={onClose} style={headerStyle}>
  {title || null}
  </ModalHeader>
  <ModalContent ref={this._content} noScroll={noScroll}>