diff --git a/app/components/deposit/activity.css b/app/components/deposit/activity.css index 77f0258..5f03137 100644 --- a/app/components/deposit/activity.css +++ b/app/components/deposit/activity.css @@ -4,6 +4,8 @@ gap: 8px; font-weight: 500; width: 100%; + height: 364px; + overflow: scroll; } .deposit-transaction { @@ -14,6 +16,15 @@ border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; background: rgba(255, 255, 255, 0.03); + transition: background 100ms var(--ease-out-quad); + span::first-letter { + text-transform: uppercase; + } +} + +.deposit-transaction:hover { + background: rgba(255, 255, 255, 0.04); + cursor: pointer; } .white-in { @@ -59,4 +70,12 @@ .gray-in { font-size: 12px; } + .eth-to-ecl { gap: "7px"; } + .tx-age { gap: "4px"; } +} + +@keyframes bounce { + 0% { transform: translateY(-10px); } + 50% { transform: translateY(5px); } + 100% { transform: translateY(0); } } diff --git a/app/components/deposit/activityContent.tsx b/app/components/deposit/activityContent.tsx index 864cb5d..7996b9f 100644 --- a/app/components/deposit/activityContent.tsx +++ b/app/components/deposit/activityContent.tsx @@ -1,33 +1,72 @@ +import { useEffect, useState } from 'react'; import { Arrow } from "@/app/components/icons"; import { TransactionIcon } from "../icons"; +import { getLastDeposits, timeAgo } from "@/lib/activityUtils" +import { ethers } from 'ethers'; +import { TransactionDetails } from "./transactionDetails"; +import { + useUserWallets, + Wallet +} from "@dynamic-labs/sdk-react-core"; import "./activity.css"; export const ActivityContent = () => { + const [deposits, setDeposits] = useState(null); + const [isModalOpen, setIsModalOpen] = useState(false); + const [currentTx, setCurrentTx] = useState(null); + + const userWallets: Wallet[] = useUserWallets() as Wallet[]; + const evmWallet = userWallets.find(w => w.chain == "EVM"); + + useEffect(() => { + const fetchDeposits = async () => { + try { + const data = await getLastDeposits(evmWallet?.address || ''); + setDeposits(data.reverse()); + } catch (error) { + console.error("Error fetching deposits:", error); + } + }; + + if (evmWallet) fetchDeposits(); + }, [evmWallet]); + return ( + <>
-
-
- - Ethereum -
+ {evmWallet && deposits && deposits.map((tx, index) => { + // TODO: add loading state + const status = Number(tx.isError) ? "failed" : "completed"; + return ( +
{ setIsModalOpen(true); setCurrentTx(tx)}}> + + Ethereum
- Deposit • 1 min ago -
- - Depositing +
+ Deposit + • + {timeAgo(Number(tx.timeStamp))} +
+
+ + {status}
-
+
Ethereum Eclipse
- 1 ETH + {Number(ethers.utils.formatEther(tx.value)).toFixed(3)} ETH
+ )})} + {(!evmWallet) ? Connect your evm wallet first. : (!(deposits?.length) && You don't have any transactions.)}
+ { isModalOpen && setTimeout(() => setIsModalOpen(false), 100)} /> } + ) } diff --git a/app/components/deposit/depositContent.tsx b/app/components/deposit/depositContent.tsx index 4a83951..5b4d6be 100644 --- a/app/components/deposit/depositContent.tsx +++ b/app/components/deposit/depositContent.tsx @@ -102,7 +102,6 @@ export const DepositContent: React.FC = ({ amountEther, setAmountE try { // lets keep this here - /* const { request } = await client.simulateContract({ address: contractAddress, abi, @@ -112,15 +111,6 @@ export const DepositContent: React.FC = ({ amountEther, setAmountE value: weiValue }) await walletClient.writeContract(request) - */ - await walletClient.sendTransaction({ - to: contractAddress, - abi, - functionName: 'deposit', - args: [destinationBytes32, weiValue], - account, - value: weiValue - }); setIsMmPopup(false) } catch (error) { setIsMmPopup(false) @@ -300,12 +290,10 @@ export const DepositContent: React.FC = ({ amountEther, setAmountE {determineButtonText()} : -
- -
}
); diff --git a/app/components/deposit/index.tsx b/app/components/deposit/index.tsx index 9687e9a..d85afeb 100644 --- a/app/components/deposit/index.tsx +++ b/app/components/deposit/index.tsx @@ -4,6 +4,8 @@ import { Activity } from "../icons"; import './styles.css'; import { DepositContent, DepositProps } from "./depositContent"; import { ActivityContent } from "./activityContent"; +import ExtendedDetails from '../ExtendedDetails' +import classNames from 'classnames'; enum Tabs { Deposit, @@ -14,12 +16,13 @@ enum Tabs { const Deposit: React.FC = ({ amountEther, setAmountEther }) => { const [activeTab, setActiveTab] = useState(Tabs.Deposit); return ( + <>
-
setActiveTab(Tabs.Deposit)}>Deposit
-
Withdraw
-
{setActiveTab(Tabs.Activity)}}> +
setActiveTab(Tabs.Deposit)}>Deposit
+
Withdraw
+
{setActiveTab(Tabs.Activity)}}>
@@ -27,6 +30,9 @@ const Deposit: React.FC = ({ amountEther, setAmountEther }) => { { activeTab === Tabs.Activity && }
+

+ { (activeTab === Tabs.Deposit) && } + ); } diff --git a/app/components/deposit/styles.css b/app/components/deposit/styles.css index 2e3b46d..f44c474 100644 --- a/app/components/deposit/styles.css +++ b/app/components/deposit/styles.css @@ -50,6 +50,12 @@ .header-tabs div.active { color: #a3ffa5; /* Light green color for active tab text */ background-color: rgba(161, 254, 160, 0.05); + transition: background-color 300ms var(--ease-out-quad), color 300ms var(--ease-out-quad); + path { + stroke-opacity: 1; + stroke: #a3ffa5; + transition: stroke-opacity 300ms var(--ease-out-quad); + } } .header-tabs div.inactive { @@ -57,6 +63,10 @@ color: #666666; /* Dark gray color for inactive tab text */ } +.header-tabs div.disabled { + cursor: not-allowed; +} + .arrow-container { position: absolute; top: 50%; @@ -341,7 +351,6 @@ input::placeholder { .submit-button:active { transform: scale(0.95); transition: transform 0.1s var(--ease-out-quad); - height: 66px; } .connect-btn:active { @@ -349,9 +358,7 @@ input::placeholder { } .wallet-connect-button:active { - transform: scale(1.0526); transform-origin: center center; - font-size: 95%; } .deposit-button { @@ -362,9 +369,7 @@ input::placeholder { } .deposit-button:active{ - transform: scale(1.052631); transform-origin: center center; - font-size: 95%; } .amount-input-container { diff --git a/app/components/deposit/transaction-details.css b/app/components/deposit/transaction-details.css new file mode 100644 index 0000000..2229b91 --- /dev/null +++ b/app/components/deposit/transaction-details.css @@ -0,0 +1,117 @@ +.transaction-details-modal { + position: absolute; + z-index: 500; + width: 494px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + height: 631px; + padding: 20px; + + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(6, 6, 6, 1); + border-radius: 30px; +} + +.modal-cross { + width: 14px; + height: 14px; + cursor: pointer; +} + +.transaction-details-header { + width: 100%; + font-size: 20px; + line-height: 26px; + font-weight: 500; +} + +.logo-header { + background: rgba(255, 255, 255, 0.04); + border-radius: 70px; + width: 192px; + height: 75px; + margin-top: 30px; + padding: 10px; + gap: 25px; +} + +.status-panel { + width: 100%; + height: 192px; + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; + margin-top: 30px; + .white-text { + font-weight: 500; + font-size: 18px; + line-height: 23.4px; + } + .gray-text { + font-weight: 500; + font-size: 16px; + line-height: 20.8px; + } +} + +.panel-elem { + padding: 14px; + width: 100%; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.panel-elem:nth-of-type(3) { + border-bottom: none; +} + +.left-side { + gap: 8px; +} + +.done-item{ + color: #A1FEA0; + background: rgba(161, 254, 160, 0.05); + font-size: 16px; + font-weight: 500; + border-radius: 30px; + padding: 6px 12px 6px 6px; +} + +.tx-done-icon { + width: 24px; + height: 24px; +} + +.info-name { + font-weight: 500; + font-size: 16px; +} + +.green-text { + color: rgba(161, 254, 160, 1); + font-size: 16px; +} + +.done-button { + margin-top: 20px; + background: rgba(255, 255, 255, 0.05); + border-radius: 10px; + font-size: 20px; + width: 100%; + font-weight: 500; + height: 58px; + transition: transform 100ms var(--ease-out-quad); +} + +.done-button:active { + transform: scale(0.95); +} + +a { + transition: color 100ms var(--ease-out-quad); +} + +a:hover { + color: rgba(71, 121, 255, 1); +} diff --git a/app/components/deposit/transactionDetails.tsx b/app/components/deposit/transactionDetails.tsx new file mode 100644 index 0000000..3e880cc --- /dev/null +++ b/app/components/deposit/transactionDetails.tsx @@ -0,0 +1,133 @@ +import "./transaction-details.css" +import { useContext } from "react"; +import { Cross, Arrow } from "../icons" +import { TransactionIcon } from "../icons"; +import { timeAgo } from "@/lib/activityUtils" +import { ethers } from 'ethers'; +import { EthereumDataContext } from "@/app/context" + +interface TransactionDetailsProps { + closeModal: () => void; + tx: any; +} + +const calculateFee = (gPrice: string, gUsed: string) => { + const gasPriceBN = ethers.BigNumber.from(gPrice); + const gasUsedBN = ethers.BigNumber.from(gUsed); + const gasFee = gasPriceBN.mul(gasUsedBN); + return ethers.utils.formatEther(gasFee); +} + +export const TransactionDetails: React.FC = ({ closeModal, tx }) => { + const [gasPrice, ethPrice] = useContext(EthereumDataContext) ?? [0, 0]; + const ethAmount = Number(ethers.utils.formatEther(tx.value)); + const totalFee = calculateFee(tx.gasPrice, tx.gasUsed); + + + return ( +
+
+
+ Deposit +
+ +
+
+ +
+ Ethereum + + Eclipse +
+
+
+
+
1. Confirming transaction
+ +
+
+ + Done +
+
+ + +
+
+
2. Depositing
+
+
+ + Done +
+
+ + +
+
+
3. Receive on Eclipse
+
+
+ + Done +
+
+ + +
+
+ Deposit Amount +
+ ${ethPrice && (ethAmount * ethPrice).toFixed(2)} + {ethAmount.toFixed(3)} ETH +
+
+ +
+ Transaction Fee +
+ ${ethPrice && (Number(totalFee) * ethPrice).toFixed(3)} + {Number(totalFee).toFixed(4)} ETH +
+
+ +
+ Asset +
+ Ethereum + Ethereum +
+
+ +
+ Age +
+ {timeAgo(tx.timeStamp)} +
+
+
+ + +
+
+ ) +}; + diff --git a/app/components/icons/transaction-icon.tsx b/app/components/icons/transaction-icon.tsx index 77dde78..24c7b61 100644 --- a/app/components/icons/transaction-icon.tsx +++ b/app/components/icons/transaction-icon.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Loading } from "./index" -const TransactionIcon = ({ iconType }: { iconType: string}) => { +const TransactionIcon = ({ iconType, className }: { iconType: string, className?: string}) => { if (iconType === "failed") { return ( @@ -10,7 +10,7 @@ const TransactionIcon = ({ iconType }: { iconType: string}) => { ); } else if (iconType === "completed") { return ( - + ); diff --git a/app/layout.tsx b/app/layout.tsx index e0eea37..17abd56 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -14,6 +14,7 @@ const ibmPlexSans = IBM_Plex_Sans({ // TODO: maybe we can read it from a file const cssOverrides = ` + div { font-family: 'IBM Plex Sans', sans-serif; } img[data-testid='iconic-solana'] { content: url('/eclipse.png'); } @@ -97,7 +98,7 @@ export default function RootLayout({ depositBox.style.transform = "scale(0.9)"; const submitButton = document.getElementsByClassName("submit-button")[0] as HTMLElement; - submitButton.className += " disabled"; + if (submitButton) submitButton.className += " disabled"; const mainContent = document.getElementById("main-content") as HTMLElement; mainContent.style.filter = "blur(3px)" @@ -107,13 +108,13 @@ export default function RootLayout({ depositBox.style.transform = "scale(1)"; const submitButton = document.getElementsByClassName("submit-button")[0] as HTMLElement; - submitButton.className = submitButton.className.replace("disabled", ""); + if (submitButton) submitButton.className = submitButton.className.replace("disabled", ""); const mainContent = document.getElementById("main-content") as HTMLElement; mainContent.style.filter = "" } }, - walletsFilter: (wallets) => wallets.filter((w) => w.walletConnector.supportedChains.includes("EVM") || w.key === "backpacksol"), + walletsFilter: (wallets) => wallets.filter((w) => w.walletConnector.supportedChains.includes("EVM") || w.key === "phantom"), environmentId: process.env.NEXT_PUBLIC_ENVIRONMENT_ID || '', walletConnectors: [EthereumWalletConnectors, SolanaWalletConnectors], initialAuthenticationMode: 'connect-only', diff --git a/app/page.tsx b/app/page.tsx index e4da843..18f01a1 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -100,8 +100,6 @@ export default function Main() {
-

-