Tom/xcm updates (#1480)

* wip: refactor account select

* refactor: update component names

* Revert "refactor: update component names"

This reverts commit c80ca13.

* fix: rename components without breaking feature

* disable all data refetching

* wip: render xcm form when no wallet connected

* remove redundant legacy component

* workaround for account selection issue

* Tidying up

* handle TODO relating to SelectObject

* remove comment

* casing

* selected styling

* improvements

* Add comment

src/component-library/Select/Select.tsx

@@ -14,7 +14,7 @@ import { SelectTrigger } from './SelectTrigger';
 
 type SelectType = 'listbox' | 'modal';
 
-type SelectObject = Record<string, unknown>;
+type SelectObject = Record<any, any>;
 
 // TODO: listbox to be implemented
 type Props<F extends SelectType = 'listbox', T = SelectObject> = {

src/components/AccountSelect/AccountItem.tsx

@@ -0,0 +1,38 @@
+import Identicon from '@polkadot/react-identicon';
+
+import { FlexProps } from '@/component-library/Flex';
+import { useSelectModalContext } from '@/component-library/Select/SelectModalContext';
+
+import { StyledAccountItemAddress, StyledAccountItemName, StyledAccountItemWrapper } from './AccountSelect.style';
+
+type Props = {
+  address: string;
+  name?: string;
+};
+
+type InheritAttrs = Omit<FlexProps, keyof Props | 'children'>;
+
+type AccountItemProps = Props & InheritAttrs;
+
+const AccountItem = ({ address, name, ...props }: AccountItemProps): JSX.Element => {
+  const isSelected = useSelectModalContext().selectedItem?.key === address;
+
+  return (
+    <StyledAccountItemWrapper alignItems='center' gap='spacing2' flex='1' {...props}>
+      <Identicon size={24} value={address} theme='polkadot' />
+      <StyledAccountItemWrapper direction='column'>
+        {name && (
+          <StyledAccountItemName size='s' $isSelected={!!isSelected}>
+            {name}
+          </StyledAccountItemName>
+        )}
+        <StyledAccountItemAddress size='xs' color='tertiary'>
+          {address}
+        </StyledAccountItemAddress>
+      </StyledAccountItemWrapper>
+    </StyledAccountItemWrapper>
+  );
+};
+
+export { AccountItem };
+export type { AccountItemProps };

src/components/AccountSelect/AccountSelect.style.tsx

@@ -1,69 +1,25 @@
 import styled from 'styled-components';
 
-import { ChevronDown } from '@/assets/icons';
-import { Flex } from '@/component-library/Flex';
-import { List } from '@/component-library/List';
-import { Span } from '@/component-library/Text';
-import { theme } from '@/component-library/theme';
-
-type StyledClickableProps = {
-  $isClickable: boolean;
-};
+import { Flex, Span, theme } from '@/component-library';
 
 type StyledListItemSelectedLabelProps = {
   $isSelected: boolean;
 };
 
-const StyledAccount = styled.span`
-  font-size: ${theme.text.s};
-  color: ${theme.colors.textPrimary};
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-const StyledAccountSelect = styled(Flex)<StyledClickableProps>`
-  background-color: ${theme.tokenInput.endAdornment.bg};
-  border-radius: ${theme.rounded.md};
-  font-size: ${theme.text.xl2};
-  padding: ${theme.spacing.spacing3};
-  cursor: ${({ $isClickable }) => $isClickable && 'pointer'};
-  height: 3rem;
-  width: auto;
-  overflow: hidden;
-`;
-
-const StyledChevronDown = styled(ChevronDown)`
-  margin-left: ${theme.spacing.spacing1};
-`;
-
-const StyledAccountLabelAddress = styled(Span)`
+const StyledAccountItemAddress = styled(Span)`
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 `;
 
-const StyledAccountLabelName = styled(StyledAccountLabelAddress)<StyledListItemSelectedLabelProps>`
+const StyledAccountItemName = styled(StyledAccountItemAddress)<StyledListItemSelectedLabelProps>`
   color: ${({ $isSelected }) =>
     $isSelected ? theme.tokenInput.list.item.selected.text : theme.tokenInput.list.item.default.text};
 `;
 
-const StyledList = styled(List)`
-  overflow: auto;
-  padding: 0 ${theme.dialog.medium.body.paddingX} ${theme.dialog.medium.body.paddingY}
-    ${theme.dialog.medium.body.paddingX};
-`;
-
-const StyledAccountLabelWrapper = styled(Flex)`
+const StyledAccountItemWrapper = styled(Flex)`
   flex-grow: 1;
   overflow: hidden;
 `;
 
-export {
-  StyledAccount,
-  StyledAccountLabelAddress,
-  StyledAccountLabelName,
-  StyledAccountLabelWrapper,
-  StyledAccountSelect,
-  StyledChevronDown,
-  StyledList
-};
+export { StyledAccountItemAddress, StyledAccountItemName, StyledAccountItemWrapper };

src/components/AccountSelect/AccountSelect.tsx

@@ -1,98 +1,23 @@
 import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types';
-import { useLabel } from '@react-aria/label';
-import { chain, mergeProps } from '@react-aria/utils';
-import { VisuallyHidden } from '@react-aria/visually-hidden';
-import { forwardRef, InputHTMLAttributes, ReactNode, useEffect, useState } from 'react';
 
-import { Flex, Label } from '@/component-library';
-import { SelectTrigger } from '@/component-library/Select';
-import { useDOMRef } from '@/component-library/utils/dom';
-import { triggerChangeEvent } from '@/component-library/utils/input';
+import { Item, Select, SelectProps } from '@/component-library';
 
-import { AccountLabel } from './AccountLabel';
-import { AccountListModal } from './AccountListModal';
+import { AccountItem } from './AccountItem';
 
-const getAccount = (accountValue?: string, accounts?: InjectedAccountWithMeta[]) =>
-  accounts?.find((account) => account.address === accountValue);
+type AccountSelectProps = Omit<SelectProps<'modal', InjectedAccountWithMeta>, 'children' | 'type'>;
 
-type Props = {
-  value: string;
-  defaultValue?: string;
-  icons?: string[];
-  isDisabled?: boolean;
-  label?: ReactNode;
-  accounts?: InjectedAccountWithMeta[];
+const AccountSelect = ({ ...props }: AccountSelectProps): JSX.Element => {
+  return (
+    <Select<'modal', InjectedAccountWithMeta> {...props} type='modal' modalTitle='Select Account' size='large'>
+      {(data: InjectedAccountWithMeta) => (
+        <Item key={data.address} textValue={data.address}>
+          <AccountItem address={data.address} name={data.meta.name} />
+        </Item>
+      )}
+    </Select>
+  );
 };
 
-type NativeAttrs = Omit<InputHTMLAttributes<HTMLInputElement> & { ref?: any }, keyof Props>;
-
-type AccountSelectProps = Props & NativeAttrs;
-
-const AccountSelect = forwardRef<HTMLInputElement, AccountSelectProps>(
-  ({ value: valueProp, defaultValue = '', accounts, disabled, label, className, ...props }, ref): JSX.Element => {
-    const inputRef = useDOMRef(ref);
-
-    const [isOpen, setOpen] = useState(false);
-    const [value, setValue] = useState(defaultValue);
-
-    const { fieldProps, labelProps } = useLabel({ ...props, label });
-
-    useEffect(() => {
-      if (valueProp === undefined) return;
-
-      setValue(valueProp);
-    }, [valueProp]);
-
-    const handleAccount = (account: string) => {
-      triggerChangeEvent(inputRef, account);
-      setValue(account);
-    };
-
-    const handleClose = () => setOpen(false);
-
-    const isDisabled = !accounts?.length || disabled;
-
-    const selectedAccount = getAccount(value, accounts);
-
-    return (
-      <>
-        <Flex direction='column' className={className}>
-          {label && <Label {...labelProps}>{label}</Label>}
-          <SelectTrigger
-            size='large'
-            onPress={() => setOpen(true)}
-            disabled={isDisabled}
-            {...mergeProps(fieldProps, {
-              // MEMO: when the button is blurred, a focus and blur is executed on the input
-              // so that validation gets triggered.
-              onBlur: () => {
-                if (!isOpen) {
-                  inputRef.current?.focus();
-                  inputRef.current?.blur();
-                }
-              }
-            })}
-          >
-            {selectedAccount && <AccountLabel address={selectedAccount.address} name={selectedAccount.meta.name} />}
-          </SelectTrigger>
-          <VisuallyHidden>
-            <input ref={inputRef} autoComplete='off' tabIndex={-1} value={value} {...props} />
-          </VisuallyHidden>
-        </Flex>
-        {accounts && (
-          <AccountListModal
-            isOpen={isOpen}
-            accounts={accounts}
-            selectedAccount={selectedAccount?.address}
-            onClose={handleClose}
-            onSelectionChange={chain(handleAccount, handleClose)}
-          />
-        )}
-      </>
-    );
-  }
-);
-
 AccountSelect.displayName = 'AccountSelect';
 
 export { AccountSelect };