Playground improvement (#41)

* Improvements for contextless

* linter

* CloseActivity page

* fix import

* tabs -> spaces

* nvm

Author: yonilerner

biome.json

@@ -7,7 +7,8 @@
 			"**/dist",
 			"**/build",
 			"**/coverage",
-			"**/lib"
+			"**/lib",
+			"**/.wrangler"
 		]
 	},
 	"organizeImports": {

package.json

@@ -11,7 +11,7 @@
   "license": "MIT",
   "scripts": {
     "fix": "biome check --write .",
-		"lint": "biome check ."
+    "lint": "biome check ."
   },
   "devDependencies": {
     "@biomejs/biome": "^1.8.3"

sdk-playground/.gitignore

@@ -24,3 +24,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.idea

sdk-playground/example.env

@@ -9,3 +9,4 @@ VITE_DISCORD_API_BASE=https://discord.com/api
 
 CLIENT_SECRET=secret # This should be the oauth2 token for your application from the developer portal.
 BOT_TOKEN=bottoken # This should be the bot token for your application from the developer portal.
+WEBAPP_SERVE_PORT=3000

sdk-playground/packages/client/src/App.tsx

@@ -40,6 +40,8 @@ import SetActivity from './pages/SetActivity';
 import UserSettingsGetLocale from './pages/UserSettingsGetLocale';
 import Search from './components/Search';
 import {useState} from 'react';
+import GetActivityInstance from "./pages/GetActivityInstance";
+import CloseActivity from "./pages/CloseActivity";
 
 // Add contexts here
 export default function App(): React.ReactElement {
@@ -71,6 +73,11 @@ const routes: Record<string, AppRoute> = {
     name: 'Encourage Hardware Acceleration',
     component: EncourageHardwareAcceleration,
   },
+  closeActivity: {
+    path: '/close-activity',
+    name: 'Close Activity',
+    component: CloseActivity,
+  },
   getChannel: {
     path: '/get-channel',
     name: 'Get Channel',
@@ -91,6 +98,11 @@ const routes: Record<string, AppRoute> = {
     name: 'Get Instance Connected Participants',
     component: GetInstanceConnectedParticipants,
   },
+  getActivityInstance: {
+    path: '/get-activity-instance',
+    name: 'Get Activity Instance',
+    component: GetActivityInstance,
+  },
   getPlatformBehaviors: {
     path: '/get-platform-behaviors',
     name: 'Get Platform Behaviors',

sdk-playground/packages/client/src/actions/authActions.ts

@@ -43,7 +43,7 @@ export const start = async () => {
 			'rpc.voice.write',
 			'rpc.voice.read',
 			// "webhook.incoming",
-			discordSdk.guildId == null ? 'dm_channels.read' : null, // This scope requires approval from Discord.
+			// discordSdk.guildId == null ? 'dm_channels.read' : null, // This scope requires approval from Discord.
 		].filter((scope) => scope != null) as Types.OAuthScopes[],
 	});
 

sdk-playground/packages/client/src/components/AuthProvider.tsx

@@ -7,7 +7,9 @@ export function AuthProvider({children}: {children: React.ReactNode}) {
   const auth = authStore();
 
   React.useEffect(() => {
-    start();
+    start().catch(e => {
+      console.error('Error starting auth', e);
+    })
   }, []);
 
   if (auth.user == null) {

sdk-playground/packages/client/src/pages/CloseActivity.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import discordSdk from '../discordSdk';
+import { RPCCloseCodes } from '@discord/embedded-app-sdk';
+
+export default function CloseActivity() {
+    React.useEffect(() => {
+        discordSdk.close(RPCCloseCodes.CLOSE_NORMAL, 'Activity closed');
+    }, []);
+
+    return (
+        <div style={{padding: 32}}>
+            <div>
+                <h1>Close the Activity</h1>
+            </div>
+        </div>
+    );
+}

sdk-playground/packages/client/src/pages/GetActivityInstance.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import discordSdk from '../discordSdk';
+import ReactJsonView from '../components/ReactJsonView';
+import {authStore} from '../stores/authStore';
+
+export default function GetActivityInstance() {
+    const [instance, setInstance] = React.useState<any | null>(null);
+    const auth = authStore();
+
+    React.useEffect(() => {
+        async function update() {
+            if (!auth) {
+                return;
+            }
+            const instanceResponse = await fetch(`/api/activity-instance/${discordSdk.instanceId}`);
+            setInstance(await instanceResponse.json());
+        }
+        update();
+    }, [auth]);
+
+    return (
+        <div style={{padding: 32}}>
+            <div>
+                <h1>Current Validated Instance</h1>
+                <br />
+                <br />
+                {instance ? <ReactJsonView src={instance} /> : null}
+            </div>
+        </div>
+    );
+}

sdk-playground/packages/client/src/pages/SetActivity.tsx

@@ -15,6 +15,13 @@ export default function SetActivity() {
           small_image: fillerUrl,
           large_image: fillerUrl,
         },
+        secrets: {
+          join: discordSdk.instanceId,
+        },
+        party: {
+          id: 'foo',
+          size: [1, 10]
+        }
       },
     });
   }, []);

sdk-playground/packages/client/vite.config.ts

@@ -1,23 +1,26 @@
 import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 
 // https://vitejs.dev/config/
-export default defineConfig({
-	plugins: [react()],
-	envDir: '../../',
-	server: {
-		port: 3000,
-		proxy: {
-			'/api': {
-				target: 'http://localhost:8787',
-				changeOrigin: true,
-				secure: false,
-				ws: true,
-				// rewrite: (path) => path.replace(/^\/api/, ""),
+export default defineConfig(({ mode }) => {
+	const env = loadEnv(mode, '../../', '');
+	return {
+		plugins: [react()],
+		envDir: '../../',
+		server: {
+			port: Number.parseInt(env.WEBAPP_SERVE_PORT),
+			proxy: {
+				'/api': {
+					target: 'http://localhost:8787',
+					changeOrigin: true,
+					secure: false,
+					ws: true,
+					// rewrite: (path) => path.replace(/^\/api/, ""),
+				},
+			},
+			hmr: {
+				clientPort: 443,
 			},
 		},
-		hmr: {
-			clientPort: 443,
-		},
-	},
+	};
 });

sdk-playground/packages/server/src/handleApiRequest.ts

@@ -1,3 +1,4 @@
+import getActivityInstanceHandler from './handlers/getActivityInstanceHandler';
 import iapHandler from './handlers/iapHandler';
 import tokenHandler from './handlers/tokenHandler';
 import type { Env } from './types';
@@ -9,6 +10,8 @@ export function handleApiRequest(path: string[], request: Request, env: Env) {
 			return tokenHandler(path, request, env);
 		case 'iap':
 			return iapHandler(path, request, env);
+		case 'activity-instance':
+			return getActivityInstanceHandler(path, request, env);
 		default:
 			return new Response('Not found', { status: 404 });
 	}

sdk-playground/packages/server/src/handlers/getActivityInstanceHandler.ts

@@ -0,0 +1,21 @@
+import type { Env, IGetOAuthToken } from '../types';
+import { readRequestBody, requestHeaders } from '../utils';
+
+export default async function getActivityInstanceHandler(
+	path: string[],
+	request: Request,
+	env: Env,
+) {
+	try {
+		const instanceId = path[1];
+		return await fetch(
+			`${env.VITE_DISCORD_API_BASE}/applications/${env.VITE_CLIENT_ID}/activity-instances/${instanceId}`,
+			{
+				headers: requestHeaders(env),
+			},
+		);
+	} catch (ex) {
+		console.error(ex);
+		return new Response(`Internal Error: ${ex}`, { status: 500 });
+	}
+}