/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import ReactMarkdown from "https://esm.sh/react-markdown"; import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter"; import { vscDarkPlus } from "https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism"; function App() { const [input, setInput] = useState(""); const [response, setResponse] = useState(""); const [loading, setLoading] = useState(false); const [language, setLanguage] = useState("typescript"); useEffect(() => { const savedLanguage = localStorage.getItem("codeLanguage"); if (savedLanguage) { setLanguage(savedLanguage); } }, []); const handleLanguageChange = (e: React.ChangeEvent) => { const newLanguage = e.target.value; setLanguage(newLanguage); localStorage.setItem("codeLanguage", newLanguage); }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setLoading(true); try { const res = await fetch("/generate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt: input, language }), }); const data = await res.json(); setResponse(data.response); } catch (error) { console.error("Error:", error); setResponse("An error occurred while generating the response."); } setLoading(false); }; return (

Solana Transaction Code Generator

setInput(e.target.value)}
          placeholder="Describe the Solana transaction you want to create..."
          rows={4}
        />
        <div className="form-actions">
          <select value={language} onChange={handleLanguageChange} className="language-select">
            <option value="typescript">TypeScript</option>
            <option value="python">Python</option>
          </select>
          <button type="submit" disabled={loading}>
            {loading ? "Generating..." : "Generate Code"}
          </button>
        </div>
      </form>
      {response && (
        <div className="response-container">
          <h2>Generated Response:</h2>
          <ReactMarkdown
            children={response}
            components={{
              code({ node, inline, className, children, ...props }) {
                const match = /language-(\w+)/.exec(className || "");
                return !inline && match
                  ? (
                    <SyntaxHighlighter
                      {...props}
                      children={String(children).replace(/\n$/, "")}
                      style={vscDarkPlus}
                      language={match[1]}
                      PreTag="div"
                    />
                  )
                  : (
                    <code {...props} className={className}>
                      {children}
                    </code>
                  );
              },
            }}
          />
        </div>
      )}
      <footer>
        <a href={import.meta.url.replace("esm.town", "val.town")}>View Source</a>
      </footer>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}

if (typeof document !== "undefined") {
  client();
}

export default async function server(request: Request): Promise<Response> {
  const { OpenAI } = await import("https://esm.town/v/std/openai");
  const openai = new OpenAI();

const url = new URL(request.url);

if (request.method === "POST" && url.pathname === "/generate") {
    const { prompt, language } = await request.json();

try {
      const completion = await openai.chat.completions.create({
        model: "gpt-4o",
        messages: [
          {
            role: "system",
            content:
              `You are an expert in Solana blockchain development. \nGenerate ${language} code for Solana transactions based on the user's description. \nAlways use Versioned Transactions in your code examples. \nSome important notes: \n(1) The transactions are not meant to be executed directly, they are going to be processed later, and because of this... \n(2) the recentBlockhash should be hardcoded to "11111111111111111111111111111111", \n(3) the feePayer as well should be hardcoded to "11111111111111111111111111111111", \n(4) they dont need to include the sending wallet in the signers array nor have that wallet sign it -- but if the tx requires signatures from other accounts then those should be included. \nThe instructions should include code on how to serialize the transaction into a base58 string to be sent elsewhere. \n\n\nProvide your response in markdown format, including code blocks where appropriate.`,
          },
          { role: "user", content: `Generate ${language} code for the following Solana transaction: ${prompt}` },
        ],
        max_tokens: 1000,
      });

const responseData = completion.choices[0].message.content;

return new Response(JSON.stringify({ response: responseData }), {
        headers: { "Content-Type": "application/json" },
      });
    } catch (error) {
      console.error("Error generating response:", error);
      return new Response(
        JSON.stringify({
          response: "An error occurred while generating the response.",
        }),
        {
          headers: { "Content-Type": "application/json" },
          status: 500,
        },
      );
    }
  }

return new Response(
    `
    <html>
      <head>
        <title>Solana Transaction Code Generator</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `,
    {
      headers: {
        "content-type": "text/html",
      },
    },
  );
}

const css = `
:root {
  --solana-purple: #9945FF;
  --solana-green: #14F195;
  --solana-black: #000000;
  --solana-white: #FFFFFF;
}

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  color: var(--solana-white);
  margin: 0;
  padding: 0;
  background-color: var(--solana-black);
  background-image: linear-gradient(45deg, #14F195 25%, #9945FF 25%, #9945FF 50%, #14F195 50%, #14F195 75%, #9945FF 75%, #9945FF 100%);
  background-size: 56.57px 56.57px;
  min-height: 100vh;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(20, 241, 149, 0.3);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

h1 {
  font-size: 2.5em;
  color: var(--solana-green);
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.meme-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--solana-purple);
}

h2 {
  color: var(--solana-purple);
  margin-top: 30px;
}

textarea {
  width: 100%;
  padding: 15px;
  margin-bottom: 20px;
  border: 2px solid var(--solana-purple);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--solana-white);
  font-size: 16px;
  resize: vertical;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.language-select {
  padding: 10px;
  font-size: 16px;
  background-color: var(--solana-purple);
  color: var(--solana-white);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

button {
  background-color: var(--solana-green);
  color: var(--solana-black);
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  transition: all 0.3s ease;
}

button:hover {
  background-color: var(--solana-purple);
  color: var(--solana-white);
  transform: translateY(-2px);
}

button:disabled {
  background-color: #555;
  cursor: not-allowed;
}

.response-container {
  margin-top: 30px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

pre {
  background-color: #1E1E1E;
  border: 1px solid var(--solana-purple);
  border-radius: 8px;
  padding: 15px;
  overflow-x: auto;
}

code {
  font-family: 'Roboto Mono', monospace;
}

footer {
  margin-top: 40px;
  text-align: center;
  font-size: 14px;
}

footer a {
  color: var(--solana-green);
  text-decoration: none;
  transition: color 0.3s ease;
}

footer a:hover {
  color: var(--solana-purple);
  text-decoration: underline;
}
`;</article></body></html>

crossmintSolanaTxGenerator