Bako ID integration

packages/app/package.json

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

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,

packages/app/src/systems/Transaction/components/TxRecipientCard/TxRecipientCard.tsx

@@ -1,10 +1,19 @@
 import { cssObj } from '@fuel-ui/css';
-import { Avatar, Box, Card, Heading, Icon, Text } from '@fuel-ui/react';
+import {
+  Avatar,
+  Box,
+  Card,
+  ContentLoader,
+  Heading,
+  Icon,
+  Text,
+} from '@fuel-ui/react';
 import type { OperationTransactionAddress } from 'fuels';
 import { Address, AddressType, ChainName, isB256, isBech32 } from 'fuels';
-import type { FC } from 'react';
+import { type FC, useEffect, useState } from 'react';
 import { EthAddress, FuelAddress, useAccounts } from '~/systems/Account';
 
+import { config, reverseResolver } from '@bako-id/sdk';
 import { TxRecipientCardLoader } from './TxRecipientCardLoader';
 
 export type TxRecipientCardProps = {
@@ -21,6 +30,8 @@ export const TxRecipientCard: TxRecipientCardComponent = ({
   isReceiver,
 }) => {
   const { accounts } = useAccounts();
+  const [name, setName] = useState('');
+
   const address = recipient?.address || '';
   const isValidAddress = isB256(address) || isBech32(address);
   const fuelAddress = isValidAddress
@@ -29,8 +40,41 @@ export const TxRecipientCard: TxRecipientCardComponent = ({
   const isContract = recipient?.type === AddressType.contract;
   const isEthChain = recipient?.chain === ChainName.ethereum;
   const isNetwork = address === 'Network';
-  const name =
-    accounts?.find((a) => a.address === fuelAddress)?.name || 'unknown';
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    const setAccountName = () => {
+      const accountName =
+        accounts?.find((a) => a.address === fuelAddress)?.name || 'unknown';
+      setName(accountName);
+    };
+
+    const resolveAddressName = async () => {
+      const handleName = await reverseResolver(fuelAddress);
+
+      if (handleName) {
+        return setName(`@${handleName}`);
+      }
+
+      setAccountName();
+    };
+
+    if (!name && isReceiver) {
+      resolveAddressName();
+    }
+
+    if (!isReceiver) {
+      setAccountName();
+    }
+  }, [isReceiver, name]);
+
+  const Name = !name ? (
+    <ContentLoader width={100} height={17} viewBox="0 0 80 17">
+      <ContentLoader.Rect x="0" y="0" width="100" height="17" rx="4" />
+    </ContentLoader>
+  ) : (
+    `${name}`
+  );
 
   return (
     <Card
@@ -77,7 +121,7 @@ export const TxRecipientCard: TxRecipientCardComponent = ({
           )}
           <Box.Flex css={styles.info}>
             <Heading as="h6" css={styles.name}>
-              {isNetwork ? address : name}
+              {isNetwork ? address : Name}
             </Heading>
             {!isNetwork && (
               <FuelAddress address={fuelAddress} css={styles.address} />