Merge branch 'main' into update-persistence-docs

apps/web/src/app/(dashboard)/dashboard/page.tsx

@@ -87,13 +87,9 @@ const Dashboard = ({ user }) => {
   const [teams, setTeams] = useState<Team[]>([])
   const [currentTeam, setCurrentTeam] = useState<Team | null>(null)
 
-  const apiUrlState = useLocalStorage(
-    'apiUrl',
-    process.env.NEXT_PUBLIC_API_URL || ''
-  )
-  const billingUrlState = useLocalStorage(
-    'billingUrl',
-    process.env.NEXT_PUBLIC_BILLING_API_URL || ''
+  const domainState = useLocalStorage(
+    'e2bDomain',
+    process.env.NEXT_PUBLIC_DOMAIN || ''
   )
 
   const initialTab =
@@ -166,8 +162,7 @@ const Dashboard = ({ user }) => {
             teams={teams}
             setTeams={setTeams}
             setCurrentTeam={setCurrentTeam}
-            apiUrlState={apiUrlState}
-            billingUrlState={billingUrlState}
+            domainState={domainState}
           />
         </div>
       </>
@@ -230,16 +225,18 @@ const MenuItem = ({
   onClick: () => void
 }) => (
   <div
-    className={`flex w-fit md:w-full hover:bg-[#995100]  hover:cursor-pointer rounded-lg items-center p-2 space-x-2 ${selected ? 'bg-[#995100]' : ''
-      }`}
+    className={`flex w-fit md:w-full hover:bg-[#995100]  hover:cursor-pointer rounded-lg items-center p-2 space-x-2 ${
+      selected ? 'bg-[#995100]' : ''
+    }`}
     onClick={onClick}
   >
     <Icon width={20} height={20} />
     <p
-      className={`${!label || !window.matchMedia('(min-width: 768)').matches
+      className={`${
+        !label || !window.matchMedia('(min-width: 768)').matches
           ? 'sr-only sm:not-sr-only'
           : ''
-        }`}
+      }`}
     >
       {label[0].toUpperCase() + label.slice(1)}
     </p>
@@ -253,43 +250,37 @@ function MainContent({
   teams,
   setTeams,
   setCurrentTeam,
-  apiUrlState,
-  billingUrlState,
+  domainState,
 }: {
   selectedItem: MenuLabel
   user: E2BUser
   team: Team
   teams: Team[]
   setTeams: (teams: Team[]) => void
   setCurrentTeam: (team: Team) => void
-  apiUrlState: [string, (value: string) => void]
-  billingUrlState: [string, (value: string) => void]
+  domainState: [string, (value: string) => void]
 }) {
   switch (selectedItem) {
     case 'personal':
-      return <PersonalContent user={user} billingUrl={billingUrlState[0]} />
+      return <PersonalContent user={user} domain={domainState[0]} />
     case 'keys':
       return (
-        <KeysContent
-          currentTeam={team}
-          user={user}
-          billingUrl={billingUrlState[0]}
-        />
+        <KeysContent currentTeam={team} user={user} domain={domainState[0]} />
       )
     case 'sandboxes':
-      return <SandboxesContent team={team} apiUrl={apiUrlState[0]} />
+      return <SandboxesContent team={team} domain={domainState[0]} />
     case 'templates':
       return (
         <TemplatesContent
           user={user}
           teamId={team.id}
-          apiUrl={apiUrlState[0]}
+          domain={domainState[0]}
         />
       )
     case 'usage':
-      return <UsageContent team={team} billingUrl={billingUrlState[0]} />
+      return <UsageContent team={team} domain={domainState[0]} />
     case 'billing':
-      return <BillingContent team={team} billingUrl={billingUrlState[0]} />
+      return <BillingContent team={team} domain={domainState[0]} />
     case 'team':
       return (
         <TeamContent
@@ -298,15 +289,11 @@ function MainContent({
           teams={teams}
           setTeams={setTeams}
           setCurrentTeam={setCurrentTeam}
-          billingUrl={billingUrlState[0]}
+          domain={domainState[0]}
         />
       )
     case 'developer':
-      return (
-        <DeveloperContent
-          apiUrlState={apiUrlState}
-        />
-      )
+      return <DeveloperContent domainState={domainState} />
     default:
       return <ErrorContent />
   }

apps/web/src/app/(dashboard)/dashboard/utils.ts

@@ -0,0 +1,31 @@
+function getUrl(domain: string, subdomain: string, path: string) {
+  let url = domain
+  const local = domain.startsWith('localhost') || domain.startsWith('127.0.0.')
+
+  if (!domain.startsWith('http')) {
+    url = `http${local ? '' : 's'}://${domain}`
+  }
+
+  const parsedUrl = new URL(url)
+
+  if (path) {
+    const decodedUrl = decodeURIComponent(path)
+    const [pathname, queryString] = decodedUrl.split('?')
+    parsedUrl.pathname = pathname
+    if (queryString) parsedUrl.search = queryString
+  }
+
+  if (!local) {
+    parsedUrl.hostname = `${subdomain}.${parsedUrl.hostname}`
+  }
+
+  return parsedUrl.toString()
+}
+
+export function getAPIUrl(domain: string, path: string) {
+  return getUrl(domain, 'api', path)
+}
+
+export function getBillingUrl(domain: string, path: string) {
+  return getUrl(domain, 'billing', path)
+}

apps/web/src/app/(docs)/docs/sandbox/persistence/page.mdx

@@ -2,8 +2,8 @@
 
 <Note>
 Sandbox persistence is currently in beta:
-1. [Reach out to us](/docs/support) to get access to the beta.
-1. You need to install the [beta version of the SDKs](#installing-the-beta-version-of-the-sdks).
+1. [Reach out to us](/docs/support) with your use case to get access to the beta.
+1. You'll need to install the [beta version of the SDKs](#installing-the-beta-version-of-the-sdks).
 1. Consider [some limitations](#limitations-while-in-beta).
 1. The persistence is free for all users during the beta.
 </Note>
@@ -18,12 +18,22 @@ To use the sandbox persistence, you need to install the beta version of the SDKs
 <CodeGroup>
 ```bash {{ language: 'js' }}
 npm i @e2b/code-interpreter@beta
+#
+# or use Core: https://github.com/e2b-dev/e2b
+# npm i e2b@beta
+#
+# or use Desktop: https://github.com/e2b-dev/desktop
+# npm i @e2b/desktop@beta
 ```
 
 ```bash {{ language: 'python' }}
-# Install the latest beta version of the SDK on PyPi
-# https://pypi.org/project/e2b/#history
 pip install e2b-code-interpreter==1.0.4b
+#
+# or use Core: https://github.com/e2b-dev/e2b
+# pip install e2b==1.1.0.b
+#
+# or use Desktop: https://github.com/e2b-dev/desktop
+# pip install e2b-desktop==1.1.0.b
 ```
 </CodeGroup>
 
@@ -33,9 +43,9 @@ When you pause a sandbox, both the sandbox's filesystem and memory state will be
 
 <CodeGroup>
 ```js
-import { Sandbox } from 'e2b'
-// or use Code Interpreter: https://github.com/e2b-dev/code-interpreter
-// import { Sandbox } from '@e2b/code-interpreter'
+import { Sandbox } from '@e2b/code-interpreter'
+// or use Core: https://github.com/e2b-dev/e2b
+// import { Sandbox } from 'e2b'
 //
 // or use Desktop: https://github.com/e2b-dev/desktop
 // import { Sandbox } from '@e2b/desktop'
@@ -50,9 +60,9 @@ const sandboxId = await sbx.pause() // $HighlightLine
 console.log('Sandbox paused', sandboxId) // $HighlightLine
 ```
 ```python
-from e2b import Sandbox
-# or use Code Interpreter: https://github.com/e2b-dev/code-interpreter
-# from e2b_code_interpreter import Sandbox
+from e2b_code_interpreter import Sandbox
+# or use Core: https://github.com/e2b-dev/e2b
+# from e2b import Sandbox
 #
 # or use Desktop: https://github.com/e2b-dev/desktop
 # from e2b_desktop import Sandbox
@@ -75,9 +85,9 @@ This means that all the files in the sandbox's filesystem will be restored and a
 
 <CodeGroup>
 ```js
-import { Sandbox } from 'e2b'
-// or use Code Interpreter: https://github.com/e2b-dev/code-interpreter
-// import { Sandbox } from '@e2b/code-interpreter'
+import { Sandbox } from '@e2b/code-interpreter'
+// or use Core: https://github.com/e2b-dev/e2b
+// import { Sandbox } from 'e2b'
 //
 // or use Desktop: https://github.com/e2b-dev/desktop
 // import { Sandbox } from '@e2b/desktop'
@@ -97,8 +107,8 @@ console.log('Sandbox resumed', sameSbx.sandboxId) // $HighlightLine
 ```
 ```python
 from e2b import Sandbox
-# or use Code Interpreter: https://github.com/e2b-dev/code-interpreter
-# from e2b_code_interpreter import Sandbox
+# or use Core: https://github.com/e2b-dev/e2b
+# from e2b import Sandbox
 #
 # or use Desktop: https://github.com/e2b-dev/desktop
 # from e2b_desktop import Sandbox
@@ -126,12 +136,22 @@ You can pass a custom timeout to the `Sandbox.resume()` method like this:
 
 <CodeGroup>
 ```js
-import { Sandbox } from 'e2b'
+import { Sandbox } from '@e2b/code-interpreter'
+// or use Core: https://github.com/e2b-dev/e2b
+// import { Sandbox } from 'e2b'
+//
+// or use Desktop: https://github.com/e2b-dev/desktop
+// import { Sandbox } from '@e2b/desktop'
 
 const sbx = await Sandbox.resume(sandboxId, { timeoutMs: 60 * 1000 }) // 60 seconds
 ```
 ```python
-from e2b import Sandbox
+from e2b_code_interpreter import Sandbox
+# or use Core: https://github.com/e2b-dev/e2b
+# from e2b import Sandbox
+#
+# or use Desktop: https://github.com/e2b-dev/desktop
+# from e2b_desktop import Sandbox
 
 sbx = Sandbox.resume(sandbox_id, timeout=60) # 60 seconds
 ```

apps/web/src/components/Dashboard/Billing.tsx

@@ -12,6 +12,7 @@ import {
 } from '../ui/table'
 import SwitchToHobbyButton from '@/components/Pricing/SwitchToHobbyButton'
 import SwitchToProButton from '@/components/Pricing/SwitchToProButton'
+import { getBillingUrl } from '@/app/(dashboard)/dashboard/utils'
 
 function formatCurrency(value: number) {
   return value.toLocaleString('en-US', {
@@ -29,22 +30,25 @@ interface Invoice {
 
 export const BillingContent = ({
   team,
-  billingUrl,
+  domain,
 }: {
   team: Team
-  billingUrl: string
+  domain: string
 }) => {
   const [invoices, setInvoices] = useState<Invoice[]>([])
   const [credits, setCredits] = useState<number | null>(null)
 
   useEffect(() => {
     const getInvoices = async function getInvoices() {
       setInvoices([])
-      const res = await fetch(`${billingUrl}/teams/${team.id}/invoices`, {
-        headers: {
-          'X-Team-API-Key': team.apiKeys[0],
-        },
-      })
+      const res = await fetch(
+        getBillingUrl(domain, `/teams/${team.id}/invoices`),
+        {
+          headers: {
+            'X-Team-API-Key': team.apiKeys[0],
+          },
+        }
+      )
       if (!res.ok) {
         // TODO: add sentry error
         console.log(res)
@@ -55,17 +59,20 @@ export const BillingContent = ({
       setInvoices(invoices)
 
       setCredits(null)
-      const creditsRes = await fetch(`${billingUrl}/teams/${team.id}/usage`, {
-        headers: {
-          'X-Team-API-Key': team.apiKeys[0],
-        },
-      })
+      const creditsRes = await fetch(
+        getBillingUrl(domain, `/teams/${team.id}/usage`),
+        {
+          headers: {
+            'X-Team-API-Key': team.apiKeys[0],
+          },
+        }
+      )
       const credits = await creditsRes.json()
       setCredits(credits.credits)
     }
 
     getInvoices()
-  }, [team])
+  }, [domain, team])
 
   return (
     <div className="flex flex-col w-full">
@@ -108,7 +115,7 @@ export const BillingContent = ({
       <div className="flex flex-col items-start justify-center pb-10">
         <div className="flex items-center space-x-4">
           <h2>Pro tier</h2>
-          <SwitchToProButton billingApiURL={billingUrl} team={team} />
+          <SwitchToProButton domain={domain} team={team} />
         </div>
         <ul className="flex flex-col list-disc list-inside text-neutral-400">
           <li>One-time $100 credits</li>