Create Frontend Template App

.gitignore

@@ -13,7 +13,11 @@ state.json
 
 typescript/node_modules
 
+# Exclude schema folders in contracts outside of frontend
 contracts/**/schema
 schema/
 
+# Include schema folders in frontend
+!/frontend/**
+
 build/

README.md

@@ -17,7 +17,7 @@ Learn more about the requirements for developing Abstract apps in the [getting s
 To get started, the following commands:
 
 ```shell
-cargo generate --git https://github.com/AbstractSDK/app-template.git
+cargo generate --git https://github.com/AbstractSDK/templates.git
 ```
 
 It will prompt Project Name(will be used for namespace), App Name and Adapter Name.

frontend/.env.example

@@ -0,0 +1 @@
+ABSTRACT_API_URL=https://api.abstract.money/graphql

frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

frontend/.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.env
+
+.idea

frontend/README.md

@@ -0,0 +1,179 @@
+# Abstract Account App
+
+## Introduction
+
+This Abstract App Template is a web application that demonstrates interaction
+with Abstract Accounts on a CosmWasm-enabled blockchain. It leverages the
+following technology stack:
+
+- [React](https://react.dev/): A JavaScript library for building user interfaces
+- [TypeScript](https://www.typescriptlang.org/): Typed superset of JavaScript
+- [Next.js](https://nextjs.org/docs): React framework for production-grade
+  applications
+- [Tailwind CSS](https://tailwindcss.com/docs): Utility-first CSS framework
+- [GraphQL](https://graphql.org/): A query language for APIs
+- [React Query](https://tanstack.com/query/latest/docs/react/overview): Data
+  synchronization for React
+
+For blockchain interactions:
+
+- [Graz](https://graz.sh/docs): React hooks for Cosmos blockchain
+- [Abstract.js](https://js.abstract.money/): SDK for interacting with Abstract
+  Protocol
+
+## Features
+
+- Wallet connection and management using Graz
+- Creation of Abstract Accounts
+- Querying Abstract Account information via the Abstract GraphQL API
+- Code generation for type-safe interactions with smart contracts using
+  [Abstract.js](https://js.abstract.money/)
+
+## Prerequisites
+
+Before you begin, ensure you have met the following requirements:
+
+- pnpm
+- A Cosmos-compatible wallet (e.g., [Keplr](keplr.app))
+
+## Installation
+
+1. Clone the repository:
+ ```
+ git clone [email protected]:AbstractSDK/templates.git
+ ```
+
+2. Ensure that the schemas are generated:
+```bash
+cargo schema
+```
+2. Navigate to the project directory:
+ ```
+ cd templates/frontend
+ ```
+
+3. Install the dependencies:
+ ```
+ pnpm install
+ ```
+
+## Configuration
+
+1. Duplicate the `.env.example` file and rename it to `.env`:
+ ```
+ cp .env.example .env
+ ```
+
+2. Open the `.env` file and ensure it contains the following:
+ ```
+ ABSTRACT_API_URL=https://api.abstract.money/graphql
+ ```
+
+ You can modify the values if needed.
+
+## Updating abstract.config.ts
+
+Before running the code generation, follow these steps:
+
+1. Ensure that you have generated the module schema (see the
+   [Rust README](https://github.com/AbstractSDK/templates/blob/main/README.md)).
+   This step is crucial as it creates the necessary schema files for the code
+   generation process.
+
+
+2. After generating the module schema, update the `abstract.config.ts` file with
+   the proper module name, namespace, and version. Here's how:
+
+   a. Open the `abstract.config.ts` file in the project root directory.
+
+   b. Locate the `contracts` array in the configuration and update it to match
+   your module's details. For example:
+
+   ```typescript
+   contracts: [
+     {
+       name: "your_module_name",
+       path: "../contracts/your_module_name/schema/",
+       namespace: "your-namespace",
+       version: "0.1.0",
+       // moduleType: "adapter",
+       // moduleType: "app",
+     }
+   ],
+   ```
+
+   Replace `"your_module_name"`, `"your-namespace"`, and `"0.1.0"` with your
+   actual module name, namespace, and version respectively. Also, ensure the
+   `path` is correct for your project structure.
+
+   c. Save the changes to the `abstract.config.ts` file.
+
+After completing these steps, you can proceed with running the code generation command that references the module-generated code.
+
+## Code Generation
+
+```admonish info
+Before generating code, make sure that you run the `just schema` command to generate the schemas.
+```
+
+This project uses code generation for type-safe interactions with smart contracts and GraphQL queries. To generate the necessary code, run:
+
+```
+pnpm generate
+```
+
+This command will execute the following scripts:
+
+1. `generate:graz`: Generates chain information for Graz
+2. `generate:gql`: Generates TypeScript types for GraphQL queries using the
+   GraphQL Code Generator
+3. `generate:abstract`: Generates TypeScript types, methods, and hooks for smart
+   contract interactions using Abstract CLI
+
+## Development
+
+To start the development server, run:
+
+```
+pnpm dev
+```
+
+Navigate to `http://localhost:3000` in your web browser to use the application.
+
+## Troubleshooting
+
+### Error: ENOENT: no such file or directory
+
+If you encounter an error similar to the following:
+
+```bash
+ENOENT: no such file or directory, open '../contracts/{{app_name | snake_case}}/schema/module-schema.json'
+ELIFECYCLE  Command failed with exit code 1.
+```
+
+This error suggests that the contract schema files are not found in the expected
+location. To resolve this:
+
+1. Review your `abstract.config.ts` file.
+2. Ensure that the paths provided for your contract schemas are correct.
+3. Verify that the schema files exist in the specified directories.
+
+### Error: Module parse failed: Identifier 'Cw20BaseTypes' has already been declared
+
+If you encounter an error similar to the following:
+
+```shellscript
+⨯ ./app/_generated/generated-abstract/index.ts
+Module parse failed: Identifier 'Cw20BaseTypes' has already been declared (524:12)
+| export * from "./cosmwasm-codegen/Cw20Base.message-builder";
+| export * from "./cosmwasm-codegen/Cw20Base.message-composer";
+> import * as Cw20BaseTypes from "./cosmwasm-codegen/Cw20Base.types";
+| export { Cw20BaseTypes };
+```
+
+This error occurs due to a duplicate export in the generated code. To resolve
+this:
+
+1. Open the file `./app/_generated/generated-abstract/index.ts`.
+2. Locate and remove the duplicated export line for `Cw20BaseTypes`.
+3. Save the file and restart your development server.

frontend/abstract.config.ts

@@ -0,0 +1,46 @@
+import { defineConfig } from '@abstract-money/cli'
+import { react, registry, vanilla } from '@abstract-money/cli/plugins'
+
+export default defineConfig({
+  out: 'app/_generated/generated-abstract',
+  contracts: [
+    {
+      name: "{{app_name | snake_case}}",
+      path: "../contracts/{{app_name | snake_case}}/schema/abstract",
+      namespace: "{{project-name | kebab_case}}",
+      version: "0.1.0",
+      moduleType: "app",
+    },
+    //     {
+    //       name: "{{adapter_name | snake_case}}",
+    //       path: "../contracts/{{adapter_name | snake_case}}/schema/abstract",
+    //       namespace: "{{project-name | kebab_case}}",
+    //       version: "0.1.0",
+    //       moduleType: "adapter",
+    //     }
+    //     {
+    //       name: "{{standalone_name | snake_case}}",
+    //       // standalone contracts don't use the abstract folder
+    //       path: "../contracts/{{standalone_name | snake_case}}/schema",
+    //       namespace: "{{project-name | kebab_case}}",
+    //       version: "0.1.0",
+    //     }
+  ],
+  plugins: [
+    react({
+      disableAbstractAppFor: ['cw20-base']
+    }),
+    vanilla({
+      enableAbstractAppFor: [
+        '{{app_name | snake_case}}',
+        // '{{adapter_name | snake_case}}',
+      ]
+    }),
+    registry({
+      contracts: [{
+        namespace: 'cw-plus',
+        name: 'cw20-base',
+        version: '1.0.1'
+      }]
+  })],
+})

frontend/app/_components/codegen-contract.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import { cw20Base } from "../_generated/generated-abstract"
+import { useAccounts } from "@abstract-money/react"
+import { useAccount } from "graz"
+import { useAccountsMetadataGraphQLQuery } from "../_hooks/useQueryAccountsById"
+import { appChain } from "../../utils/chains"
+import { Card, CardContent, CardHeader, CardTitle } from "../../components/card"
+import { Alert, AlertDescription, AlertTitle } from "../../components/alert"
+import { AlertCircle } from "lucide-react"
+
+export const CodegenContract: React.FC = () => {
+  const contractAddress = "juno1ju8k8sqwsqu5k6umrypmtyqu2wqcpnrkf4w4mntvl0javt4nma7s8lzgss"
+  const chainId = appChain.chainId
+
+  const { data: cosmosAccount } = useAccount({ chainId })
+  const { data: accounts } = useAccounts({
+    args: {
+      owner: cosmosAccount?.bech32Address ?? "",
+      chains: [appChain.chainName],
+    },
+    query: {
+      enabled: !!cosmosAccount?.bech32Address,
+    },
+  })
+  const { data: accountsMetadata } = useAccountsMetadataGraphQLQuery({ accountIds: accounts })
+  const { data: balance, isLoading } = cw20Base.queries.useBalance({
+    contractAddress,
+    args: { address: accountsMetadata?.[0]?.proxy ?? "" },
+    options: { enabled: !!accountsMetadata?.[0]?.proxy && !!contractAddress },
+  })
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Codegen Contract Example</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {isLoading ? (
+          <p>Loading balance...</p>
+        ) : balance ? (
+          <div className="bg-gray-100 p-3 rounded-md">
+            <h3 className="font-semibold mb-2">Balance for address: {accountsMetadata?.[0]?.proxy ?? ""}</h3>
+            <p>
+              <strong>Balance:</strong> {balance.balance}
+            </p>
+          </div>
+        ) : (
+          <Alert variant="destructive">
+            <AlertCircle className="h-4 w-4" />
+            <AlertTitle>No balance found</AlertTitle>
+            <AlertDescription>
+              Connect your wallet and create an account to view your balance.
+            </AlertDescription>
+          </Alert>
+        )}
+      </CardContent>
+    </Card>
+  )
+}