Skip to content

Commit

Permalink
Build pending transactions tab for tETH
Browse files Browse the repository at this point in the history
  • Loading branch information
@knoll3
knoll3 committed Nov 28, 2024
1 parent d6982ba commit f6eb84c
Show file tree
Hide file tree
Showing 14 changed files with 660 additions and 187 deletions.
155 changes: 92 additions & 63 deletions app/components/Deposit/ActivityContent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,108 @@
import { useState } from 'react';
import { ethers } from 'ethers';
import { Arrow } from "@/app/components/icons";
import { useState } from "react";
import { ethers } from "ethers";
import { Arrow } from "@/app/components/icons";
import { TransactionIcon, ActivityBoxIcon } from "../icons";
import { timeAgo } from "@/lib/activityUtils";
import Skeleton from 'react-loading-skeleton';
import { TransactionDetails } from "../TransactionDetails";
import { useTransaction } from "../TransactionPool"
import Skeleton from "react-loading-skeleton";
import { TransactionDetails } from "../TransactionDetails";
import { useTransaction } from "../TransactionPool";
import { Tabs } from "./index";
import "./activity.css";
import { useWallets } from '@/app/hooks/useWallets';
import "./activity.css";
import { useWallets } from "@/app/hooks/useWallets";

export const ActivityContent = ({ setActiveTab }: {setActiveTab: React.Dispatch<React.SetStateAction<Tabs>>}) => {
export const ActivityContent = ({ setActiveTab }: { setActiveTab: React.Dispatch<React.SetStateAction<Tabs>> }) => {
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
const [currentTx, setCurrentTx] = useState<any>(null);
const { transactions, deposits } = useTransaction();

const { evmWallet } = useWallets();

if (!evmWallet) {
setActiveTab(Tabs.Deposit);
return <></>
if (!evmWallet) {
setActiveTab(Tabs.Deposit);
return <></>;
}
return (

return (
<>
<div className={isModalOpen ? "status-overlay active" : "status-overlay"}></div>
<div className="activity-container">
{evmWallet && deposits && deposits.map((tx, index) => {
const status = Number(tx.isError)
? "failed"
: transactions.get(tx.hash)?.pdaData
? "completed"
: (transactions.get(tx.hash)?.pdaData === undefined)
? null
: "loading";
return (
<div key={index} className="deposit-transaction flex flex-row items-center" 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">
<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}`}>
{(status)
? <><TransactionIcon iconType={status}/>
<span>{status === "loading" ? "depositing" : status}</span></>
: <Skeleton height={15} width={91} />
}
</div>
</div>
<div className="transaction-bottom flex justify-between">
<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 className={isModalOpen ? "status-overlay active" : "status-overlay"}></div>
<div className="activity-container">
{evmWallet &&
deposits &&
deposits.map((tx, index) => {
const status = Number(tx.isError)
? "failed"
: transactions.get(tx.hash)?.pdaData
? "completed"
: transactions.get(tx.hash)?.pdaData === undefined
? null
: "loading";
return (
<div
key={index}
className="deposit-transaction flex flex-row items-center"
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">
<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}`}>
{status ? (
<>
<TransactionIcon iconType={status} />
<span>{status === "loading" ? "depositing" : status}</span>
</>
) : (
<Skeleton height={15} width={91} />
)}
</div>
</div>
<div className="transaction-bottom flex justify-between">
<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">{Number(ethers.utils.formatEther(tx.value)).toFixed(3)} ETH</span>
</div>
</div>
</div>
<span className="white-in">{Number(ethers.utils.formatEther(tx.value)).toFixed(3)} ETH</span>
);
})}
{!evmWallet ? (
<span>Connect your evm wallet first.</span>
) : (
!deposits?.length && (
<div className="flex flex-col items-center justify-center" style={{ height: "90%", gap: "21px" }}>
<ActivityBoxIcon activityBoxClassName="" />
<span style={{ fontSize: "18px", color: "rgba(255, 255, 255, 0.3)", fontWeight: "500", width: "266px" }}>
You don’t have any transactions to show
</span>
</div>
</div>
)
)}
</div>
)})}
{(!evmWallet)
? <span>Connect your evm wallet first.</span>
: (!(deposits?.length)
&& <div className="flex flex-col items-center justify-center" style={{height: "90%", gap: "21px"}}>
<ActivityBoxIcon activityBoxClassName="" />
<span style={{fontSize: "18px", color: "rgba(255, 255, 255, 0.3)", fontWeight: "500", width: "266px"}}>You don’t have any transactions to show</span>
</div>
)}
</div>
{ isModalOpen && <TransactionDetails from={""} tx={currentTx} closeModal={() => setTimeout(() => setIsModalOpen(false), 100)} /> }
{isModalOpen && (
<TransactionDetails from={""} tx={currentTx} closeModal={() => setTimeout(() => setIsModalOpen(false), 100)} />
)}
</>
)
}
);
};
53 changes: 38 additions & 15 deletions app/components/Deposit/activity.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
width: 100%;
height: 364px;
overflow-y: scroll;
scrollbar-width: thin;
scrollbar-width: thin;
scrollbar-color: rgba(33, 33, 33, 1) rgba(255, 255, 255, 0);

padding-right: 12px;
Expand All @@ -20,7 +20,7 @@
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);
transition: background 100ms var(--ease-out-quad);
span::first-letter {
text-transform: uppercase;
}
Expand Down Expand Up @@ -50,18 +50,23 @@
font-size: 12px;
}

.status-div.failed {
.status-div.failed,
.status-div.canceled {
background: rgba(235, 77, 77, 0.05);
color: rgba(235, 77, 77, 1);
}

.status-div.loading {
.status-div.loading,
.status-div.pending {
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.3);
svg { width: 16px;}
svg {
width: 16px;
}
}

.status-div.completed {
.status-div.completed,
.status-div.fulfilled {
background: rgba(161, 254, 160, 0.05);
color: rgba(161, 254, 160, 1);
}
Expand Down Expand Up @@ -91,18 +96,36 @@
.gray-in {
font-size: 14px;
}
.status-div span {font-size: 10px}
.eth-to-ecl { gap: 8px!important; }
.tx-age { gap: 4px; }
.deposit-transaction {padding: 12px 10px 12px 10px;}
.status-div span {
font-size: 10px;
}
.eth-to-ecl {
gap: 8px !important;
}
.tx-age {
gap: 4px;
}
.deposit-transaction {
padding: 12px 10px 12px 10px;
}
.deposit-transaction img {
width: 39px!important;
height: 39px!important;
width: 39px !important;
height: 39px !important;
}
}

@keyframes bounce {
0% { transform: translateY(-10px); }
50% { transform: translateY(5px); }
100% { transform: translateY(0); }
0% {
transform: translateY(-10px);
}
50% {
transform: translateY(5px);
}
100% {
transform: translateY(0);
}
}

.deposit-transaction .preserve-casing::first-letter {
text-transform: none;
}
30 changes: 19 additions & 11 deletions app/mint-teth/components/TokenSelect.tsx → app/mint-teth/components/EcSelect.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,27 @@
import React, { useState, useRef, useEffect } from "react";
import Image from "next/image";

export interface TokenOption {
value: `0x${string}`;
export interface SelectOption {
value: string;
label: string;
imageSrc: string;
}

interface TokenSelectProps {
options: TokenOption[];
selected: TokenOption | undefined;
options: SelectOption[] | undefined;
selected: SelectOption | undefined;
disabled?: boolean;
onChange: (val: TokenOption) => void;
onChange: (val: SelectOption) => void;
smallText?: boolean;
}

export function TokenSelect({ options, selected, disabled, onChange }: TokenSelectProps) {
// Eclipse Select
export function EcSelect({ options, selected, disabled, onChange, smallText }: TokenSelectProps) {
const [isOpen, setIsOpen] = useState(false);

const dropdownRef = useRef<HTMLDivElement>(null);

const handleOptionClick = (option: TokenOption) => {
const handleOptionClick = (option: SelectOption) => {
onChange(option);
setIsOpen(false);
};
Expand All @@ -43,14 +45,20 @@ export function TokenSelect({ options, selected, disabled, onChange }: TokenSele
<div className="relative inline-block text-left" ref={dropdownRef}>
<button
type="button"
className={`dropdown-button ${disabled ? "cursor-default" : ""}`}
className={`dropdown-button ${disabled ? "cursor-default" : ""} ${smallText ? "text-sm" : ""}`}
onClick={() => setIsOpen(!isOpen)}
disabled={options.length === 0 || disabled}
disabled={options?.length === 0 || disabled}
>
<div className="flex items-center justify-center">
{selected ? (
<>
<Image src={selected.imageSrc} alt={selected.label} width={24} height={24} className="mr-3" />
<Image
src={selected.imageSrc}
alt={selected.label}
width={smallText ? 18 : 24}
height={smallText ? 18 : 24}
className="mr-3"
/>
{selected.label}
</>
) : (
Expand All @@ -74,7 +82,7 @@ export function TokenSelect({ options, selected, disabled, onChange }: TokenSele
)}
</button>

{isOpen && options.length > 0 && (
{isOpen && options?.length && (
<div className="dropdown-menu">
<div className="py-1">
{options.map((option) => (
Expand Down
20 changes: 17 additions & 3 deletions app/mint-teth/components/Mint.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { MintSummaryCard } from "./MintSummaryCard";
import { MintTransactionDetails, StepStatus } from "./MintTransactionDetails";
import { MintValueCard } from "./MintValueCard";
import "./styles.css";
import { TokenOption } from "./TokenSelect";
import { SelectOption } from "./EcSelect";

export function Mint() {
///////////////////////
Expand Down Expand Up @@ -339,8 +339,8 @@ export function Mint() {
setDepositAmount(sanitizedInput);
}

function handleDepositAssetChange(val: TokenOption) {
setDepositAsset(val.value);
function handleDepositAssetChange(val: SelectOption) {
setDepositAsset(val.value as `0x${string}`);
}

function closeModal() {
Expand Down Expand Up @@ -394,6 +394,13 @@ export function Mint() {
usdValue={formattedDepositAmountInUsd}
handleDisconnect={() => evmWallet && handleUnlinkWallet(evmWallet.id)}
tokenOptions={tokenOptions}
chainOptions={[]}
selectedChain={{
value: "ethereum",
label: "Ethereum",
imageSrc: "/eth.png",
}}
chainSelectDisabled
/>
<MintValueCard
title="Receive on"
Expand All @@ -411,6 +418,13 @@ export function Mint() {
usdValue={formattedReceiveAmountInUsd}
handleDisconnect={() => solWallet && handleUnlinkWallet(solWallet.id)}
tokenOptions={[]}
chainOptions={[]}
selectedChain={{
value: "eclipse",
label: "Eclipse",
imageSrc: "/eclipse.png",
}}
chainSelectDisabled
/>
<MintSummaryCard depositAsset={depositAsset} exchangeRate={assetPerTethRate} />
{evmAddress && svmAddress && (
Expand Down
Loading

0 comments on commit f6eb84c

Please sign in to comment.