Merge pull request #2 from YanYuanFE/feature

feat: Add cairo syntax highlighting and code snippets

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.3.1",
     "@monaco-editor/react": "^4.6.0",
+    "@openpanel/nextjs": "0.0.9-beta",
     "@next/third-parties": "^14.2.10",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.4",
@@ -62,7 +63,7 @@
     "react-hot-toast": "^2.4.1",
     "react-router-dom": "^6.15.0",
     "react-use": "^17.4.0",
-    "starknet": "^5.24.3",
+    "starknet": "^7.0.0",
     "swr": "^2.2.2",
     "tailwind-merge": "^1.14.0",
     "tailwind-variants": "^0.1.18",

src/app/(main)/about/page.tsx

@@ -1,13 +1,16 @@
+import { ExternalLink } from 'lucide-react';
 
-
-export default function About() {
+export default function AboutPanel() {
     return (
-        <div className="px-4 pt-6 lg:px-8">
+        <div className="px-4 pt-6 lg:px-8 w-full">
+            <h1 className="text-xl font-bold text-center py-6">
+                Astro Editor
+            </h1>
             <h2 className={'text-xl font-bold'}>About Astro Editor</h2>
             <p>A cutting-edge, online Integrated Development Environment (IDE) built on top of WASM-Cairo.
                 All-JavaScript-or-WASM environment, free of dependencies on backend servers and local
                 setups. </p>
-            <h2 className={'text-xl font-bold mt-4'}>About WASM-Cairo Project</h2>
+            <h2 className={'text-xl font-bold mt-4 flex gap-2 items-center'}>About WASM-Cairo Project <a href='https://wasm-cairo-landing.vercel.app/'><ExternalLink size={16} /></a></h2>
             <p>A suite of development tools and an environment for Cairo 1, all based on WebAssembly.</p>
             <h2 className={'text-xl font-bold mt-4'}>About Me</h2>
             <p>I&apos;m <a href="https://twitter.com/cryptonerdcn">cryptonedcn</a>, from <a

src/app/(main)/components/DeployPanel.tsx

@@ -0,0 +1,61 @@
+import ConnectModal from "@/components/ConnectModal";
+import {useAccount} from "@starknet-react/core";
+import {useContractStore} from "@/stores/contracts";
+import {Button} from "@/components/ui/button";
+import DisconnectModal from "@/components/DisconnectModal";
+import {Textarea} from "@/components/ui/textarea";
+import {useState} from "react";
+import {hash} from "starknet";
+
+
+export const DeployPanel = () => {
+    const { account, address } = useAccount();
+    const { contracts } = useContractStore();
+    const [v, setV] = useState('');
+
+    const [casm, setCasm] = useState('');
+
+    const current = contracts['hello.cairo'];
+
+    console.log(contracts, 'cc')
+
+    const handleDeclare = async () => {
+        try {
+            console.log(current, 'current')
+            const data = JSON.parse(v);
+            const classHash = hash.computeContractClassHash(data)
+            const compiledClassHash = hash.computeCompiledClassHash(JSON.parse(casm))
+            const res = await account?.declare({
+                // contract: current?.sierra,
+                // classHash: current?.classHash,
+                contract: data, //current?.sierra,
+                classHash: classHash,
+                compiledClassHash: compiledClassHash,
+            }, {
+                maxFee: 3e18
+            });
+            console.log(res, 'res');
+        } catch (e) {
+            console.error(e);
+        }
+    }
+    return (
+        <div className="p-6 flex-[0_0_280px]">
+            <div className={'flex justify-between items-center'}>
+                <div className={'text-lg font-bold'}>Deploy</div>
+                <div>
+                    {address ? <DisconnectModal/> : <ConnectModal/>}
+                </div>
+            </div>
+            <div className="space-y-6">
+                <div className={'mt-8'}>
+                    <Button onClick={handleDeclare}>Declare</Button>
+                </div>
+
+                <Textarea value={v} onChange={e => setV(e.target.value)}/>
+
+                <Textarea value={casm} onChange={e => setCasm(e.target.value)}/>
+            </div>
+        </div>
+    )
+}