Feature fuse backstops

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bprotocol-react-client",
-  "version": "1.0.47",
+  "version": "1.0.49",
   "private": true,
   "dependencies": {
     "@cloudflare/kv-asset-handler": "^0.1.0",

src/components/stability-pool/SpActionBox.js

@@ -93,12 +93,18 @@ const Unlock = observer(({grantAllowance, hasAllowance, allowanceInProgress, ass
   )
 })
 
+const isErc20 = symbol => ["ETH"].indexOf(symbol) == -1
+
 const SpFooterContent = observer((props) => {
-  const {footerIsOpen, txInProgress, action, err, inputErrMsg, inputIsValid, inputIsInvalid, hash, walletBalance, closeFooter, asset, onInputChange, val, collaterals, withdrawValues} = props.store
+  const {footerIsOpen, txInProgress, action, err, inputErrMsg, inputIsValid, inputIsInvalid, hash, walletBalance, closeFooter, asset, onInputChange, val, collaterals, withdrawValues, config} = props.store
   const {grantAllowance, hasAllowance, allowanceInProgress, collPercnet, usdPercnet } = props.store
   let doAction = action === "Deposit" ? props.store.deposit : props.store.withdraw
   const singleWithdrawValue = parseFloat(collPercnet) < 0.01
   const onMobile = isMobile()
+  const allowanceNeeded = action == "Deposit" && isErc20(asset)
+  const {denominator} = config
+  const prefix = !denominator ? "$" : ""
+  const suffix = denominator ? denominator : ""
   return (
     <div>
       <Close onClick={()=>closeFooter()}/>
@@ -124,7 +130,7 @@ const SpFooterContent = observer((props) => {
                 disabled={inputIsInvalid} 
                 onClick={()=> doAction(val)}>{action}</button>}
 
-            {action == "Deposit" && <Unlock {...{grantAllowance, hasAllowance, allowanceInProgress, asset, action}} />}
+            {allowanceNeeded && <Unlock {...{grantAllowance, hasAllowance, allowanceInProgress, asset, action}} />}
           </div>
         </div>
         {action == "Deposit" && <div>
@@ -138,17 +144,17 @@ const SpFooterContent = observer((props) => {
         {action == "Withdraw" && <div>
           <div style={{padding: "var(--spacing) 0"}}>Current Withdraw Value{singleWithdrawValue ? ": " : "s:"}
           {singleWithdrawValue && <span>
-            $<ANS val={withdrawValues.usd} decimals={2}/>
+            {prefix} <ANS val={withdrawValues.usd} decimals={2}/> <strong>{suffix}</strong>
           </span>}
           </div>
           {!singleWithdrawValue && <div className="grid">
             <p>
               <small> {usdPercnet}% in <strong>{asset}</strong></small> <br/>
-              $<ANS val={withdrawValues.usd} decimals={2}/>
+              {prefix} <ANS val={withdrawValues.usd} decimals={2}/> <strong>{suffix}</strong>
             </p>
             <p>
               <small> {collPercnet}% in collateral ({collaterals.map(coll => <strong>{coll.symbol} </strong>)})</small> <br/>
-              $<ANS val={withdrawValues.coll} decimals={4}/><br/>
+              {prefix} <ANS val={withdrawValues.coll} decimals={4}/><br/> <strong>{suffix}</strong>
             </p>
           </div>}
         </div>}
@@ -287,8 +293,21 @@ class SpActionBox extends Component {
 
   render() {
     const {asset, userShareInUsd, walletBalance, tvl, footerIsOpen, action, openFooter, closeFooter, reward, config, collaterals, apr} = this.props.store
-    const { collateralName, platformName } = config
+    let { collateralName, description } = config
+    description = description || collateralName + " stability pool"
     const onMobile = isMobile()
+    let totalApr = apr
+    if(typeof apr === "object") {
+      totalApr = apr.reduce((acc, o)=> acc + parseFloat(o.value), 0).toString()
+    }
+    let aprExplainer = "The APR is identical to vestafinance.xyz"
+    if(typeof apr === "object"){
+      aprExplainer = apr.reduce((acc, o)=> acc + o.name + ": " + parseFloat(o.value).toFixed(2) + "% + ", "")
+      aprExplainer = aprExplainer.slice(0, aprExplainer.length - 3)
+    }
+    const {denominator} = config
+    const prefix = !denominator ? "$" : ""
+    const suffix = denominator ? denominator : ""
     return (
     <article>
       <Flex className="fade-in" justifyBetween alignCenter wrap column={onMobile}>
@@ -299,21 +318,21 @@ class SpActionBox extends Component {
             </MainAssetIcon>
             <Flex column alignCenter={onMobile}>
             <strong>{asset}</strong>
-            {collateralName && <small>{collateralName} stability pool</small>}
+            {description && <small>{description}</small>}
             </Flex>
             {onMobile &&  <div style={{width: "76px"}}></div>}
           </Flex>
         </SpGridItem>
         <SpGridItem>
           <Flex column alignCenter justifyBetween style={{padding: "0 --spacing"}}>
-            <div>$<ANS val={userShareInUsd} decimals={2}/></div>
+            <div>{prefix} <ANS val={userShareInUsd} decimals={5}/> <strong>{suffix}</strong></div>
             <small>Balance</small>
           </Flex>
         </SpGridItem>
         <SpGridItem>
           <Flex column alignCenter justifyBetween style={{padding: "0 --spacing"}}>
-            <div><ANS val={apr} decimals={2}/>%</div>
-            <div><small> APR</small> <TooltipIcon text={"The APR is identical to vestafinance.xyz"} /></div>
+            <div><ANS val={totalApr} decimals={2}/>%</div>
+            <div><small> APR</small> <TooltipIcon text={aprExplainer} /></div>
           </Flex>
         </SpGridItem>
         <SpGridItem>

src/components/stability-pool/View.js

@@ -3,7 +3,6 @@ import WhiteBgViewIcon from "../../assets/view-icon.svg";
 import BlacBgViewIcon from "../../assets/view-icon-opeq-bg.svg";
 import userStore from "../../stores/user.store"
 
-// TODO: userStore.scannerUrl
 export default function View(props) {
   const {hash} = props
   const {blockExplorer} = userStore

src/components/style-components/AnimateNumericalString.js

@@ -34,7 +34,7 @@ export default class AnimateNumericalString extends Component{
                 config={{duration}}
                 from={{ number: this.state.from }}
                 to={{ number: this.state.to }}>
-                {({number}) => <animated.span>{number.interpolate(x=> truncateToDecimals(parseFloat(x)), decimals)}</animated.span>}
+                {({number}) => <animated.span>{number.interpolate(x=> truncateToDecimals(parseFloat(x), decimals))}</animated.span>}
             </Spring>
         )
     }

src/components/style-components/TooltipIcon.js

@@ -10,7 +10,7 @@ return (
       border: "1.5px solid var(--contrast)",
       borderRadius: "50%"
     }} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 19">
-        <g fill="none" fill-rule="evenodd">
+        <g fill="none" fillRule="evenodd">
             <g fill="var(--contrast-inverse)">
                 <g>
                     <path d="M9.45 0c2.61 0 4.972 1.058 6.682 2.768C17.842 4.478 18.9 6.84 18.9 9.45c0 2.61-1.058 4.972-2.768 6.682-1.71 1.71-4.073 2.768-6.682 2.768-2.61 0-4.972-1.058-6.682-2.768C1.058 14.422 0 12.06 0 9.45c0-2.61 1.058-4.972 2.768-6.682C4.478 1.058 6.84 0 9.45 0" opacity=".25" transform="translate(-863 -212) translate(863 212)"/>

src/containers/Vesta.js

@@ -6,6 +6,7 @@ import routerStore from "../stores/router.store"
 import SpActionBox from "../components/stability-pool/SpActionBox"
 import Navbar from "../components/stability-pool/Navbar"
 import vestaStore from "../stores/vesta.store"
+import fuseStore from "../stores/fuse.store"
 import VestaInfoPage from "../components/vesta/VestaInfoPage"
 import userStore from "../stores/user.store"
 
@@ -20,31 +21,18 @@ class Vesta extends Component {
   }
 
   render() {
-    const stabilityPools = [
-      {
-        asset: 'USDC',
-        amount: '1000.43',
-        apy: '5.4',
-        walletBalance: '5000000.12'
-      },
-      {
-        asset: 'USDT',
-        amount: '404.21',
-        apy: '6.7',
-        walletBalance: '5000.12'
-      },
-
-    ]
     const hideInfoPage = userStore.loggedIn || userStore.connecting
+    const loading = vestaStore.loading && fuseStore.loading
     return (
       <div className="content">
         {hideInfoPage && <div>
           <Navbar/>
           <div className="container" >
-            {vestaStore.loading && <div className="fade-in" style={{marginTop: '200px', textAlign: 'center'}} aria-busy={vestaStore.loading}>
+            {loading && <div className="fade-in" style={{marginTop: '200px', textAlign: 'center'}} aria-busy={vestaStore.loading}>
               loading...
             </div>}
-            {vestaStore.stabilityPools.map((sp, i)=> <SpActionBox key={i} store={sp}/>)}
+            {!loading && fuseStore.stabilityPools.map((sp, i)=> <SpActionBox key={i} store={sp}/>)}
+            {!loading && vestaStore.stabilityPools.map((sp, i)=> <SpActionBox key={i} store={sp}/>)}
           </div>
         </div>}
         {!hideInfoPage && <VestaInfoPage/>}