Some small improvement for code execution sections

Author: EmilFattakhov

.gitignore

@@ -3,4 +3,5 @@ node_modules
 .tool-versions
 .DS_Store
 public/.DS_Store
-.env
+.env
+.env.local

components/autoConsensusFetchBalance.js

@@ -1,24 +1,35 @@
 import dynamic from "next/dynamic";
 
 const Sandpack = dynamic(() => import("@codesandbox/sandpack-react").then((mod) => mod.Sandpack), {
-  ssr: false, // Disable server-side rendering for Sandpack
+  ssr: false,
 });
 
 export default function InteractiveCode() {
-  const token = process.env.CODESANDBOX_TOKEN;
+  const token = process.env.NEXT_PUBLIC_CODESANDBOX_TOKEN;
   const code = `
     import { account } from '@autonomys/auto-consensus';
     import { activate, parseTokenAmount} from '@autonomys/auto-utils';
 
     (async () => {
-      const api = await activate({ networkId: 'mainnet'});
-      const accountData = await account(api, 'sub564FwrR9yL7NVG2gdvSVj3oped2mBSYC65TjVGMp4tCkDp');
+      try {
+        console.log('Connecting to network...');
+        const api = await activate({ networkId: 'mainnet'});
+        
+        console.log('Fetching account data...');
+        const accountData = await account(api, 'sub564FwrR9yL7NVG2gdvSVj3oped2mBSYC65TjVGMp4tCkDp');
 
-      console.log(\`Nonce: \${accountData.nonce}\`);
-      console.log(\`Free Balance: \${accountData.data.free} AI3\`);
-      console.log(\`Reserved Balance: \${accountData.data.reserved} AI3\`);
+        console.log(\`Nonce: \${accountData.nonce}\`);
+        console.log(\`Free Balance: \${accountData.data.free} AI3\`);
+        console.log(\`Reserved Balance: \${accountData.data.reserved} AI3\`);
 
-      await api.disconnect();
+        // Clean disconnect
+        await api.disconnect();
+      } catch (error) {
+        console.error('❌ Error:', error);
+        if (api) {
+          await api.disconnect();
+        }
+      }
     })();
   `;
 
@@ -32,15 +43,17 @@ export default function InteractiveCode() {
         dependencies: {
           "@autonomys/auto-consensus": "^1.2.1",
           "@autonomys/auto-utils": "^1.2.1",
-        },
+        }
       }}
       options={{
         showConsole: true,
         editorHeight: 400,
+        recompileMode: "delayed",
+        recompileDelay: 1000
       }}
       codeSandboxOptions={{
-        authToken: token,
+        authToken: token
       }}
     />
   );
-}
+}

next.config.mjs

@@ -1,5 +1,5 @@
 import nextra from 'nextra'
- 
+
 const withNextra = nextra({
   theme: 'nextra-theme-docs',
   themeConfig: './theme.config.jsx',
@@ -8,8 +8,31 @@ const withNextra = nextra({
     rehypePlugins: []
   }
 })
- 
-export default withNextra()
- 
-// If you have other Next.js configurations, you can pass them as the parameter:
-// export default withNextra({ /* other next.js config */ })
+
+// Configuration object with headers
+const nextConfig = {
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: [
+          {
+            key: 'Access-Control-Allow-Origin',
+            value: '*'
+          },
+          {
+            key: 'Access-Control-Allow-Methods',
+            value: 'GET,OPTIONS,PATCH,DELETE,POST,PUT'
+          },
+          {
+            key: 'Access-Control-Allow-Headers',
+            value: 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
+          }
+        ]
+      }
+    ]
+  }
+}
+
+// Combine Nextra with the custom config
+export default withNextra(nextConfig)

package-lock.json

@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "@codesandbox/sandpack-react": "^2.19.10",
+    "@codesandbox/sandpack-themes": "^2.0.21",
     "lucide-react": "^0.469.0",
     "next": "^15.1.2",
     "nextra": "^3.3.1",