Stake UI: Tab Add | Withraw #436 (#459)

* added base tabs to the stake view * refactored stake stories * added advanced mode button * added translations for stake
thorchain · Sep 15, 2020 · c63c269 · c63c269
1 parent b69643d
commit c63c269
Show file tree

Hide file tree

Showing 12 changed files with 141 additions and 35 deletions.
diff --git a/src/renderer/components/Tabs/Tabs.tsx b/src/renderer/components/Tabs/Tabs.tsx
@@ -1,17 +1,26 @@
 import React, { useMemo, useState } from 'react'
 
 import { Tabs as ATabs } from 'antd'
+import { TabsProps } from 'antd/lib/tabs'
 
 import * as Styled from './Tabs.styles'
 
-type Props = {
+type Props = TabsProps & {
   defaultTabIndex?: number
   tabs: { label: React.ReactNode; key: string; content: React.ReactNode }[]
   centerContent?: boolean
   activeTabKey?: string
 }
 
-export const Tabs: React.FC<Props> = ({ tabs, defaultTabIndex, centerContent, ...props }): JSX.Element => {
+export const Tabs: React.FC<Props> = ({
+  tabs,
+  defaultTabIndex,
+  centerContent,
+  activeTabKey: activeTabKeyProp,
+  centered = true,
+  className,
+  tabBarExtraContent
+}): JSX.Element => {
   const [activeTabKey, setActiveTabKey] = useState(tabs[defaultTabIndex || 0].key)
   const content = useMemo(
     () =>
@@ -24,7 +33,11 @@ export const Tabs: React.FC<Props> = ({ tabs, defaultTabIndex, centerContent, ..
   )
 
   return (
-    <Styled.Tabs centered={true} activeKey={props.activeTabKey || activeTabKey}>
+    <Styled.Tabs
+      tabBarExtraContent={tabBarExtraContent}
+      className={className}
+      centered={centered}
+      activeKey={activeTabKeyProp || activeTabKey}>
       {content}
     </Styled.Tabs>
   )

diff --git a/src/renderer/components/stake/Stake.stories.tsx b/src/renderer/components/stake/Stake.stories.tsx
@@ -2,8 +2,9 @@ import React from 'react'
 
 import { storiesOf } from '@storybook/react'
 
+import { defaultPoolShare } from '../uielements/poolShare/PoolShare.stories'
 import { Stake } from './Stake'
 
 storiesOf('Stake', module).add('default', () => {
-  return <Stake />
+  return <Stake topContent={'TopContainer'} shareContent={defaultPoolShare} />
 })
diff --git a/src/renderer/components/stake/Stake.styles.tsx b/src/renderer/components/stake/Stake.styles.tsx
@@ -2,6 +2,8 @@ import styled from 'styled-components'
 import { palette } from 'styled-theme'
 
 import { media } from '../../helpers/styleHelper'
+import { Tabs as TabsBase } from '../Tabs/Tabs'
+import Button from '../uielements/button'
 
 export const Container = styled('div')`
   min-height: 100%;
@@ -42,3 +44,50 @@ export const StakeContentContainer = styled('div')`
   width: 100%;
   background: ${palette('background', 0)};
 `
+
+export const Tabs = styled(TabsBase)`
+  .ant-tabs {
+    &-nav {
+      padding: 0 10px;
+      ${media.sm`
+        padding: 0 50px;
+    `}
+    }
+  }
+`
+
+export const AdvancedButton = styled(Button)`
+  position: relative;
+
+  &.ant-btn {
+    padding: 0 9px;
+    min-width: auto;
+  }
+
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: 5px;
+    width: 5px;
+    background: currentColor;
+    border-radius: 50%;
+  }
+
+  ${media.sm`
+    &:after {
+      display: none;
+    }
+  `}
+
+  span {
+    display: none;
+
+    ${media.sm`
+      display: inline-block;
+    `}
+  }
+`
diff --git a/src/renderer/components/stake/Stake.tsx b/src/renderer/components/stake/Stake.tsx
@@ -1,14 +1,42 @@
-import React from 'react'
+import React, { useMemo } from 'react'
+
+import { useIntl } from 'react-intl'
 
 import * as Styled from './Stake.styles'
 
-export const Stake: React.FC = () => {
+type Props = {
+  shareContent: React.ReactNode
+  topContent: React.ReactNode
+}
+
+export const Stake: React.FC<Props> = ({ shareContent, topContent }) => {
+  const intl = useIntl()
+
+  const tabs = useMemo(
+    () => [
+      { label: intl.formatMessage({ id: 'common.add' }), key: 'add', content: 'add' },
+      { label: intl.formatMessage({ id: 'stake.withdraw' }), key: 'withdraw', content: 'withdraw' }
+    ],
+    [intl]
+  )
+
+  const extra = useMemo(
+    () => (
+      <Styled.AdvancedButton color="primary" typevalue="outline">
+        {intl.formatMessage({ id: 'stake.advancedMode' })}
+      </Styled.AdvancedButton>
+    ),
+    [intl]
+  )
+
   return (
     <Styled.Container>
-      <Styled.TopContainer>TopContainer</Styled.TopContainer>
+      <Styled.TopContainer>{topContent}</Styled.TopContainer>
       <Styled.ContentContainer>
-        <Styled.TotalContainer>TotalContainer</Styled.TotalContainer>
-        <Styled.StakeContentContainer>StakeContentContainer</Styled.StakeContentContainer>
+        <Styled.TotalContainer>{shareContent}</Styled.TotalContainer>
+        <Styled.StakeContentContainer>
+          <Styled.Tabs tabs={tabs} centered={false} tabBarExtraContent={extra} />
+        </Styled.StakeContentContainer>
       </Styled.ContentContainer>
     </Styled.Container>
   )

diff --git a/src/renderer/components/uielements/poolShare/PoolShare.stories.tsx b/src/renderer/components/uielements/poolShare/PoolShare.stories.tsx
@@ -5,24 +5,24 @@ import { bn, assetToBase, assetAmount } from '@thorchain/asgardex-util'
 
 import PoolShare from './PoolShare'
 
+export const defaultPoolShare = (
+  <PoolShare
+    source="RUNE"
+    target="CAN"
+    poolShare={bn(100)}
+    assetEarnedAmount={assetToBase(assetAmount(200))}
+    assetEarnedPrice={assetToBase(assetAmount(300))}
+    assetStakedPrice={assetToBase(assetAmount(120.1))}
+    assetStakedShare={assetToBase(assetAmount(500))}
+    basePriceAsset="$USD"
+    loading={false}
+    runeEarnedAmount={assetToBase(assetAmount(200))}
+    runeEarnedPrice={assetToBase(assetAmount(300))}
+    runeStakedPrice={assetToBase(assetAmount(400))}
+    runeStakedShare={assetToBase(assetAmount(500))}
+  />
+)
+
 storiesOf('Components/PoolShare', module).add('default', () => {
-  return (
-    <div style={{ padding: '20px' }}>
-      <PoolShare
-        source="RUNE"
-        target="CAN"
-        poolShare={bn(100)}
-        assetEarnedAmount={assetToBase(assetAmount(200))}
-        assetEarnedPrice={assetToBase(assetAmount(300))}
-        assetStakedPrice={assetToBase(assetAmount(120.1))}
-        assetStakedShare={assetToBase(assetAmount(500))}
-        basePriceAsset="$USD"
-        loading={false}
-        runeEarnedAmount={assetToBase(assetAmount(200))}
-        runeEarnedPrice={assetToBase(assetAmount(300))}
-        runeStakedPrice={assetToBase(assetAmount(400))}
-        runeStakedShare={assetToBase(assetAmount(500))}
-      />
-    </div>
-  )
+  return <div style={{ padding: '20px' }}>{defaultPoolShare}</div>
 })
diff --git a/src/renderer/i18n/de/common.ts b/src/renderer/i18n/de/common.ts
@@ -40,7 +40,8 @@ const common: CommonMessages = {
   'common.fees': 'Gebühren',
   'common.max': 'Max',
   'common.search': 'Suche',
-  'common.retry': 'wiederholen'
+  'common.retry': 'Wiederholen',
+  'common.add': 'Einzahlen'
 }
 
 export default common
diff --git a/src/renderer/i18n/de/stake.ts b/src/renderer/i18n/de/stake.ts
@@ -3,7 +3,9 @@ import { StakeMessages } from '../types'
 const stake: StakeMessages = {
   'stake.totalShare': 'Dein Poolanteil',
   'stake.totalEarnings': 'Deine Gesamteinkommen vom Pool',
-  'stake.poolShare': ' Poolanteil'
+  'stake.poolShare': ' Poolanteil',
+  'stake.withdraw': 'Abheben',
+  'stake.advancedMode': 'Experten modus'
 }
 
 export default stake
diff --git a/src/renderer/i18n/en/common.ts b/src/renderer/i18n/en/common.ts
@@ -40,7 +40,8 @@ const common: CommonMessages = {
   'common.fees': 'Fees',
   'common.max': 'Max',
   'common.search': 'Search',
-  'common.retry': 'Retry'
+  'common.retry': 'Retry',
+  'common.add': 'Add'
 }
 
 export default common
diff --git a/src/renderer/i18n/en/stake.ts b/src/renderer/i18n/en/stake.ts
@@ -3,7 +3,9 @@ import { StakeMessages } from '../types'
 const stake: StakeMessages = {
   'stake.totalShare': 'Your total share of the pool',
   'stake.totalEarnings': 'Your total earnings from the pool',
-  'stake.poolShare': ' Pool share'
+  'stake.poolShare': ' Pool share',
+  'stake.withdraw': 'Withdraw',
+  'stake.advancedMode': 'Advanced mode'
 }
 
 export default stake
diff --git a/src/renderer/i18n/ru/common.ts b/src/renderer/i18n/ru/common.ts
@@ -40,7 +40,8 @@ const common: CommonMessages = {
   'common.fees': 'Комиссии',
   'common.max': 'Макс.',
   'common.search': 'Поиск',
-  'common.retry': 'Повторить'
+  'common.retry': 'Повторить',
+  'common.add': 'Добавить'
 }
 
 export default common
diff --git a/src/renderer/i18n/ru/stake.ts b/src/renderer/i18n/ru/stake.ts
@@ -3,7 +3,9 @@ import { StakeMessages } from '../types'
 const stake: StakeMessages = {
   'stake.totalShare': 'Ваша общая доля в пуле',
   'stake.totalEarnings': 'Ваш общий доход от пула',
-  'stake.poolShare': 'Доля  в пуле'
+  'stake.poolShare': 'Доля  в пуле',
+  'stake.withdraw': 'Убрать',
+  'stake.advancedMode': 'Расширенный режим'
 }
 
 export default stake
diff --git a/src/renderer/i18n/types.ts b/src/renderer/i18n/types.ts
@@ -39,6 +39,7 @@ type CommonMessageKey =
   | 'common.max'
   | 'common.search'
   | 'common.retry'
+  | 'common.add'
 
 export type CommonMessages = {
   [key in CommonMessageKey]: string
@@ -130,7 +131,12 @@ type SwapMessageKey =
 
 export type SwapMessages = { [key in SwapMessageKey]: string }
 
-type StakeMessageKey = 'stake.totalShare' | 'stake.totalEarnings' | 'stake.poolShare'
+type StakeMessageKey =
+  | 'stake.totalShare'
+  | 'stake.totalEarnings'
+  | 'stake.poolShare'
+  | 'stake.withdraw'
+  | 'stake.advancedMode'
 
 export type StakeMessages = { [key in StakeMessageKey]: string }