Bako ID integration

packages/app/package.json

@@ -20,6 +20,7 @@
     "codegen": "graphql-codegen --config codegen.ts"
   },
   "dependencies": {
+    "@bako-id/sdk": "0.0.6",
     "@fontsource/source-code-pro": "5.0.13",
     "@fuel-ui/css": "0.23.2",
     "@fuel-ui/icons": "0.23.2",

packages/app/playwright/e2e/SendTransaction.test.ts

@@ -13,7 +13,7 @@ import {
   visit,
 } from '../commons';
 import { seedWallet } from '../commons/seedWallet';
-import { ALT_ASSET, mockData } from '../mocks';
+import { ALT_ASSET, PRIVATE_KEY, mockData } from '../mocks';
 
 test.describe('SendTransaction', () => {
   let browser: Browser;
@@ -168,4 +168,36 @@ test.describe('SendTransaction', () => {
     // Wait for transaction to be confirmed
     await hasText(page, 'success');
   });
+
+  test('Send using a Bako handle', async () => {
+    await visit(page, '/send');
+
+    // Check submit button is disable by default
+    await page.waitForSelector('[aria-disabled="true"]');
+
+    // Select asset
+    await getButtonByText(page, 'Select one asset').click();
+    await page.getByText('Ethereum').click();
+
+    // Fill Bako handle
+    await getInputByName(page, 'address').fill('@fueltests');
+    await hasText(page, /Address of @fueltests/);
+
+    // Fill Bako handle resolver
+    const account = Wallet.fromPrivateKey(PRIVATE_KEY);
+    await getInputByName(page, 'address').fill(account.address.toAddress());
+    await hasText(page, /Handle of address/);
+
+    // Fill amount
+    await getInputByName(page, 'amount').fill('0.001');
+
+    // Submit transaction
+    await getButtonByText(page, 'Confirm').click();
+
+    await getButtonByText(page, 'Approve').click();
+    await hasText(page, '0.001 ETH');
+
+    // Wait for transaction to be confirmed
+    await hasText(page, 'success');
+  });
 });

packages/app/src/systems/Send/components/SendSelect/SendSelect.tsx

@@ -1,10 +1,15 @@
 import { cssObj } from '@fuel-ui/css';
-import { Box, Input, InputAmount, Text } from '@fuel-ui/react';
+import { Box, Form, Input, InputAmount, Text } from '@fuel-ui/react';
 import { motion } from 'framer-motion';
-import { BaseAssetId, DECIMAL_UNITS, bn } from 'fuels';
+import { Address, BaseAssetId, DECIMAL_UNITS, bn } from 'fuels';
 import { useEffect, useMemo } from 'react';
 import { AssetSelect } from '~/systems/Asset';
-import { ControlledField, Layout, animations } from '~/systems/Core';
+import {
+  ControlledField,
+  Layout,
+  animations,
+  shortAddress,
+} from '~/systems/Core';
 import { TxDetails } from '~/systems/Transaction';
 
 import type { UseSendReturn } from '../../hooks';
@@ -19,6 +24,8 @@ export function SendSelect({
   balanceAssetSelected,
   status,
   fee,
+  bakoResolver,
+  bakoName,
 }: SendSelectProps) {
   const assetId = form.watch('asset', '');
   // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
@@ -74,14 +81,38 @@ export function SendSelect({
               control={form.control}
               isInvalid={Boolean(form.formState.errors?.address)}
               render={({ field }) => (
-                <Input size="sm">
-                  <Input.Field
-                    {...field}
-                    id="address"
-                    aria-label="Address Input"
-                    placeholder="Enter a fuel address"
-                  />
-                </Input>
+                <>
+                  <Input size="sm">
+                    <Input.Field
+                      {...field}
+                      id="address"
+                      aria-label="Address Input"
+                      placeholder="Enter a fuel address or bako handle"
+                    />
+                  </Input>
+                  {bakoResolver && (
+                    <Form.HelperText
+                      css={{ fontSize: '$sm', fontWeight: '$normal' }}
+                    >
+                      Address of {field.value}:{' '}
+                      <Text as="b" css={{ fontWeight: '$bold' }}>
+                        {shortAddress(
+                          Address.fromB256(bakoResolver).toAddress()
+                        )}
+                      </Text>
+                    </Form.HelperText>
+                  )}
+                  {bakoName && (
+                    <Form.HelperText
+                      css={{ fontSize: '$sm', fontWeight: '$normal' }}
+                    >
+                      Handle of address:
+                      <Text as="b" css={{ fontWeight: '$bold' }}>
+                        @{bakoName}
+                      </Text>
+                    </Form.HelperText>
+                  )}
+                </>
               )}
             />
           </Box>

packages/app/src/systems/Send/hooks/useSend.tsx

@@ -1,8 +1,8 @@
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useInterpret, useSelector } from '@xstate/react';
-import type { BigNumberish } from 'fuels';
+import { Address, type BigNumberish } from 'fuels';
 import { bn, isBech32 } from 'fuels';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import * as yup from 'yup';
@@ -13,6 +13,8 @@ import { useTransactionRequest } from '~/systems/DApp';
 import { TxRequestStatus } from '~/systems/DApp/machines/transactionRequestMachine';
 import type { TxInputs } from '~/systems/Transaction/services';
 
+import { config, isValidDomain, resolver, reverseResolver } from '@bako-id/sdk';
+import debounce from 'lodash.debounce';
 import { sendMachine } from '../machines/sendMachine';
 import type { SendMachineState } from '../machines/sendMachine';
 
@@ -57,20 +59,39 @@ const selectors = {
   },
 };
 
+const isValidAddress = (value: string) => {
+  try {
+    return Boolean(value && isBech32(value));
+  } catch (_error) {
+    return false;
+  }
+};
+
 const schema = yup
   .object({
     asset: yup.string().required('Asset is required'),
     amount: yup.string().required('Amount is required'),
-    address: yup
-      .string()
-      .required('Address is required')
-      .test('is-address', 'Invalid bech32 address', (value) => {
-        try {
-          return Boolean(value && isBech32(value));
-        } catch (_error) {
-          return false;
-        }
-      }),
+    address: yup.lazy((value) => {
+      const addressSchema = yup
+        .string()
+        .required('Address or Bako Handle is required');
+
+      const isHandle = value.startsWith('@');
+
+      if (isHandle) {
+        return addressSchema.test(
+          'is-domain',
+          'Invalid handle name',
+          isValidDomain
+        );
+      }
+
+      return addressSchema.test(
+        'is-address',
+        'Invalid bech32 address',
+        isValidAddress
+      );
+    }),
   })
   .required();
 
@@ -79,6 +100,8 @@ export function useSend() {
   const txRequest = useTransactionRequest();
   const { account, balanceAssets: accountBalanceAssets } = useAccounts();
   const { assets } = useAssets();
+  const [bakoResolver, setBakoResolver] = useState<string>('');
+  const [bakoName, setBakoName] = useState<string>('');
 
   const form = useForm({
     resolver: yupResolver(schema),
@@ -91,6 +114,38 @@ export function useSend() {
     },
   });
 
+  const fetchBakoHandle = useCallback(
+    debounce((name: string) => {
+      resolver(name)
+        .then((value) => {
+          if (value) {
+            setBakoResolver(value.resolver);
+          } else {
+            form.setError('address', {
+              type: 'pattern',
+              message: 'Not found bako handle.',
+            });
+          }
+        })
+        .catch(() => {
+          form.setError('address', {
+            type: 'pattern',
+            message: 'Not found bako handle.',
+          });
+        });
+    }, 500),
+    []
+  );
+
+  const fetchBakoName = useCallback(
+    debounce((resolver: string) => {
+      reverseResolver(resolver).then((value) => {
+        setBakoName(value ?? '');
+      });
+    }, 500),
+    []
+  );
+
   const service = useInterpret(() =>
     sendMachine.withConfig({
       actions: {
@@ -113,25 +168,47 @@ export function useSend() {
   );
 
   const amount = form.watch('amount');
+  const address = form.watch('address');
   const errorMessage = useSelector(service, selectors.error);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
-    if (bn(amount).gt(0) && form.formState.isValid) {
-      const asset = assets.find(
-        ({ assetId }) => assetId === form.getValues('asset')
-      );
-      const amount = bn(form.getValues('amount'));
-      const address = form.getValues('address');
-      const input = {
-        account,
-        asset,
-        amount,
-        address,
-      } as TxInputs['isValidTransaction'];
-      service.send('SET_DATA', { input });
+    setBakoResolver('');
+    setBakoName('');
+
+    if (address.includes('@') && isValidDomain(address)) {
+      fetchBakoHandle(address);
+    }
+
+    if (isValidAddress(address)) {
+      fetchBakoName(address);
     }
-  }, [amount, form.formState.isValid]);
+  }, [address]);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    if (!form.formState.isValid) return;
+
+    const amount = bn(form.getValues('amount'));
+    if (bn(amount).lt(0)) return;
+
+    const address = form.getValues('address');
+    if (address.startsWith('@') && !bakoResolver) return;
+
+    const asset = assets.find(
+      ({ assetId }) => assetId === form.getValues('asset')
+    );
+    const bech32Address = Address.fromAddressOrString(
+      bakoResolver || address
+    ).toAddress();
+    const input = {
+      account,
+      asset,
+      amount,
+      address: bech32Address,
+    } as TxInputs['isValidTransaction'];
+    service.send('SET_DATA', { input });
+  }, [amount, bakoResolver, form.formState.isValid]);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
@@ -214,6 +291,8 @@ export function useSend() {
     title,
     status,
     readyToSend,
+    bakoName,
+    bakoResolver,
     balanceAssets,
     account,
     txRequest,