feat(bako-id): improve name system box and add wrapper to apply anima…

…tion
FuelLabs · Nov 22, 2024 · 771b084 · 771b084
1 parent 7fd4fd8
commit 771b084
Show file tree

Hide file tree

Showing 5 changed files with 173 additions and 84 deletions.
diff --git a/packages/app/src/systems/NameSystem/__mocks__/index.tsx b/packages/app/src/systems/NameSystem/__mocks__/index.tsx
@@ -0,0 +1 @@
+export * from './names';
diff --git a/packages/app/src/systems/NameSystem/__mocks__/names.tsx b/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',
+  },
+];
diff --git a/packages/app/src/systems/NameSystem/components/NameSystemBox.stories.tsx b/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>
+  );
+};
diff --git a/packages/app/src/systems/NameSystem/components/NameSystemBox.tsx b/packages/app/src/systems/NameSystem/components/NameSystemBox.tsx
@@ -1,73 +1,93 @@
 import { cssObj } from '@fuel-ui/css';
-import { Box, Icon, IconButton, Input, Link, Text } from '@fuel-ui/react';
+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>;
-  isVisible?: boolean;
   onClear: () => void;
-  children: React.ReactNode;
 };
 
+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 (
-    <AnimatePresence mode="wait">
-      {props.isVisible ? (
-        <MotionContent
-          {...animations.fadeIn()}
-          key="name-system-box"
-          as={Input}
-          css={styles.addressBox}
-        >
-          <Link href={props.link ?? ''} isExternal>
-            {props.name}
-          </Link>
-          <Text fontSize="sm">
-            {props.resolver &&
-              shortAddress(props.resolver, {
-                left: 10,
-                right: 18,
-              })}
-          </Text>
-          <IconButton
-            css={{
-              '.fuel_Icon': { color: '$inputBaseIcon !important' },
-            }}
-            variant="link"
-            aria-label="Clear"
-            icon={Icon.is('X')}
-            onPress={props.onClear}
-          />
-        </MotionContent>
-      ) : (
-        <MotionContent key="name-system-children" {...animations.fadeIn()}>
-          {props.children}
-        </MotionContent>
-      )}
-    </AnimatePresence>
+    <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',
-    justifyContent: 'center',
     px: '$3 !important',
     py: '$1 !important',
-    flexDirection: 'column',
+    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',
+    },
   }),
 };
diff --git a/packages/app/src/systems/Send/components/SendSelect/SendSelect.tsx b/packages/app/src/systems/Send/components/SendSelect/SendSelect.tsx
@@ -26,7 +26,7 @@ import {
 
 import { useController, useWatch } from 'react-hook-form';
 import { InputAmount } from '~/systems/Core/components/InputAmount/InputAmount';
-import { NameSystemBox } from '~/systems/NameSystem';
+import { NameSystemBox, NameSystemWrapper } from '~/systems/NameSystem';
 import { TxFeeOptions } from '~/systems/Transaction/components/TxFeeOptions/TxFeeOptions';
 import type { UseSendReturn } from '../../hooks';
 
@@ -139,53 +139,60 @@ export function SendSelect({
             To
           </Text>
           <Box css={styles.addressRow}>
-            <NameSystemBox
-              onClear={clearAddress}
+            <NameSystemWrapper
               isVisible={Boolean(
                 nameSystem.resolver.value && nameSystem.name.value
               )}
-              name={nameSystem.name.value}
-              resolver={nameSystem.resolver.value}
-              link={nameSystem.profileURI}
-            >
-              <ControlledField
-                isRequired
-                name="address"
-                control={form.control}
-                isInvalid={
-                  Boolean(form.formState.errors?.address) &&
-                  !form.formState.isValidating
-                }
-                render={({ field }) => (
-                  <Input size="sm" isDisabled={nameSystem.isLoading}>
-                    <Input.Field
-                      {...field}
-                      value={nameSystem.resolver.value ?? field.value}
-                      id="search-address"
-                      aria-label="Address Input"
-                      placeholder="Enter a fuel address"
-                    />
-                    {nameSystem.isLoading && (
-                      <Input.ElementRight
-                        css={{ mr: '$1' }}
-                        element={<Spinner size={15} />}
+              element={
+                <NameSystemBox
+                  onClear={clearAddress}
+                  name={nameSystem.name.value}
+                  resolver={nameSystem.resolver.value}
+                  link={nameSystem.profileURI}
+                />
+              }
+              input={
+                <ControlledField
+                  isRequired
+                  name="address"
+                  control={form.control}
+                  isInvalid={
+                    Boolean(form.formState.errors?.address) &&
+                    !form.formState.isValidating
+                  }
+                  render={({ field }) => (
+                    <Input size="sm" isDisabled={nameSystem.isLoading}>
+                      <Input.Field
+                        {...field}
+                        value={nameSystem.resolver.value ?? field.value}
+                        id="search-address"
+                        aria-label="Address Input"
+                        placeholder="Enter a fuel address"
                       />
-                    )}
-                  </Input>
-                )}
-              />
-            </NameSystemBox>
-            <Form.HelperText
-              aria-label="Error message"
-              css={{
-                mt: '$3',
-                fontSize: '14px',
-                lineHeight: '18px',
-                color: '$intentsWarning8',
-              }}
-            >
-              {warningMessage}
-            </Form.HelperText>
+                      {nameSystem.isLoading && (
+                        <Input.ElementRight
+                          css={{ mr: '$1' }}
+                          element={<Spinner size={15} />}
+                        />
+                      )}
+                    </Input>
+                  )}
+                />
+              }
+            />
+            {warningMessage && !form.formState.errors?.address && (
+              <Form.HelperText
+                aria-label="Error message"
+                css={{
+                  mt: '$3',
+                  fontSize: '14px',
+                  lineHeight: '18px',
+                  color: '$intentsWarning8',
+                }}
+              >
+                {warningMessage}
+              </Form.HelperText>
+            )}
           </Box>
         </Box.Flex>
         <Box.Stack gap="$3">