feat: bako id integration

packages/app/package.json

@@ -19,6 +19,7 @@
     "xstate:typegen": "xstate typegen 'src/**/*.ts?(x)'"
   },
   "dependencies": {
+    "@bako-id/sdk": "0.0.16",
     "@fontsource/source-code-pro": "5.0.13",
     "@fuel-ui/css": "0.23.3",
     "@fuel-ui/icons": "0.23.3",
@@ -33,7 +34,7 @@
     "@sentry/react": "8.33.1",
     "@storybook/addon-viewport": "7.4.6",
     "@storybook/jest": "0.2.3",
-    "@tanstack/react-query": "5.28.4",
+    "@tanstack/react-query": "5.61.0",
     "@xstate/react": "3.2.2",
     "compare-versions": "6.1.0",
     "cross-fetch": "4.0.0",
@@ -83,7 +84,7 @@
     "@storybook/react-webpack5": "7.4.6",
     "@storybook/testing-library": "0.2.2",
     "@storybook/theming": "7.4.6",
-    "@tanstack/react-query-devtools": "5.28.4",
+    "@tanstack/react-query-devtools": "5.61.0",
     "@testing-library/react": "14.0.0",
     "@types/chrome": "0.0.246",
     "@types/lodash.debounce": "4.0.7",

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

@@ -8,6 +8,7 @@ import {
   getButtonByText,
   getByAriaLabel,
   getInputByName,
+  getInputByValue,
   hasText,
   visit,
 } from '../commons';
@@ -306,6 +307,43 @@ test.describe('SendTransaction', () => {
     await hasText(page, 'success');
   });
 
+  test('Send transaction to a name', 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();
+    await page.waitForTimeout(2000);
+
+    // Fill address
+    await getInputByName(page, 'address').fill('@bakoid');
+    await new Promise((resolve) => setTimeout(resolve, 3000));
+
+    await hasText(page, '0x89297d82...6bbe387D2D6975C7D3');
+
+    await getInputByName(page, 'amount').focus();
+
+    // Fill amount
+    await getInputByName(page, 'amount').fill('0.001');
+
+    // Submit transaction
+    const btnLocator = getButtonByText(page, 'Review');
+
+    await expectButtonToBeEnabled(btnLocator);
+    await page.waitForTimeout(5000);
+    await expectButtonToBeEnabled(btnLocator);
+    await btnLocator.click();
+
+    await getButtonByText(page, 'Approve').click();
+    await hasText(page, '0.001 ETH');
+
+    // Wait for transaction to be confirmed
+    await hasText(page, 'success');
+  });
+
   test('Send max amount transaction', async () => {
     const receiverWallet = Wallet.generate({
       provider,

packages/app/src/systems/Core/components/Providers/Providers.tsx

@@ -11,6 +11,7 @@ import { StoreProvider } from '~/store';
 
 import icons from '/icons/sprite.svg';
 
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ErrorBoundary } from '~/systems/Error';
 
 type ProvidersProps = {
@@ -50,13 +51,23 @@ setFuelThemes({
   },
 });
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnMount: false,
+    },
+  },
+});
+
 export function Providers({ children }: ProvidersProps) {
   return (
     <ThemeProvider>
       <ErrorBoundary>
         <StoreProvider>
-          {globalCss(customStyles)()}
-          {children}
+          <QueryClientProvider client={queryClient}>
+            {globalCss(customStyles)()}
+            {children}
+          </QueryClientProvider>
         </StoreProvider>
       </ErrorBoundary>
     </ThemeProvider>

packages/app/src/systems/Core/utils/address.tsx

@@ -1,8 +1,14 @@
 import { isB256 } from 'fuels';
 
-export function shortAddress(address = '') {
+export function shortAddress(
+  address = '',
+  options: { left: number; right: number } = {
+    left: 6,
+    right: 4,
+  }
+) {
   return address.length > 10
-    ? `${address.slice(0, 6)}...${address.slice(-4)}`
+    ? `${address.slice(0, options.left)}...${address.slice(-options.right)}`
     : address;
 }
 

packages/app/src/systems/Core/utils/adress.test.ts

@@ -5,4 +5,12 @@ describe('shortAddress()', () => {
     const addr = 'fuel0x2c8e117bcfba11c76d7db2d43464b1d2093474ef';
     expect(shortAddress(addr)).toBe('fuel0x...74ef');
   });
+
+  it('should show a small version of a full address with custom length', () => {
+    const addr =
+      '0xf2Bc792F42A19fC64646787626E4451576b95d123cc525C1583e0462c9a62a23';
+    expect(shortAddress(addr, { left: 10, right: 30 })).toBe(
+      '0xf2Bc792F...b95d123cc525C1583e0462c9a62a23'
+    );
+  });
 });

packages/app/src/systems/NameSystem/__mocks__/index.tsx

@@ -0,0 +1 @@
+export * from './names';

packages/app/src/systems/NameSystem/__mocks__/names.tsx

@@ -0,0 +1,8 @@
+export const MOCK_NAMES = [
+  {
+    name: '@bakoid',
+    link: 'https://app.bako.id/profile/bakoid',
+    resolver:
+      '0xec8ff99af54e7f4c9dd81f32dffade6b41f3b980436ee2eabf47a069f998cd73',
+  },
+];

packages/app/src/systems/NameSystem/components/NameSystemBox.stories.tsx

@@ -0,0 +1,53 @@
+import { Box, Button } from '@fuel-ui/react';
+
+import { useState } from 'react';
+import {
+  NameSystemBox,
+  type NameSystemBoxProps,
+  NameSystemWrapper,
+} from '~/systems/NameSystem';
+import { MOCK_NAMES } from '~/systems/NameSystem/__mocks__';
+
+export default {
+  component: NameSystemBox,
+  title: 'NameSystem/Components/NameSystemBox',
+};
+
+export const Usage = (args: NameSystemBoxProps) => {
+  const { name: addressName, resolver, link } = MOCK_NAMES[0];
+  return (
+    <Box css={{ width: 270 }}>
+      <NameSystemBox
+        {...args}
+        link={link}
+        name={addressName}
+        resolver={resolver}
+        onClear={() => console.log('Clear')}
+      />
+    </Box>
+  );
+};
+
+export const Wrapper = (args: NameSystemBoxProps) => {
+  const { name: addressName, resolver, link } = MOCK_NAMES[0];
+
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <Box css={{ width: 270 }}>
+      <NameSystemWrapper
+        isVisible={isVisible}
+        element={
+          <NameSystemBox
+            {...args}
+            link={link}
+            name={addressName}
+            resolver={resolver}
+            onClear={() => setIsVisible(false)}
+          />
+        }
+        input={<Button onPress={() => setIsVisible(true)}>Toggle</Button>}
+      />
+    </Box>
+  );
+};

packages/app/src/systems/NameSystem/components/NameSystemBox.tsx

@@ -0,0 +1,93 @@
+import { cssObj } from '@fuel-ui/css';
+import {
+  Avatar,
+  Box,
+  Icon,
+  IconButton,
+  Input,
+  Link,
+  Text,
+} from '@fuel-ui/react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { type Maybe, animations, shortAddress } from '~/systems/Core';
+
+const MotionContent = motion(Box);
+
+export type NameSystemWrapperProps = {
+  isVisible?: boolean;
+  element: React.ReactNode;
+  input: React.ReactNode;
+};
+
+export type NameSystemBoxProps = {
+  link: Maybe<string>;
+  name: Maybe<string>;
+  resolver: Maybe<string>;
+  onClear: () => void;
+};
+
+export const NameSystemWrapper = (props: NameSystemWrapperProps) => (
+  <AnimatePresence mode="wait">
+    {props.isVisible ? (
+      <MotionContent {...animations.fadeIn()} key="name-system-primary">
+        {props.element}
+      </MotionContent>
+    ) : (
+      <MotionContent {...animations.fadeIn()} key="name-system-secondary">
+        {props.input}
+      </MotionContent>
+    )}
+  </AnimatePresence>
+);
+
+export const NameSystemBox = (props: NameSystemBoxProps) => {
+  return (
+    <Box as={Input} css={styles.addressBox}>
+      <Avatar.Generated size="xsm" hash={props.resolver ?? ''} />
+      <Box.Flex wrap="wrap" direction="column" justify="center">
+        <Link href={props.link ?? ''} isExternal>
+          {props.name}
+        </Link>
+        <Text fontSize="xs">
+          {props.resolver &&
+            shortAddress(props.resolver, {
+              left: 10,
+              right: 10,
+            })}
+        </Text>
+      </Box.Flex>
+      <IconButton
+        variant="link"
+        aria-label="Clear"
+        icon={Icon.is('X')}
+        onPress={props.onClear}
+      />
+    </Box>
+  );
+};
+
+const styles = {
+  addressBox: cssObj({
+    display: 'flex',
+    px: '$3 !important',
+    py: '$1 !important',
+    alignItems: 'center',
+    gap: '$3',
+    flexDirection: 'row',
+    position: 'relative',
+    '.fuel_Link': {
+      fontSize: '$sm',
+    },
+    '.fuel_Button': {
+      position: 'absolute',
+      right: '$2',
+    },
+    '.fuel_Avatar': {
+      width: 30,
+      height: 30,
+    },
+    '.fuel_Icon': {
+      color: '$inputBaseIcon !important',
+    },
+  }),
+};

packages/app/src/systems/NameSystem/components/index.ts

@@ -0,0 +1 @@
+export * from './NameSystemBox';

packages/app/src/systems/NameSystem/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useNameSystem';
+export * from './useNameResolver';

packages/app/src/systems/NameSystem/hooks/useNameResolver.ts

@@ -0,0 +1,23 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { isB256 } from 'fuels';
+import { NameSystemService } from '~/systems/NameSystem/services';
+import { NS_QUERY_KEYS } from '~/systems/NameSystem/utils/queryKeys';
+import { useProvider } from '~/systems/Network/hooks/useProvider';
+
+export const useNameResolver = (address: string) => {
+  const provider = useProvider();
+  const queryClient = useQueryClient();
+
+  const { data: name, isLoading } = useQuery({
+    queryKey: NS_QUERY_KEYS.name(address, provider?.url),
+    queryFn: async () => {
+      if (!provider) return null;
+      const nameSystem = new NameSystemService(provider, queryClient);
+      const { name } = await nameSystem.name(address);
+      return name;
+    },
+    enabled: !!provider && isB256(address),
+  });
+
+  return { name, isLoading };
+};