feat: adds create-app example

lens-protocol · Dec 18, 2024 · 708e86f · 708e86f
1 parent e22b57a
commit 708e86f
Show file tree

Hide file tree

Showing 10 changed files with 130 additions and 4 deletions.
diff --git a/examples/viem-onboarding/README.md → examples/create-app/README.md b/examples/viem-onboarding/README.md → examples/create-app/README.md
@@ -1,3 +1,3 @@
-# Viem Onboarding Example
+# Create an App
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/lens-protocol/lens-sdk/tree/next/examples/viem-onboarding)
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/lens-protocol/lens-sdk/tree/next/examples/create-app)
diff --git a/examples/viem-onboarding/index.html → examples/create-app/index.html b/examples/viem-onboarding/index.html → examples/create-app/index.html
@@ -3,9 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
   </head>
   <body>
-    <h1>Viem Onboarding Example</h1>
+    <h1>Create an App</h1>
     <div id="app">Loading...</div>
     <script type="module">
       import out from './index.ts';

diff --git a/examples/create-app/index.ts b/examples/create-app/index.ts
@@ -0,0 +1,66 @@
+import 'viem/window';
+
+import { chains } from '@lens-network/sdk/viem';
+import { PublicClient, testnet as protocolTestnet } from '@lens-protocol/client';
+import { createApp, fetchApp } from '@lens-protocol/client/actions';
+import { handleWith } from '@lens-protocol/client/viem';
+import { Platform, app } from '@lens-protocol/metadata';
+import { StorageClient, testnet as storageTestnet } from '@lens-protocol/storage-node-client';
+import { type Address, createWalletClient, custom } from 'viem';
+
+const chain = chains.testnet;
+
+// hoist account
+const [address] = (await window.ethereum!.request({ method: 'eth_requestAccounts' })) as [Address];
+
+const walletClient = createWalletClient({
+  account: address,
+  chain,
+  transport: custom(window.ethereum!),
+});
+
+const client = PublicClient.create({
+  environment: protocolTestnet,
+});
+
+const sessionClient = await client
+  .login({
+    builder: {
+      address: walletClient.account.address,
+    },
+    signMessage: async (message) => walletClient.signMessage({ message }),
+  })
+  .match(
+    (result) => result,
+    (error) => {
+      throw error;
+    },
+  );
+
+const storageClient = StorageClient.create(storageTestnet);
+
+const metadata = app({
+  name: 'My App',
+  url: 'https://example.com',
+  description: 'My app description',
+  platforms: [Platform.WEB],
+  developer: '[email protected]',
+});
+
+const { uri } = await storageClient.uploadAsJson(metadata);
+
+const created = await createApp(sessionClient, {
+  metadataUri: uri,
+  verification: false, // will become optional soon
+})
+  .andThen(handleWith(walletClient))
+  .andThen(sessionClient.waitForTransaction)
+  .andThen((txHash) => fetchApp(sessionClient, { txHash }))
+  .match(
+    (result) => result,
+    (error) => {
+      throw error;
+    },
+  );
+
+export default [`<h2>${created?.metadata?.name}</h2>`, `<p>Address: ${await created?.address}</p>`];
diff --git a/examples/viem-onboarding/package.json → examples/create-app/package.json b/examples/viem-onboarding/package.json → examples/create-app/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "example-viem-onboarding",
+  "name": "example-create-app",
   "private": true,
   "type": "module",
   "scripts": {

diff --git a/examples/viem-onboarding/tsconfig.json → examples/create-app/tsconfig.json b/examples/viem-onboarding/tsconfig.json → examples/create-app/tsconfig.json
diff --git a/examples/user-onboarding/README.md b/examples/user-onboarding/README.md
@@ -0,0 +1,3 @@
+# User Onboarding
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/lens-protocol/lens-sdk/tree/next/examples/user-onboarding)
diff --git a/examples/user-onboarding/index.html b/examples/user-onboarding/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
+  </head>
+  <body>
+    <h1>User Onboarding Example</h1>
+    <div id="app">Loading...</div>
+    <script type="module">
+      import out from './index.ts';
+      document.querySelector('#app').innerHTML = Array.isArray(out)
+        ? out.map((x) => `<div style="margin-bottom: 16px;">${x}</div>`).join('')
+        : out;
+    </script>
+  </body>
+</html>
diff --git a/examples/viem-onboarding/index.ts → examples/user-onboarding/index.ts b/examples/viem-onboarding/index.ts → examples/user-onboarding/index.ts
diff --git a/examples/user-onboarding/package.json b/examples/user-onboarding/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "example-user-onboarding",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite"
+  },
+  "dependencies": {
+    "@lens-network/sdk": "canary",
+    "@lens-protocol/client": "canary",
+    "@lens-protocol/metadata": "next",
+    "@lens-protocol/storage-node-client": "next",
+    "viem": "^2.21.55"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.3",
+    "vite": "^5.4.11"
+  }
+}
diff --git a/examples/user-onboarding/tsconfig.json b/examples/user-onboarding/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["ESNext", "DOM"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true
+  },
+  "include": ["./"]
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# User Onboarding

		[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/lens-protocol/lens-sdk/tree/next/examples/user-onboarding)