-
Notifications
You must be signed in to change notification settings - Fork 52
Expand file tree
/
Copy pathWalletMigrationModal.tsx
More file actions
184 lines (173 loc) · 11.3 KB
/
WalletMigrationModal.tsx
File metadata and controls
184 lines (173 loc) · 11.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
"use client";
import React, { useState } from "react";
import Image from "next/image";
import { AnimatePresence, motion } from "framer-motion";
import { Dialog, DialogPanel } from "@headlessui/react";
import { Cancel01Icon } from "hugeicons-react";
import WalletTransferApprovalModal from "./WalletTransferApprovalModal";
interface WalletMigrationModalProps {
isOpen: boolean;
onClose: () => void;
}
const WalletMigrationModal: React.FC<WalletMigrationModalProps> = ({
isOpen,
onClose,
}) => {
const [showTransferModal, setShowTransferModal] = useState(false);
const handleApproveMigration = () => {
onClose();
setTimeout(() => {
setShowTransferModal(true);
}, 300);
};
const handleCloseTransferModal = () => {
setShowTransferModal(false);
};
return (
<>
<AnimatePresence>
{isOpen && (
<Dialog
key="wallet-migration-modal"
open={isOpen}
onClose={onClose}
className="relative z-50"
>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.3 }}
className="fixed inset-0 bg-black/25 backdrop-blur-sm dark:bg-black/40"
/>
<div className="fixed inset-0 flex w-screen items-end sm:items-center sm:justify-center sm:p-4">
<motion.div
initial={{ y: "100%", opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
exit={{ y: "100%", opacity: 0 }}
transition={{
type: "spring",
stiffness: 300,
damping: 30,
}}
className="w-full"
>
<DialogPanel
className="relative mx-auto w-full max-w-md sm:max-w-[28rem]"
>
<motion.div
layout
initial={false}
className="relative overflow-hidden rounded-t-[30px] bg-white sm:rounded-3xl dark:bg-neutral-900"
>
<div
className="relative h-20 w-full"
style={{
background:
"linear-gradient(to right,rgb(116, 112, 13),rgb(22, 77, 129),rgb(54, 30, 100))",
}}
>
<button
onClick={onClose}
className="absolute right-4 top-2 z-10 flex h-8 w-8 items-center justify-center rounded-full text-white transition-colors hover:bg-white/20"
aria-label="Close modal"
>
<Cancel01Icon className="h-5 w-5" />
</button>
</div>
{/* Content */}
<div className="relative -mt-6 w-full rounded-t-[24px] overflow-y-auto bg-white p-5 pt-8 text-lg text-text-body sm:max-h-[90vh] dark:bg-[#2C2C2C] dark:text-white">
<h2
className="mb-3 text-lg font-semibold"
style={{
background: "linear-gradient(107.4deg, #04FF44 9.42%, #EAAB12 36.67%, rgba(255, 107, 144, 0.6) 73.59%, #FF0087 92.55%, #5189F9 133.3%)",
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
backgroundClip: "text",
}}
>
Complete your wallet upgrade
</h2>
{/* Migration Overview */}
<div className="rounded-[20px] bg-accent-gray p-4 mb-4 dark:bg-[#FFFFFF0D]">
<p
className="text-sm font-[Inter] font-light leading-5 tracking-normal text-text-body px-2 pb-4 align-middle dark:text-[#FFFFFFCC]"
>
Your wallet address has been updated to give you more flexibility. After this migration, you'll be able to export your wallet and view your balance on other on-chain apps.
</p>
<p
className="text-sm font-light leading-5 tracking-normal text-text-body px-2 pb-4 align-middle dark:text-[#FFFFFFCC]"
>
We'll transfer your funds from your previous address to your new address. This is a one-time process.
</p>
<p className="text-sm font-bold leading-5 tracking-normal text-text-body px-2 mb-3 align-middle dark:text-[#FFFFFFCC]">
What you're getting:
</p>
<div className="rounded-[20px] bg-white px-4 py-3 mb-1 dark:bg-[#2C2C2C] space-y-3">
<div className="flex items-center gap-3">
<div className="flex h-10 w-10 flex-shrink-0 items-center justify-center">
<Image
src="/images/sent.png"
alt="Export wallet"
width={32}
height={32}
className="h-8 w-8 object-contain"
/>
</div>
<p className="text-sm font-light leading-5 tracking-normal text-text-body min-w-0 dark:text-white/90">
Ability to export your wallet
</p>
</div>
<div className="flex items-center gap-3">
<div className="flex h-10 w-10 flex-shrink-0 items-center justify-center">
<Image
src="/images/wallet.png"
alt="Use balance on other on-chain apps"
width={32}
height={32}
className="h-8 w-8 object-contain"
/>
</div>
<p className="text-sm font-light leading-5 tracking-normal text-text-body min-w-0 dark:text-white/90">
Use your balance on other on-chain apps
</p>
</div>
<div className="flex items-center gap-3">
<div className="flex h-10 w-10 flex-shrink-0 items-center justify-center">
<Image
src="/images/locked.png"
alt="Same security, more control"
width={32}
height={32}
className="h-8 w-8 object-contain"
/>
</div>
<p className="text-sm font-light leading-5 tracking-normal text-text-body min-w-0 dark:text-white/90">
Same security, more control
</p>
</div>
</div>
</div>
{/* Approve Migration Button */}
<button
onClick={handleApproveMigration}
className="w-full rounded-xl bg-lavender-500 px-4 py-3.5 text-center text-sm font-medium text-white transition-all hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-lavender-500 focus:ring-offset-2 focus:ring-offset-white active:opacity-80 sm:px-6 dark:focus:ring-offset-neutral-900"
>
Approve transfer
</button>
</div>
</motion.div>
</DialogPanel>
</motion.div>
</div>
</Dialog>
)}
</AnimatePresence>
<WalletTransferApprovalModal
isOpen={showTransferModal}
onClose={handleCloseTransferModal}
/>
</>
);
};
export default WalletMigrationModal;