feat: add /clarity page

example-nextjs/components/Navbar.tsx

@@ -33,6 +33,11 @@ export default function Navbar({ current }) {
         href: '/ts',
         current: current === 'TypeScript',
       },
+      {
+        name: 'Clarity',
+        href: '/clarity',
+        current: current === 'Clarity',
+      },
     ],
     [current]
   )

example-nextjs/package.json

@@ -20,7 +20,8 @@
     "react-dom": "17.0.2",
     "@run-wasm/run-wasm": "link:../packages/run-wasm",
     "@run-wasm/ts": "link:../packages/run-wasm-ts",
-    "@run-wasm/python": "link:../packages/run-wasm-python"
+    "@run-wasm/python": "link:../packages/run-wasm-python",
+    "@run-wasm/clarity": "link:../packages/run-wasm-clarity"
   },
   "devDependencies": {
     "@types/react": "17.0.21",

example-nextjs/pages/clarity.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { createClarityClient } from '@run-wasm/clarity'
+import Script from 'next/script'
+import CodeRunnerUI from '../components/CodeRunnerUI'
+import { GetServerSidePropsContext } from 'next'
+
+// REPL-only code to mint STX to the tx-sender address
+const initCode = '::mint_stx ST000000000000000000002AMW42H 1000000'
+
+// Initial code demos an STX transfer to some address
+const initialCode = `(define-constant someone 'ST1HTBVD3JG9C05J7HBJTHGR0GGW7KXW28M5JS8QE)
+
+;; this address has starting balance of 0
+(print (stx-get-balance someone))
+
+;; transfer it some STX
+(stx-transfer? u1000 tx-sender someone)
+
+;; check new balance
+(stx-get-balance someone)`
+
+type Props = {
+  urlPrefix: string
+}
+
+function ClarityPage({ urlPrefix }: Props) {
+  // Copied clarity_repl_bg.wasm from clarity-repl module to public/ directory
+  const url = `${urlPrefix}/clarity_repl_bg.wasm`
+  const clarityClient = createClarityClient(new URL(url), initCode)
+
+  async function runCode(code: string) {
+    // Reset the client each run
+    await clarityClient.initialise()
+    const output = await clarityClient.run(code)
+    return output
+  }
+
+  return (
+    <>
+      <Script src="https://kit.fontawesome.com/137d63e13e.js" />
+      <CodeRunnerUI
+        initialCode={initialCode}
+        languageLabel="Clarity"
+        defaultLanguage="clarity"
+        onRunCode={runCode}
+        isLoading={!clarityClient}
+      ></CodeRunnerUI>
+    </>
+  )
+}
+
+export default ClarityPage
+
+export function getServerSideProps({ req }: GetServerSidePropsContext) {
+  // x-forwarded-proto should be https when deployed
+  const protocol =
+    req.headers['x-forwarded-proto'] ||
+    req.headers.referer?.split('://')[0] ||
+    'http'
+  const host = req.headers.host
+
+  return {
+    props: {
+      urlPrefix: `${protocol}://${host}`,
+    },
+  }
+}

example-nextjs/tsconfig.json

@@ -12,7 +12,8 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "incremental": true
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]

example-nextjs/yarn.lock

@@ -238,6 +238,10 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@run-wasm/clarity@link:../packages/run-wasm-clarity":
+  version "0.0.0"
+  uid ""
+
 "@run-wasm/python@link:../packages/run-wasm-python":
   version "0.0.0"
   uid ""
@@ -795,6 +799,11 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+clarity-repl@^0.25.0:
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/clarity-repl/-/clarity-repl-0.25.0.tgz#3fbe9b38d989dec80c94f7dda808d21844475a41"
+  integrity sha512-/wLioL/6X3ZDdzi30AvavNkyL/TyKUywwuTtLs1qALOM479q6TkYPCZ2cLPUHD9eL2TQ79+4m6HQ/GeH6OEppA==
+
 classnames@2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"