feat(borrow): add safe state to collateral warning

blockchain · Feb 12, 2020 · 15d0deb · 15d0deb
1 parent 8c97526
commit 15d0deb
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/...blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowDetails/CollateralWarning/index.tsx b/...blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowDetails/CollateralWarning/index.tsx
@@ -15,17 +15,22 @@ const {
   getCollateralAmtRequired
 } = model.components.borrow
 
-const Container = styled.div<{ bgColor: string }>`
+const Container = styled.div<{ bgColor: string; borderColor?: string }>`
   display: flex;
   padding: 16px;
   border-radius: 8px;
   margin-bottom: 40px;
   background-color: ${props => props.theme[props.bgColor]};
+  border: 1px solid ${props => props.theme[props.borderColor || props.bgColor]};
 
   .orange900 {
     color: ${props => props.theme.orange900};
   }
 
+  .green600 {
+    color: ${props => props.theme.green600};
+  }
+
   .grey900 {
     color: ${props => props.theme.grey900};
   }
@@ -108,6 +113,25 @@ const CollateralWarning: React.FC<Props> = props => {
           </div>
         </Container>
       )
+    case 'safe':
+      return (
+        <Container bgColor='white' borderColor='grey100'>
+          <CustomIcon name='info' color='grey400' />
+          <div>
+            <Text size='14px' weight={500} color='grey600' lineHeight={'20px'}>
+              <FormattedHTMLMessage
+                id='scenes.borrow.warning.risky'
+                defaultMessage='Your collateralization ratio is <span class="green600">{currentRatio}</span>, no action needed at this time.'
+                values={{
+                  currentRatio: percentageFormatter(
+                    props.loan.collateralisationRatio
+                  )
+                }}
+              />
+            </Text>
+          </div>
+        </Container>
+      )
     default:
       return <div />
   }

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowDetails/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowDetails/template.success.tsx
@@ -11,7 +11,7 @@ type Props = OwnProps & SuccessStateType
 const Success: React.FC<Props> = props => {
   // debugging
   // props.loan.status = 'OPEN'
-  // props.loan.collateralisationRatio = 1.12
+  // props.loan.collateralisationRatio = 1.3
 
   const offer = props.offers.find(offer => offer.id === props.loan.offerId)
   if (!offer) return null