From 807acaa536fdc233030f742d19649f43ab9b8588 Mon Sep 17 00:00:00 2001 From: Dan Miller Date: Tue, 18 Aug 2020 11:23:54 -0230 Subject: [PATCH 1/2] Add exchange-rate-display component --- .../exchange-rate-display.js | 65 +++++++++++++++++++ .../exchange-rate-display.stories.js | 47 ++++++++++++++ .../token/exchange-rate-display/index.js | 1 + .../token/exchange-rate-display/index.scss | 26 ++++++++ ui/app/pages/token/index.scss | 1 + 5 files changed, 140 insertions(+) create mode 100644 ui/app/pages/token/exchange-rate-display/exchange-rate-display.js create mode 100644 ui/app/pages/token/exchange-rate-display/exchange-rate-display.stories.js create mode 100644 ui/app/pages/token/exchange-rate-display/index.js create mode 100644 ui/app/pages/token/exchange-rate-display/index.scss diff --git a/ui/app/pages/token/exchange-rate-display/exchange-rate-display.js b/ui/app/pages/token/exchange-rate-display/exchange-rate-display.js new file mode 100644 index 000000000..46e2f4e09 --- /dev/null +++ b/ui/app/pages/token/exchange-rate-display/exchange-rate-display.js @@ -0,0 +1,65 @@ +import React, { useState } from 'react' +import PropTypes from 'prop-types' +import BigNumber from 'bignumber.js' +import classnames from 'classnames' +import { calcTokenAmount } from '../../../helpers/utils/token-util.js' + +export default function ExchangeRateDisplay ({ + primaryTokenValue, + primaryTokenDecimals = 18, + primaryTokenSymbol, + secondaryTokenValue, + secondaryTokenDecimals = 18, + secondaryTokenSymbol, + arrowColor = 'black', + className, +}) { + const [showPrimaryToSecondary, setShowPrimaryToSecondary] = useState(true) + const [arrowsRotation, setArrowRotation] = useState(0) + + const primaryTokenAmount = calcTokenAmount(primaryTokenValue, primaryTokenDecimals) + const secondaryTokenAmount = calcTokenAmount(secondaryTokenValue, secondaryTokenDecimals) + + const conversionRateFromPrimaryToSecondary = (new BigNumber(secondaryTokenAmount)).div(primaryTokenAmount).round(6).toString(10) + const conversionRateFromSecondaryToPrimary = (new BigNumber(primaryTokenAmount)).div(secondaryTokenAmount).round(6).toString(10) + + const baseSymbol = showPrimaryToSecondary ? primaryTokenSymbol : secondaryTokenSymbol + const ratiodSymbol = showPrimaryToSecondary ? secondaryTokenSymbol : primaryTokenSymbol + const rate = showPrimaryToSecondary ? conversionRateFromPrimaryToSecondary : conversionRateFromSecondaryToPrimary + + return ( +
+ 1 + {baseSymbol} + = + {rate} + {ratiodSymbol} +
{ + setShowPrimaryToSecondary(!showPrimaryToSecondary) + setArrowRotation(arrowsRotation + 360) + }} + style={{ transform: `rotate(${arrowsRotation}deg)` }} + > + + + +
+
+ ) +} + +ExchangeRateDisplay.propTypes = { + primaryTokenValue: PropTypes.string.isRequired, + primaryTokenDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + primaryTokenSymbol: PropTypes.string.isRequired, + secondaryTokenValue: PropTypes.string.isRequired, + secondaryTokenDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + secondaryTokenSymbol: PropTypes.string.isRequired, + className: PropTypes.string, + arrowColor: PropTypes.string, +} diff --git a/ui/app/pages/token/exchange-rate-display/exchange-rate-display.stories.js b/ui/app/pages/token/exchange-rate-display/exchange-rate-display.stories.js new file mode 100644 index 000000000..d7708dd08 --- /dev/null +++ b/ui/app/pages/token/exchange-rate-display/exchange-rate-display.stories.js @@ -0,0 +1,47 @@ +import React from 'react' +import { text, number } from '@storybook/addon-knobs/react' +import ExchangeRateDisplay from './exchange-rate-display' + +export default { + title: 'ExchangeRateDisplay', +} + +export const Default = () => { + return ( + + ) +} + +export const WhiteOnBlue = () => { + return ( +
+ +
+ ) +} diff --git a/ui/app/pages/token/exchange-rate-display/index.js b/ui/app/pages/token/exchange-rate-display/index.js new file mode 100644 index 000000000..e572fe698 --- /dev/null +++ b/ui/app/pages/token/exchange-rate-display/index.js @@ -0,0 +1 @@ +export { default } from './exchange-rate-display' diff --git a/ui/app/pages/token/exchange-rate-display/index.scss b/ui/app/pages/token/exchange-rate-display/index.scss new file mode 100644 index 000000000..d5c740453 --- /dev/null +++ b/ui/app/pages/token/exchange-rate-display/index.scss @@ -0,0 +1,26 @@ +.exchange-rate-display { + @include H6; + + display: flex; + align-items: flex-end; + justify-content: center; + color: $Black-100; + + span { + margin-right: 4px; + } + + &__bold { + font-weight: bold; + } + + &__switch-arrows { + cursor: pointer; + margin-top: 2px; + transition: transform 0.5s ease-in-out; + } +} + +.exchange-rate-display-white { + color: $white; +} diff --git a/ui/app/pages/token/index.scss b/ui/app/pages/token/index.scss index 013ff3928..01c548281 100644 --- a/ui/app/pages/token/index.scss +++ b/ui/app/pages/token/index.scss @@ -1 +1,2 @@ @import 'fee-card/index'; +@import 'exchange-rate-display/index'; From 9787ca633bb64ec0657aa442a6c6450cb2ffbed3 Mon Sep 17 00:00:00 2001 From: Dan Miller Date: Tue, 18 Aug 2020 15:27:47 -0230 Subject: [PATCH 2/2] Improve scss naming --- .../exchange-rate-display/exchange-rate-display.stories.js | 2 +- ui/app/pages/token/exchange-rate-display/index.scss | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/ui/app/pages/token/exchange-rate-display/exchange-rate-display.stories.js b/ui/app/pages/token/exchange-rate-display/exchange-rate-display.stories.js index d7708dd08..ff939f121 100644 --- a/ui/app/pages/token/exchange-rate-display/exchange-rate-display.stories.js +++ b/ui/app/pages/token/exchange-rate-display/exchange-rate-display.stories.js @@ -39,7 +39,7 @@ export const WhiteOnBlue = () => { secondaryTokenValue={text('secondaryTokenValue', '200000000000000000')} secondaryTokenDecimals={number('secondaryTokenDecimals', 18)} secondaryTokenSymbol={text('secondaryTokenSymbol', 'ABC')} - className="exchange-rate-display-white" + className="exchange-rate-display--white" arrowColor="white" /> diff --git a/ui/app/pages/token/exchange-rate-display/index.scss b/ui/app/pages/token/exchange-rate-display/index.scss index d5c740453..c416f1f53 100644 --- a/ui/app/pages/token/exchange-rate-display/index.scss +++ b/ui/app/pages/token/exchange-rate-display/index.scss @@ -19,8 +19,8 @@ margin-top: 2px; transition: transform 0.5s ease-in-out; } -} -.exchange-rate-display-white { - color: $white; + &--white { + color: $white; + } }