[READY] 456 Create UI for BRLa offramp KYC #493

Sharqiewicz · 2025-03-03T10:16:10Z

💚 Ready

Implement KYC Form (and additional fields to Swap Form) for BRLA.

Changes:

Updates

update react-hook-form

Full KYC

create BrlaExtendedForm component to manage logic of showing KYC Form/Loading/Error/Success
create brla/KYCForm component for BRLA full KYC form
create brla/useKYCForm for handling BrlaExtendedForm logic
create VerificationStatus component to handle KYCStatus
create useBRLAKYCProcess hook for handling BRLA KYC submit logic
create useKYCStatusQuery hook for handling BRLA KYC request logic

Components

create BrlaField component for handling Brla-related (react-hook-form) fields/inputs
create Field component for handling (react-hook-form) input

Swap

create BrlaSwapFields which are injected to the Swap form when BRLA is chosen
separate Swap component from the SwapPage
create brla/useOfframpSubmission for BRLA Offramp submisssion

… 456-create-a-ui-for-brl-offramp-kyc

netlify · 2025-03-03T10:16:27Z

✅ Deploy Preview for pendulum-pay ready!

Name	Link
🔨 Latest commit	`168258e`
🔍 Latest deploy log	https://app.netlify.com/sites/pendulum-pay/deploys/67c86dc08fa2ef0008e1983e
😎 Deploy Preview	https://deploy-preview-493--pendulum-pay.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Sharqiewicz · 2025-03-04T13:47:03Z

src/components/TermsAndConditions/index.tsx

@@ -35,6 +37,7 @@ const TermsAndConditionsContent = ({
        className="checkbox checkbox-primary checkbox-sm"
        checked={termsChecked}
        onChange={() => {
+          setTermsAccepted(true);


I think it's better if we don't immediately hide the terms and conditions as soon as the user clicks on the checkbox but keep them visible until they click on the 'Confirm' button. Otherwise they might hastily toggle the checkbox and might wonder what exactly they just toggled and is now gone.

Sharqiewicz · 2025-03-04T13:52:12Z

@pendulum-chain/devs Ready for review 💚

gianfra-t · 2025-03-04T15:26:42Z

src/pages/swap/index.tsx

+        <PIXKYCForm
+          feeComparisonRef={feeComparisonRef}
+          setIsOfframpSummaryDialogVisible={setIsOfframpSummaryDialogVisible}
+          onSwapConfirm={onSwapConfirm}


We're not using onSwapConfirm right? It will directly call const proceedWithOfframp = useOfframpSubmission after the KYC passes.

ebma

I skimmed through the code. Most of the changes look reasonable to me. Also the look and feel and animations are really nice, great job with that @Sharqiewicz 👌
I tested this locally a bit and found that we are missing the call to create the subaccount when all the data is filled in on the KYC form. We should add that.

ebma · 2025-03-04T16:32:05Z

signer-service/src/api/services/brla/brlaApiService.ts

    const query = `taxId=${encodeURIComponent(taxId)}`;
-    const response = await this.sendRequest(endpoint, 'GET', query);
+    const response = await this.sendRequest('/subaccounts', 'GET', query);


There is no right or wrong here but looking at the other functions we should make sure they are also using the same format. The other functions define the endpoint as an extra const so either we do it on all of them, or remove the extra const endpoint on all of them.

ebma · 2025-03-04T16:42:29Z

src/hooks/brla/useBRLAKYCProcess/index.tsx

+  FAILED = 'FAILED',
+}
+
+const STATUS_MESSAGES = {


It's a nice idea to already show these messages in portuguese but to me as a user, this is more off-putting than helpful. Because a) I already use the translate function of my browser to translate from English to Portuguese or b) I can understand English well enough and am suddenly seeing content in a different language which would seem to me like a bug.

ebma · 2025-03-04T16:55:31Z

src/components/Nabla/schema.tsx

+  }),
+  pixId: Yup.string().when('to', {
+    is: 'brl',
+    then: (schema) => schema.required('PIX ID is required when converting to BRL'),


Let's call it 'selling' instead of 'converting'.

Also, I think Brazilian are more familiar with the term 'Pix key' over 'PIX ID' so let's also adjust that.

ebma · 2025-03-04T16:55:35Z

src/components/Nabla/schema.tsx

@@ -24,6 +26,16 @@ const schema = Yup.object<SwapFormValues>().shape({
  toAmount: Yup.string().required(),
  slippage: Yup.number().nullable().transform(transformNumber),
  deadline: Yup.number().nullable().transform(transformNumber),
+  taxId: Yup.string().when('to', {
+    is: 'brl',
+    then: (schema) => schema.required('Tax ID is required when converting to BRL'),


ebma · 2025-03-04T17:02:38Z

src/components/TermsAndConditions/index.tsx

@@ -35,6 +37,7 @@ const TermsAndConditionsContent = ({
        className="checkbox checkbox-primary checkbox-sm"
        checked={termsChecked}
        onChange={() => {
+          setTermsAccepted(true);


I think it's better if we don't immediately hide the terms and conditions as soon as the user clicks on the checkbox but keep them visible until they click on the 'Confirm' button. Otherwise they might hastily toggle the checkbox and might wonder what exactly they just toggled and is now gone.

ebma · 2025-03-04T17:07:52Z

src/hooks/brla/useBRLAKYCProcess/index.tsx

+
+  const proceedWithOfframp = useOfframpSubmission(handleError, setIsOfframpSummaryDialogVisible);
+
+  const handleFormSubmit = useCallback(


This function is missing a call to the createSubaccount() endpoint of our signer service with the relevant fields. Only then, can we query the KYC status of the user and expect to get a meaningful response.

ebma · 2025-03-04T17:10:22Z

src/hooks/brla/useKYCStatusQuery/index.tsx

+      return false;
+    },
+    retry: 3,
+    retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),


I think using a constant delay would be fine. Let's choose a delay of 5 seconds and up to 5 retries. I'm not sure how long the BRLA api takes to approve the KYC data but it might take some time.

ebma · 2025-03-04T17:11:42Z

src/hooks/offramp/useSubmitOfframp.ts

                return;
              }
              throw new Error('Error while fetching funding account signature');
            }
            const { evmAddress: brlaEvmAddress } = await response.json();
-            const brlaOfframpExecution = { ...executionInput, brlaEvmAddress };
-            setOfframpExecutionInput(brlaOfframpExecution);
+            //const brlaEvmAddress = '0x7Ba99e99Bc669B3508AFf9CC0A898E869459F877'


Nit: remove comment

…ulum-chain/vortex into 456-create-a-ui-for-brl-offramp-kyc

Sharqiewicz · 2025-03-05T10:43:56Z

src/hooks/brla/useBRLAKYCProcess/index.tsx

          resetToDefault();
          handleBackClick();
        },
-        [KYCResponseStatus.PENDING]: async () => undefined,
+        [KYCResponseStatus.PENDING]: async () => {
+          undefined;


… on low kyc level

Sharqiewicz and others added 27 commits February 19, 2025 17:25

implement basic PIXKYCForm

4c2e152

Merge branch 'staging' into 456-create-a-ui-for-brl-offramp-kyc

033e649

Merge branch '471-add-support-for-offramping-brla-digital-token' into…

ce1e17a

… 456-create-a-ui-for-brl-offramp-kyc

Merge branch 'staging' into 456-create-a-ui-for-brl-offramp-kyc

dc3f8e5

fixes

f3ac457

connect BrlaInput and PixKyc components to offramp flow

09d28cb

move swap into a separate component

3f0dd33

add placeholder kyc status spinner

de6ad1d

Merge branch 'staging' into 456-create-a-ui-for-brl-offramp-kyc

3f4323f

connecting brla offramp with details modal

55b4157

refactor PIX form code, add animations

e733c4b

animate BRL KYC Form, implement unified Input component

b36feda

change OutputTokenType to enum

8afc550

rename Input to Field as it is related with react-hook-form

23a606b

Refactor BrlaSwapFields

9042128

implement BrlaField component

fcc22d0

implement KYCForm component

23f8955

implement VerificationStatus component (BRLA)

8247d16

implement useBRLAKYCProcess hook

5adf457

add validation for inputs

f72318c

refactor BrlaExtendedForm

d2bfa32

rename comments

7d2dcc2

fix Field registers react-hook-form

f8cc120

clean useSubmitOfframp

67f7b14

add header to KYCForm

8b48180

add docs for brla.controller getAccount

824ccb0

change onSwapConfirm type

af4977c

Sharqiewicz linked an issue Mar 3, 2025 that may be closed by this pull request

Create a UI for BRL offramp KYC #456

Open

fix TokenDefinition type in swap

e74cbf4

Sharqiewicz added 9 commits March 3, 2025 19:38

animate VerificationStatus

8990b25

show progress kyc after submitting

c8a618f

shorten logic brla service

f1cc7ca

remove placeholder birthdate

be625d7

add basic yup validation

052d5e4

Merge branch 'staging' into 456-create-a-ui-for-brl-offramp-kyc

53e34b7

fix brla form types

d870e64

remove unnecessary comment

caaa916

remove unnecessary signer-service hooks.ts brla

3895349

Sharqiewicz commented Mar 4, 2025

View reviewed changes

Sharqiewicz requested review from gianfra-t and ebma and removed request for gianfra-t March 4, 2025 13:51

Sharqiewicz changed the title ~~456 create a UI for brl offramp kyc~~ [READY] 456 Create a UI for BRLa offramp KYC Mar 4, 2025

Sharqiewicz changed the title ~~[READY] 456 Create a UI for BRLa offramp KYC~~ [READY] 456 Create UI for BRLa offramp KYC Mar 4, 2025

Sharqiewicz requested a review from gianfra-t March 4, 2025 13:51

gianfra-t reviewed Mar 4, 2025

View reviewed changes

Sharqiewicz and others added 4 commits March 4, 2025 16:39

Merge branch 'staging' into 456-create-a-ui-for-brl-offramp-kyc

4dd5fc5

Move brla fields further down in swap form

0efce5d

Add placeholder to text fieelds and remove heading

929826f

Check existence of brla username and password in constructor

48ddfdb

ebma reviewed Mar 4, 2025

View reviewed changes

gianfra-t added 3 commits March 4, 2025 17:30

Merge branch 'staging' into 456-create-a-ui-for-brl-offramp-kyc

c9702d6

add address fields, modify kyc states

5c8db69

Merge branch '456-create-a-ui-for-brl-offramp-kyc' of github.com:pend…

f62ba6b

…ulum-chain/vortex into 456-create-a-ui-for-brl-offramp-kyc

Sharqiewicz commented Mar 5, 2025

View reviewed changes

gianfra-t added 3 commits March 5, 2025 10:18

modify store validator, ui states

f7d933b

modifications to kyc status logic from backend

362eb86

add initialize failed message state and action to offramp store, fail…

168258e

… on low kyc level

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[READY] 456 Create UI for BRLa offramp KYC #493

[READY] 456 Create UI for BRLa offramp KYC #493

Sharqiewicz commented Mar 3, 2025 •

edited

Loading

netlify bot commented Mar 3, 2025 •

edited

Loading

Sharqiewicz Mar 4, 2025

ebma Mar 4, 2025

Sharqiewicz commented Mar 4, 2025

gianfra-t Mar 4, 2025

ebma left a comment

ebma Mar 4, 2025

ebma Mar 4, 2025

ebma Mar 4, 2025

ebma Mar 4, 2025

ebma Mar 4, 2025

ebma Mar 4, 2025

ebma Mar 4, 2025

ebma Mar 4, 2025

ebma Mar 4, 2025

Sharqiewicz Mar 5, 2025


		const proceedWithOfframp = useOfframpSubmission(handleError, setIsOfframpSummaryDialogVisible);

		const handleFormSubmit = useCallback(

[READY] 456 Create UI for BRLa offramp KYC #493

Are you sure you want to change the base?

[READY] 456 Create UI for BRLa offramp KYC #493

Conversation

Sharqiewicz commented Mar 3, 2025 • edited Loading

💚 Ready

Changes:

netlify bot commented Mar 3, 2025 • edited Loading

✅ Deploy Preview for pendulum-pay ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Sharqiewicz commented Mar 4, 2025

Choose a reason for hiding this comment

ebma left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Sharqiewicz commented Mar 3, 2025 •

edited

Loading

netlify bot commented Mar 3, 2025 •

edited

Loading