Merge pull request #25 from reserve-protocol/chore/success

Feat: inline success view + post-mint contact panel

Author: JuampiRombola

CHANGELOG.md

@@ -1,3 +1,15 @@
+## [2.1.0] - 2026-06-04
+
+### Added
+
+- Post-transaction success view: on a confirmed zap the Zapper keeps the flow in place and shows what actually happened. The boxes switch to "You used" / "You received", the received amount is read from the transaction logs (the exact output token credited to the wallet) with the realized price impact, the quote details are hidden, and an inline success bar (`✓ Successful Purchase` / `Successful Sale`) links to the block explorer. Reopening the Zapper starts fresh.
+- After a mint, a "Stay informed" contact-capture panel where users can leave a Telegram, X, or email contact to receive updates about the DTF. On wider screens (≥900px) in modal/simple mode it slides out from behind the modal (secondary background) and the modal+panel pair recenters; inline mode and narrow screens render it as a stacked card. Toggle with the new `showContactInfo` prop (defaults to `true`). Submissions POST to Reserve's storage worker and fail silently for the user.
+- Mixpanel events for the contact feature (`tap` event, `subpage: 'contact'`): `zap_contact_submit`, `zap_contact_subscribed`, `zap_contact_error`, each carrying `ca`, `ticker`, `chain`, and the chosen `platform`.
+
+### Removed
+
+- **Breaking:** removed the `Toaster` export and the `sonner` / `next-themes` dependencies. The package no longer renders toasts; success and errors are shown inline. Remove any `import { Toaster } from '@reserve-protocol/react-zapper'` and its usage — you no longer need to mount a toaster or install `sonner`.
+
 ## [2.0.0] - 2026-06-02
 
 ### Breaking Changes

README.md

@@ -39,7 +39,7 @@ context — it does **not** create its own. You provide a `WagmiProvider` and a
 Import the components you need and the CSS file for styling:
 
 ```tsx
-import { Zapper, useZapperModal, Toaster } from '@reserve-protocol/react-zapper'
+import { Zapper, useZapperModal } from '@reserve-protocol/react-zapper'
 import '@reserve-protocol/react-zapper/styles.css'
 ```
 
@@ -88,7 +88,7 @@ function App({ children }: { children: React.ReactNode }) {
 ### 2. Basic Modal Usage
 
 ```tsx
-import { Zapper, useZapperModal, Toaster } from '@reserve-protocol/react-zapper'
+import { Zapper, useZapperModal } from '@reserve-protocol/react-zapper'
 import '@reserve-protocol/react-zapper/styles.css'
 
 function MyApp() {
@@ -103,8 +103,6 @@ function MyApp() {
       />
 
       <button onClick={open}>Open Zapper</button>
-
-      <Toaster position="bottom-right" />
     </>
   )
 }
@@ -162,6 +160,7 @@ Simple mode features:
 | `zapperApiUrl`   | `string`                        | ❌       | Custom zapper service endpoint for zapper-specific API calls (falls back to `apiUrl`) |
 | `sellOnly`       | `boolean`                       | ❌       | Only show the sell (redeem) flow               |
 | `disabled`       | `boolean`                       | ❌       | Disable primary zap actions, wallet/chain actions, amount inputs, and Max buttons |
+| `showContactInfo`| `boolean`                       | ❌       | Show the "Stay informed" contact-capture panel after a successful mint (defaults to `true`) |
 | `connectWallet`  | `() => void`                    | ❌       | Function to trigger wallet connection          |
 | `debug`          | `boolean`                       | ❌       | Enable debug mode to show additional info      |
 | `defaultSource`  | `QuoteSource`                   | ❌       | Default quote source: `'best'` (compare all enabled providers), `'zap'`, `'odos'`, `'velora'`, or `'enso'` |
@@ -260,21 +259,22 @@ package's internal state); no extra providers are required.
 
 ## Advanced Usage
 
-### With Custom Error Handling
+### Transaction Feedback
 
-```tsx
-import { Zapper, Toaster } from '@reserve-protocol/react-zapper'
-import { toast } from 'sonner'
+The Zapper renders all transaction feedback inline — no toaster setup required
+(there is no `Toaster` export and `sonner` is no longer a dependency).
 
-function AdvancedZapper() {
-  return (
-    <>
-      <Zapper chain={1} dtfAddress="0x123..." mode="modal" />
-      <Toaster />
-    </>
-  )
-}
-```
+On a successful transaction the flow stays in place and switches to a success
+view: the boxes read "You used" / "You received", the received amount is taken
+from the transaction logs (the exact output token credited to the wallet) with
+the realized price impact, and an inline success bar links to the block explorer.
+Errors are rendered inline as well. The state resets when the Zapper is
+closed/reopened.
+
+After a mint, a "Stay informed" panel lets users leave a contact (Telegram, X, or
+email) for DTF updates. Hide it with `showContactInfo={false}`. Submissions fail
+silently for the user and emit Mixpanel events (`zap_contact_submit`,
+`zap_contact_subscribed`, `zap_contact_error`).
 
 ### With Custom API Endpoint
 

demo/App.tsx

@@ -1,6 +1,5 @@
 import { ConnectButton } from '@rainbow-me/rainbowkit'
 import {
-  Toaster,
   useZapperModal,
   PROVIDERS,
   type ProviderId,
@@ -72,6 +71,7 @@ function App() {
   const [zapperApiUrl, setZapperApiUrl] = useState(ZAPPER_API_URLS[0].value)
   const [mode, setMode] = useState<'modal' | 'inline' | 'simple'>('inline')
   const [sellOnly, setSellOnly] = useState(false)
+  const [showContactInfo, setShowContactInfo] = useState(true)
   const { open } = useZapperModal()
 
   // Update selected DTF when chain changes
@@ -314,6 +314,33 @@ function App() {
                   When enabled, disables Buy tab and only allows selling/redeeming
                 </p>
               </div>
+              <div>
+                <label className="text-sm font-medium mb-2 block">
+                  Show Contact Info
+                </label>
+                <Select
+                  value={showContactInfo.toString()}
+                  onValueChange={(value) =>
+                    setShowContactInfo(value === 'true')
+                  }
+                >
+                  <SelectTrigger className="w-full md:w-96">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {[true, false]
+                      .map((v) => v.toString())
+                      .map((v) => (
+                        <SelectItem key={v} value={v}>
+                          {v}
+                        </SelectItem>
+                      ))}
+                  </SelectContent>
+                </Select>
+                <p className="text-xs text-muted-foreground mt-1">
+                  Shows the "Stay informed" contact panel after a successful mint
+                </p>
+              </div>
             </CardContent>
           </Card>
 
@@ -346,6 +373,7 @@ function App() {
                     defaultSource={quoteSource}
                     debug={debug}
                     sellOnly={sellOnly}
+                    showContactInfo={showContactInfo}
                   />
                   <Button onClick={open} className="w-full rounded-xl" size="lg">
                     Open Zapper Modal
@@ -362,6 +390,7 @@ function App() {
                     debug={debug}
                     defaultSource={quoteSource}
                     sellOnly={sellOnly}
+                    showContactInfo={showContactInfo}
                   />
                 </div>
               )}
@@ -372,7 +401,6 @@ function App() {
           </>
         )}
       </div>
-      <Toaster position="bottom-right" />
     </div>
   )
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reserve-protocol/react-zapper",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "type": "module",
   "packageManager": "pnpm@11.1.1",
   "description": "React component for DTF minting with zap functionality",
@@ -67,8 +67,6 @@
     "jotai": "^1.12.0",
     "lucide-react": "^0.461.0",
     "mixpanel-browser": "^2.56.0",
-    "next-themes": "^0.2.1",
-    "sonner": "^1.4.0",
     "tailwind-merge": "^2.5.5",
     "uuid": "^13.0.0"
   },