Disable Civic

rarimo · Feb 7, 2024 · 96bc6cb · 96bc6cb
1 parent 4a232b9
commit 96bc6cb
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 8 deletions.
diff --git a/src/contexts/KycContext/KycContext.tsx b/src/contexts/KycContext/KycContext.tsx
@@ -63,6 +63,7 @@ const KYC_PROVIDERS_DETAILS_MAP: Record<
     iconName: ICON_NAMES
     link?: string
     isWalletRequired: boolean
+    isAvailable: boolean
 
     completeKycCb?: () => void
     completeKycMessage?: string
@@ -74,12 +75,11 @@ const KYC_PROVIDERS_DETAILS_MAP: Record<
     name: 'Civic',
     iconName: ICON_NAMES.providerCivic,
     isWalletRequired: true,
+    isAvailable: false,
     tooltipElement: (
       <span className='app__kyc-provider-item-tooltip'>
         <b>{`Civic: `}</b>
-        <span>
-          {`A real-time biometric verification service that performs user liveness checks through camera scans`}
-        </span>
+        <span>{`Not available at the moment. Please, try again later.`}</span>
       </span>
     ),
   },
@@ -88,6 +88,7 @@ const KYC_PROVIDERS_DETAILS_MAP: Record<
     iconName: ICON_NAMES.providerGitCoin,
     link: 'https://passport.gitcoin.co/',
     isWalletRequired: true,
+    isAvailable: true,
 
     completeKycCb: () => {
       window.open('https://passport.gitcoin.co/', '_blank')
@@ -106,6 +107,7 @@ const KYC_PROVIDERS_DETAILS_MAP: Record<
     name: 'Unstoppable domains',
     iconName: ICON_NAMES.providerUnstoppable,
     isWalletRequired: true,
+    isAvailable: true,
     tooltipElement: (
       <span className='app__kyc-provider-item-tooltip'>
         <b>{`Unstoppable Domains: `}</b>
@@ -119,6 +121,7 @@ const KYC_PROVIDERS_DETAILS_MAP: Record<
     name: 'Worldcoin',
     iconName: ICON_NAMES.providerWorldCoin,
     isWalletRequired: true,
+    isAvailable: true,
     tooltipElement: (
       <span className='app__kyc-provider-item-tooltip'>
         <b>{`WordCoin: `}</b>
@@ -133,6 +136,7 @@ const KYC_PROVIDERS_DETAILS_MAP: Record<
     iconName: ICON_NAMES.providerKleros,
     link: 'https://app.proofofhumanity.id/',
     isWalletRequired: true,
+    isAvailable: true,
 
     completeKycCb: () => {
       window.open('https://app.proofofhumanity.id/', '_blank')

diff --git a/src/pages/MainPage/components/4_KycProviders/KycProviders.tsx b/src/pages/MainPage/components/4_KycProviders/KycProviders.tsx
@@ -92,6 +92,7 @@ const KycProviders: FC<StepProps> = ({ nextStepCb, className, ...rest }) => {
               iconName={KYC_PROVIDERS_DETAILS_MAP[provider].iconName}
               handleLogin={handleLogin}
               isDisabled={isPending}
+              isAvailable={KYC_PROVIDERS_DETAILS_MAP[provider].isAvailable}
               tooltipMsg={KYC_PROVIDERS_DETAILS_MAP[provider].tooltipElement}
             />
           ))}

diff --git a/...pages/MainPage/components/4_KycProviders/components/KycProvidersItem/KycProvidersItem.tsx b/...pages/MainPage/components/4_KycProviders/components/KycProvidersItem/KycProvidersItem.tsx
@@ -12,6 +12,7 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
 
   handleLogin: (kycProvider: SUPPORTED_KYC_PROVIDERS) => void
   isDisabled?: boolean
+  isAvailable?: boolean
   tooltipMsg?: string | ReactElement
 }
 
@@ -22,12 +23,14 @@ const KycProvidersItem: FC<Props> = ({
   supportedKycProvider,
   handleLogin,
   isDisabled = false,
+  isAvailable = true,
 }) => {
   return (
     <div
       className={[
         'kyc-providers-item',
         ...(isDisabled ? ['kyc-providers-item--disabled'] : []),
+        ...(isAvailable ? [] : ['kyc-providers-item--unavailable']),
       ].join(' ')}
     >
       <Icon className='kyc-providers-item__icon' name={iconName} />
@@ -51,7 +54,7 @@ const KycProvidersItem: FC<Props> = ({
         className='kyc-providers-item__button'
         aria-label={`Login with ${name}`}
         onClick={() => handleLogin(supportedKycProvider)}
-        disabled={isDisabled}
+        disabled={isDisabled || !isAvailable}
       />
     </div>
   )

diff --git a/src/pages/MainPage/components/4_KycProviders/components/KycProvidersItem/styles.scss b/src/pages/MainPage/components/4_KycProviders/components/KycProvidersItem/styles.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable */
 .kyc-providers-item {
   position: relative;
   display: flex;
@@ -10,10 +11,19 @@
     toRem(0) toRem(1) toRem(1) toRem(0) rgba(0, 0, 0, 0.05),
     toRem(0) toRem(6) toRem(24) toRem(0) rgba(0, 0, 0, 0.03);
 
-  &--disabled {
-    pointer-events: none;
-    opacity: 0.5;
-  }
+    &--disabled {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    &--unavailable {
+      background-color: rgba(0, 0, 0, 0.05);
+
+      & .kyc-providers-item__name,
+      & .kyc-providers-item__icon {
+        opacity: 0.4;
+      }
+    }
 }
 
 .kyc-providers-item__icon-wrp {
@@ -54,6 +64,10 @@
   left: 0;
   width: 100%;
   height: 100%;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
 }
 
 .kyc-providers-item .kyc-providers-item__tooltip {
@@ -62,3 +76,4 @@
   background: #636a74;
   max-width: toRem(320);
 }
+/* stylelint-enable */