-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #34 from Eclipse-Laboratories-Inc/modal-popup
add transaction details
- Loading branch information
Showing
13 changed files
with
392 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<any[] | null>(null); | ||
| const [isModalOpen, setIsModalOpen] = useState<boolean>(false); | ||
| const [currentTx, setCurrentTx] = useState<any>(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 ( | ||
| <> | ||
| <div className="activity-container"> | ||
| <div className="deposit-transaction flex flex-row"> | ||
| <div className="flex items-center justify-center" style={{width: "18%", justifyContent: "flex-start"}}> | ||
| <img src="swap.png" alt="Swap" className="swap-image" hidden/> | ||
| <img src="eth.png" alt="Ethereum" style={{ objectFit: "cover", height: "53px", width: "53px"}} /> | ||
| </div> | ||
| {evmWallet && deposits && deposits.map((tx, index) => { | ||
| // TODO: add loading state | ||
| const status = Number(tx.isError) ? "failed" : "completed"; | ||
| return ( | ||
| <div key={index} className="deposit-transaction flex flex-row" onClick={() => { setIsModalOpen(true); setCurrentTx(tx)}}> | ||
| <img src="swap.png" alt="Swap" className="swap-image" style={{position: "absolute", width: "22px"}} hidden /> | ||
| <img src="eth.png" alt="Ethereum" style={{ objectFit: "cover", height: "53px", width: "53px", marginLeft: "5px", marginRight: "16px"}} /> | ||
| <div className="flex flex-col justify-center" style={{width: "85%"}}> | ||
| <div className="transaction-top flex justify-between"> | ||
| <span className="gray-in">Deposit • 1 min ago</span> | ||
| <div className="flex flex-row items-center status-div loading"> | ||
| <TransactionIcon iconType="loading"/> | ||
| <span>Depositing</span> | ||
| <div className="flex tx-age" style={{ gap: "7px"}}> | ||
| <span className="gray-in">Deposit</span> | ||
| <span className="gray-in">•</span> | ||
| <span className="gray-in">{timeAgo(Number(tx.timeStamp))}</span> | ||
| </div> | ||
| <div className={`flex flex-row items-center status-div ${status}`}> | ||
| <TransactionIcon iconType={status}/> | ||
| <span>{status}</span> | ||
| </div> | ||
| </div> | ||
| <div className="transaction-bottom flex justify-between"> | ||
| <div className="flex flex-row items-center" style={{gap: "14px"}}> | ||
| <div className="flex flex-row items-center eth-to-ecl" style={{gap: "14px"}}> | ||
| <span className="white-in">Ethereum</span> | ||
| <Arrow /> | ||
| <span className="white-in">Eclipse</span> | ||
| </div> | ||
| <span className="white-in">1 ETH</span> | ||
| <span className="white-in">{Number(ethers.utils.formatEther(tx.value)).toFixed(3)} ETH</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| )})} | ||
| {(!evmWallet) ? <span>Connect your evm wallet first.</span> : (!(deposits?.length) && <span>You don't have any transactions.</span>)} | ||
| </div> | ||
| { isModalOpen && <TransactionDetails tx={currentTx} closeModal={() => setTimeout(() => setIsModalOpen(false), 100)} /> } | ||
| </> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| } |
Oops, something went wrong.