Skip to content

Commit c2cdab1

Browse files
vuonghuuhungvuonghuuhung
authored
Merge pull request #2 from Orbiton-labs/feat/swap-modal-and-memo-input
feat: add MemoDialog component and integrate memo functionality in sw…
2 parents c758cb8 + f580009 commit c2cdab1

File tree

15 files changed

+342
-38
lines changed

15 files changed

+342
-38
lines changed

‎package.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"@orbs-network/ton-access": "^2.3.3",
1717
"@radix-ui/react-avatar": "^1.1.3",
1818
"@radix-ui/react-dialog": "^1.1.6",
19+
"@radix-ui/react-label": "^2.1.2",
1920
"@radix-ui/react-popover": "^1.1.6",
2021
"@radix-ui/react-progress": "^1.1.2",
2122
"@radix-ui/react-select": "^2.1.6",
@@ -61,6 +62,7 @@
6162
"@0no-co/graphqlsp": "^1.12.16",
6263
"@apollo/client": "^3.13.4",
6364
"@apollo/experimental-nextjs-app-support": "^0.11.10",
65+
"@babel/runtime": ">=7.26.10",
6466
"@graphql-codegen/cli": "^5.0.5",
6567
"@graphql-codegen/schema-ast": "^4.1.0",
6668
"@graphql-codegen/typescript-react-apollo": "^4.3.2",
@@ -73,15 +75,14 @@
7375
"@types/react-dom": "^18.3.0",
7476
"@typescript-eslint/parser": "^8.29.0",
7577
"autoprefixer": "^10.4.20",
78+
"cross-spawn": ">=7.0.5",
7679
"eslint": "^8.57.0",
7780
"eslint-config-next": "^14.1.0",
7881
"lodash.keyby": "^4.6.0",
82+
"micromatch": ">=4.0.8",
7983
"postcss": "^8.5.1",
8084
"tailwindcss": "^3.4.17",
81-
"typescript": "^5.5.2",
82-
"cross-spawn": ">=7.0.5",
83-
"@babel/runtime": ">=7.26.10",
84-
"micromatch": ">=4.0.8"
85+
"typescript": "^5.5.2"
8586
},
8687
"packageManager": "pnpm@9.15.0+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c"
8788
}

‎pnpm-lock.yaml‎

Lines changed: 25 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/_assets/globals.css‎

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,30 @@
55
@tailwind utilities;
66

77
@layer base {
8+
9+
@property --gradient-angle {
10+
syntax: "<angle>";
11+
initial-value: 0deg;
12+
inherits: false;
13+
}
14+
15+
@keyframes border-gradient-rotate {
16+
0% {
17+
--gradient-angle: 0deg;
18+
}
19+
100% {
20+
--gradient-angle: 360deg;
21+
}
22+
}
23+
824
body {
925
/* background: var(--tg-theme-secondary-bg-color, white); */
1026
position: relative;
11-
1227
background-image: url('/background.png');
1328
background-size: cover;
1429
background-position: center;
1530
background-repeat: no-repeat;
31+
z-index: -9999999;
1632
}
1733

1834
html,
@@ -49,6 +65,12 @@
4965
--color-yellow-1: hsla(72, 71%, 57%, 1);
5066
--color-navy-1: hsla(251, 78%, 10%, 1);
5167
--color-purple-1: hsla(266, 69%, 63%, 1);
68+
--color-purple-2: hsla(251, 34%, 26%, 1);
69+
--gr-border-1: #052b2f;
70+
--gr-border-2: #073438;
71+
--gr-border-3: #22174F;
72+
--gr-border-4: #836CDE;
73+
--gr-border-5: #B866D2;
5274
}
5375

5476
.theme-black {
@@ -74,10 +96,17 @@
7496
--color-yellow-1: hsla(72, 71%, 57%, 1);
7597
--color-navy-1: hsla(251, 78%, 10%, 1);
7698
--color-purple-1: hsla(266, 69%, 63%, 1);
99+
--color-purple-2: hsla(251, 34%, 26%, 1);
100+
--gr-border-1: #052b2f;
101+
--gr-border-2: #073438;
102+
--gr-border-3: #22174F;
103+
--gr-border-4: #836CDE;
104+
--gr-border-5: #B866D2;
77105
}
78106

79107
* {
80-
font-family: "Michroma", sans-serif !important;
108+
font-family: 'Michroma', sans-serif !important;
109+
81110
--tgui--bg_color: linear-gradient(
82111
180deg,
83112
var(--color-grey-1, hsl(222, 13%, 15%)),
@@ -97,4 +126,4 @@
97126
*:focus {
98127
@apply appearance-none outline-none;
99128
}
100-
}
129+
}

‎src/app/swap/page.tsx‎

Lines changed: 39 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
"use client";
22

3+
import { MemoDialog } from "@/components/MemoDialog/MemoDialog";
34
import { Page } from "@/components/Page";
45
import { PageTitle } from "@/components/PageTitle/PageTitle";
56
import { PairInput } from "@/components/PairInput/PairInput";
67
import {
78
SLIPPAGE_OPTIONS,
8-
SlippageSetting,
9+
SlippageSetting
910
} from "@/components/SlippageSetting/SlippageSetting";
1011
import { SubmitButton } from "@/components/SubmitButton/SubmitButton";
1112
import useDebounce from "@/hooks/useDebounce";
1213
import { Icon24ArrowRotateReverse } from "@/icons/24/arrows-rotate-reverse";
13-
import Backdrop from "@/icons/fixed/backdrop";
1414
import { useSwapStore, useTokenListStore } from "@/store";
1515
import { SwapStatus } from "@/store/types";
1616
import { useTonConnectUI } from "@tonconnect/ui-react";
@@ -31,6 +31,7 @@ export default function SwapPage() {
3131
const resetInputSwap = useSwapStore((state) => state.resetInputSwap);
3232
const swap = useSwapStore((state) => state.swap);
3333
const reload = useSwapStore((state) => state.reload);
34+
const setMemo = useSwapStore((state) => state.setMemo);
3435
const filteredTokens = useTokenListStore((state) => state.filteredTokens);
3536
const displayFilteredTokens = useTokenListStore(
3637
(state) => state.displayFilteredTokens
@@ -67,11 +68,22 @@ export default function SwapPage() {
6768

6869
return (
6970
<Page back={false}>
70-
<div className="flex flex-col px-2 sm:px-4 gap-1 items-center w-full">
71-
<div className="relative w-full max-w-[480px] mx-auto">
72-
{/* Backdrop with lower z-index */}
73-
<Backdrop className="absolute left-1/2 -translate-x-1/2 -translate-y-28 w-[320px] h-[650px] sm:w-[700px] sm:h-[750px] md:w-[800px] md:h-[800px] lg:w-[900px] lg:h-[850px] xl:w-[972px] xl:h-[910px]" />
74-
<div className="relative top-5 md:top-20 w-full flex flex-col gap-3 sm:gap-4 px-3 sm:px-4 py-4 sm:py-6 bg-navy1 rounded-3xl">
71+
<div className="flex flex-col px-4 sm:px-4 gap-1 items-center w-full">
72+
<div className="relative max-w-[400px] top-5 md:top-20 w-full rounded-2xl">
73+
<div className="flex flex-col gap-3 sm:gap-4 px-3 sm:px-4 py-4 sm:py-6
74+
bg-navy1 rounded-2xl relative
75+
before:rounded-2xl before:absolute before:-inset-1
76+
before:bg-[conic-gradient(from_var(--gradient-angle),var(--gr-border-3),var(--gr-border-4),var(--gr-border-5),var(--gr-border-4),var(--gr-border-3))]
77+
before:animate-[border-gradient-rotate_3s_linear_infinite]
78+
before:content-['']
79+
before:-z-[1]
80+
after:rounded-2xl after:absolute after:-inset-1
81+
after:blur-xl
82+
after:bg-[conic-gradient(from_var(--gradient-angle),var(--gr-border-3),var(--gr-border-4),var(--gr-border-5),var(--gr-border-4),var(--gr-border-3))]
83+
after:animate-[border-gradient-rotate_3s_linear_infinite]
84+
after:content-['']
85+
after:-z-[1]
86+
">
7587
<PageTitle
7688
title="Swap"
7789
after={
@@ -113,20 +125,28 @@ export default function SwapPage() {
113125
canSwapOrder={true}
114126
disable1={true}
115127
/>
116-
<SubmitButton
117-
onClick={async () => {
118-
if (status === SwapStatus.CONNECT_WALLET) {
119-
await tonConnectUI.openModal()
120-
return;
121-
}
122-
128+
<MemoDialog
129+
setMemo={setMemo}
130+
onSubmit={async () => {
123131
await swap();
124132
}}
125-
isLoading={status === 'SWAPPING' || status === 'FINDING_ROUTES'}
126-
isDisabled={isButtonDisabled()}
127-
error={error || undefined}
128-
content={buttonMessage}
129-
/>
133+
trigger={<SubmitButton
134+
onClick={async () => { }}
135+
136+
// onClick={async () => {
137+
// if (status === SwapStatus.CONNECT_WALLET) {
138+
// await tonConnectUI.openModal()
139+
// return;
140+
// }
141+
142+
// await swap();
143+
// }}
144+
isLoading={status === 'SWAPPING' || status === 'FINDING_ROUTES'}
145+
isDisabled={isButtonDisabled()}
146+
error={error || undefined}
147+
content={buttonMessage}
148+
/>} />
149+
130150
</div>
131151
</div>
132152

‎src/components/BottomNav.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export function BottomNav() {
5252
className={`${selected
5353
? "bg-gradient-to-b from-green1 via-green1 to-green2 bg-clip-text text-transparent"
5454
: ""
55-
} text-xs`}
55+
} text-sm`}
5656
>
5757
{text}
5858
</span>

‎src/components/Header/Header.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -215,13 +215,10 @@ export function Header({ isFullScreen }: HeaderProps): React.ReactElement {
215215
: "pt-4 sm:pt-6 md:pt-8"
216216
} px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 w-full max-w-screen-2xl mx-auto relative z-50`}
217217
>
218-
<div className={`flex items-center justify-between w-full ${
219-
// Conditionally add border only on mobile screens (shown by default, hidden on md and larger)
220-
'border-b-[1px] border-b-grey7 md:border-b-0'
221-
} pt-1 pb-1 sm:pt-1.5 sm:pb-1.5 md:pt-2 md:pb-2`}>
218+
<div className={`flex items-center justify-between w-full pt-1 pb-1 sm:pt-1.5 sm:pb-1.5 md:pt-2 md:pb-2`}>
222219
<div className="flex items-center gap-1 sm:gap-2 lg:w-1/5">
223220
<Logo className="w-10 h-10 sm:w-10 sm:h-10 md:w-12 md:h-12" />
224-
<span className="text-lg sm:text-lg md:text-xl lg:text-2xl text-white3">Orbiton</span>
221+
<span className="pl-1 text-lg sm:text-lg md:text-xl lg:text-2xl text-white3">Orbiton</span>
225222
</div>
226223

227224
{/* Show navigation on md screens and larger */}

‎src/components/MemoDialog/MemoDialog.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { IconClose } from "@/icons/fixed/close";
2+
import { FC } from "react";
3+
import { SubmitButton } from "../SubmitButton/SubmitButton";
4+
import { Dialog, DialogClose, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
5+
import { Input } from "../ui/input";
6+
import { Label } from "../ui/label";
7+
8+
export interface MemoDialogProps {
9+
trigger: React.ReactNode;
10+
setMemo: (memo: string) => void;
11+
onSubmit: () => Promise<void>;
12+
}
13+
14+
export const MemoDialog: FC<MemoDialogProps> = ({ trigger, setMemo, onSubmit }) => {
15+
return (
16+
<Dialog>
17+
<DialogTrigger asChild>
18+
{trigger}
19+
</DialogTrigger>
20+
<DialogContent aria-describedby={undefined} className="sm:max-w-[425px] bg-grey3 border border-grey7">
21+
<DialogHeader className="border-b border-grey7 pb-5">
22+
<DialogTitle className="text-white2 text-2xl">Special Event Code</DialogTitle>
23+
<DialogClose>
24+
<IconClose className="absolute right-6 top-6" />
25+
</DialogClose>
26+
</DialogHeader>
27+
<div className="flex flex-col gap-4">
28+
<Label htmlFor="name" className="text-white2 text-sm">
29+
Special Event Code (Optional):
30+
</Label>
31+
<Input className="bg-purple2 border-none focus:ring-transparent" id="name" placeholder="Enter your memo" onChange={(e) => setMemo(e.target.value)} />
32+
</div>
33+
<DialogClose>
34+
<SubmitButton onClick={onSubmit} content="Confirm Swap" />
35+
</DialogClose>
36+
</DialogContent>
37+
</Dialog>
38+
);
39+
};

‎src/components/SelectToken/SelectToken.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export const SelectToken: FC<SelectTokenProps> = ({
6363
</DrawerTrigger>
6464
<DrawerContent
6565
aria-describedby={undefined}
66-
className="bg-black3 rounded-t-2xl max-h-[86vh] overflow-hidden border-none mb-10"
66+
className="bg-black3 rounded-t-2xl max-h-[86vh] min-h-[86vh] overflow-hidden border-none mb-10"
6767
>
6868
<DrawerHeader className="flex justify-center items-center mx-4 px-2 py-5">
6969
<div>

‎src/components/SubmitButton/SubmitButton.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,16 @@ export const SubmitButton: FC<SubmitButtonProps> = ({
2323
<Button
2424
onClick={onClick}
2525
disabled={isLoading || isDisabled}
26-
className="w-full bg-gradient-to-b from-green1 to-green2 py-8 text-base text-black2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
26+
className="w-full bg-gradient-to-b from-green1 to-green2 py-8 text-xl font-bold text-black2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
2727
>
2828
{isLoading ? (
2929
<div className="flex items-center justify-center gap-2 w-full">
30-
<LoaderCircleIcon className="animate-spin" />
30+
<LoaderCircleIcon
31+
style={{
32+
width: "24px",
33+
height: "24px",
34+
}}
35+
className="animate-spin" />
3136
<span>Processing</span>
3237
</div>
3338
) : error ? (

0 commit comments

Comments
 (0)