Abstraxion dynamic url to dashboard (#41)

* linked abstraxion to dashboard via dynamic url; initial grant flow * linked abstraxion to dashboard via dynamic url; initial grant flow * changed package versions to workspace:* * regenerate pnpm-lock
burnt-labs · Jan 16, 2024 · a269cdf · a269cdf · vercel · Jan 16, 2024
1 parent e01939a
commit a269cdf
Show file tree

Hide file tree

Showing 18 changed files with 150 additions and 162 deletions.
diff --git a/.changeset/blue-lobsters-taste.md b/.changeset/blue-lobsters-taste.md
@@ -0,0 +1,7 @@
+---
+"abstraxion-dashboard": minor
+"@burnt-labs/abstraxion": minor
+"demo-app": minor
+---
+
+abstraxion dynamic url for grant creation on dashboard
diff --git a/apps/abstraxion-dashboard/app/page.tsx b/apps/abstraxion-dashboard/app/page.tsx
@@ -26,12 +26,12 @@ export default function Home() {
   const { client } = useAbstraxionSigningClient();
   const accountBalance = useAccountBalance(account, client);
 
-  const permissions = searchParams.get("permissions");
+  const contracts = searchParams.get("contracts");
   const grantee = searchParams.get("grantee");
 
   return (
     <>
-      {!account?.bech32Address || (permissions && grantee) ? (
+      {!account?.bech32Address || (contracts && grantee) ? (
         <div className="ui-flex ui-h-screen ui-flex-1 ui-items-center ui-justify-center ui-overflow-y-auto ui-p-6">
           <Abstraxion onClose={() => null} isOpen={true} />
         </div>

diff --git a/apps/abstraxion-dashboard/components/Abstraxion/index.tsx b/apps/abstraxion-dashboard/components/Abstraxion/index.tsx
@@ -37,7 +37,9 @@ export const Abstraxion = ({ isOpen, onClose }: ModalProps) => {
     data: account,
   } = useAbstraxionAccount();
 
-  const permissions = searchParams.get("permissions");
+  const contracts = searchParams.get("contracts");
+  const contractsArray = contracts?.split(",") || [];
+
   const grantee = searchParams.get("grantee");
   useEffect(() => {
     const closeOnEscKey = (e: any) => (e.key === "Escape" ? onClose() : null);
@@ -56,8 +58,8 @@ export const Abstraxion = ({ isOpen, onClose }: ModalProps) => {
           <ErrorDisplay message={abstraxionError} onClose={onClose} />
         ) : isConnecting || isReconnecting ? (
           <Loading />
-        ) : account?.bech32Address && permissions && grantee ? (
-          <AbstraxionGrant permissions={permissions} grantee={grantee} />
+        ) : account?.bech32Address && contracts && grantee ? (
+          <AbstraxionGrant contracts={contractsArray} grantee={grantee} />
         ) : isConnected ? (
           <AbstraxionWallets />
         ) : (

diff --git a/apps/abstraxion-dashboard/components/AbstraxionGrant/index.tsx b/apps/abstraxion-dashboard/components/AbstraxionGrant/index.tsx
@@ -1,26 +1,24 @@
 "use client";
-
+import { useState } from "react";
 import Image from "next/image";
-
-import burntAvatar from "@/public/burntAvatarCircle.png";
-import { CheckIcon } from "../Icons";
 import { Button, Spinner } from "@burnt-labs/ui";
-import { useAbstraxionAccount, useAbstraxionSigningClient } from "@/hooks";
 import { MsgGrant } from "cosmjs-types/cosmos/authz/v1beta1/tx";
 import {
   ContractExecutionAuthorization,
   MaxCallsLimit,
 } from "cosmjs-types/cosmwasm/wasm/v1/authz";
+import { useAbstraxionAccount, useAbstraxionSigningClient } from "@/hooks";
+import burntAvatar from "@/public/burntAvatarCircle.png";
+import { CheckIcon } from "../Icons";
 import { EncodeObject } from "@cosmjs/proto-signing";
-import { useState } from "react";
 
 interface AbstraxionGrantProps {
-  permissions: string;
+  contracts: string[];
   grantee: string;
 }
 
 export const AbstraxionGrant = ({
-  permissions,
+  contracts,
   grantee,
 }: AbstraxionGrantProps) => {
   const { client } = useAbstraxionSigningClient();
@@ -29,60 +27,52 @@ export const AbstraxionGrant = ({
   const [inProgress, setInProgress] = useState(false);
   const [showSuccess, setShowSuccess] = useState(false);
 
-  const generateContractGrant = async () => {
+  const generateContractGrant = (granter: string) => {
     const timestampThreeMonthsFromNow = Math.floor(
       new Date(new Date().setMonth(new Date().getMonth() + 3)).getTime() / 1000,
     );
-    const granter = account?.bech32Address;
 
-    if (client && granter) {
-      const contractExecutionAuthorizationValue =
-        ContractExecutionAuthorization.encode(
-          ContractExecutionAuthorization.fromPartial({
-            grants: [
-              {
-                contract: permissions,
-                limit: {
-                  typeUrl: "/cosmwasm.wasm.v1.MaxCallsLimit",
-                  value: MaxCallsLimit.encode(
-                    MaxCallsLimit.fromPartial({
-                      // Picking a giant number here since something like `UnlimitedCallsLimit` doesn't appear to be available
-                      remaining: "4096",
-                    }),
-                  ).finish(),
-                },
-                filter: {
-                  typeUrl: "/cosmwasm.wasm.v1.AllowAllMessagesFilter",
-                },
-              },
-            ],
-          }),
-        ).finish();
-
-      const grantValue = MsgGrant.fromPartial({
-        grant: {
-          authorization: {
-            typeUrl: "/cosmwasm.wasm.v1.ContractExecutionAuthorization",
-            value: contractExecutionAuthorizationValue,
-          },
-          expiration: {
-            seconds: timestampThreeMonthsFromNow,
-          },
+    const contractExecutionAuthorizationValue =
+      ContractExecutionAuthorization.encode(
+        ContractExecutionAuthorization.fromPartial({
+          grants: contracts.map((contractAddress) => ({
+            contract: contractAddress,
+            limit: {
+              typeUrl: "/cosmwasm.wasm.v1.MaxCallsLimit",
+              value: MaxCallsLimit.encode(
+                MaxCallsLimit.fromPartial({
+                  remaining: "255",
+                }),
+              ).finish(),
+            },
+            filter: {
+              typeUrl: "/cosmwasm.wasm.v1.AllowAllMessagesFilter",
+            },
+          })),
+        }),
+      ).finish();
+    const grantValue = MsgGrant.fromPartial({
+      grant: {
+        authorization: {
+          typeUrl: "/cosmwasm.wasm.v1.ContractExecutionAuthorization",
+          value: contractExecutionAuthorizationValue,
+        },
+        expiration: {
+          seconds: timestampThreeMonthsFromNow,
         },
-        grantee,
-        granter,
-      });
+      },
+      grantee,
+      granter,
+    });
 
-      return {
-        typeUrl: "/cosmos.authz.v1beta1.MsgGrant",
-        value: grantValue,
-      };
-    }
+    return {
+      typeUrl: "/cosmos.authz.v1beta1.MsgGrant",
+      value: grantValue,
+    };
   };
 
   const grant = async () => {
     setInProgress(true);
-    console.log({ client, account });
     if (!client) {
       throw new Error("no client");
     }
@@ -91,7 +81,8 @@ export const AbstraxionGrant = ({
       throw new Error("no account");
     }
 
-    const msg = await generateContractGrant();
+    const granter = account.bech32Address;
+    const msg = generateContractGrant(granter);
 
     try {
       const foo = await client?.signAndBroadcast(
@@ -102,7 +93,6 @@ export const AbstraxionGrant = ({
           gas: "500000",
         },
       );
-      console.log(foo);
       setShowSuccess(true);
       setInProgress(false);
     } catch (error) {

diff --git a/apps/abstraxion-dashboard/components/Icons/Check.tsx b/apps/abstraxion-dashboard/components/Icons/Check.tsx
@@ -10,7 +10,7 @@ export const CheckIcon = ({ color = "black" }: { color?: string }) => (
       id="Checkmark"
       d="M1 5.55556L5.28571 10L14 1"
       stroke={color}
-      stroke-width="1.5"
+      strokeWidth="1.5"
     />
   </svg>
 );
diff --git a/apps/abstraxion-dashboard/components/Icons/ChevronDown.tsx b/apps/abstraxion-dashboard/components/Icons/ChevronDown.tsx
@@ -9,7 +9,7 @@ export const ChevronDownIcon = ({ color = "black" }: { color?: string }) => (
     <path
       d="M16.2426 10.2426L12 14.4853L7.75736 10.2426"
       stroke={color}
-      stroke-width="1.5"
+      strokeWidth="1.5"
     />
   </svg>
 );
diff --git a/apps/abstraxion-dashboard/package.json b/apps/abstraxion-dashboard/package.json
@@ -27,7 +27,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@burnt-labs/tsconfig": "0.0.1-alpha.0",
+    "@burnt-labs/tsconfig": "workspace:*",
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^20",
     "@types/react": "^18.2.47",

diff --git a/apps/demo-app/package.json b/apps/demo-app/package.json
@@ -9,9 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@burnt-labs/abstraxion": "0.1.0-alpha.20",
-    "@burnt-labs/signers": "0.0.1-alpha.2",
-    "@burnt-labs/ui": "0.0.1-alpha.2",
+    "@burnt-labs/abstraxion": "workspace:*",
+    "@burnt-labs/signers": "workspace:*",
+    "@burnt-labs/ui": "workspace:*",
     "@cosmjs/cosmwasm-stargate": "^0.31.3",
     "next": "^14.0.3",
     "react": "^18.2.0",

diff --git a/apps/demo-app/public/circles.svg b/apps/demo-app/public/circles.svg
diff --git a/apps/demo-app/src/app/layout.tsx b/apps/demo-app/src/app/layout.tsx
@@ -14,7 +14,14 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <AbstraxionProvider>{children}</AbstraxionProvider>
+        <AbstraxionProvider
+          contracts={[
+            "xion1ly5vunf97qzevm6cu8jq3c5ltj2mlwf4s7g6x5du4atd206m2w0qf2hxsz",
+            "xion1ug4wpsjpn9k0r9rcdx5dq39h6hhe9uvwn3z0gfqnpz6xxvw3cd3sygy3x6",
+          ]}
+        >
+          {children}
+        </AbstraxionProvider>
       </body>
     </html>
   );

diff --git a/packages/abstraxion/package.json b/packages/abstraxion/package.json
@@ -24,9 +24,9 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@burnt-labs/eslint-config-custom": "0.0.1-alpha.0",
-    "@burnt-labs/tailwind-config": "0.0.1-alpha.1",
-    "@burnt-labs/tsconfig": "0.0.1-alpha.0",
+    "@burnt-labs/eslint-config-custom": "workspace:*",
+    "@burnt-labs/tailwind-config": "workspace:*",
+    "@burnt-labs/tsconfig": "workspace:*",
     "@types/react": "^18.2.47",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.20",
@@ -39,9 +39,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.8.8",
-    "@burnt-labs/constants": "0.0.1-alpha.2",
-    "@burnt-labs/signers": "0.0.1-alpha.2",
-    "@burnt-labs/ui": "0.0.1-alpha.2",
+    "@burnt-labs/constants": "workspace:*",
+    "@burnt-labs/signers": "workspace:*",
+    "@burnt-labs/ui": "workspace:*",
     "@stytch/nextjs": "^14.0.0",
     "@stytch/vanilla-js": "^3.2.1",
     "@types/react-dom": "^18.2.18",

diff --git a/packages/abstraxion/src/components/Abstraxion/index.tsx b/packages/abstraxion/src/components/Abstraxion/index.tsx
@@ -57,16 +57,14 @@ export function Abstraxion({
 
 export function AbstraxionProvider({
   children,
+  contracts,
 }: {
   children: React.ReactNode;
+  contracts?: string[];
 }): JSX.Element {
   return (
-    <AbstraxionContextProvider>
-      <StytchProvider stytch={stytchClient}>
-        <ApolloProvider client={apolloClient}>
-          <GrazProvider>{children}</GrazProvider>
-        </ApolloProvider>
-      </StytchProvider>
+    <AbstraxionContextProvider contracts={contracts}>
+      {children}
     </AbstraxionContextProvider>
   );
 }
diff --git a/packages/abstraxion/src/components/AbstraxionContext/index.tsx b/packages/abstraxion/src/components/AbstraxionContext/index.tsx
@@ -10,6 +10,7 @@ export interface AbstraxionContextProps {
   setAbstraxionError: React.Dispatch<React.SetStateAction<string>>;
   abstraxionAccount: DirectSecp256k1HdWallet | undefined;
   setAbstraxionAccount: React.Dispatch<DirectSecp256k1HdWallet | undefined>;
+  contracts?: string[];
 }
 
 export const AbstraxionContext = createContext<AbstraxionContextProps>(
@@ -18,8 +19,10 @@ export const AbstraxionContext = createContext<AbstraxionContextProps>(
 
 export const AbstraxionContextProvider = ({
   children,
+  contracts,
 }: {
   children: ReactNode;
+  contracts?: string[];
 }) => {
   const [abstraxionError, setAbstraxionError] = useState("");
   const [isConnected, setIsConnected] = useState(false);
@@ -39,6 +42,7 @@ export const AbstraxionContextProvider = ({
         setAbstraxionError,
         abstraxionAccount,
         setAbstraxionAccount,
+        contracts,
       }}
     >
       {children}