Merge pull request #27 from reserve-protocol/chore/success-msg

Chore: improve user contact info ui/ux

Author: JuampiRombola

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [2.2.1] - 2026-06-09
+
+### Changed
+
+- The zapper modal now fades in/out on open and dismiss (the previous animation classes were no-ops). The success view stays rendered through the fade-out: the success snapshot is now cleared when the modal opens instead of on close, so dismissing no longer flashes the empty Buy/Sell form mid-animation.
+- The success view's contact CTA is now inset inside the input and renamed from "Get updates" to "Subscribe", giving the input full width.
+
 ## [2.2.0] - 2026-06-09
 
 ### Changed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reserve-protocol/react-zapper",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "type": "module",
   "packageManager": "pnpm@11.1.1",
   "description": "React component for DTF minting with zap functionality",

src/components/ui/dialog.tsx

@@ -19,7 +19,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-50 bg-black/50  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-dialog-in data-[state=closed]:animate-dialog-out',
       className
     )}
     {...props}
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed  top-[100%] translate-y-[-100%] sm:top-[50%] sm:translate-y-[-50%] left-[50%] z-50 grid w-full sm:max-w-md translate-x-[-50%] gap-2 border-2 border-secondary bg-background px-5 py-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        'fixed  top-[100%] translate-y-[-100%] sm:top-[50%] sm:translate-y-[-50%] left-[50%] z-50 grid w-full sm:max-w-md translate-x-[-50%] gap-2 border-2 border-secondary bg-background px-5 py-6 shadow-lg data-[state=open]:animate-dialog-in data-[state=closed]:animate-dialog-out sm:rounded-lg',
         className
       )}
       {...props}

src/components/zap-mint/atom.ts

@@ -5,7 +5,7 @@ import { balancesAtom, chainIdAtom, indexDTFAtom } from '../../state/atoms'
 import { Token, TokenBalance } from '../../types'
 import { reducedZappableTokens } from '../../utils/constants'
 
-export const openZapMintModalAtom = atom(false)
+const openZapMintModalBaseAtom = atom(false)
 export const zapperCurrentTabAtom = atom<'buy' | 'sell'>('buy')
 export const showZapSettingsAtom = atom<boolean>(false)
 export const zapMintInputAtom = atomWithReset<string>('')
@@ -32,6 +32,18 @@ export type ZapSuccessData = {
 }
 export const zapSuccessAtom = atom<ZapSuccessData | undefined>(undefined)
 
+// The success snapshot is cleared when the modal opens rather than on close,
+// so the success view stays rendered through the dialog's fade-out animation.
+export const openZapMintModalAtom = atom(
+  (get) => get(openZapMintModalBaseAtom),
+  (get, set, update: boolean | ((prev: boolean) => boolean)) => {
+    const prev = get(openZapMintModalBaseAtom)
+    const next = typeof update === 'function' ? update(prev) : update
+    if (next && !prev) set(zapSuccessAtom, undefined)
+    set(openZapMintModalBaseAtom, next)
+  }
+)
+
 export const selectedTokenAtom = atom<Token | undefined>(undefined)
 export const defaultSelectedTokenAtom = atom<Token>((get) => {
   const chainId = get(chainIdAtom)

src/components/zap-mint/subscribe-updates.tsx

@@ -65,7 +65,7 @@ const Dropdown = ({
         {SOCIAL_MEDIA_OPTIONS.map((option) => (
           <DropdownMenuItem
             key={option.key}
-            className="flex items-center gap-2 text-xs font-medium cursor-pointer"
+            className="flex items-center gap-2 text-sm font-light cursor-pointer"
             onSelect={() => onSelectOption(option)}
           >
             {option.icon}
@@ -126,8 +126,8 @@ const SubscribeUpdates = ({
   )
 
   return (
-    <div className={cn('flex items-center gap-2', className)}>
-      <div className="relative flex-1">
+    <div className={cn(className)}>
+      <div className="relative">
         <Dropdown
           selected={selected}
           onSelectOption={(option) => {
@@ -136,7 +136,7 @@ const SubscribeUpdates = ({
           }}
         />
         <Input
-          className="h-[49px] w-full rounded-xl bg-card/80 pl-14 text-sm"
+          className="h-[49px] py-0 w-full rounded-xl bg-card/80 pl-14 pr-28 font-light"
           placeholder={selected.placeholder}
           value={value}
           onChange={(e) => !submitted && setValue(e.target.value)}
@@ -145,14 +145,14 @@ const SubscribeUpdates = ({
             if (e.key === 'Enter') handleSubmit(selected.key)
           }}
         />
+        <Button
+          className="absolute right-1.5 top-1/2 h-9 -translate-y-1/2 rounded-lg"
+          disabled={!value || submitted}
+          onClick={() => handleSubmit(selected.key)}
+        >
+          Subscribe
+        </Button>
       </div>
-      <Button
-        className="h-[49px] rounded-xl"
-        disabled={!value || submitted}
-        onClick={() => handleSubmit(selected.key)}
-      >
-        Get updates
-      </Button>
     </div>
   )
 }

src/components/zap-mint/zap-success-view.tsx

@@ -139,9 +139,7 @@ const ZapSuccessView = ({ onClose }: { onClose: () => void }) => {
         </div>
 
         {showContactInfo && (
-          <div
-            className="flex flex-col gap-4 rounded-2xl border border-[#e0d5c7] bg-[#fefbf8] p-4 opacity-0 animate-fade-in [animation-delay:300ms]"
-          >
+          <div className="flex flex-col gap-4 rounded-2xl border border-[#e0d5c7] bg-[#fefbf8] p-4 opacity-0 animate-fade-in [animation-delay:300ms]">
             <div className="flex flex-col gap-1">
               <p className="text-xl font-medium leading-7 text-primary">
                 Stay informed about this DTF

src/components/zapper.tsx

@@ -58,13 +58,8 @@ const ZapperContent: React.FC<ZapperContentProps> = ({
 
   const { trackClick } = useTrackIndexDTFZapClick('overview')
 
-  const handleOpenChange = (newOpen: boolean) => {
-    setOpen(newOpen)
-    if (!newOpen) setZapSuccess(undefined)
-  }
-
   const handleClose = () => {
-    handleOpenChange(false)
+    setOpen(false)
   }
 
   useEffect(() => {
@@ -228,7 +223,7 @@ const ZapperContent: React.FC<ZapperContentProps> = ({
   )
 
   const dialog = (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
+    <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent
         showClose={false}
         className="max-h-[90dvh] overflow-y-auto p-2 rounded-t-2xl sm:rounded-[20px] border-none"

tailwind.config.js

@@ -115,6 +115,8 @@ export default {
         'accordion-up': 'accordion-up 0.2s ease-out',
         'fade-in': 'fade-in 0.5s ease-in-out 0s 1 forwards',
         'fade-out': 'fade-out 0.5s ease-in-out 0s 1 forwards',
+        'dialog-in': 'fade-in 0.2s ease-out',
+        'dialog-out': 'fade-out 0.2s ease-in forwards',
         'width-expand':
           'width-expand 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards',
         'spin-slow': 'spin-slow 4s linear infinite',