fix: codesandbox devcontainers (#1593)

* fix: devcontainer for with-next

* fix: missing preview port in codesandbox configs

* fix: add devcontainer config to examples

* fix: remix example port

* fix: with-create-react-app start/dev standardization

* fix: vite example port

* fix: install siwe package in with-next-siwe-next-auth

* fix: legacy image error in with-next-mint-nft

examples/with-create-react-app/.codesandbox/tasks.json

@@ -9,7 +9,10 @@
     "start-app": {
       "name": "Run Dev Server",
       "command": "yarn dev",
-      "runAtStart": true
+      "runAtStart": true,
+      "preview": {
+        "port": 3000
+      }
     }
   }
 }

examples/with-create-react-app/.devcontainer/devcontainer.json

@@ -0,0 +1,4 @@
+{
+  "name": "RainbowKit Dev Container",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:18"
+}

examples/with-create-react-app/package.json

@@ -21,8 +21,8 @@
     "buffer": "npm:buffer@6.0.3"
   },
   "scripts": {
-    "dev": "npm run start",
-    "start": "PORT=3030 react-scripts start",
+    "dev": "react-scripts start",
+    "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!@rainbow-me)/\"",
     "eject": "react-scripts eject"

examples/with-next-app-i18n/.codesandbox/tasks.json

@@ -9,7 +9,10 @@
     "start-app": {
       "name": "Run Dev Server",
       "command": "yarn dev",
-      "runAtStart": true
+      "runAtStart": true,
+      "preview": {
+        "port": 3000
+      }
     }
   }
 }

examples/with-next-app-i18n/.devcontainer/devcontainer.json

@@ -0,0 +1,4 @@
+{
+  "name": "RainbowKit Dev Container",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:18"
+}

examples/with-next-app/.codesandbox/tasks.json

@@ -9,7 +9,10 @@
     "start-app": {
       "name": "Run Dev Server",
       "command": "yarn dev",
-      "runAtStart": true
+      "runAtStart": true,
+      "preview": {
+        "port": 3000
+      }
     }
   }
 }

examples/with-next-app/.devcontainer/devcontainer.json

@@ -0,0 +1,4 @@
+{
+  "name": "RainbowKit Dev Container",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:18"
+}

examples/with-next-custom-button/.codesandbox/tasks.json

@@ -9,7 +9,10 @@
     "start-app": {
       "name": "Run Dev Server",
       "command": "yarn dev",
-      "runAtStart": true
+      "runAtStart": true,
+      "preview": {
+        "port": 3000
+      }
     }
   }
 }

examples/with-next-custom-button/.devcontainer/devcontainer.json

@@ -0,0 +1,4 @@
+{
+  "name": "RainbowKit Dev Container",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:18"
+}

examples/with-next-mint-nft/.codesandbox/tasks.json

@@ -9,7 +9,10 @@
     "start-app": {
       "name": "Run Dev Server",
       "command": "yarn dev",
-      "runAtStart": true
+      "runAtStart": true,
+      "preview": {
+        "port": 3000
+      }
     }
   }
 }

examples/with-next-mint-nft/.devcontainer/devcontainer.json

@@ -0,0 +1,4 @@
+{
+  "name": "RainbowKit Dev Container",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:18"
+}

examples/with-next-mint-nft/pages/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Image from 'next/image';
+import Image from 'next/legacy/image';
 import { ConnectButton } from '@rainbow-me/rainbowkit';
 import type { NextPage } from 'next';
 import {

examples/with-next-siwe-iron-session/.codesandbox/tasks.json

@@ -9,7 +9,10 @@
     "start-app": {
       "name": "Run Dev Server",
       "command": "yarn dev",
-      "runAtStart": true
+      "runAtStart": true,
+      "preview": {
+        "port": 3000
+      }
     }
   }
 }

examples/with-next-siwe-iron-session/.devcontainer/devcontainer.json

@@ -0,0 +1,4 @@
+{
+  "name": "RainbowKit Dev Container",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:18"
+}

examples/with-next-siwe-next-auth/.codesandbox/tasks.json

@@ -1,15 +1,21 @@
 {
   "$schema": "https://codesandbox.io/schemas/tasks.json",
-  "setupTasks": ["yarn add @rainbow-me/rainbowkit@latest", "yarn build"],
+  "setupTasks": [
+    "yarn add @rainbow-me/rainbowkit@latest @rainbow-me/rainbowkit-siwe-next-auth@latest",
+    "yarn build"
+  ],
   "tasks": {
     "install-dependencies": {
       "name": "Install Dependencies",
-      "command": "yarn add @rainbow-me/rainbowkit@latest"
+      "command": "yarn add @rainbow-me/rainbowkit@latest @rainbow-me/rainbowkit-siwe-next-auth@latest"
     },
     "start-app": {
       "name": "Run Dev Server",
       "command": "yarn dev",
-      "runAtStart": true
+      "runAtStart": true,
+      "preview": {
+        "port": 3000
+      }
     }
   }
 }

examples/with-next-siwe-next-auth/.devcontainer/devcontainer.json

@@ -0,0 +1,4 @@
+{
+  "name": "RainbowKit Dev Container",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:18"
+}

examples/with-next/.codesandbox/tasks.json

@@ -9,7 +9,10 @@
     "start-app": {
       "name": "Run Dev Server",
       "command": "yarn dev",
-      "runAtStart": true
+      "runAtStart": true,
+      "preview": {
+        "port": 3000
+      }
     }
   }
 }

examples/with-next/.devcontainer/devcontainer.json

@@ -0,0 +1,4 @@
+{
+  "name": "RainbowKit Dev Container",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:18"
+}

examples/with-remix/.codesandbox/tasks.json

@@ -9,7 +9,10 @@
     "start-app": {
       "name": "Run Dev Server",
       "command": "yarn dev",
-      "runAtStart": true
+      "runAtStart": true,
+      "preview": {
+        "port": 8000
+      }
     }
   }
 }

examples/with-remix/.devcontainer/devcontainer.json

@@ -0,0 +1,4 @@
+{
+  "name": "RainbowKit Dev Container",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:18"
+}

examples/with-vite/.codesandbox/tasks.json

@@ -9,7 +9,10 @@
     "start-app": {
       "name": "Run Dev Server",
       "command": "yarn dev",
-      "runAtStart": true
+      "runAtStart": true,
+      "preview": {
+        "port": 5173
+      }
     }
   }
 }

examples/with-vite/.devcontainer/devcontainer.json

@@ -0,0 +1,4 @@
+{
+  "name": "RainbowKit Dev Container",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:18"
+}