Add engine dashboard (#1815)

* feat: Add Engine tab to dashboard

* A lot of stuff? Config done

* Backend wallets table

* Add import/create backend wallet capabilities

* Update margin

* Filter txns by chain id

* Add balance check

* Fix build

* Add functions

* Only show remove config if not on local

* whoops

* Add tracking for set wallet config

* Try again

* Update schema for txns

* Update design, save URL in local storage

* Add trailing slash always

* Always simplify url

* Auth works

* Add admin grant/revoke

* Reshuffle stuff

* Add access tokens capabilities

* Add webhooks capabilities

* General updates

* Add local config

* Renaming and moving stuff around

* Hide tab

---------

Co-authored-by: Phillip Ho <[email protected]>
Co-authored-by: Jonas Daniels <[email protected]>

Author: 3 people

@3rdweb-sdk/react/cache-keys.ts

@@ -44,6 +44,28 @@ export const embeddedWalletsKeys = {
     [...embeddedWalletsKeys.wallet(walletAddress), clientId] as const,
 };
 
+export const engineKeys = {
+  all: ["engine"] as const,
+  backendWallets: (instance: string) =>
+    [...engineKeys.all, instance, "backendWallets"] as const,
+  transactions: (instance: string) =>
+    [...engineKeys.all, instance, "transactions"] as const,
+  permissions: (instance: string) =>
+    [...engineKeys.all, instance, "permissions"] as const,
+  accessTokens: (instance: string) =>
+    [...engineKeys.all, instance, "accessTokens"] as const,
+  webhooks: (instance: string) =>
+    [...engineKeys.all, instance, "webhooks"] as const,
+  webhookEventTypes: (instance: string) =>
+    [...engineKeys.all, instance, "webhookEventTypes"] as const,
+  walletConfig: (instance: string) =>
+    [...engineKeys.all, instance, "walletConfig"] as const,
+  backendWallet: (address: string, chainId: number) =>
+    ["backendWallet", address, chainId] as const,
+  backendWalletBalance: (address: string, chainId: number) =>
+    [...engineKeys.backendWallet(address, chainId), "balance"] as const,
+};
+
 export const contractKeys = {
   all: ["contract"] as const,
   lists: () => [...contractKeys.all, "list"] as const,

@3rdweb-sdk/react/components/connect-wallet/index.tsx

@@ -27,7 +27,15 @@ export const CustomConnectWallet: React.FC<ConnectWalletProps> = ({ auth }) => {
 
   return (
     <ConnectWallet
-      auth={auth}
+      auth={{
+        onLogin(token) {
+          localStorage.setItem("engine-auth", token);
+        },
+        onLogout() {
+          localStorage.removeItem("engine-auth");
+        },
+        ...auth,
+      }}
       theme={colorMode}
       welcomeScreen={() => {
         return <ConnectWalletWelcomeScreen theme={colorMode} />;