Feat/dfns

config.devnet.json

@@ -12,6 +12,16 @@
   "rippleIssuerAddress": "rLTBw1MEy45uE5qmkWseinbj7h4zmdQuR8",
   "xrplWebsocket": "wss://s.altnet.rippletest.net:51233",
   "ledgerApp": "Bitcoin Test",
+  "dfnsConfiguration": {
+    "dfnsBaseURL": "https://api.dfns.ninja",
+    "dfnsCustomerConfigurations": [
+      {
+        "name": "Tungsten",
+        "organizationID": "or-3pqgf-ugmhq-8969lp77c7f8uf81",
+        "applicationID": "ap-513sv-f5knb-811qggt4oh6hd5s9"
+      }
+    ]
+  },
   "merchants": [
     {
       "name": "Amber",

config.mainnet.json

@@ -12,6 +12,16 @@
   "rippleIssuerAddress": "rGcyRGrZPaJAZbZDi4NqRFLA5GQH63iFpD",
   "xrplWebsocket": "wss://xrpl.ws/",
   "ledgerApp": "Bitcoin",
+  "dfnsConfiguration": {
+    "dfnsBaseURL": "https://api.dfns.ninja",
+    "dfnsCustomerConfigurations": [
+      {
+        "name": "Tungsten",
+        "organizationID": "or-3pqgf-ugmhq-8969lp77c7f8uf81",
+        "applicationID": "ap-513sv-f5knb-811qggt4oh6hd5s9"
+      }
+    ]
+  },
   "merchants": [
     {
       "name": "Amber",

config.testnet.json

@@ -12,6 +12,16 @@
   "rippleIssuerAddress": "ra3oyRVfy4yD4NJPrVcewvDtisZ3FhkcYL",
   "xrplWebsocket": "wss://testnet.xrpl-labs.com/",
   "ledgerApp": "Bitcoin Test",
+  "dfnsConfiguration": {
+    "dfnsBaseURL": "https://api.dfns.ninja",
+    "dfnsCustomerConfigurations": [
+      {
+        "name": "Tungsten",
+        "organizationID": "or-3pqgf-ugmhq-8969lp77c7f8uf81",
+        "applicationID": "ap-513sv-f5knb-811qggt4oh6hd5s9"
+      }
+    ]
+  },
   "merchants": [
     {
       "name": "Amber",

netlify/functions/get-dfns-auth-token.ts

@@ -0,0 +1,38 @@
+import { DfnsAuthenticator } from '@dfns/sdk';
+import { WebAuthnSigner } from '@dfns/sdk-browser';
+import { Handler } from '@netlify/functions';
+
+const handler: Handler = async event => {
+  try {
+    const dfnsAuth = new DfnsAuthenticator({
+      appId: 'ap-7perp-pnqr6-8f5pgmmr6dtgh4n3',
+      baseUrl: 'https://app.dfns.ninja',
+      signer: new WebAuthnSigner(),
+    });
+
+    const { token } = await dfnsAuth.login({
+      username: 'us-12nks-o4ogd-943qhq5l5020410m',
+      orgId: 'or-4bcun-fj3tb-8np9ivfu5jnstkks',
+    });
+
+    console.log(
+      'tokeEEEEEEEEEEEEEEEEEEEEEEEEEEnEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE',
+      token
+    );
+
+    return {
+      statusCode: 200,
+      body: token,
+    };
+  } catch (error) {
+    console.error(error);
+    return {
+      statusCode: 500,
+      body: JSON.stringify({
+        error: error.message,
+      }),
+    };
+  }
+};
+
+export { handler };

netlify/functions/get-wallets.ts

@@ -0,0 +1,34 @@
+import { DfnsAuthenticator, DfnsDelegatedApiClient } from '@dfns/sdk';
+import { WebAuthnSigner } from '@dfns/sdk-browser';
+import { Handler } from '@netlify/functions';
+
+const handler: Handler = async event => {
+  try {
+    const dfnsDelegated = new DfnsDelegatedApiClient({
+      baseUrl: 'https://app.dfns.ninja',
+      appId: 'ap-7perp-pnqr6-8f5pgmmr6dtgh4n3', // ID of the Application registered with DFNS
+      authToken:
+        'eyJ0eXAiOiJKV1QiLCJhbGciOiJFZERTQSJ9.eyJpc3MiOiJhdXRoLmRmbnMubmluamEiLCJhdWQiOiJkZm5zOmF1dGg6dXNlciIsInN1YiI6Im9yLTRiY3VuLWZqM3RiLThucDlpdmZ1NWpuc3Rra3MiLCJqdGkiOiJ1ai0xNDJmay02aHZvZi05M2Q5cGY3NzE3cm1sZjYxIiwic2NvcGUiOiIiLCJwZXJtaXNzaW9ucyI6WyJBdXRoOkFjdGlvbjpTaWduIiwiQXV0aDpBcHBzOkNyZWF0ZSIsIkF1dGg6QXBwczpSZWFkIiwiQXV0aDpBcHBzOlVwZGF0ZSIsIkF1dGg6Q3JlZHM6Q3JlYXRlIiwiQXV0aDpDcmVkczpSZWFkIiwiQXV0aDpDcmVkczpVcGRhdGUiLCJBdXRoOkNyZWRzOkNvZGU6Q3JlYXRlIiwiQXV0aDpUeXBlczpBcHBsaWNhdGlvbiIsIkF1dGg6VHlwZXM6RW1wbG95ZWUiLCJBdXRoOlR5cGVzOkVuZFVzZXIiLCJBdXRoOlR5cGVzOlBhdCIsIkF1dGg6VHlwZXM6U2VydmljZUFjY291bnQiLCJBdXRoOlVzZXJzOkNyZWF0ZSIsIkF1dGg6VXNlcnM6RGVsZWdhdGUiLCJBdXRoOlVzZXJzOlJlYWQiLCJBdXRoOlVzZXJzOlVwZGF0ZSIsIkV4Y2hhbmdlczpDcmVhdGUiLCJFeGNoYW5nZXM6UmVhZCIsIkV4Y2hhbmdlczpEZWxldGUiLCJFeGNoYW5nZXM6RGVwb3NpdHM6Q3JlYXRlIiwiRXhjaGFuZ2VzOldpdGhkcmF3YWxzOkNyZWF0ZSIsIk9yZ3M6UmVhZCIsIk9yZ3M6VXBkYXRlIiwiT3JnczpTZXR0aW5nczpSZWFkIiwiT3JnczpTZXR0aW5nczpVcGRhdGUiLCJQZXJtaXNzaW9uQXNzaWdubWVudHM6Q3JlYXRlIiwiUGVybWlzc2lvbkFzc2lnbm1lbnRzOlJlYWQiLCJQZXJtaXNzaW9uQXNzaWdubWVudHM6UmV2b2tlIiwiUGVybWlzc2lvblByZWRpY2F0ZXM6QXJjaGl2ZSIsIlBlcm1pc3Npb25QcmVkaWNhdGVzOkNyZWF0ZSIsIlBlcm1pc3Npb25QcmVkaWNhdGVzOlJlYWQiLCJQZXJtaXNzaW9uUHJlZGljYXRlczpVcGRhdGUiLCJQZXJtaXNzaW9uczpBcmNoaXZlIiwiUGVybWlzc2lvbnM6Q3JlYXRlIiwiUGVybWlzc2lvbnM6UmVhZCIsIlBlcm1pc3Npb25zOlVwZGF0ZSIsIlBvbGljaWVzOkFyY2hpdmUiLCJQb2xpY2llczpDcmVhdGUiLCJQb2xpY2llczpSZWFkIiwiUG9saWNpZXM6VXBkYXRlIiwiUG9saWNpZXM6QXBwcm92YWxzOlJlYWQiLCJQb2xpY2llczpBcHByb3ZhbHM6QXBwcm92ZSIsIlNpZ25lcnM6TGlzdFNpZ25lcnMiLCJXYWxsZXRzOkJyb2FkY2FzdFRyYW5zYWN0aW9uIiwiV2FsbGV0czpDcmVhdGUiLCJXYWxsZXRzOkRlbGVnYXRlIiwiV2FsbGV0czpFeHBvcnQiLCJXYWxsZXRzOkdlbmVyYXRlU2lnbmF0dXJlIiwiV2FsbGV0czpJbXBvcnQiLCJXYWxsZXRzOlJlYWQiLCJXYWxsZXRzOlJlYWRTaWduYXR1cmUiLCJXYWxsZXRzOlJlYWRUcmFuc2FjdGlvbiIsIldhbGxldHM6UmVhZFRyYW5zZmVyIiwiV2FsbGV0czpUcmFuc2ZlckFzc2V0IiwiV2FsbGV0czpVcGRhdGUiLCJXYWxsZXRzOlRhZ3M6QWRkIiwiV2FsbGV0czpUYWdzOkRlbGV0ZSIsIldlYmhvb2tzOkNyZWF0ZSIsIldlYmhvb2tzOlJlYWQiLCJXZWJob29rczpVcGRhdGUiLCJXZWJob29rczpEZWxldGUiLCJXZWJob29rczpQaW5nIiwiV2ViaG9va3M6RXZlbnRzOlJlYWQiXSwiaHR0cHM6Ly9jdXN0b20vdXNlcm5hbWUiOiJkYW5pQGRsYy5saW5rIiwiaHR0cHM6Ly9jdXN0b20vYXBwX21ldGFkYXRhIjp7InVzZXJJZCI6InVzLTEybmtzLW80b2dkLTk0M3FocTVsNTAyMDQxMG0iLCJvcmdJZCI6Im9yLTRiY3VuLWZqM3RiLThucDlpdmZ1NWpuc3Rra3MiLCJ0b2tlbktpbmQiOiJUb2tlbiJ9LCJpYXQiOjE3MzA3OTY3MDUsImV4cCI6MTczMDgxODMwNX0.MplBRIoMls9sxUakQn1bXfwXxOK6u4TGosoOYlREY5oX4A_7VInLzfQ9-uU8P_TAgX-lnf9nCH6_UtjDTqC9Bg', // Auth token of the User
+    });
+
+    console.log('dfnsDelegated', dfnsDelegated);
+
+    const wallets = await dfnsDelegated.wallets.listWallets();
+    console.log('wallets', wallets);
+
+    return {
+      statusCode: 200,
+      body: JSON.stringify(wallets),
+    };
+  } catch (error) {
+    console.error(error);
+    return {
+      statusCode: 500,
+      body: JSON.stringify({
+        error: error.message,
+      }),
+    };
+  }
+};
+
+export { handler };

package.json

@@ -24,6 +24,8 @@
   "dependencies": {
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.2",
+    "@dfns/sdk": "^0.5.9",
+    "@dfns/sdk-browser": "^0.5.9",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@fontsource-variable/onest": "^5.0.3",
@@ -46,7 +48,7 @@
     "concurrently": "^8.2.2",
     "d3": "^7.9.0",
     "decimal.js": "^10.4.3",
-    "dlc-btc-lib": "2.4.18",
+    "dlc-btc-lib": "2.4.19-dfns-beta",
     "dotenv": "^16.3.1",
     "ethers": "5.7.2",
     "formik": "^2.4.5",

src/app/components/modals/components/modal-container.tsx

@@ -5,6 +5,7 @@ import { AnyAction } from '@reduxjs/toolkit';
 import { RootState } from '@store/index';
 import { modalActions } from '@store/slices/modal/modal.actions';
 
+import { DFNSModal } from '../dfns-modal/dfns-modal';
 import { LedgerModal } from '../ledger-modal/ledger-modal';
 import { SelectBitcoinWalletModal } from '../select-bitcoin-wallet-modal/select-bitcoin-wallet-modal';
 import { SuccessfulFlowModal } from '../successful-flow-modal/successful-flow-modal';
@@ -21,6 +22,7 @@ export function ModalContainer(): React.JSX.Element {
     isSuccesfulFlowModalOpen,
     isSelectBitcoinWalletModalOpen,
     isLedgerModalOpen,
+    isDFNSModalOpen,
   } = useSelector((state: RootState) => state.modal);
 
   const handleClosingModal = (actionCreator: () => AnyAction) => {
@@ -60,6 +62,10 @@ export function ModalContainer(): React.JSX.Element {
         isOpen={isLedgerModalOpen}
         handleClose={() => handleClosingModal(modalActions.toggleLedgerModalVisibility)}
       />
+      <DFNSModal
+        isOpen={isDFNSModalOpen}
+        handleClose={() => handleClosingModal(modalActions.toggleDFNSModalVisibility)}
+      />
     </>
   );
 }

src/app/components/modals/dfns-modal/components/dfns-modal-credentials-form.tsx

@@ -0,0 +1,72 @@
+import { Button, FormControl, FormErrorMessage, FormLabel, Input, VStack } from '@chakra-ui/react';
+import { DFNSCustomerConfiguration } from '@models/configuration';
+import { useForm } from '@tanstack/react-form';
+
+interface DFNSModalRegisterFormProps {
+  onSubmit: (
+    credentialCode: string,
+    selectedDFNSOrganization: DFNSCustomerConfiguration
+  ) => Promise<void>;
+  selectedDFNSOrganization: DFNSCustomerConfiguration;
+}
+
+export function DFNSModalRegisterForm({
+  onSubmit,
+  selectedDFNSOrganization,
+}: DFNSModalRegisterFormProps): React.JSX.Element {
+  const formAPI = useForm({
+    defaultValues: {
+      credentialCode: '',
+    },
+    onSubmit: async ({ value }) => {
+      await onSubmit(value.credentialCode, selectedDFNSOrganization);
+    },
+  });
+
+  return (
+    <VStack w={'100%'}>
+      <form
+        onSubmit={e => {
+          e.preventDefault();
+          e.stopPropagation();
+          void formAPI.handleSubmit();
+        }}
+      >
+        <VStack spacing={4} w={'100%'}>
+          <formAPI.Field
+            name="credentialCode"
+            validators={{
+              onChange: ({ value }) => {
+                if (!value) return 'Credential Code is required';
+                if (value.length < 9) return 'Credential Code must be at least 9 characters';
+                return undefined;
+              },
+            }}
+            children={field => (
+              <FormControl isInvalid={!!field.state.meta.errorMap.onChange}>
+                <FormLabel color={'white.01'} fontSize={'md'}>
+                  Credential Code
+                </FormLabel>
+                <Input
+                  type="string"
+                  value={field.state.value}
+                  onChange={e => field.handleChange(e.target.value)}
+                  placeholder="xxxxxxxxx"
+                />
+                <FormErrorMessage>{field.state.meta.errorMap.onChange}</FormErrorMessage>
+              </FormControl>
+            )}
+          />
+          <formAPI.Subscribe
+            selector={state => [state.canSubmit]}
+            children={([canSubmit]) => (
+              <Button variant={'dfns'} type="submit" isDisabled={!canSubmit}>
+                Submit
+              </Button>
+            )}
+          />
+        </VStack>
+      </form>
+    </VStack>
+  );
+}

src/app/components/modals/dfns-modal/components/dfns-modal-error-box.tsx

@@ -0,0 +1,25 @@
+import { HStack, Text } from '@chakra-ui/react';
+
+interface DFNSModalErrorBoxProps {
+  error: string | undefined;
+}
+
+export function DFNSModalErrorBox({ error }: DFNSModalErrorBoxProps): React.JSX.Element | false {
+  return (
+    !!error && (
+      <HStack
+        p={'5%'}
+        w={'375px'}
+        spacing={4}
+        border={'1px solid'}
+        borderRadius={'md'}
+        borderColor={'red'}
+        justifyContent={'center'}
+      >
+        <Text fontFamily={'Inter'} fontSize={'xs'} fontWeight={'600'}>
+          {error}
+        </Text>
+      </HStack>
+    )
+  );
+}

src/app/components/modals/dfns-modal/components/dfns-modal-form.tsx

@@ -0,0 +1,78 @@
+import { Button, FormControl, FormErrorMessage, FormLabel, Input, VStack } from '@chakra-ui/react';
+import { DFNSCustomerConfiguration } from '@models/configuration';
+import { useForm } from '@tanstack/react-form';
+
+interface DFNSModalLoginFormProps {
+  onSubmit: (email: string, selectedDFNSOrganization: DFNSCustomerConfiguration) => Promise<void>;
+  selectedDFNSOrganization: DFNSCustomerConfiguration;
+}
+
+const validateEmail = (email: string) => {
+  if (!email) return 'Email address is required';
+
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  if (!emailRegex.test(email)) return 'Please enter a valid email address';
+
+  const [localPart] = email.split('@');
+  if (localPart.length > 64) return 'Local part of email cannot exceed 64 characters';
+  if (email.length > 254) return 'Email address cannot exceed 254 characters';
+
+  return undefined;
+};
+
+export function DFNSModalLoginForm({
+  onSubmit,
+  selectedDFNSOrganization,
+}: DFNSModalLoginFormProps): React.JSX.Element {
+  const formAPI = useForm({
+    defaultValues: {
+      email: '',
+    },
+    onSubmit: async ({ value }) => {
+      await onSubmit(value.email, selectedDFNSOrganization);
+    },
+  });
+
+  return (
+    <VStack w={'100%'}>
+      <form
+        onSubmit={e => {
+          e.preventDefault();
+          e.stopPropagation();
+          void formAPI.handleSubmit();
+        }}
+      >
+        <VStack spacing={4} w={'100%'}>
+          <formAPI.Field
+            name="email"
+            validators={{
+              onChange: ({ value }) => validateEmail(value),
+            }}
+            children={field => (
+              <FormControl isInvalid={!!field.state.meta.errorMap.onChange}>
+                <FormLabel color={'white.01'} fontSize={'md'}>
+                  E-Mail Address
+                </FormLabel>
+                <Input
+                  type="email"
+                  value={field.state.value}
+                  onChange={e => field.handleChange(e.target.value)}
+                  placeholder="[email protected]"
+                />
+                <FormErrorMessage>{field.state.meta.errorMap.onChange}</FormErrorMessage>
+              </FormControl>
+            )}
+          />
+          <formAPI.Subscribe
+            selector={state => [state.canSubmit]}
+            children={([canSubmit]) => (
+              <Button variant={'dfns'} type="submit" isDisabled={!canSubmit}>
+                Submit
+              </Button>
+            )}
+          />
+        </VStack>
+      </form>
+    </VStack>
+  );
+}

src/app/components/modals/dfns-modal/components/dfns-modal-layout.tsx

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+
+import {
+  Image,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  VStack,
+} from '@chakra-ui/react';
+
+interface DFNSModalLayoutProps {
+  logo: string;
+  isOpen: boolean;
+  onClose: () => void;
+  children: ReactNode;
+}
+
+export function DFNSModalLayout({
+  logo,
+  isOpen,
+  onClose,
+  children,
+}: DFNSModalLayoutProps): React.JSX.Element {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} variant={'dfns'}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>
+          <Image src={logo} alt={'DFNS Logo'} boxSize={'100px'} objectFit={'contain'} />
+        </ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <VStack minHeight={'425px'} spacing={'25px'}>
+            {children}
+          </VStack>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}