better sandpack setup

coinbase · Aug 5, 2024 · 0613541 · 0613541
1 parent 0e94e11
commit 0613541
Show file tree

Hide file tree

Showing 16 changed files with 145 additions and 110 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 /node_modules
 /docs/dist
+/generated
diff --git a/docs/codeStrings/static/requestAccounts.ts b/docs/codeStrings/static/requestAccounts.ts
diff --git a/docs/components/sandpack/RequestAccountsHTML.tsx b/docs/components/sandpack/RequestAccountsHTML.tsx
@@ -0,0 +1,14 @@
+import { Sandpack } from "@codesandbox/sandpack-react";
+import { staticRequestAccounts, staticRequestAccountsScript } from "../../../generated/sandpackFiles";
+
+export default function RequestAccountsHTML() {
+  return (
+    <Sandpack
+      template="static"
+      files={{
+        "index.html": staticRequestAccounts,
+        "app.js": staticRequestAccountsScript,
+      }}
+    />
+  );
+}
diff --git a/...s/sandpack/react/RequestAccountsReact.tsx → ...ponents/sandpack/RequestAccountsReact.tsx b/...s/sandpack/react/RequestAccountsReact.tsx → ...ponents/sandpack/RequestAccountsReact.tsx
@@ -1,8 +1,5 @@
-"use client";
 import { Sandpack } from "@codesandbox/sandpack-react";
-
-import config from "../../../codeStrings/react/config";
-import requestAccountsApp from "../../../codeStrings/react/requestAccounts";
+import { reactConfig, reactRequestAccounts } from "../../../generated/sandpackFiles";
 
 export default function RequestAccountsReact() {
   return (
@@ -14,8 +11,8 @@ export default function RequestAccountsReact() {
         },
       }}
       files={{
-        "/App.js": requestAccountsApp,
-        "/config.js": config,
+        "App.js": reactRequestAccounts,
+        "config.js": reactConfig,
       }}
     />
   );

diff --git a/docs/codeStrings/react/requestAccounts.ts → .../sandpack/files/react/RequestAccounts.jsx b/docs/codeStrings/react/requestAccounts.ts → .../sandpack/files/react/RequestAccounts.jsx
@@ -1,5 +1,5 @@
-const requestAccountsApp = `import {sdk} from "./config";
-import {useState} from "react";
+import { useState } from "react";
+import { sdk } from "./config";
 
 export default function App() {
   const [address, setAddress] = useState(undefined);
@@ -8,18 +8,18 @@ export default function App() {
   const handleClick = async () => {
     const accounts = await provider.request({ method: "eth_requestAccounts" });
     setAddress(accounts[0]);
-  }
+  };
 
   return (
-  <>
-    {!address && <button
-      onClick={handleClick}
-    >
-      Connect
-    </button>}
-    {address && <p>Connected address: {address}</p>}
-  </>
+    <>
+      {!address && (
+        <button
+          onClick={handleClick}
+        >
+          Connect
+        </button>
+      )}
+      {address && <p>Connected address: {address}</p>}
+    </>
   );
-}`;
-
-export default requestAccountsApp;
+}
diff --git a/docs/codeStrings/react/config.ts → ...components/sandpack/files/react/config.js b/docs/codeStrings/react/config.ts → ...components/sandpack/files/react/config.js
@@ -1,10 +1,8 @@
-const config = `import { CoinbaseWalletSDK } from "@coinbase/wallet-sdk";
+import { CoinbaseWalletSDK } from "@coinbase/wallet-sdk";
 
 const baseSepoliaChainId = 84532;
 
 export const sdk = new CoinbaseWalletSDK({
   appName: "My App Name",
   appChainIds: [baseSepoliaChainId],
-})`;
-
-export default config;
+});
diff --git a/docs/components/sandpack/files/static/requestAccounts.html b/docs/components/sandpack/files/static/requestAccounts.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Connect to Coinbase Wallet</title>
+    <script src="app.js" type="module"></script>
+  </head>
+  <body>
+    <div id="app">
+      <button id="connectButton">Connect</button>
+      <p id="connectedAddress" style="display: none;">
+        Connected address: <span id="address"></span>
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/docs/components/sandpack/files/static/requestAccountsScript.js b/docs/components/sandpack/files/static/requestAccountsScript.js
@@ -0,0 +1,32 @@
+import CoinbaseWalletSDK from "https://esm.sh/@coinbase/wallet-sdk";
+
+document.addEventListener("DOMContentLoaded", () => {
+  const baseSepoliaChainId = 84532;
+
+  const coinbaseWallet = new CoinbaseWalletSDK({
+    appName: "My App Name",
+    appChainIds: [baseSepoliaChainId], // Replace with your chain IDs if needed
+  });
+
+  const provider = coinbaseWallet.makeWeb3Provider({ options: "smartWalletOnly" });
+
+  const connectButton = document.getElementById("connectButton");
+  const connectedAddressParagraph = document.getElementById("connectedAddress");
+  const addressSpan = document.getElementById("address");
+
+  // Event listener for the connect button
+  connectButton.addEventListener("click", async () => {
+    try {
+      // Request accounts from the provider
+      const accounts = await provider.request({ method: "eth_requestAccounts" });
+      if (accounts.length > 0) {
+        // Update the UI to show the connected address
+        addressSpan.textContent = accounts[0];
+        connectedAddressParagraph.style.display = "block";
+        connectButton.style.display = "none";
+      }
+    } catch (error) {
+      console.error("Error connecting to Coinbase Wallet:", error);
+    }
+  });
+});
diff --git a/docs/components/sandpack/static/RequestAccountsHTML.tsx b/docs/components/sandpack/static/RequestAccountsHTML.tsx
diff --git a/docs/html/test.html b/docs/html/test.html
diff --git a/docs/js/test.js b/docs/js/test.js
diff --git a/docs/pages/sdk/CoinbaseWalletProvider/request/eth_requestAccounts.mdx b/docs/pages/sdk/CoinbaseWalletProvider/request/eth_requestAccounts.mdx
@@ -1,5 +1,5 @@
-import RequestAccountsReact from '../../../../components/sandpack/react/RequestAccountsReact';
-import RequestAccountsHTML from '../../../../components/sandpack/static/RequestAccountsHTML';
+import RequestAccountsReact from '../../../../components/sandpack/RequestAccountsReact';
+import RequestAccountsHTML from '../../../../components/sandpack/RequestAccountsHTML';
 
 # eth_requestAccounts
 Defined in [EIP-1102](https://eips.ethereum.org/EIPS/eip-1102)

diff --git a/dprint.json b/dprint.json
@@ -1,6 +1,8 @@
 {
   "json": {
   },
+  "markup": {
+  },
   "markdown": {
   },
   "typescript": {
@@ -12,6 +14,7 @@
   "plugins": [
     "https://plugins.dprint.dev/json-0.19.2.wasm",
     "https://plugins.dprint.dev/markdown-0.16.4.wasm",
-    "https://plugins.dprint.dev/typescript-0.90.4.wasm"
+    "https://plugins.dprint.dev/typescript-0.90.4.wasm",
+    "https://plugins.dprint.dev/g-plane/markup_fmt-v0.11.0.wasm"
   ]
 }
diff --git a/generateSandpackFiles.js b/generateSandpackFiles.js
@@ -0,0 +1,46 @@
+const fs = require("fs");
+const path = require("path");
+
+const sandpackDir = path.join(__dirname, "docs", "components", "sandpack", "files");
+const outputFile = path.join(__dirname, "generated", "sandpackFiles.ts");
+
+function readDirectoryRecursively(dir) {
+  const results = {};
+  const list = fs.readdirSync(dir);
+
+  list.forEach(file => {
+    const filePath = path.join(dir, file);
+    const stat = fs.statSync(filePath);
+
+    if (stat && stat.isDirectory()) {
+      results[file] = readDirectoryRecursively(filePath);
+    } else {
+      results[file] = fs.readFileSync(filePath, "utf8");
+    }
+  });
+
+  return results;
+}
+
+const sandpackExamples = readDirectoryRecursively(sandpackDir);
+
+// Generate TypeScript content
+let tsContent = `// This file is auto-generated. Do not edit manually.\n\n`;
+
+Object.entries(sandpackExamples).forEach(([framework, examples]) => {
+  Object.entries(examples).forEach(([exampleName, files]) => {
+    const name = exampleName.split(".")[0];
+    const varName = `${framework.split(".")[0]}${name.charAt(0).toUpperCase() + name.slice(1)}`;
+    tsContent += `export const ${varName} = ${JSON.stringify(files, null, 2)};\n\n`;
+  });
+});
+
+// Ensure the output directory exists
+const outputDir = path.dirname(outputFile);
+if (!fs.existsSync(outputDir)) {
+  fs.mkdirSync(outputDir, { recursive: true });
+}
+
+fs.writeFileSync(outputFile, tsContent);
+
+console.log("Sandpack examples TypeScript file generated successfully!");
diff --git a/package.json b/package.json
@@ -3,8 +3,9 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vocs dev",
-    "build": "vocs build",
+    "generate": "bun generateSandpackFiles.js",
+    "dev": "bun generate && vocs dev",
+    "build": "bun generate && vocs build",
     "preview": "vocs preview",
     "format": "dprint fmt",
     "prepare": "bun x simple-git-hooks"

diff --git a/tsconfig.json b/tsconfig.json
@@ -20,5 +20,11 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["**/*.ts", "**/*.tsx"]
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "generateSandpackFiles.js",
+    "docs/components/sandpack/files/react/config.js",
+    "docs/components/sandpack/files/react/RequestAccounts.jsx"
+  ]
 }