Update CLI README

apps/cli/README.md

@@ -38,6 +38,8 @@ bun create arweave-app@latest
 
 During the interactive setup, you'll be prompted for your project's name and other configuration options. Provide your choices to create a new Arweave application.
 
+> If using a secure shell, ensure your ssh-agent is running as expected for successfull installation of dependencies.
+
 ### Non-interactive
 
 For a non-interactive setup, use command line arguments. You can view available options with:

apps/cli/my-arweave-app/.eslintrc.json

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

apps/cli/my-arweave-app/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# 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
+
+# arweave
+wallet.json
+contracts-dist

apps/cli/my-arweave-app/README.md

@@ -0,0 +1,53 @@
+# Arweave StarterKit
+
+Fast track your journey to building decentralized applications on Arweave with `create-arweave-app`. This CLI tool effortlessly sets up an entire application, harnessing the power of [NextJS](https://nextjs.org/) as the framework, [Shadcn UI](https://ui.shadcn.com/) for a sleek and aesthetic interface, and [ArweaveKit](https://arweavekit.com/?utm_source=Github&utm_medium=StarterKit+Repo&utm_campaign=Create-Arweave-App+StarterKit+Docs&utm_id=Create-Arweave-App+StarterKit+Docs) to seamlessly interact with the Arweave ecosystem.
+
+## Getting Started
+
+First, run the development:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.
+
+**Landing Page:** A form that allows users to upload Atomic assets on Arweave, complete with various metadata configurations.
+
+![Landing Page Form Preview](./public/landing-preview.png)
+
+**View Page:** A dedicated space to view the uploaded assets and engage with them through on-chain likes (known as stamps) and comments.
+
+![View Page Preview](./public/view-preview.png)
+
+Start editing the page by modifying `app/page.tsx` or `pages/index.ts`, as per your NextJS config.
+
+## Why use a StarterKit?
+
+Building DApps from scratch can be a daunting task. From setting up the environment to ensuring compatibility across different components, the process can be time-consuming. A scaffold provides a pre-configured foundation, enabling developers to focus on building unique features and functionalities rather than the underlying setup.
+
+## What are the key components of the StarterKit?
+
+- **Navbar:** A built-in navigation bar that integrates with [Arweave Wallet Kit](https://docs.arweavekit.com/wallets/wallet-kit?utm_source=Github&utm_medium=StarterKit+Repo&utm_campaign=Create-Arweave-App+StarterKit+Docs&utm_id=Create-Arweave-App+StarterKit+Docs), enabling users to connect to and interact with the DApp effortlessly.
+
+- **Landing Page:** A landing page featuring a form, typesafed with [Zod](https://zod.dev/) schemas. Users can upload images and add metadata, which is then posted to the Arweave network as an [atomic asset](https://cookbook.arweave.dev/concepts/atomic-tokens.html).
+
+- **Atomic Assets and Contracts:** Each asset is paired with an associated contract, enabling alterations to the metadata and transfer of ownership.
+
+- **View Page:** A space to showcase assets and metadata, augmented with features like [Stamps](https://stamps.arweave.dev/#/en/main) (Arweave's version of 'likes') and [on-chain comments](https://specs.ar-io.dev/#/view/SYCrxZYzhP_L_iwmxS7niejyeJ_XhJtN4EArplCPHGQ).
+
+## Leverage Modularity
+
+The true strength of this kit lies in its modularity. Simply interchange the core asset from image to music and transform an image sharing application to a music hub. Or swap in for videos to create a streaming service. As any form of data can be uploaded to the Arweave network, the possibilities are limitless.
+
+## Start Building
+
+Ready to build your first application on Arweave? [Get started now!](https://github.com/labscommunity/starterkit/blob/main/apps/cli/README.md)
+
+Checkout the [ArweaveKit docs](https://docs.arweavekit.com/arweavekit/introduction?utm_source=Github&utm_medium=StarterKit+Repo&utm_campaign=Create-Arweave-App+StarterKit+Docs&utm_id=Create-Arweave-App+StarterKit+Docs) to customize the application and add more features and follow us on [X](https://twitter.com/CommunityLabs) to stay updated on all things Arweave.

apps/cli/my-arweave-app/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

apps/cli/my-arweave-app/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ["warp-contracts-plugin-signature"],
+};
+
+module.exports = nextConfig;

apps/cli/my-arweave-app/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "my-arweave-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "deploy-contracts": "node ./scripts/deploy.mjs"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.3.2",
+    "@permaweb/stampjs": "^0.5.7",
+    "@radix-ui/react-aspect-ratio": "^1.0.3",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-hover-card": "^1.0.7",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toast": "^1.1.5",
+    "arweave": "^1.14.4",
+    "arweave-wallet-kit": "^1.0.3",
+    "arweavekit": "^1.5.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "lucide-react": "^0.288.0",
+    "next": "13.5.6",
+    "next-themes": "^0.2.1",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-hook-form": "^7.47.0",
+    "react-responsive": "^9.0.2",
+    "sharp": "^0.31.3",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7",
+    "warp-contracts": "^1.4.21",
+    "warp-contracts-plugin-signature": "^1.0.17",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^9.0.0",
+    "esbuild": "^0.19.5",
+    "eslint": "^8",
+    "eslint-config-next": "13.5.6",
+    "postcss": "^8",
+    "replace-in-file": "^7.0.1",
+    "tailwindcss": "^3",
+    "typescript": "^5",
+    "warp-contracts-plugin-deploy": "^1.0.9"
+  },
+  "caaMetadata": {
+    "initVersion": "0.1.0"
+  },
+  "packageManager": "[email protected]"
+}

apps/cli/my-arweave-app/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

apps/cli/my-arweave-app/scripts/deploy.mjs

@@ -0,0 +1,62 @@
+// script to deploy contract source
+
+import fs from "fs";
+import * as esbuild from "esbuild";
+import { DeployPlugin, ArweaveSigner } from "warp-contracts-plugin-deploy";
+import { WarpFactory } from "warp-contracts";
+import replace from "replace-in-file";
+import path from "path";
+
+(async () => {
+  // intiating new warp instance for mainnet
+  const warp = WarpFactory.forMainnet().use(new DeployPlugin());
+
+  // read private key file
+  // *store with name 'wallet.json' in root direstory of project if needed
+  const key = JSON.parse(fs.readFileSync("wallet.json").toString());
+
+  // get absolute path for project directory
+  const __dirname = path.resolve();
+
+  await esbuild.build({
+    entryPoints: [
+      `src/contracts/contract.${
+        fs.existsSync("src/contracts/contract.ts") ? "ts" : "js"
+      }`,
+    ],
+    bundle: true,
+    outfile: "contracts-dist/contract.js",
+    format: "esm",
+  });
+
+  const files = [`./contracts-dist/contract.js`];
+
+  replace.sync({
+    files: files,
+    from: [/async function handle/g, /export {\n {2}handle\n};\n/g],
+    to: ["export async function handle", ""],
+    countMatches: true,
+  });
+
+  // read contract source logic from 'handle.js' and encode it
+  const contractSource = fs.readFileSync(
+    path.join(__dirname, "contracts-dist/contract.js"),
+    "utf-8"
+  );
+
+  // function create new contract source
+  const newSource = await warp.createSource(
+    { src: contractSource },
+    new ArweaveSigner(key)
+  );
+  const newSrcId = await warp.saveSource(newSource);
+
+  // write new function source's transaction id to new file
+  fs.writeFileSync(
+    path.join(__dirname, "src", "contracts", "contractData.json"),
+    JSON.stringify({ contractId: newSrcId })
+  );
+
+  // log new function source's transaction id
+  console.log("New Source Contract Id: ", newSrcId);
+})();

apps/cli/my-arweave-app/src/app/layout.tsx

@@ -0,0 +1,72 @@
+import "@/styles/globals.css";
+import { Metadata } from "next";
+
+import { siteConfig } from "@/config/site";
+import { fontSans } from "@/lib/fonts";
+import { cn } from "@/lib/utils";
+import { SiteHeader } from "@/components/site-header";
+import { TailwindIndicator } from "@/components/tailwind-indicator";
+import { ThemeProvider } from "@/components/theme-provider";
+import { ArweaveWalletKit } from "arweave-wallet-kit";
+import { UserProvider } from "../hooks/useUser";
+import { Footer } from "@/components/footer";
+import { Toaster } from "@/components/ui/toaster";
+
+export const metadata: Metadata = {
+  title: {
+    default: siteConfig.name,
+    template: `%s - ${siteConfig.name}`,
+  },
+  description: siteConfig.description,
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "white" },
+    { media: "(prefers-color-scheme: dark)", color: "black" },
+  ],
+  icons: {
+    icon: "/favicon.ico",
+    shortcut: "/favicon-16x16.png",
+    apple: "/apple-touch-icon.png",
+  },
+};
+
+interface RootLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function RootLayout({ children }: RootLayoutProps) {
+  return (
+    <>
+      <html lang="en" suppressHydrationWarning>
+        <head />
+        <body
+          className={cn(
+            "min-h-screen bg-background font-sans antialiased",
+            fontSans.variable
+          )}
+        >
+          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+            <ArweaveWalletKit
+              config={{
+                permissions: ["ACCESS_ADDRESS", "SIGN_TRANSACTION", "DISPATCH"],
+                ensurePermissions: true,
+                appInfo: {
+                  name: "StarterKit",
+                },
+              }}
+            >
+              <UserProvider>
+                <div className="relative flex min-h-screen flex-col">
+                  <SiteHeader />
+                  <div className="flex-1">{children}</div>
+                  <Toaster />
+                  <Footer />
+                </div>
+                <TailwindIndicator />
+              </UserProvider>
+            </ArweaveWalletKit>
+          </ThemeProvider>
+        </body>
+      </html>
+    </>
+  );
+}

apps/cli/my-arweave-app/src/app/page.tsx

@@ -0,0 +1,24 @@
+import { InputForm } from "@/components/input-form";
+import { siteConfig } from "@/config/site";
+
+export const metadata = {
+  title: `Home - ${siteConfig.name}`,
+};
+
+export default function IndexPage() {
+  return (
+    <div className="flex">
+      <section className="container grid items-center gap-6 py-8 md:py-10 w-full">
+        <div className="flex max-w-[980px] flex-col items-start gap-2">
+          <h1 className="text-3xl font-extrabold leading-tight tracking-tighter md:text-4xl">
+            Create your own Atomic Assets 🖼️
+          </h1>
+          <p className="max-w-[700px] text-lg text-muted-foreground">
+            With real world rights.
+          </p>
+        </div>
+        <InputForm />
+      </section>
+    </div>
+  );
+}

apps/cli/my-arweave-app/src/app/view/page.tsx

@@ -0,0 +1,23 @@
+import { Assets } from "@/components/assets";
+
+export const metadata = {
+  title: `View`,
+};
+
+export default function ViewPage() {
+  return (
+    <div className="flex">
+      <section className="container grid items-center gap-6 py-8 md:py-10 w-full">
+        <div className="flex max-w-[980px] flex-col items-start gap-2">
+          <h1 className="text-3xl font-extrabold leading-tight tracking-tighter md:text-4xl">
+            View your Atomic Assets 🖼️
+          </h1>
+          <p className="max-w-[700px] text-lg text-muted-foreground">
+            With on-chain likes and comments.
+          </p>
+        </div>
+        <Assets />
+      </section>
+    </div>
+  );
+}