Implement RAD rewards review suggestions

tinlake-ui/components/LoadingValue/index.tsx

@@ -1,19 +1,18 @@
 import * as React from 'react'
 import styled from 'styled-components'
 
-interface PropsWithChildren {
+interface BaseProps {
   done: boolean
-  children: React.ReactNode
-  height?: number
   maxWidth?: number
   alignRight?: boolean
+  height?: number
 }
 
-interface PropsWithRender {
-  done: boolean
-  height?: number
-  maxWidth?: number
-  alignRight?: boolean
+interface PropsWithChildren extends BaseProps {
+  children: React.ReactNode
+}
+
+interface PropsWithRender extends BaseProps {
   render: () => React.ReactNode
 }
 

tinlake-ui/containers/ClaimRewards/index.tsx

@@ -4,7 +4,6 @@ import BN from 'bn.js'
 import { Anchor, Box, Button } from 'grommet'
 import * as React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import styled from 'styled-components'
 import Alert from '../../components/Alert'
 import { PortfolioState } from '../../ducks/portfolio'
 import { RewardsState } from '../../ducks/rewards'
@@ -14,6 +13,7 @@ import { centChainService } from '../../services/centChain'
 import { addThousandsSeparators } from '../../utils/addThousandsSeparators'
 import { createBufferProofFromClaim, createTree, newClaim } from '../../utils/radRewardProofs'
 import { toDynamicPrecision } from '../../utils/toDynamicPrecision'
+import { RewardStripe, Small } from './styles'
 
 interface Props {
   activeLink: UserRewardsLink
@@ -81,7 +81,7 @@ const ClaimRewards: React.FC<Props> = ({ activeLink }: Props) => {
                   </Anchor>
                 </>
               )}
-              {unclaimed!.gt(data?.totalEarnedRewards || new BN(0)) && (
+              {unclaimed.gt(data?.totalEarnedRewards || new BN(0)) && (
                 <>
                   <br />
                   <br />
@@ -168,45 +168,3 @@ const ClaimRewards: React.FC<Props> = ({ activeLink }: Props) => {
 }
 
 export default ClaimRewards
-
-const RewardStripe = ({ unclaimed, children }: React.PropsWithChildren<{ unclaimed: BN | null }>) => (
-  <Cont direction="row" pad={{ vertical: 'small', horizontal: 'medium' }}>
-    <TokenLogo src="/static/rad-black.svg" />
-    <Box>
-      <Label>Claimable rewards</Label>
-      <Number>{addThousandsSeparators(toDynamicPrecision(baseToDisplay(unclaimed || '0', 18)))} RAD</Number>
-    </Box>
-    {children}
-  </Cont>
-)
-
-const Cont = styled(Box)`
-  background: #fcba59;
-  border-radius: 0 0 6px 6px;
-`
-
-const TokenLogo = styled.img`
-  margin: 0 14px 0 0;
-  width: 24px;
-  height: 24px;
-  position: relative;
-  top: 12px;
-`
-
-const Label = styled.div`
-  font-size: 10px;
-  font-weight: 500;
-  height: 14px;
-  line-height: 14px;
-`
-
-const Number = styled.div`
-  font-size: 20px;
-  font-weight: 500;
-  height: 32px;
-  line-height: 32px;
-`
-
-const Small = styled.small`
-  font-size: 11px;
-`

tinlake-ui/containers/ClaimRewards/styles.tsx

@@ -0,0 +1,48 @@
+import { baseToDisplay } from '@centrifuge/tinlake-js'
+import BN from 'bn.js'
+import { Box } from 'grommet'
+import styled from 'styled-components'
+import { addThousandsSeparators } from '../../utils/addThousandsSeparators'
+import { toDynamicPrecision } from '../../utils/toDynamicPrecision'
+
+export const RewardStripe = ({ unclaimed, children }: React.PropsWithChildren<{ unclaimed: BN | null }>) => (
+  <Cont direction="row" pad={{ vertical: 'small', horizontal: 'medium' }}>
+    <TokenLogo src="/static/rad-black.svg" />
+    <Box>
+      <Label>Claimable rewards</Label>
+      <Number>{addThousandsSeparators(toDynamicPrecision(baseToDisplay(unclaimed || '0', 18)))} RAD</Number>
+    </Box>
+    {children}
+  </Cont>
+)
+
+const Cont = styled(Box)`
+  background: #fcba59;
+  border-radius: 0 0 6px 6px;
+`
+
+const TokenLogo = styled.img`
+  margin: 0 14px 0 0;
+  width: 24px;
+  height: 24px;
+  position: relative;
+  top: 12px;
+`
+
+const Label = styled.div`
+  font-size: 10px;
+  font-weight: 500;
+  height: 14px;
+  line-height: 14px;
+`
+
+const Number = styled.div`
+  font-size: 20px;
+  font-weight: 500;
+  height: 32px;
+  line-height: 32px;
+`
+
+export const Small = styled.small`
+  font-size: 11px;
+`

tinlake-ui/ducks/centChainWallet.ts

@@ -18,7 +18,7 @@ export interface InjectedAccount {
   name: string | undefined
   source: string
   addrInjected: string // this is the address as received from the extension. It seems that it always comes as the default Substrat SS58 encoded address, no matter what is set on the extension.
-  addrCentChain: string // this is the same public key as in addrInjected, but transformed to the Cetnrifuge Chain network prefix.
+  addrCentChain: string // this is the same public key as in addrInjected, but transformed to the Centrifuge Chain network prefix.
 }
 
 export interface CentChainWalletState {

tinlake-ui/services/apollo/index.ts

@@ -370,26 +370,6 @@ class Apollo {
     return transformed
   }
 
-  // async getRewardsByUserToken(user: string) {
-  //   let result
-  //   try {
-  //     result = await this.client.query({
-  //       query: gql`
-  //       {
-  //         rewardByTokens(where : {account: "${user}"}) {
-  //           token
-  //           rewards
-  //         }
-  //       }
-  //       `,
-  //     })
-  //   } catch (err) {
-  //     console.error(`error occurred while fetching loans from apollo ${err}`)
-  //     return {
-  //       data: [],
-  //     }
-  //   }
-  // }
   async getAssetData(root: string) {
     let result
     try {