feat: add toast notification system

[EmeditWeb]

Problem

The web app has no feedback system. When actions
succeed or fail, nothing tells the user what happened.

What To Build

Create src/components/ui/Toast.tsx and a
useToast hook.

Types: success, error, warning, info
Position: top-right corner
Auto-dismiss: 4 seconds
Manual dismiss: X button

Usage:
const { toast } = useToast()
toast.success('Deposit confirmed')
toast.error('Transaction rejected')

Integrate into:

• Deposit flow (success/error)
• Withdrawal flow (success/error)
• Vendor registration (success/error)
• Vouch submission (success/error)

Files To Touch

• src/components/ui/Toast.tsx (new)
• src/hooks/useToast.ts (new)
• src/main.tsx (add ToastProvider)

Acceptance Criteria

• Success toast shows with green styling
• Error toast shows with red styling
• Auto-dismisses after 4 seconds
• Manual dismiss works
• Multiple toasts stack correctly

Mandatory Checks Before PR

• npm run build passes
• No any types
• PR references this issue

[Iwayemi-Kehinde]

I would like to work on this issue as I have reviewed the scope, I should have a PR Ready in 50 minutes.

[Osifowora]

kindly assign

[grantfox-oss]

🦊 GrantFox — @Osifowora has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #16)
2. Your PR will be reviewed by the StepFi-app maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign campaign!

@Osifowora's PR #43 was approved and merged by @EmeditWeb.

🏆 @Osifowora: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (48 total points). Track your full progress on GrantFox.

👏 Great work, @Osifowora! Keep contributing to StepFi-app.