Your Connected Accounts

\n {!Array.isArray(accounts) || accounts.length === 0\n ? (\n

\n No connected accounts yet. Connect an app above to get started.\n

\n )\n : (\n

\n {accounts.map((account) => (\n \n \n

\n {account.app?.name || \"Unknown App\"}\n

\n \n {account.name || \"Connected Account\"}\n

\n Connected: {account.created_at\n ? new Date(account.created_at).toLocaleDateString()\n : \"Unknown\"}\n

\n \n {account.app?.auth_type || \"Unknown\"}\n \n

\n \n ))}\n \n )}\n

\n );\n}",[],[207,214,221],{"_104":230,"_95":231,"_154":232,"_156":215,"_157":139,"_158":233,"_160":22,"_106":234,"_100":235,"_164":178,"_166":236,"_167":22,"_168":-5,"_169":237,"_98":238},"75b64e66-488a-11f0-a09b-76b3cceeab13","CodeSnippet.tsx","8144a792-4889-11f0-bd53-76b3cceeab13",281,["D",1749841996594],18,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { toast, ToastContainer} from \"https://esm.sh/react-toastify?deps=react@18.2.0,react-dom@18.2.0\"\n\nexport function CodeSnippet({ children }: { children: string }) {\n return (\n

\n \n { navigator.clipboard.writeText(children.join(\"\\n\"));\n toast(\"Copied!\")}}\n style={{\n position: \"absolute\",\n right: \"10px\",\n top: \"10px\",\n padding: \"5px 10px\",\n background: \"#f0f0f0\",\n border: \"1px solid #ddd\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n }}\n >\n Copy\n \n \n \n {children}\n \n \n

\n );\n}",[],[207,214,231],{"_104":240,"_95":241,"_154":242,"_156":215,"_157":139,"_158":243,"_160":22,"_106":244,"_100":245,"_164":178,"_166":246,"_167":22,"_168":-5,"_169":247,"_98":248},"9ccd8202-488b-11f0-a30a-76b3cceeab13","Dashboard.tsx","fa617f4c-3817-11f0-972c-9e149126039e",288,["D",1749842491673],72,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n ComponentForm,\n FrontendClientProvider,\n SelectApp,\n SelectComponent,\n} from \"https://esm.sh/@pipedream/connect-react?deps=react@18.2.0,react-dom@18.2.0\";\nimport { createFrontendClient } from \"https://esm.sh/@pipedream/sdk/browser\";\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { AccountsList } from \"./AccountsList.tsx\";\nimport { CodeSnippet } from \"./CodeSnippet.tsx\";\n\nexport function Dashboard(\n { user, pipedreamToken, onLogout, onError },\n) {\n const [accounts, setAccounts] = useState([]);\n const [selectedApp, setSelectedApp] = useState(null);\n const [selectedComponent, setSelectedComponent] = useState(null);\n const [componentType, setComponentType] = useState<\"action\" | \"trigger\">(\n \"action\",\n );\n const [configuredProps, setConfiguredProps] = useState({});\n console.log(\n accounts,\n selectedApp,\n selectedComponent,\n componentType,\n );\n\n const frontendClient = createFrontendClient({\n environment: \"development\", // TODO: Make this configurable\n externalUserId: user.id,\n tokenCallback: () => Promise.resolve({ token: pipedreamToken }),\n });\n\n useEffect(() => {\n loadAccounts();\n }, []);\n\n const loadAccounts = async () => {\n try {\n // Load user's connected accounts\n const accountsResponse = await fetch(\"/api/pipedream/accounts\");\n const accountsData = await accountsResponse.json();\n if (accountsData.accounts && Array.isArray(accountsData.accounts)) {\n setAccounts(accountsData.accounts);\n } else {\n console.warn(\"Accounts data is not an array:\", accountsData);\n setAccounts([]);\n }\n } catch (err) {\n console.error(\"Failed to load accounts:\", err);\n onError(\"Failed to load accounts. Please try refreshing the page.\");\n setAccounts([]);\n }\n };\n\n const handleComponentTypeChange = (newType: \"action\" | \"trigger\") => {\n setComponentType(newType);\n setSelectedComponent(null); // Reset component when type changes\n };\n\n const handleComponentSubmit = async (ctx) => {\n try {\n if (componentType === \"action\") {\n const result = await frontendClient.actionRun({\n externalUserId: user.id,\n actionId: selectedComponent.key,\n configuredProps: {\n ...ctx.configuredProps,\n include_sent_via_pipedream_flag: false,\n },\n });\n }\n // TODO trigger\n } catch (error) {\n console.error(`Failed to execute ${componentType}:`, error);\n onError(`Failed to execute ${componentType}: ${error.message}`);\n }\n };\n\n return (\n

\n \n

Pipedream Connect

Welcome, {user?.username}!

\n \n Logout\n \n \n\n \n

Connect Apps & Build Workflows

\n\n

\n \n 1. Select an App:\n \n {\n setSelectedApp(app);\n setSelectedComponent(null); // Reset component when app changes\n }}\n />\n

\n\n {selectedApp && (\n

\n \n 2. Select Component Type:\n \n \n handleComponentTypeChange(\n e.target.value as \"action\" | \"trigger\",\n )}\n style={{\n width: \"100%\",\n padding: \"8px 12px\",\n border: \"1px solid #ddd\",\n borderRadius: \"4px\",\n fontSize: \"14px\",\n backgroundColor: \"white\",\n cursor: \"pointer\",\n }}\n >\n \n \n \n

\n )}\n\n {selectedApp && (\n

\n \n 3. Select{\" \"}\n {componentType === \"action\" ? \"an Action\" : \"a Trigger\"}:\n \n {\n setSelectedComponent(comp);\n }}\n />\n

\n )}\n\n {selectedComponent && (\n

\n \n 4. Configure{\" \"}\n {componentType === \"action\" ? \"Action\" : \"Trigger\"}:\n \n \n \n

\n \n { 'import { actionRun } from \"https://esm.town/v/valdottown/pipedream-connect/sdk/sdk.ts\";\\n'}\n const result = await actionRun({JSON.stringify({\n actionId: selectedComponent.key,\n configuredProps,\n }, null, 2)});\n {\"\\n\"} console.log(result);\n \n

\n )}\n \n \n\n \n \n );\n}",[],[207,214,241],{"_104":250,"_95":251,"_154":252,"_156":215,"_157":139,"_158":253,"_160":22,"_106":254,"_100":255,"_164":178,"_166":256,"_167":22,"_168":-5,"_169":257,"_98":258},"16374962-487c-11f0-9910-76b3cceeab13","ErrorMessage.tsx","fa618f50-3817-11f0-972c-9e149126039e",141,["D",1749835823421],4,"/** @jsxImportSource https://esm.sh/react@18.2.0? */\n\nexport function ErrorMessage({ error, onDismiss }) {\n if (!error) return null;\n\n return (\n \n {error}\n {onDismiss && (\n \n ×\n \n )}\n \n );\n}",[],[207,214,251],{"_104":260,"_95":261,"_154":262,"_156":215,"_157":139,"_158":263,"_160":22,"_106":264,"_100":265,"_164":178,"_166":266,"_167":22,"_168":-5,"_169":267,"_98":268},"be031d5e-487e-11f0-b4e3-76b3cceeab13","Home.tsx","4646f64c-34e6-11f0-ad7f-9e149126039e",192,["D",1749836963933],23,"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport { useState } from \"https://esm.sh/react@18.2.0?\";\nimport { LoginForm } from \"./LoginForm.tsx\";\nimport { Dashboard } from \"./Dashboard.tsx\";\nimport { ErrorMessage } from \"./ErrorMessage.tsx\";\n\nexport function Home({ user, pipedreamToken }) {\n const [error, setError] = useState(\"\");\n\n const handleLogout = async () => {\n await fetch(\"/auth/logout\", { method: \"POST\" });\n window.location.href = \"/\";\n };\n\n const handleError = (errorMessage: string) => {\n setError(errorMessage);\n };\n\n const dismissError = () => {\n setError(\"\");\n };\n\n if (!user) {\n return (\n <>\n \n console.log(x)} onError={handleError} />\n \n );\n }\n\n return (\n <>\n \n \n \n );\n}",[],[207,214,261],{"_104":270,"_95":271,"_154":272,"_156":215,"_157":139,"_158":273,"_160":22,"_106":274,"_100":275,"_164":178,"_166":276,"_167":22,"_168":-5,"_169":277,"_98":278},"134fed94-4881-11f0-b890-76b3cceeab13","LoginForm.tsx","fa619216-3817-11f0-972c-9e149126039e",202,["D",1749837966038],12,"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport { useState } from \"https://esm.sh/react@18.2.0?\";\n\nexport function LoginForm({ onLogin, onError }) {\n const [apiKey, setApiKey] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setIsLoading(true);\n onError(\"\");\n try {\n const response = await fetch(\"/auth/login\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ apiKey }),\n });\n if (response.ok) window.location.href = \"/\";\n } catch (err) {\n console.error(err);\n onError(err.message);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n

Val Town + Pipedream Connect

Please enter your Val Town API key to get started.

\n\n

\n );\n}",[],[207,214,271],[207,214],{"_104":281,"_95":282,"_154":283,"_156":208,"_157":139,"_158":284,"_160":22,"_106":285,"_100":286,"_164":287,"_166":288,"_167":22,"_168":-5,"_169":289,"_98":290},"fa61b890-3817-11f0-972c-9e149126039e","index.html","8f915482-34e6-11f0-b615-9e149126039e",52,["D",1748033608415],5,"file","\n\n \n \n \n Val Town + Pipedream Connect\n \n \n

\n \n \n \n",[],[207,282],{"_104":292,"_95":293,"_154":294,"_156":208,"_157":139,"_158":295,"_160":22,"_106":296,"_100":216,"_164":178,"_166":297,"_167":22,"_168":-5,"_169":298,"_98":299},"5d544fc0-4881-11f0-902b-76b3cceeab13","index.tsx","8855cee6-34e6-11f0-a974-9e149126039e",207,["D",1749838090218],"/** @jsxImportSource https://esm.sh/react@18.2.0? */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?\";\nimport { Home } from \"./components/Home.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render(\n ,\n);",[],[207,293],[207],{"_104":302,"_95":303,"_154":304,"_156":-5,"_157":139,"_158":305,"_160":161,"_106":306,"_100":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":307,"_98":318},"c2d03472-4886-11f0-b731-76b3cceeab13","sdk","c1ed1228-4886-11f0-afbd-76b3cceeab13",231,["D",1749840407963],[308],{"_104":309,"_95":310,"_154":311,"_156":304,"_157":139,"_158":312,"_160":22,"_106":313,"_100":314,"_164":178,"_166":315,"_167":22,"_168":-5,"_169":316,"_98":317},"88e5c37a-4887-11f0-8700-76b3cceeab13","sdk.ts","c3e5afc2-4886-11f0-a69d-76b3cceeab13",241,["D",1749840740288],9,"export async function actionRun(args: any) {\n const response = await fetch(\n \"https://pipedream.val.run/api/pipedream/action\",\n {\n method: \"POST\",\n body: JSON.stringify(args),\n headers: {\n Cookie: \"vt_api_key=\" + Deno.env.get(\"valtown\"),\n },\n },\n );\n return response.json();\n}",[],[303,310],[303],{"_104":320,"_95":321,"_154":322,"_156":-5,"_157":139,"_158":101,"_160":22,"_106":323,"_100":324,"_164":287,"_166":325,"_167":22,"_168":-5,"_169":326,"_98":327},"511542a4-4896-11f0-aaa4-76b3cceeab13","README.md","fa619964-3817-11f0-972c-9e149126039e",["D",1749847089101],26,"# Val Town + Pipedream Connect Integration\n\nThis application allows Val Town users to authenticate and connect to external services via Pipedream Connect.\n\n## Pipedream Actions\n\nFor example, send a Slack or Discord message, create a Linear ticket, or update a row in Google Sheets.\n\n1. Select the app (Slack, Discord, Linear, Google, Sheets, 2k+ others)\n2. Select \"Action\" type\n3. Select which action (\"Send a message\", \"Make a ticket\", etc)\n4. Connfigure the action's parameters\n5. Test-run the action\n6. Copy the code provided to trigger that action from any Val Town server-side code\n\n- [ ] Fix copied code formatting\n\n## Pipedream Triggers\n\n- [ ] list existing triggers\n- [ ] list trigger & endpoint\n- [ ] Let triggers be updated\n- [ ] Let trigger be deleted\n- [ ] Help users connect trigger to val more directly than copying endpoint (via val town sdk)\n\n## Connected Apps\n\n- [ ] put these on their own page\n- [ ] ability to delete connections\n\n## Custom OAuth clients\n\n- Docs: https://pipedream.com/docs/connect/managed-auth/oauth-clients/#using-a-custom-oauth-client\n- I made one for discord, but am struggling to figure out where to supply the `oauthAppId`. I asked Pipedream.\n\n## Misc todos\n\n- [ ] Seperate pages for connections, new action or trigger, triggers\n- [ ] Make it prettier. Tailwind?\n- [ ] (Maybe) Store everyone's actions & give debug history panel (unless they disable it?)\n- [ ] Automatically include `\"includeSentViaPipedream\": false` for Discord and Slack\n- [ ] Ensure Val Town Pro\n- [ ] Spotify demo\n- [ ] Notion demo, organize everything around date tags\n\n## Authentication\n\nThis app uses Val Town API tokens for authentication. (Eventually, we'll swap\nthis for Val Town OAuth.)\n\nTo login, create and supply a Val Town API token with the `user:read` scope only. We store it in cookies.\n\nTo run actions on connected apps, you'll also need to supply a Val Town API\ntoken. If you're doing this from within Val Town, you can use\n`process.env.valtown`, which this app's client libraries will use by default.",[],[321],"files",[151,171,182,194,205,212,219,229,239,249,259,269,280,291,301,308,319],"counts",{"_332":32,"_333":225,"_334":32,"_335":255},"pulls","branches","forks","envVars","contents",[],{"_104":309,"_95":310,"_154":311,"_156":304,"_157":139,"_158":312,"_160":22,"_106":339,"_100":314,"_164":178,"_166":315,"_167":22,"_168":-5,"_98":340},["D",1749840740288],[303,310],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":349,"_149":354,"_328":406,"_287":407,"_336":409,"_410":-5,"_411":22,"_412":-5,"_413":-5,"_414":-5,"_415":416},{"_104":105,"_95":96,"_106":350,"_108":-5,"_109":22,"_110":111,"_112":113,"_114":-5,"_14":115,"_116":-5,"_117":22,"_118":-5,"_119":32,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":351,"_133":352,"_136":353,"_148":22},["D",1747682234550],{"_93":94,"_131":132},{"_93":94,"_135":132},{"_100":138,"_95":43,"_104":139,"_140":105,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":96,"_147":94},[355,367,397,403],{"_104":152,"_95":153,"_154":155,"_156":-5,"_157":139,"_158":159,"_160":161,"_106":162,"_100":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":356,"_98":366},[357,360,363],{"_104":172,"_95":173,"_154":174,"_156":155,"_157":139,"_158":175,"_160":22,"_106":176,"_100":177,"_164":178,"_166":179,"_167":22,"_168":-5,"_169":358,"_98":359},[],[153,173],{"_104":183,"_95":184,"_154":185,"_156":155,"_157":139,"_158":186,"_160":22,"_106":187,"_100":188,"_164":189,"_166":190,"_167":22,"_168":191,"_169":361,"_98":362},[],[153,184],{"_104":195,"_95":196,"_154":197,"_156":155,"_157":139,"_158":198,"_160":22,"_106":199,"_100":200,"_164":178,"_166":201,"_167":22,"_168":-5,"_169":364,"_98":365},[],[153,196],[153],{"_104":206,"_95":207,"_154":208,"_156":-5,"_157":139,"_158":209,"_160":161,"_106":210,"_100":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":368,"_98":396},[369,390,393],{"_104":213,"_95":214,"_154":215,"_156":208,"_157":139,"_158":216,"_160":161,"_106":217,"_100":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":370,"_98":389},[371,374,377,380,383,386],{"_104":220,"_95":221,"_154":222,"_156":215,"_157":139,"_158":223,"_160":22,"_106":224,"_100":225,"_164":178,"_166":226,"_167":22,"_168":-5,"_169":372,"_98":373},[],[207,214,221],{"_104":230,"_95":231,"_154":232,"_156":215,"_157":139,"_158":233,"_160":22,"_106":234,"_100":235,"_164":178,"_166":236,"_167":22,"_168":-5,"_169":375,"_98":376},[],[207,214,231],{"_104":240,"_95":241,"_154":242,"_156":215,"_157":139,"_158":243,"_160":22,"_106":244,"_100":245,"_164":178,"_166":246,"_167":22,"_168":-5,"_169":378,"_98":379},[],[207,214,241],{"_104":250,"_95":251,"_154":252,"_156":215,"_157":139,"_158":253,"_160":22,"_106":254,"_100":255,"_164":178,"_166":256,"_167":22,"_168":-5,"_169":381,"_98":382},[],[207,214,251],{"_104":260,"_95":261,"_154":262,"_156":215,"_157":139,"_158":263,"_160":22,"_106":264,"_100":265,"_164":178,"_166":266,"_167":22,"_168":-5,"_169":384,"_98":385},[],[207,214,261],{"_104":270,"_95":271,"_154":272,"_156":215,"_157":139,"_158":273,"_160":22,"_106":274,"_100":275,"_164":178,"_166":276,"_167":22,"_168":-5,"_169":387,"_98":388},[],[207,214,271],[207,214],{"_104":281,"_95":282,"_154":283,"_156":208,"_157":139,"_158":284,"_160":22,"_106":285,"_100":286,"_164":287,"_166":288,"_167":22,"_168":-5,"_169":391,"_98":392},[],[207,282],{"_104":292,"_95":293,"_154":294,"_156":208,"_157":139,"_158":295,"_160":22,"_106":296,"_100":216,"_164":178,"_166":297,"_167":22,"_168":-5,"_169":394,"_98":395},[],[207,293],[207],{"_104":302,"_95":303,"_154":304,"_156":-5,"_157":139,"_158":305,"_160":161,"_106":306,"_100":163,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":398,"_98":402},[399],{"_104":309,"_95":310,"_154":311,"_156":304,"_157":139,"_158":312,"_160":22,"_106":313,"_100":314,"_164":178,"_166":315,"_167":22,"_168":-5,"_169":400,"_98":401},[],[303,310],[303],{"_104":320,"_95":321,"_154":322,"_156":-5,"_157":139,"_158":101,"_160":22,"_106":323,"_100":324,"_164":287,"_166":325,"_167":22,"_168":-5,"_169":404,"_98":405},[],[321],[355,357,360,363,367,369,371,374,377,380,383,386,390,393,397,399,403],{"_104":309,"_95":310,"_154":311,"_156":304,"_157":139,"_158":312,"_160":22,"_106":339,"_100":314,"_164":178,"_166":315,"_167":22,"_168":-5,"_98":408},[303,310],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]