102 | {message.name === "on_chat_start" ? (
103 |
161 | );
162 | };
163 | // END Chainlit Integration--------------------------------------------------------
164 |
165 | useEffect(() => {
166 | const fetchAndExecute = async () => {
167 | if (messages.length > 0) {
168 | const asw_on_last_qn = messages[messages.length - 1].steps?.[0]?.steps?.[0]?.output;
169 | const prefix = asw_on_last_qn?.split("--")[0];
170 | console.log("msgs: ", messages)
171 |
172 | if (prefix === "Execution") {
173 | const token_name = asw_on_last_qn?.split("--")[1];
174 | const baseMint = asw_on_last_qn?.split("--")[2];
175 | const token_amount = asw_on_last_qn?.split("--")[3];
176 | if (token_name == "wallet") {
177 | let assetsInfo = await getMyTokens(wallet.publicKey!, connection);
178 | console.log('assets: ', assetsInfo)
179 | setAssets(assetsInfo);
180 | }
181 | else if (token_name && baseMint && token_amount) {
182 | try {
183 | // Await the transaction retrieval
184 | const tx = await getBuyTxWithJupiter(wallet, new PublicKey(baseMint), Number(token_amount), connection);
185 | console.log("tx", tx)
186 |
187 | // Check if tx is null before proceeding
188 | if (tx) {
189 |
190 | const latestBlockhash = await connection.getLatestBlockhash();
191 | tx.message.recentBlockhash = latestBlockhash.blockhash;
192 | // wallet.signTransaction(walletSendTx);
193 | console.log(
194 | (await connection.simulateTransaction(tx, undefined)).value
195 | .logs
196 | );
197 |
198 | const txSig = await wallet.sendTransaction(tx, connection, {
199 | skipPreflight: true,
200 | preflightCommitment: "confirmed",
201 | });
202 | console.log('Transaction Signature:', txSig);
203 | const res = await connection.confirmTransaction(txSig, "confirmed");
204 | console.log("res", res);
205 |
206 | setTxSig(txSig);
207 | // Optionally handle txSig or log it
208 |
209 | } else {
210 | console.error('Transaction could not be created.');
211 | }
212 | } catch (error) {
213 | console.error('Error executing transaction:', error);
214 | }
215 | }
216 | }
217 | }
218 | };
219 |
220 | fetchAndExecute();
221 | }, [messages]);
222 |
223 | return (
224 |
104 |
110 | ) : (
111 | <>
112 | AI
105 |
106 |
109 | {message.steps?.[0]?.output}
107 | {date}
108 |
113 |
119 | {/* response to the user prompt */}
120 | {message.steps?.[0]?.steps?.[0]?.output !== undefined && (
121 | <>
122 | {message.steps?.[0]?.steps?.[0]?.output.split("--")[0] !== "Execution" ?
123 | (You
114 |
115 |
118 | {(message.output)}
116 | {date}
117 |
124 |
) :
130 | (
131 | AI
125 |
126 |
129 | {message.steps?.[0]?.steps?.[0]?.output}
127 | {date}
128 |
132 |
154 | )
155 | }
156 |
157 | )}
158 |
159 | )}
160 | AI
133 |
134 | {txSig.length !== 0 && assets.length === 0 && (
135 |
153 |
136 |
139 | )}
140 | {txSig.length === 0 && assets.length === 0 && (
141 | Success in buy transaction: https://solscan.io/tx/{txSig}
137 | {date}
138 |
142 |
145 | )}
146 | {txSig.length === 0 && assets.length !== 0 && (
147 | Transaction failed or no assets are there in this wallet.
143 | {date}
144 |
148 |
151 | )}
152 | {assets}
149 | {date}
150 |
225 |
283 | );
284 | };
285 |
286 |
--------------------------------------------------------------------------------
/src/pages/spinner/index.module.scss:
--------------------------------------------------------------------------------
1 | .body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | width: 100%;
6 | min-height: calc(100vh - 150px);
7 | .wrapper {
8 | margin: auto;
9 | }
10 | }
--------------------------------------------------------------------------------
/src/pages/spinner/index.tsx:
--------------------------------------------------------------------------------
1 | import PropagateLoader from "react-spinners/PropagateLoader";
2 | import S from "./index.module.scss";
3 |
4 | function Spinner() {
5 |
6 | return (
7 |
226 |
236 | VaLAI
227 |
233 |
234 |
235 |
237 |
281 |
238 |
280 |
239 |
250 |
240 | 
241 |
242 |
243 | {/*
246 | AD
244 | Jason Admin
*/}
245 |
247 | 
248 |
249 |
251 | {messages.map((message) => renderMessage(message))}
252 |
253 |
254 |
279 |
255 | 
256 |
257 |
258 | setInputValue(e.target.value)}
267 | onKeyUp={(e) => {
268 | if (e.key === "Enter") {
269 | handleSendMessage();
270 | }
271 | }
272 | }
273 | />
274 |
275 |
278 |
8 |
10 | );
11 | }
12 |
13 | export default Spinner;
--------------------------------------------------------------------------------
/src/styles/globalStyles.scss:
--------------------------------------------------------------------------------
1 | $breakpoints: (
2 | "xxm": 516px,
3 | "xm": 540px,
4 | "sxm": 727px,
5 | "sm": 810px,
6 | "msm": 850px,
7 | "md": 1180px,
8 | "lg": 1280px,
9 | "xl": 1440px,
10 | "xxl": 1920px,
11 | );
12 |
13 | @mixin breakpoint($name) {
14 | @media (max-width: map-get($breakpoints, $name)) {
15 | @content;
16 | }
17 | }
18 |
19 | @mixin flexAlignCenter {
20 | display: flex;
21 | align-items: center;
22 | }
23 |
24 | @mixin flexJustifyCenter {
25 | display: flex;
26 | justify-content: center;
27 | }
28 |
29 | @mixin flexCenter {
30 | @include flexAlignCenter;
31 | justify-content: center;
32 | }
33 |
34 | @mixin sectionPadding {
35 | padding: 40px 0 60px;
36 | }
37 |
38 | @mixin container {
39 | max-width: 1440px;
40 | margin: auto;
41 | }
42 |
--------------------------------------------------------------------------------
/src/styles/globalStyles.ts:
--------------------------------------------------------------------------------
1 | import { createGlobalStyle } from "styled-components";
2 |
3 | export const GlobalStyles = createGlobalStyle`
4 | *{
5 | margin: 0;
6 | padding: 0;
7 | box-sizing: border-box;
8 | font-family: "Roboto", sans-serif;
9 | /* user-select: none; */
10 | }
11 |
12 | body {
13 | background-color: ${({ theme }) => theme.body};
14 | color: ${({ theme }) => theme.text};
15 | font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
16 | }
17 |
18 | #root {
19 | overflow-x: hidden;
20 | max-width: 100vw;
21 | }
22 | `;
23 |
24 | export const lightTheme = {
25 | body: "#fff",
26 | };
27 |
28 | export const darkTheme = {
29 | body: "#000",
30 | };
31 |
--------------------------------------------------------------------------------
/src/styles/resource.scss:
--------------------------------------------------------------------------------
1 | @use "@styles/globalStyles.scss" as G;
2 |
3 | .mobile-menu {
4 | position: fixed;
5 | z-index: 80;
6 | width: 0;
7 | height: 100vh;
8 | top: 70px;
9 |
10 | background-color: rgba($color: rgb(255, 255, 255), $alpha: 0.3);
11 | @media (max-width: 1280px) {
12 | left: 275px;
13 | }
14 | @media (max-width: 1180px) {
15 | left: 0px;
16 | }
17 |
18 | // -webkit-backdrop-filter: blur(10px); /* Blur effect for Chrome, Safari, and Opera */
19 | // backdrop-filter: blur(10px); /* Blur effect for other browsers */
20 | // transition: width 0.1s ease-in-out;
21 |
22 | &.active {
23 | display: flex;
24 | width: 250px;
25 | @media (min-width: 1280px) {
26 | display: none;
27 | }
28 | }
29 |
30 | .side {
31 | width: 100%;
32 | display: flex;
33 | flex-direction: column;
34 | overflow: hidden;
35 |
36 | }
37 | }
38 | .app-mobile-menu {
39 | position: fixed;
40 | z-index: 80;
41 | width: 0;
42 | height: 100vh;
43 | top: 0px;
44 | left: 0px;
45 |
46 | background-color: rgba($color: rgb(255, 255, 255), $alpha: 1);
47 | // -webkit-backdrop-filter: blur(10px); /* Blur effect for Chrome, Safari, and Opera */
48 | // backdrop-filter: blur(10px); /* Blur effect for other browsers */
49 | transition: width 0.1s ease-in-out;
50 |
51 | &.active {
52 | display: flex;
53 | width: 275px;
54 | @media (min-width: 1180px) {
55 | display: none;
56 | }
57 | }
58 |
59 | .side {
60 | width: 100%;
61 | display: flex;
62 | flex-direction: column;
63 | overflow: hidden;
64 |
65 | }
66 | }
67 |
68 | #appHamburger {
69 | margin-left: 10px;
70 | .pad {
71 | position: sticky;
72 | top: 20px;
73 | > div {
74 | width: 30px;
75 | height: 30px;
76 | align-items: center;
77 | justify-content: center;
78 | border-radius: 4px;
79 | cursor: pointer;
80 | display: none;
81 |
82 | @include G.breakpoint("md") {
83 | display: flex;
84 | }
85 | }
86 | }
87 | }
88 | #hamburger {
89 | margin-left: 10px;
90 | .pad {
91 | position: sticky;
92 | top: 20px;
93 | > div {
94 | width: 30px;
95 | height: 30px;
96 | align-items: center;
97 | justify-content: center;
98 | border-radius: 4px;
99 | cursor: pointer;
100 | display: none;
101 |
102 | @include G.breakpoint("lg") {
103 | display: flex;
104 | }
105 | }
106 | }
107 | }
--------------------------------------------------------------------------------
/src/utils/routerUtils.tsx:
--------------------------------------------------------------------------------
1 | import { Playground } from "@pages/playground";
2 | import { Route, Routes} from "react-router-dom";
3 |
4 | export const AppRouter = () => {
5 | return (
6 |