From 4f2efbb2e9de6a872c18294a6cb88acda6d84d0c Mon Sep 17 00:00:00 2001 From: hkey0 <81494947+hkey0@users.noreply.github.com> Date: Fri, 6 Sep 2024 00:19:39 +0300 Subject: [PATCH 01/11] fix: add transaction details modal --- ' | 15 +++ app/components/deposit/activity.css | 9 ++ app/components/deposit/activityContent.tsx | 17 ++- app/components/deposit/index.tsx | 13 +- app/components/deposit/styles.css | 6 + .../deposit/transaction-details.css | 103 ++++++++++++++++ app/components/deposit/transactionDetails.tsx | 111 ++++++++++++++++++ app/components/icons/transaction-icon.tsx | 4 +- package-lock.json | 6 + package.json | 1 + 10 files changed, 273 insertions(+), 12 deletions(-) create mode 100644 ' create mode 100644 app/components/deposit/transaction-details.css create mode 100644 app/components/deposit/transactionDetails.tsx diff --git a/' b/' new file mode 100644 index 0000000..e9ddc7b --- /dev/null +++ b/' @@ -0,0 +1,15 @@ +import "./transaction-details.css" +import { Cross } from "../icons" + +export const TransactionDetails = () => { + return ( +
+
+ Deposit + + +
+
+ ) +}; + diff --git a/app/components/deposit/activity.css b/app/components/deposit/activity.css index 77f0258..57b3a95 100644 --- a/app/components/deposit/activity.css +++ b/app/components/deposit/activity.css @@ -4,6 +4,7 @@ gap: 8px; font-weight: 500; width: 100%; + height: 364px; } .deposit-transaction { @@ -14,6 +15,12 @@ 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); +} + +.deposit-transaction:hover { + background: rgba(255, 255, 255, 0.04); + cursor: pointer; } .white-in { @@ -59,4 +66,6 @@ .gray-in { font-size: 12px; } + .eth-to-ecl { gap: "7px"; } + .tx-age { gap: "4px"; } } diff --git a/app/components/deposit/activityContent.tsx b/app/components/deposit/activityContent.tsx index 864cb5d..85fb8c4 100644 --- a/app/components/deposit/activityContent.tsx +++ b/app/components/deposit/activityContent.tsx @@ -5,21 +5,25 @@ import "./activity.css"; export const ActivityContent = () => { return (
+
-
- - Ethereum -
+ + Ethereum
- Deposit • 1 min ago +
+ Deposit + • + 1 min ago +
+
Depositing
-
+
Ethereum Eclipse @@ -28,6 +32,7 @@ export const ActivityContent = () => {
+
) } diff --git a/app/components/deposit/index.tsx b/app/components/deposit/index.tsx index 9687e9a..ca113ba 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 { TransactionDetails } from "./transactionDetails"; +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,8 @@ const Deposit: React.FC = ({ amountEther, setAmountEther }) => { { activeTab === Tabs.Activity && }
+ + ); } diff --git a/app/components/deposit/styles.css b/app/components/deposit/styles.css index 2e3b46d..5ac4c10 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 { diff --git a/app/components/deposit/transaction-details.css b/app/components/deposit/transaction-details.css new file mode 100644 index 0000000..96bc219 --- /dev/null +++ b/app/components/deposit/transaction-details.css @@ -0,0 +1,103 @@ +.transaction-details-modal { + z-index: 500; + + top: 40px; + + width: 494px; + 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; +} diff --git a/app/components/deposit/transactionDetails.tsx b/app/components/deposit/transactionDetails.tsx new file mode 100644 index 0000000..bc8ef10 --- /dev/null +++ b/app/components/deposit/transactionDetails.tsx @@ -0,0 +1,111 @@ +import "./transaction-details.css" +import { Cross, Arrow } from "../icons" +import { TransactionIcon } from "../icons"; + +export const TransactionDetails = () => { + return ( +
+
+
+ Deposit + +
+ +
+ Ethereum + + Eclipse +
+
+
+
+
1. Confirming transaction
+
View Txn
+
+
+ + Done +
+
+ + +
+
+
2. Depositing
+
+
+ + Done +
+
+ + +
+
+
3. Receive on Eclipse
+
View Txn
+
+
+ + Done +
+
+ + +
+
+ Deposit Amount +
+ $3,705 + 1.235 ETH +
+
+ +
+ Transaction Fee +
+ $1.348 + 0.0004 ETH +
+
+ +
+ Asset +
+ Ethereum + Ethereum +
+
+ +
+ Age +
+ 1 Min ago +
+
+
+ + +
+
+ ) +}; + 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/package-lock.json b/package-lock.json index 38b9e33..13b9af5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "@types/react": "18.2.21", "@types/react-dom": "18.2.7", "autoprefixer": "10.4.15", + "classnames": "^2.5.1", "encoding": "^0.1.13", "eslint": "8.51.0", "eslint-config-next": "13.5.6", @@ -4462,6 +4463,11 @@ "consola": "^3.2.3" } }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" + }, "node_modules/client-only": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", diff --git a/package.json b/package.json index 4135ad8..209c9ec 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@types/react": "18.2.21", "@types/react-dom": "18.2.7", "autoprefixer": "10.4.15", + "classnames": "^2.5.1", "encoding": "^0.1.13", "eslint": "8.51.0", "eslint-config-next": "13.5.6", From de0ffddb59540723ebf24b231ff1bdee03affef5 Mon Sep 17 00:00:00 2001 From: hkey0 <81494947+hkey0@users.noreply.github.com> Date: Fri, 6 Sep 2024 00:20:09 +0300 Subject: [PATCH 02/11] fix: --- ' | 15 --------------- 1 file changed, 15 deletions(-) delete mode 100644 ' diff --git a/' b/' deleted file mode 100644 index e9ddc7b..0000000 --- a/' +++ /dev/null @@ -1,15 +0,0 @@ -import "./transaction-details.css" -import { Cross } from "../icons" - -export const TransactionDetails = () => { - return ( -
-
- Deposit - - -
-
- ) -}; - From 82911bbb5a05181c946add8836b6a63141797480 Mon Sep 17 00:00:00 2001 From: hkey0 <81494947+hkey0@users.noreply.github.com> Date: Fri, 6 Sep 2024 18:08:56 +0300 Subject: [PATCH 03/11] feat: make activity tab functional --- app/components/deposit/activity.css | 4 ++ app/components/deposit/activityContent.tsx | 45 +++++++++++++++---- app/components/deposit/index.tsx | 8 ++-- .../deposit/transaction-details.css | 9 +++- app/layout.tsx | 7 +-- app/page.tsx | 2 - lib/activityUtils.ts | 40 +++++++++++++++++ 7 files changed, 96 insertions(+), 19 deletions(-) create mode 100644 lib/activityUtils.ts diff --git a/app/components/deposit/activity.css b/app/components/deposit/activity.css index 57b3a95..9c8fa54 100644 --- a/app/components/deposit/activity.css +++ b/app/components/deposit/activity.css @@ -5,6 +5,7 @@ font-weight: 500; width: 100%; height: 364px; + overflow: scroll; } .deposit-transaction { @@ -16,6 +17,9 @@ 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 { diff --git a/app/components/deposit/activityContent.tsx b/app/components/deposit/activityContent.tsx index 85fb8c4..4745758 100644 --- a/app/components/deposit/activityContent.tsx +++ b/app/components/deposit/activityContent.tsx @@ -1,12 +1,39 @@ +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 { + useUserWallets, + Wallet +} from "@dynamic-labs/sdk-react-core"; import "./activity.css"; export const ActivityContent = () => { + const [deposits, setDeposits] = 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 (
- -
+ {evmWallet && deposits && deposits.map((tx) => { + // TODO: add loading state + const status = Number(tx.isError) ? "failed" : "completed"; + return ( +
Ethereum
@@ -14,12 +41,11 @@ export const ActivityContent = () => {
Deposit • - 1 min ago + {timeAgo(Number(tx.timeStamp))}
- -
- - Depositing +
+ + {status}
@@ -28,11 +54,12 @@ export const ActivityContent = () => { 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.)}
) } diff --git a/app/components/deposit/index.tsx b/app/components/deposit/index.tsx index ca113ba..b785789 100644 --- a/app/components/deposit/index.tsx +++ b/app/components/deposit/index.tsx @@ -5,6 +5,7 @@ import './styles.css'; import { DepositContent, DepositProps } from "./depositContent"; import { ActivityContent } from "./activityContent"; import { TransactionDetails } from "./transactionDetails"; +import ExtendedDetails from '../ExtendedDetails' import classNames from 'classnames'; enum Tabs { @@ -17,7 +18,7 @@ const Deposit: React.FC = ({ amountEther, setAmountEther }) => { const [activeTab, setActiveTab] = useState(Tabs.Deposit); return ( <> -
+
setActiveTab(Tabs.Deposit)}>Deposit
@@ -30,8 +31,9 @@ const Deposit: React.FC = ({ amountEther, setAmountEther }) => { { activeTab === Tabs.Activity && }
- - +

+ { (activeTab === Tabs.Deposit) && } + ); } diff --git a/app/components/deposit/transaction-details.css b/app/components/deposit/transaction-details.css index 96bc219..a37ada9 100644 --- a/app/components/deposit/transaction-details.css +++ b/app/components/deposit/transaction-details.css @@ -1,7 +1,7 @@ .transaction-details-modal { + position: absolute; z-index: 500; - - top: 40px; + top: 150px; width: 494px; height: 631px; @@ -100,4 +100,9 @@ width: 100%; font-weight: 500; height: 58px; + transition: transform 100ms var(--ease-out-quad); } + +.done-button:active { + transform: scale(0.95); +} 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() {
-

-