Skip to content

refactor: modals #183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
antoncoding merged 11 commits into from
Nov 13, 2025
Merged

refactor: modals #183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
5893de6
refactor: modal usages
antoncoding Nov 13, 2025
12f384c
misc: rename OnboardingModal
antoncoding Nov 13, 2025
558be9c
misc: apply modal changes
antoncoding Nov 13, 2025
5caf24b
chore: apply markets
antoncoding Nov 13, 2025
26326ee
chore: fix lint
antoncoding Nov 13, 2025
2f15dc8
fix: close button
antoncoding Nov 13, 2025
6a8362e
chore: lint
antoncoding Nov 13, 2025
41624b3
chore: remove agnet modals
antoncoding Nov 13, 2025
26c80a3
chore: review fixes
antoncoding Nov 13, 2025
b9f0c28
chore: fixing modals
antoncoding Nov 13, 2025
aa16b9a
chore: fix build
antoncoding Nov 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
165 changes: 78 additions & 87 deletions app/autovault/[chainId]/[vaultAddress]/components/DepositToVaultModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
"use client";

import React from 'react';
import { Cross1Icon } from '@radix-ui/react-icons';
import { Address } from 'viem';
import { useAccount } from 'wagmi';
import { Button } from '@/components/common';
import { Modal, ModalBody, ModalHeader } from '@/components/common/Modal';
import Input from '@/components/Input/Input';
import AccountConnect from '@/components/layout/header/AccountConnect';
import { TokenIcon } from '@/components/TokenIcon';
Expand Down Expand Up @@ -62,98 +64,87 @@ export function DepositToVaultModal({

return (
<>
<div
className="fixed inset-0 flex items-center justify-center bg-black/50"
style={{ zIndex: 50 }}
<Modal
isOpen
onOpenChange={(open) => {
if (!open) onClose();
}}
size="lg"
scrollBehavior="inside"
backdrop="blur"
>
<div className="bg-surface relative w-full max-w-lg rounded p-6">
<div className="flex flex-col">
<button
type="button"
className="absolute right-2 top-2 text-secondary opacity-60 transition-opacity hover:opacity-100"
onClick={onClose}
>
<Cross1Icon />
</button>

<div className="mb-6 flex items-center justify-between">
<div className="flex flex-col">
<div className="flex items-center gap-2">
<TokenIcon
address={assetAddress}
chainId={chainId}
symbol={assetSymbol}
width={20}
height={20}
/>
<span className="text-2xl">Deposit {assetSymbol}</span>
</div>
<span className="mt-1 text-sm text-gray-400">Deposit to {vaultName}</span>
</div>
<ModalHeader
title={`Deposit ${assetSymbol}`}
description={`Deposit to ${vaultName}`}
mainIcon={
<TokenIcon
address={assetAddress}
chainId={chainId}
symbol={assetSymbol}
width={24}
height={24}
/>
}
onClose={onClose}
/>
<ModalBody className="gap-6">
{!isConnected ? (
<div className="flex justify-center py-4">
<AccountConnect />
</div>
) : (
<div className="space-y-4">
<div>
<div className="flex items-center justify-between">
<span className="opacity-80">Deposit amount</span>
<p className="font-inter text-xs opacity-50">
Balance: {formatBalance(tokenBalance ?? BigInt(0), assetDecimals)} {assetSymbol}
</p>
</div>

{!isConnected ? (
<div className="flex justify-center py-4">
<AccountConnect />
</div>
) : (
<>
{/* Deposit Input Section */}
<div className="mt-12 space-y-4">
<div>
<div className="flex items-center justify-between">
<span className="opacity-80">Deposit amount</span>
<p className="font-inter text-xs opacity-50">
Balance: {formatBalance(tokenBalance ?? BigInt(0), assetDecimals)}{' '}
{assetSymbol}
<div className="mt-2 flex items-start justify-between">
<div className="relative flex-grow">
<Input
decimals={assetDecimals}
max={tokenBalance ?? BigInt(0)}
setValue={setDepositAmount}
setError={setInputError}
exceedMaxErrMessage="Insufficient Balance"
/>
{inputError && (
<p className="p-1 text-sm text-red-500 transition-opacity duration-200 ease-in-out">
{inputError}
</p>
</div>

<div className="mt-2 flex items-start justify-between">
<div className="relative flex-grow">
<Input
decimals={assetDecimals}
max={tokenBalance ?? BigInt(0)}
setValue={setDepositAmount}
setError={setInputError}
exceedMaxErrMessage="Insufficient Balance"
/>
{inputError && (
<p className="p-1 text-sm text-red-500 transition-opacity duration-200 ease-in-out">
{inputError}
</p>
)}
</div>

{!permit2Authorized || (!usePermit2Setting && !isApproved) ? (
<Button
isDisabled={!isConnected || isLoadingPermit2 || depositPending}
onPress={() => void approveAndDeposit()}
className="ml-2 min-w-32"
variant="cta"
>
Deposit
</Button>
) : (
<Button
isDisabled={
!isConnected || depositPending || inputError !== null || !depositAmount
}
onPress={() => void signAndDeposit()}
className="ml-2 min-w-32"
variant="cta"
>
Deposit
</Button>
)}
</div>
)}
</div>

{!permit2Authorized || (!usePermit2Setting && !isApproved) ? (
<Button
isDisabled={!isConnected || isLoadingPermit2 || depositPending}
onPress={() => void approveAndDeposit()}
className="ml-2 min-w-32"
variant="cta"
>
Deposit
</Button>
) : (
<Button
isDisabled={
!isConnected || depositPending || inputError !== null || !depositAmount
}
onPress={() => void signAndDeposit()}
className="ml-2 min-w-32"
variant="cta"
>
Deposit
</Button>
)}
</div>
</>
)}
</div>
</div>
</div>
</div>
</div>
)}
</ModalBody>
</Modal>

{showProcessModal && (
<VaultDepositProcessModal
Expand Down
110 changes: 48 additions & 62 deletions app/autovault/[chainId]/[vaultAddress]/components/VaultDepositProcessModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
"use client";

import React, { useMemo } from 'react';
import { Cross1Icon } from '@radix-ui/react-icons';
import { motion, AnimatePresence } from 'framer-motion';
import { FaCheckCircle, FaCircle } from 'react-icons/fa';
import { FiDownload } from 'react-icons/fi';
import { Modal, ModalBody, ModalHeader } from '@/components/common/Modal';
import { VaultDepositStepType } from '@/hooks/useVaultV2Deposit';
import { formatBalance } from '@/utils/balance';

Expand Down Expand Up @@ -78,66 +80,50 @@ export function VaultDepositProcessModal({
}, [amount, assetDecimals]);

return (
<AnimatePresence>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
>
<motion.div
initial={{ scale: 0.95 }}
animate={{ scale: 1 }}
exit={{ scale: 0.95 }}
className="relative w-full max-w-lg rounded bg-white p-4 shadow-xl dark:bg-gray-900"
>
<button
type="button"
onClick={onClose}
className="absolute right-4 top-4 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
>
<Cross1Icon className="h-4 w-4" />
</button>

<div className="p-6">
<h3 className="font-zen text-xl">Deposit {assetSymbol}</h3>
<p className="mt-1 text-sm text-gray-500">
Depositing {formattedAmount} {assetSymbol} to {vaultName}
</p>

{/* Steps */}
<div className="mt-6 space-y-4">
{steps.map((step) => {
const status = getStepStatus(step.key);
return (
<div
key={step.key}
className={`flex items-start gap-3 rounded border p-3 transition-colors ${
status === 'current'
? 'border-primary bg-primary/5'
: 'border-gray-100 dark:border-gray-700'
}`}
>
<div className="mt-0.5">
{status === 'done' ? (
<FaCheckCircle className="h-5 w-5 text-green-500" />
) : status === 'current' ? (
<FaCircle className="h-5 w-5 animate-pulse text-primary" />
) : (
<FaCircle className="h-5 w-5 text-gray-300 dark:text-gray-600" />
)}
</div>
<div>
<div className="font-medium">{step.label}</div>
<div className="text-sm text-gray-500">{step.detail}</div>
</div>
</div>
);
})}
<Modal
isOpen
onOpenChange={(open) => {
if (!open) onClose();
}}
size="lg"
isDismissable={false}
backdrop="blur"
>
<ModalHeader
title={`Deposit ${assetSymbol}`}
description={`Depositing ${formattedAmount} ${assetSymbol} to ${vaultName}`}
mainIcon={<FiDownload className="h-5 w-5" />}
onClose={onClose}
/>
<ModalBody className="gap-4">
{steps.map((step) => {
const status = getStepStatus(step.key);
return (
<div
key={step.key}
className={`flex items-start gap-3 rounded border p-3 transition-colors ${
status === 'current'
? 'border-primary bg-primary/5'
: 'border-gray-100 dark:border-gray-700'
}`}
>
<div className="mt-0.5">
{status === 'done' ? (
<FaCheckCircle className="h-5 w-5 text-green-500" />
) : status === 'current' ? (
<FaCircle className="h-5 w-5 animate-pulse text-primary" />
) : (
<FaCircle className="h-5 w-5 text-gray-300 dark:text-gray-600" />
)}
</div>
<div>
<div className="font-medium">{step.label}</div>
<div className="text-sm text-gray-500">{step.detail}</div>
</div>
</div>
</div>
</motion.div>
</motion.div>
</AnimatePresence>
);
})}
</ModalBody>
</Modal>
);
}
Loading