tooltips

Author: joaquim-verges

apps/dashboard/.env.example

@@ -108,3 +108,4 @@ STRIPE_SECRET_KEY=""
 
 # required for server wallet management
 NEXT_PUBLIC_THIRDWEB_VAULT_URL=""
+NEXT_PUBLIC_ENGINE_CLOUD_URL=""

apps/dashboard/src/@/constants/env.ts

@@ -7,6 +7,9 @@ export const DASHBOARD_THIRDWEB_SECRET_KEY =
 export const THIRDWEB_VAULT_URL =
   process.env.NEXT_PUBLIC_THIRDWEB_VAULT_URL || "";
 
+export const THIRDWEB_ENGINE_CLOUD_URL =
+  process.env.NEXT_PUBLIC_ENGINE_CLOUD_URL || "";
+
 export const THIRDWEB_API_SECRET = process.env.API_SERVER_SECRET || "";
 
 export const IPFS_GATEWAY_URL =

apps/dashboard/src/app/team/[team_slug]/[project_slug]/transactions/server-wallets/components/create-server-wallet.tsx

@@ -334,8 +334,6 @@ export default function CreateServerWallet(props: {
         throw new Error("Failed to create eoa");
       }
 
-      console.log(JSON.stringify(eoa.data, null, 2));
-
       router.refresh();
 
       return eoa;
@@ -401,15 +399,15 @@ export default function CreateServerWallet(props: {
                 <Alert variant="destructive">
                   <AlertTitle>Secure your keys</AlertTitle>
                   <AlertDescription>
-                    These keys cannot be recovered. Store them securely as they
-                    provide access to your wallet.
+                    These keys will not be displayed again. Store them securely
+                    as they provide access to your server wallets.
                   </AlertDescription>
                 </Alert>
 
                 <div className="space-y-4">
                   <div>
                     <h3 className="mb-2 font-medium text-sm">Admin Key</h3>
-                    <div className="rounded-lg border bg-card p-3">
+                    <div className="flex flex-col gap-2 rounded-lg border bg-card p-3">
                       <CopyTextButton
                         textToCopy={
                           initialiseProjectWithVaultMutation.data.serviceAccount
@@ -423,12 +421,16 @@ export default function CreateServerWallet(props: {
                         copyIconPosition="right"
                         tooltip="Copy Admin Key"
                       />
+                      <p className="text-muted-foreground text-xs">
+                        This key is used to create or modify your server
+                        wallets. Save it in a secure location.
+                      </p>
                     </div>
                   </div>
 
                   <div>
                     <h3 className="mb-2 font-medium text-sm">Rotation Code</h3>
-                    <div className="rounded-lg border bg-card p-3">
+                    <div className="flex flex-col gap-2 rounded-lg border bg-card p-3">
                       <CopyTextButton
                         textToCopy={
                           initialiseProjectWithVaultMutation.data.serviceAccount
@@ -442,12 +444,16 @@ export default function CreateServerWallet(props: {
                         copyIconPosition="right"
                         tooltip="Copy Rotation Code"
                       />
+                      <p className="text-muted-foreground text-xs">
+                        This code is used to rotate your admin key in case you
+                        loose it. Save it in a secure location.
+                      </p>
                     </div>
                   </div>
 
                   <div>
                     <h3 className="mb-2 font-medium text-sm">Access Token</h3>
-                    <div className="rounded-lg border bg-card p-3">
+                    <div className="flex flex-col gap-2 rounded-lg border bg-card p-3">
                       <CopyTextButton
                         textToCopy={
                           initialiseProjectWithVaultMutation.data
@@ -461,6 +467,11 @@ export default function CreateServerWallet(props: {
                         copyIconPosition="right"
                         tooltip="Copy Access Token"
                       />
+                      <p className="text-muted-foreground text-xs">
+                        This access token is used to send transactions to the
+                        blockchain from your backend. Can be revoked and
+                        recreated with your admin key.
+                      </p>
                     </div>
                   </div>
                 </div>

apps/dashboard/src/app/team/[team_slug]/[project_slug]/transactions/server-wallets/components/try-it-out.tsx

@@ -1,15 +1,18 @@
 import { Button } from "@/components/ui/button";
 import { CodeServer } from "../../../../../../../@/components/ui/code/code.server";
+import { THIRDWEB_ENGINE_CLOUD_URL } from "../../../../../../../@/constants/env";
 
 export function TryItOut() {
   return (
     <div className="flex flex-col gap-6 overflow-hidden rounded-lg border border-border bg-card p-6">
       <div className="flex flex-row items-center gap-4">
         <div className="flex flex-1 flex-col gap-4 rounded-lg rounded-b-none lg:flex-row lg:justify-between">
           <div>
-            <h2 className="font-semibold text-xl tracking-tight">Usage</h2>
+            <h2 className="font-semibold text-xl tracking-tight">
+              Usage from your backend
+            </h2>
             <p className="text-muted-foreground text-sm">
-              Simple http API to send transactions to the blockchain
+              Send transactions to the blockchain using a simple http API
             </p>
           </div>
         </div>
@@ -26,7 +29,7 @@ export function TryItOut() {
   );
 }
 const typescriptCodeExample = () => `\
-const response = fetch("https://wallet.thirdweb.com/v1/account/send-transaction", {
+const response = fetch("${THIRDWEB_ENGINE_CLOUD_URL}/account/send-transaction", {
   method: "POST",
   headers: {
     "Content-Type": "application/json",