Skip to content

Commit cf2751c

Browse files
hkey0hkey0
authored
create mint tusd page (#344)
* hide turbo tap popup (#343) create mint tusd page * create mint tusd page * fix * fix * fix * fix * update tusd logo * update tusd logo * update tusd logo * fix rate * fix rate * fix rate fix rate fix rate fix rate fix rate fix rate
1 parent 6b9af01 commit cf2751c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+5151
-179
lines changed

‎app/components/Sidebar/index.tsx

Lines changed: 144 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,175 @@
11
import "./sidebar.css";
2-
import Link from 'next/link';
3-
import { BridgeIcon, TethIcon, ScanIcon, GasStationIcon, EcosystemIcon } from "@/app/components/icons"
2+
import Link from "next/link";
3+
import {
4+
BridgeIcon,
5+
TethIcon,
6+
ScanIcon,
7+
GasStationIcon,
8+
EcosystemIcon,
9+
TusdIcon,
10+
} from "@/app/components/icons";
411
import { NetworkSwitcher } from "../Deposit/NetworkSwitcher";
512
import { useState, type ReactNode } from "react";
613
import { toKebabCase } from "@/lib/stringUtils";
7-
import { usePathname } from 'next/navigation'
8-
import { composeEclipsescanUrl, useNetwork } from "@/app/contexts/NetworkContext";
9-
14+
import { usePathname } from "next/navigation";
15+
import {
16+
composeEclipsescanUrl,
17+
useNetwork,
18+
} from "@/app/contexts/NetworkContext";
1019

1120
const ToggleIcon: React.FC<{ isExtended: boolean }> = ({ isExtended }) => {
1221
return (
13-
<svg width="20"
14-
height="20"
15-
viewBox="0 0 20 20"
16-
fill="none"
17-
xmlns="http://www.w3.org/2000/svg"
18-
style={ !isExtended ? { transform: "rotate(180deg)", transition: "transform 0.1s" } : { transition: "transform 0.1s" }}>
19-
<path d="M8.33509 13.3333L5.88564 10.8839C5.39749 10.3957 5.39749 9.60421 5.88564 9.11604L8.33509 6.66663M14.1685 13.3333L11.719 10.8839C11.2308 10.3957 11.2308 9.60421 11.719 9.11604L14.1685 6.66663" stroke="white" stroke-opacity="0.3" stroke-width="1.7971" stroke-linecap="round" stroke-linejoin="round"/>
22+
<svg
23+
width="20"
24+
height="20"
25+
viewBox="0 0 20 20"
26+
fill="none"
27+
xmlns="http://www.w3.org/2000/svg"
28+
style={
29+
!isExtended
30+
? { transform: "rotate(180deg)", transition: "transform 0.1s" }
31+
: { transition: "transform 0.1s" }
32+
}
33+
>
34+
<path
35+
d="M8.33509 13.3333L5.88564 10.8839C5.39749 10.3957 5.39749 9.60421 5.88564 9.11604L8.33509 6.66663M14.1685 13.3333L11.719 10.8839C11.2308 10.3957 11.2308 9.60421 11.719 9.11604L14.1685 6.66663"
36+
stroke="white"
37+
stroke-opacity="0.3"
38+
stroke-width="1.7971"
39+
stroke-linecap="round"
40+
stroke-linejoin="round"
41+
/>
2042
</svg>
2143
);
22-
}
44+
};
2345

24-
const SidebarItem: React.FC<{name: string, icon: ReactNode, isExtended: boolean}> = ({ name, icon, isExtended }) => {
25-
const { selectedOption } = useNetwork()
46+
const SidebarItem: React.FC<{
47+
name: string;
48+
icon: ReactNode;
49+
isExtended: boolean;
50+
}> = ({ name, icon, isExtended }) => {
51+
const { selectedOption } = useNetwork();
2652
const [hover, setHover] = useState(false);
2753
const pathName = usePathname();
28-
let targetHref = toKebabCase(name)
29-
if (targetHref === "eclipsescan") { targetHref = composeEclipsescanUrl(selectedOption) }
30-
if (targetHref === "ecosystem") { targetHref = "https://www.eclipse.xyz/ecosystem" }
54+
let targetHref = toKebabCase(name);
55+
if (targetHref === "eclipsescan") {
56+
targetHref = composeEclipsescanUrl(selectedOption);
57+
}
58+
if (targetHref === "ecosystem") {
59+
targetHref = "https://www.eclipse.xyz/ecosystem";
60+
}
3161

3262
return (
33-
<Link href={targetHref} target={targetHref.includes("https") ? "_blank" : ""}>
34-
<div className={ `side-item flex flex-row items-center ${ pathName.slice(1) === toKebabCase(name) ? "highlight-icon" : "" }`}
35-
style={{ gap: "11px", padding: isExtended ? "4px" : "0px", background: !isExtended ? "none" : ""}}
36-
onMouseEnter={() => setHover(true)}
37-
onMouseLeave={() => setHover(false)}
38-
>
39-
<div className={ `flex items-center justify-center side-icon-box` } style={{width: "38px", height: "38px"}}>
40-
{icon}
63+
<Link
64+
href={targetHref}
65+
target={targetHref.includes("https") ? "_blank" : ""}
66+
>
67+
<div
68+
className={`side-item flex flex-row items-center ${pathName.slice(1) === toKebabCase(name) ? "highlight-icon" : ""}`}
69+
style={{
70+
gap: "11px",
71+
padding: isExtended ? "4px" : "0px",
72+
background: !isExtended ? "none" : "",
73+
}}
74+
onMouseEnter={() => setHover(true)}
75+
onMouseLeave={() => setHover(false)}
76+
>
77+
<div
78+
className={`flex items-center justify-center side-icon-box`}
79+
style={{ width: "38px", height: "38px" }}
80+
>
81+
{icon}
82+
</div>
83+
{isExtended && (
84+
<span style={{ fontWeight: "500", fontSize: "16px" }}>{name}</span>
85+
)}
86+
87+
{hover && !isExtended && (
88+
<>
89+
<svg
90+
width="5"
91+
height="8"
92+
viewBox="0 0 5 8"
93+
fill="none"
94+
xmlns="http://www.w3.org/2000/svg"
95+
style={{ marginLeft: "-7px" }}
96+
>
97+
<path
98+
style={{ stroke: "none" }}
99+
d="M5 7.5V0.5L1.17033 3.18077C0.601614 3.57887 0.601616 4.42113 1.17033 4.81923L5 7.5Z"
100+
fill="white"
101+
fill-opacity="0.08"
102+
/>
103+
</svg>
104+
<div className="sidebar-hover flex items-center justify-center">
105+
<span>{name}</span>
106+
</div>
107+
</>
108+
)}
41109
</div>
42-
{ isExtended && <span style={{fontWeight: "500", fontSize: "16px"}}>{name}</span> }
43-
44-
{ hover && !isExtended && (
45-
<>
46-
<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ marginLeft: "-7px"}}>
47-
<path style={{ stroke: "none" }} d="M5 7.5V0.5L1.17033 3.18077C0.601614 3.57887 0.601616 4.42113 1.17033 4.81923L5 7.5Z" fill="white" fill-opacity="0.08"/>
48-
</svg>
49-
<div className="sidebar-hover flex items-center justify-center">
50-
<span>{ name }</span>
51-
</div>
52-
</>
53-
)}
54-
</div>
55110
</Link>
56111
);
57-
}
112+
};
58113

59-
export const Sidebar: React.FC<{ isExtended: boolean, setIsExtended: React.Dispatch<React.SetStateAction<boolean>>}> = ({ isExtended, setIsExtended }) => {
114+
export const Sidebar: React.FC<{
115+
isExtended: boolean;
116+
setIsExtended: React.Dispatch<React.SetStateAction<boolean>>;
117+
}> = ({ isExtended, setIsExtended }) => {
60118
return (
61-
<div className="sidebar flex flex-col justify-between sm:flex hidden sm:block" style={{ width: isExtended ? "215px" : "66px"}}>
119+
<div
120+
className="sidebar flex flex-col justify-between sm:flex hidden sm:block"
121+
style={{ width: isExtended ? "215px" : "66px" }}
122+
>
62123
<div>
63124
<NetworkSwitcher isExtended={isExtended} />
64-
<div className="sidebar-tabs flex flex-col" style={{ marginTop: "14px", marginLeft: "14px" }}>
65-
<SidebarItem isExtended={isExtended} name="Bridge" icon={<BridgeIcon />} />
66-
<SidebarItem isExtended={isExtended} name="Gas Station" icon={<GasStationIcon />} />
67-
<SidebarItem isExtended={isExtended} name="Mint tETH" icon={<TethIcon />} />
68-
<SidebarItem isExtended={isExtended} name="Eclipsescan" icon={<ScanIcon />} />
69-
<SidebarItem isExtended={isExtended} name="Ecosystem" icon={<EcosystemIcon />} />
125+
<div
126+
className="sidebar-tabs flex flex-col"
127+
style={{ marginTop: "14px", marginLeft: "14px" }}
128+
>
129+
<SidebarItem
130+
isExtended={isExtended}
131+
name="Bridge"
132+
icon={<BridgeIcon />}
133+
/>
134+
<SidebarItem
135+
isExtended={isExtended}
136+
name="Gas Station"
137+
icon={<GasStationIcon />}
138+
/>
139+
<SidebarItem
140+
isExtended={isExtended}
141+
name="Mint tETH"
142+
icon={<TethIcon />}
143+
/>
144+
<SidebarItem
145+
isExtended={isExtended}
146+
name="Mint tUSD"
147+
icon={<TusdIcon />}
148+
/>
149+
<SidebarItem
150+
isExtended={isExtended}
151+
name="Eclipsescan"
152+
icon={<ScanIcon />}
153+
/>
154+
<SidebarItem
155+
isExtended={isExtended}
156+
name="Ecosystem"
157+
icon={<EcosystemIcon />}
158+
/>
70159
</div>
71160
</div>
72-
<div className="flex w-[31px] mb-[20px] h-[31px] rounded-full cursor-pointer
161+
<div
162+
className="flex w-[31px] mb-[20px] h-[31px] rounded-full cursor-pointer
73163
border-[#ffffff1a] bg-black border-[1.35px] items-center
74164
justify-center ml-[calc(100%-15.5px)] transition-all
75165
close-sidebar-icon
76166
"
77-
onClick={() => {setIsExtended((current) => !current)}}>
78-
<ToggleIcon isExtended={ isExtended }/>
167+
onClick={() => {
168+
setIsExtended((current) => !current);
169+
}}
170+
>
171+
<ToggleIcon isExtended={isExtended} />
79172
</div>
80173
</div>
81174
);
82175
};
83-

‎app/components/icons/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export { default as ActivityBoxIcon } from "./activityBox";
1616
export { default as BridgeIcon } from "./sidebar-icons/bridge";
1717
export { default as WalletIcon } from "./sidebar-icons/wallet";
1818
export { default as TethIcon } from "./sidebar-icons/teth";
19+
export { default as TusdIcon } from "./sidebar-icons/tusd";
1920
export { default as ScanIcon } from "./sidebar-icons/scan";
2021
export { default as FaucetIcon } from "./sidebar-icons/faucet";
2122
export { default as EcosystemIcon } from "./sidebar-icons/ecosystem";

‎app/components/icons/sidebar-icons/tusd.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from "react";
2+
3+
const TusdIcon = () => {
4+
return (
5+
<svg
6+
width="15"
7+
height="15"
8+
viewBox="0 0 15 15"
9+
fill="none"
10+
xmlns="http://www.w3.org/2000/svg"
11+
>
12+
<path
13+
d="M3.21414 2.50501C3.21414 2.50501 2.77594 3.23555 2.57434 3.70875C2.37274 4.18195 2.18168 4.92841 2.18168 4.92841C1.75327 4.77753 1.09345 4.41926 0.682701 3.90725C0.161264 3.25728 0.149668 2.46531 0.197832 1.7187C0.233472 1.16627 0.757893 0.349875 1.00001 0.0445585C0.985418 0.0792727 0.956284 0.262816 0.956528 0.719249C0.956831 1.2898 1.04471 1.65205 1.4995 2.07359C1.86332 2.41083 2.79418 2.50172 3.21414 2.50501Z"
14+
fill="white"
15+
fill-opacity="0.3"
16+
style={{ stroke: "none" }}
17+
/>
18+
<path
19+
d="M10.836 2.53855C10.836 2.53855 11.2741 3.26216 11.4761 3.7312C11.6782 4.20024 11.8709 4.94066 11.8709 4.94066C12.2957 4.78912 12.9494 4.43073 13.3552 3.9207C13.8703 3.27323 13.8786 2.48681 13.8278 1.74568C13.7902 1.1973 13.2662 0.388787 13.0246 0.0866035C13.0392 0.121014 13.0689 0.303141 13.0705 0.756347C13.0725 1.32286 12.9867 1.6829 12.5368 2.10329C12.1769 2.4396 11.253 2.53359 10.836 2.53855Z"
20+
fill="white"
21+
fill-opacity="0.3"
22+
style={{ stroke: "none" }}
23+
/>
24+
<path
25+
d="M10.1615 10.7437C10.1615 11.5309 9.94879 12.1887 9.52334 12.7171C9.10908 13.2348 8.54927 13.5637 7.84391 13.7039C7.78793 13.7254 7.75994 13.7578 7.75994 13.8009L7.77674 14.7715C7.77674 14.8254 7.75434 14.8685 7.70956 14.9009C7.67597 14.944 7.63119 14.9656 7.57521 14.9656H6.51717C6.46119 14.9656 6.41081 14.944 6.36602 14.9009C6.33243 14.8685 6.31564 14.8254 6.31564 14.7715L6.33243 13.8009C6.33243 13.747 6.31004 13.7146 6.26526 13.7039C5.5487 13.5637 4.9833 13.2402 4.56904 12.7333C4.15478 12.2157 3.94765 11.5902 3.94765 10.8569V10.4363C3.94765 10.3824 3.96445 10.3393 3.99803 10.3069C4.04282 10.2638 4.0932 10.2422 4.14918 10.2422H5.67746C5.73344 10.2422 5.77822 10.2638 5.81181 10.3069C5.8566 10.3393 5.87899 10.3824 5.87899 10.4363V10.7599C5.87899 11.1804 5.98535 11.5201 6.19808 11.7789C6.422 12.0378 6.7075 12.1672 7.05458 12.1672C7.40167 12.1672 7.68717 12.0485 7.91109 11.8113C8.13501 11.5633 8.24698 11.2397 8.24698 10.8407C8.24698 10.5604 8.1854 10.3177 8.06224 10.1128C7.93908 9.90794 7.76554 9.71383 7.54162 9.5305C7.31769 9.34718 6.95942 9.08297 6.46679 8.73789C5.90698 8.34967 5.45353 8.00459 5.10645 7.70264C4.77057 7.40069 4.48507 7.03943 4.24995 6.61886C4.02602 6.1875 3.91406 5.69145 3.91406 5.13068C3.91406 4.36503 4.12119 3.72878 4.53545 3.22194C4.94971 2.7151 5.51511 2.39697 6.23167 2.26757C6.28765 2.246 6.31564 2.21365 6.31564 2.17051L6.29884 1.10291C6.29884 1.04899 6.31564 1.00585 6.34923 0.973502C6.39401 0.930366 6.44439 0.908798 6.50038 0.908798H7.54162C7.5976 0.908798 7.64238 0.930366 7.67597 0.973502C7.72076 1.00585 7.74315 1.04899 7.74315 1.10291L7.70956 2.18669C7.70956 2.24061 7.73195 2.27296 7.77674 2.28374C8.4821 2.43472 9.0419 2.77441 9.45616 3.30282C9.87042 3.83123 10.0775 4.47826 10.0775 5.24391V5.63213C10.0775 5.68605 10.0552 5.73458 10.0104 5.77772C9.97678 5.81007 9.932 5.82624 9.87602 5.82624H8.36454C8.30855 5.82624 8.25817 5.81007 8.21339 5.77772C8.1798 5.73458 8.163 5.68605 8.163 5.63213V5.21156C8.163 4.79099 8.05104 4.45669 7.82712 4.20866C7.61439 3.94985 7.32889 3.82044 6.97061 3.82044C6.63473 3.82044 6.36042 3.93907 6.1477 4.17631C5.93497 4.40277 5.82861 4.7209 5.82861 5.13068C5.82861 5.5189 5.94057 5.84781 6.16449 6.11741C6.39961 6.38701 6.85305 6.75905 7.52482 7.23354C8.20779 7.71881 8.72281 8.11782 9.06989 8.43055C9.41697 8.7325 9.68568 9.0668 9.87602 9.43345C10.0664 9.8001 10.1615 10.2368 10.1615 10.7437Z"
26+
fill="white"
27+
fill-opacity="0.3"
28+
style={{ stroke: "none" }}
29+
/>
30+
</svg>
31+
);
32+
};
33+
34+
export default TusdIcon;

0 commit comments

Comments
 (0)