feat(frictions): swap block & info color

blockchain · Jan 16, 2024 · fe9a91b · fe9a91b
1 parent 2da02a0
commit fe9a91b
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 5 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/swap/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/swap/sagas.ts
@@ -1,6 +1,7 @@
 import BigNumber from 'bignumber.js'
 import { differenceInMilliseconds } from 'date-fns'
 import { call, delay, put, select, take } from 'redux-saga/effects'
+import { call as typedCall } from 'typed-redux-saga'
 
 import { Exchange } from '@core'
 import { APIType } from '@core/network/api'
@@ -610,6 +611,16 @@ export default ({ api, coreSagas, networks }: { api: APIType; coreSagas; network
         return
       }
 
+      const steps = yield* typedCall(api.fetchVerificationSteps)
+      if (steps.items[steps.items.length - 1].status === 'DISABLED') {
+        yield put(
+          actions.modals.showModal(ModalName.COMPLETE_USER_PROFILE, { origin: 'BuySellInit' })
+        )
+        yield put(actions.modals.closeModal(ModalName.SWAP_MODAL))
+
+        return
+      }
+
       const message =
         products.swap.reasonNotEligible.reason !== CustodialSanctionsEnum.EU_5_SANCTION
           ? products.swap.reasonNotEligible.message

diff --git a/...-frontend/src/modals/Onboarding/FinProms/SelfClassification/SelfClassificationSuccess.tsx b/...-frontend/src/modals/Onboarding/FinProms/SelfClassification/SelfClassificationSuccess.tsx
@@ -415,13 +415,15 @@ const Success = ({
   // "style": "EXPANDABLE" | "PLAIN" | "WARNING" | "ERROR" | "NOTICE" | "SUCCESS"
   const renderNodeInfo = (node: NodeItem) => {
     return (
-      <InfoWrapper>
+      <InfoWrapper type={node.style}>
         <Text size='14px' weight={600}>
           {node.text}
         </Text>
-        <Text size='12px' weight={500} color='grey900'>
-          {node.description}
-        </Text>
+        {node.description && (
+          <Text size='12px' weight={500} color='grey900'>
+            <ReactMarkdown>{node.description}</ReactMarkdown>
+          </Text>
+        )}
       </InfoWrapper>
     )
   }

diff --git a/...blockchain-wallet-v4-frontend/src/modals/Onboarding/FinProms/SelfClassification/model.tsx b/...blockchain-wallet-v4-frontend/src/modals/Onboarding/FinProms/SelfClassification/model.tsx
@@ -135,12 +135,13 @@ export const LabelItem = styled.label`
   cursor: pointer;
 `
 
-export const InfoWrapper = styled.div`
+export const InfoWrapper = styled.div<{ type?: string }>`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   padding: 1rem;
   border-radius: 0.5rem;
   margin-bottom: 0.5rem;
   background-color: ${(props) => props.theme.grey000};
+  border: ${(props) => (props.type === 'WARNING' ? '1px solid #D46A00' : 'none')};
 `
diff --git a/packages/blockchain-wallet-v4/src/network/api/kyc/types.ts b/packages/blockchain-wallet-v4/src/network/api/kyc/types.ts
@@ -37,6 +37,7 @@ export type NodeItem = {
   input?: string
   instructions?: string
   isDropdown?: boolean
+  style?: string
   text: string
   type: string
 }