-
Notifications
You must be signed in to change notification settings - Fork 1
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 #30 from astriaorg/feature/pool-page
Feature/pool page
- Loading branch information
Showing
40 changed files
with
1,446 additions
and
266 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
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,33 @@ | ||
| "use client"; | ||
|
|
||
| import { useConfig } from "../../config/hooks/useConfig"; | ||
| import { UpRightSquareIcon } from "@repo/ui/icons"; | ||
|
|
||
| interface SideTagProps { | ||
| label: string; | ||
| } | ||
|
|
||
| /** | ||
| * SideTag component to render a side tag with an icon and label. | ||
| * @param label | ||
| */ | ||
|
|
||
| export const SideTag = ({ label }: SideTagProps) => { | ||
| const { feedbackFormURL } = useConfig(); | ||
|
|
||
| return ( | ||
| <div className="hidden md:inline-flex items-center absolute top-1/2 right-0 bg-orange-soft text-white text-xs font-bold translate-x-10 -rotate-90 overflow-hidden"> | ||
| <a | ||
| href={feedbackFormURL || ""} | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| className="flex items-center gap-2 transition px-3 py-2 text-white hover:bg-black/10 text-base" | ||
| > | ||
| <span className="w-5 h-5 flex items-center justify-center"> | ||
| <UpRightSquareIcon /> | ||
| </span> | ||
| <span>{label}</span> | ||
| </a> | ||
| </div> | ||
| ); | ||
| }; |
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,73 @@ | ||
| import { | ||
| CelestiaIcon, | ||
| MilkTiaIcon, | ||
| StrideTiaIcon, | ||
| UsdcIcon, | ||
| WrappedTiaIcon, | ||
| } from "@repo/ui/icons"; | ||
| import { TokenItem } from "@repo/ui/types"; | ||
|
|
||
| export enum TOKEN_INPUTS { | ||
| TOKEN_ONE = "token_one", | ||
| TOKEN_TWO = "token_two", | ||
| } | ||
|
|
||
| // NOTE: temporary tokens until we have a real token list from a api | ||
| export const tokens: TokenItem[] = [ | ||
| { | ||
| Icon: CelestiaIcon, | ||
| title: "TIA", | ||
| symbol: "TIA", | ||
| }, | ||
| { | ||
| Icon: WrappedTiaIcon, | ||
| title: "Wrapped Celestia", | ||
| symbol: "WTIA", | ||
| }, | ||
| { | ||
| Icon: MilkTiaIcon, | ||
| title: "Milk TIA", | ||
| symbol: "milkTIA", | ||
| }, | ||
| { | ||
| Icon: StrideTiaIcon, | ||
| title: "Stride TIA", | ||
| symbol: "stTIA", | ||
| }, | ||
| { | ||
| Icon: UsdcIcon, | ||
| title: "USDC", | ||
| symbol: "USDC", | ||
| }, | ||
| ]; | ||
|
|
||
| export const feeData = [ | ||
| { | ||
| id: 0, | ||
| feePercent: "0.3%", | ||
| text: "Best for most pairs.", | ||
| tvl: "100M", | ||
| selectPercent: "0.3%", | ||
| }, | ||
| { | ||
| id: 1, | ||
| feePercent: "0.5%", | ||
| text: "Best for stable pairs.", | ||
| tvl: "100M", | ||
| selectPercent: "0.5%", | ||
| }, | ||
| { | ||
| id: 2, | ||
| feePercent: "1%", | ||
| text: "Best for high-volatility pairs.", | ||
| tvl: "100M", | ||
| selectPercent: "1%", | ||
| }, | ||
| { | ||
| id: 3, | ||
| feePercent: "1%", | ||
| text: "Best for high-volatility pairs.", | ||
| tvl: "100M", | ||
| selectPercent: "1%", | ||
| }, | ||
| ]; |
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
111 changes: 111 additions & 0 deletions
111
apps/flame-defi/app/pool/components/AreaChartWithRange.tsx
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,111 @@ | ||
| import React from "react"; | ||
| import ReactECharts from "echarts-for-react"; | ||
|
|
||
| const AreaChartWithRange: React.FC = () => { | ||
| const option = { | ||
| backgroundColor: "#071520", // HSL(203, 45%, 4%) converted to hex | ||
| tooltip: { | ||
| trigger: "axis", | ||
| }, | ||
| // We adjust the grid so our chart has some margins and won't clip the axis. | ||
| // The chart itself sits "behind" the dataZoom overlay. | ||
| grid: { | ||
| left: 50, | ||
| right: 30, | ||
| top: 50, | ||
| bottom: 50, | ||
| }, | ||
| xAxis: { | ||
| type: "category", | ||
| boundaryGap: false, | ||
| data: [ | ||
| 120, 132, 101, 134, 90, 230, 210, 180, 222, 150, 210, 300, 250, 400, | ||
| ], | ||
| }, | ||
| yAxis: { | ||
| type: "value", | ||
| splitLine: { show: false }, | ||
| axisLabel: { show: false }, | ||
| }, | ||
| series: [ | ||
| { | ||
| name: "Example Data", | ||
| type: "line", | ||
| smooth: false, | ||
| showSymbol: false, | ||
| areaStyle: { | ||
| color: "rgba(230, 149, 41, 0.2)", | ||
| }, | ||
| lineStyle: { | ||
| color: "rgba(230, 149, 41, 1)", | ||
| }, | ||
| itemStyle: { | ||
| color: "rgba(230, 149, 41, 1)", | ||
| }, | ||
| data: [ | ||
| 120, 132, 101, 134, 90, 230, 210, 180, 222, 150, 210, 300, 250, 400, | ||
| ], | ||
| }, | ||
| ], | ||
| // This dataZoom configuration creates a draggable range‐selector | ||
| // that covers the entire plotting area. We make it semi‐transparent | ||
| // so that the chart is still visible behind it. | ||
| dataZoom: [ | ||
| { | ||
| type: "slider", | ||
| show: true, | ||
| // Fill the full chart area: | ||
| top: 0, | ||
| bottom: 0, | ||
| left: 0, | ||
| right: 0, | ||
| height: "100%", | ||
|
|
||
| // Default range (from 0% to 100% of x‐axis) | ||
| start: 0, | ||
| end: 100, | ||
|
|
||
| // Give it some transparency so the data is visible underneath | ||
| backgroundColor: "rgba(0, 0, 0, 0.1)", | ||
| fillerColor: "rgba(0, 0, 0, 0.1)", | ||
| borderColor: "transparent", | ||
|
|
||
| // Turn off extra details and shadows to keep it looking clean | ||
| showDetail: false, | ||
| showDataShadow: false, | ||
|
|
||
| // Make the handles smaller (default is 100%) | ||
| handleSize: "30%", | ||
|
|
||
| // Hide the top bar | ||
| moveHandleSize: 0, // Hide the move handle | ||
| moveHandleIcon: "M 0 0 V 100", // Vertical line from top to bottom | ||
| moveHandleStyle: { | ||
| opacity: 0, | ||
| }, | ||
|
|
||
| handleStyle: { | ||
| color: "rgba(230, 149, 41, 0.5)", | ||
| borderColor: "rgba(230, 149, 41, 0.5)", | ||
| }, | ||
| emphasis: { | ||
| handleStyle: { | ||
| color: "rgba(230, 149, 41, 1)", | ||
| borderColor: "rgba(230, 149, 41, 1)", | ||
| }, | ||
| }, | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| return ( | ||
| <div style={{ width: "100%", margin: "0 auto" }}> | ||
| <ReactECharts | ||
| option={option} | ||
| style={{ width: "100%", height: "200px" }} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default AreaChartWithRange; |
Oops, something went wrong.