Use "creatable select" for accounts.

components/Select.tsx

@@ -3,13 +3,11 @@ import { mauve, mauveDark, purple, purpleDark } from '@radix-ui/colors'
 import { useTheme } from 'next-themes'
 import { styled } from '../stitches.config'
 import dynamic from 'next/dynamic'
-import type { Props } from 'react-select'
+import type { Props, StylesConfig } from 'react-select'
 const SelectInput = dynamic(() => import('react-select'), { ssr: false })
+const CreatableSelectInput = dynamic(() => import('react-select/creatable'), { ssr: false })
 
-// eslint-disable-next-line react/display-name
-const Select = forwardRef<any, Props>((props, ref) => {
-  const { theme } = useTheme()
-  const isDark = theme === 'dark'
+const getColors = (isDark: boolean) => {
   const colors: any = {
     // primary: pink.pink9,
     active: isDark ? purpleDark.purple9 : purple.purple9,
@@ -30,92 +28,122 @@ const Select = forwardRef<any, Props>((props, ref) => {
   }
   colors.outline = colors.background
   colors.selected = colors.secondary
+  return colors
+}
+
+const getStyles = (isDark: boolean) => {
+  const colors = getColors(isDark)
+  const styles: StylesConfig = {
+    container: provided => {
+      return {
+        ...provided,
+        position: 'relative',
+        width: '100%'
+      }
+    },
+    singleValue: provided => ({
+      ...provided,
+      color: colors.mauve12
+    }),
+    menu: provided => ({
+      ...provided,
+      backgroundColor: colors.dropDownBg
+    }),
+    control: (provided, state) => {
+      return {
+        ...provided,
+        minHeight: 0,
+        border: '0px',
+        backgroundColor: colors.mauve4,
+        boxShadow: `0 0 0 1px ${state.isFocused ? colors.border : colors.secondary}`
+      }
+    },
+    input: provided => {
+      return {
+        ...provided,
+        color: '$text'
+      }
+    },
+    multiValue: provided => {
+      return {
+        ...provided,
+        backgroundColor: colors.mauve8
+      }
+    },
+    multiValueLabel: provided => {
+      return {
+        ...provided,
+        color: colors.mauve12
+      }
+    },
+    multiValueRemove: provided => {
+      return {
+        ...provided,
+        ':hover': {
+          background: colors.mauve9
+        }
+      }
+    },
+    option: (provided, state) => {
+      return {
+        ...provided,
+        color: colors.searchText,
+        backgroundColor: state.isFocused ? colors.activeLight : colors.dropDownBg,
+        ':hover': {
+          backgroundColor: colors.active,
+          color: '#ffffff'
+        },
+        ':selected': {
+          backgroundColor: 'red'
+        }
+      }
+    },
+    indicatorSeparator: provided => {
+      return {
+        ...provided,
+        backgroundColor: colors.secondary
+      }
+    },
+    dropdownIndicator: (provided, state) => {
+      return {
+        ...provided,
+        padding: 6,
+        color: state.isFocused ? colors.border : colors.secondary,
+        ':hover': {
+          color: colors.border
+        }
+      }
+    }
+  }
+  return styles
+}
+
+// eslint-disable-next-line react/display-name
+const Select = forwardRef<any, Props>((props, ref) => {
+  const { theme } = useTheme()
+  const isDark = theme === 'dark'
+  const styles = getStyles(isDark)
   return (
     <SelectInput
       ref={ref}
       menuPosition={props.menuPosition || 'fixed'}
-      styles={{
-        container: provided => {
-          return {
-            ...provided,
-            position: 'relative',
-            width: '100%',
-          }
-        },
-        singleValue: provided => ({
-          ...provided,
-          color: colors.mauve12
-        }),
-        menu: provided => ({
-          ...provided,
-          backgroundColor: colors.dropDownBg
-        }),
-        control: (provided, state) => {
-          return {
-            ...provided,
-            minHeight: 0,
-            border: '0px',
-            backgroundColor: colors.mauve4,
-            boxShadow: `0 0 0 1px ${state.isFocused ? colors.border : colors.secondary}`
-          }
-        },
-        input: provided => {
-          return {
-            ...provided,
-            color: '$text'
-          }
-        },
-        multiValue: provided => {
-          return {
-            ...provided,
-            backgroundColor: colors.mauve8
-          }
-        },
-        multiValueLabel: provided => {
-          return {
-            ...provided,
-            color: colors.mauve12
-          }
-        },
-        multiValueRemove: provided => {
-          return {
-            ...provided,
-            ':hover': {
-              background: colors.mauve9
-            }
-          }
-        },
-        option: (provided, state) => {
-          return {
-            ...provided,
-            color: colors.searchText,
-            backgroundColor: state.isFocused ? colors.activeLight : colors.dropDownBg,
-            ':hover': {
-              backgroundColor: colors.active,
-              color: '#ffffff'
-            },
-            ':selected': {
-              backgroundColor: 'red'
-            }
-          }
-        },
-        indicatorSeparator: provided => {
-          return {
-            ...provided,
-            backgroundColor: colors.secondary
-          }
-        },
-        dropdownIndicator: (provided, state) => {
-          return {
-            ...provided,
-            padding: 6,
-            color: state.isFocused ? colors.border : colors.secondary,
-            ':hover': {
-              color: colors.border,
-            }
-          }
-        }
-      }}
+      styles={styles}
+      {...props}
+    />
+  )
+})
+
+// eslint-disable-next-line react/display-name
+export const CreatableSelect = forwardRef<any, Props>((props, ref) => {
+  const { theme } = useTheme()
+  const isDark = theme === 'dark'
+  const styles = getStyles(isDark)
+  return (
+    <CreatableSelectInput
+      ref={ref}
+      formatCreateLabel={label => `Enter "${label}"`}
+      menuPosition={props.menuPosition || 'fixed'}
+      styles={styles}
       {...props}
     />
   )

components/Transaction/ui.tsx

@@ -2,7 +2,7 @@ import { FC, ReactNode, useCallback, useEffect, useState } from 'react'
 import Container from '../Container'
 import Flex from '../Flex'
 import Input from '../Input'
-import Select from '../Select'
+import Select, { CreatableSelect } from '../Select'
 import Text from '../Text'
 import {
   SelectOption,
@@ -293,7 +293,7 @@ export const TxUI: FC<UIProps> = ({
             const label = accountOptions.find(a => a.value === value)?.label || value
             return (
               <TxField key={field} label={field}>
-                <Select
+                <CreatableSelect
                   isClearable
                   instanceId={field}
                   placeholder={`Select ${field} account`}