UI/UX: Dropdown DeFi button fixes (#3126)

Resolves #3104

Author: tom2drum

deploy/tools/envs-validator/schema.ts

@@ -649,7 +649,7 @@ const addressMetadataSchema = yup
 const deFiDropdownItemSchema: yup.ObjectSchema<DeFiDropdownItem> = yup
   .object({
     text: yup.string().required(),
-    icon: yup.string<IconName>().required(),
+    icon: yup.string<IconName>(),
     dappId: yup.string(),
     url: yup.string().test(urlTest),
   })

icons/multisend.svg

@@ -119,6 +119,7 @@
 	| "moon"
 	| "MUD_menu"
 	| "MUD"
+	| "multisend"
 	| "name_services"
 	| "networks"
 	| "networks/icon-placeholder"
@@ -142,6 +143,7 @@
 	| "repeat"
 	| "restAPI"
 	| "return"
+	| "revoke"
 	| "rocket_xl"
 	| "rocket"
 	| "RPC"

icons/revoke.svg

@@ -2,7 +2,7 @@ import type { IconName } from 'ui/shared/IconSvg';
 
 export type DeFiDropdownItem = {
   text: string;
-  icon: IconName;
+  icon?: IconName;
 } & (
   { dappId: string; url?: never } |
   { url: string; dappId?: never }

public/icons/name.d.ts

@@ -45,7 +45,7 @@ const DeFiDropdown = () => {
           <IconSvg name="arrows/east-mini" boxSize={ 4 } ml={ 1 } transform="rotate(-90deg)"/>
         </Button>
       </PopoverTrigger>
-      <PopoverContent w="auto">
+      <PopoverContent w="auto" minW={{ base: 'auto', lg: '132px' }}>
         <PopoverBody >
           <Flex flexDirection="column" gap={ 1 }>
             { items.map((item, index) => (
@@ -66,7 +66,7 @@ const DeFiDropdown = () => {
       asChild
     >
       <Button onClick={ items[0].onClick } size="2xs">
-        <IconSvg name={ items[0].icon } boxSize={ 3 } mr={{ base: 0, sm: 1 }}/>
+        { items[0].icon && <IconSvg name={ items[0].icon } boxSize={ 3 } mr={{ base: 0, sm: 1 }}/> }
         <Box display={{ base: 'none', sm: 'inline' }}>
           { items[0].text }
         </Box>

types/client/deFiDropdown.ts

@@ -22,7 +22,7 @@ const DeFiDropdownItem = ({ item }: Props) => {
       variant="menu"
       onClick={ item.onClick }
     >
-      <IconSvg name={ item.icon } boxSize={ 5 } mr={ 2 }/>
+      { item.icon && <IconSvg name={ item.icon } boxSize={ 5 } mr={ 2 }/> }
       <Text as="span" fontSize="sm">{ item.text }</Text>
     </Link>
   );