Add fee estimation warning

components/Tooltip.tsx

@@ -7,6 +7,7 @@ export interface TooltipProps extends ComponentProps<'div'> {
   label: ReactNode
   children: ReactElement
   placement?: 'top' | 'bottom' | 'left' | 'right'
+  backgroundColor?: string
 }
 
 export const Tooltip = ({ label, children, ...props }: TooltipProps) => {
@@ -33,7 +34,11 @@ export const Tooltip = ({ label, children, ...props }: TooltipProps) => {
         <div
           {...props}
           {...attributes.popper}
-          className={clsx('py-1 px-2 m-1 text-sm bg-slate-900 rounded shadow-md', props.className)}
+          className={clsx(
+            'py-1 px-2 m-1 text-sm rounded shadow-md',
+            props.backgroundColor ? props.backgroundColor : 'bg-slate-900',
+            props.className,
+          )}
           ref={setPopperElement}
           style={{ ...styles.popper, ...props.style }}
         >

components/badges/creation/BadgeDetails.tsx

@@ -19,6 +19,7 @@ import { BADGE_HUB_ADDRESS } from 'utils/constants'
 
 import { AddressInput, NumberInput, TextInput } from '../../forms/FormInput'
 import { MetadataAttributes } from '../../forms/MetadataAttributes'
+import { Tooltip } from '../../Tooltip'
 import type { MintRule, UploadMethod } from './ImageUploadDetails'
 
 interface BadgeDetailsProps {
@@ -311,10 +312,17 @@ export const BadgeDetails = ({ metadataSize, onChange }: BadgeDetailsProps) => {
               </label>
             </div>
             <Conditional test={managerState.value !== ''}>
+              <Tooltip
+                backgroundColor="bg-stargaze"
+                className="bg-yellow-600"
+                label="This is only an estimate. Be sure to check the final amount before signing the transaction."
+                placement="bottom"
+              >
                 <div className="grid grid-cols-2 ml-12 w-full">
                   <div className="mt-4 font-bold">Fee Estimate:</div>
                   <span className="mt-4">{(metadataSize * Number(metadataFeeRate)) / 1000000} stars</span>
                 </div>
+              </Tooltip>
             </Conditional>
           </div>
         </div>