init

samlinux-development · Feb 29, 2024 · e51a252 · e51a252
commit e51a252
Show file tree

Hide file tree

Showing 29 changed files with 1,431 additions and 0 deletions.
diff --git a/.env b/.env
@@ -0,0 +1,15 @@
+
+# DFX CANISTER ENVIRONMENT VARIABLES
+DFX_VERSION='0.17.0'
+DFX_NETWORK='local'
+CANISTER_CANDID_PATH_backend='/Users/rbole/Sites/starterKits/ic-solidjs/.dfx/local/canisters/backend/backend.did'
+CANISTER_CANDID_PATH_BACKEND='/Users/rbole/Sites/starterKits/ic-solidjs/.dfx/local/canisters/backend/backend.did'
+FRONTEND_CANISTER_ID='be2us-64aaa-aaaaa-qaabq-cai'
+CANISTER_ID_FRONTEND='be2us-64aaa-aaaaa-qaabq-cai'
+CANISTER_ID_frontend='be2us-64aaa-aaaaa-qaabq-cai'
+BACKEND_CANISTER_ID='bkyz2-fmaaa-aaaaa-qaaaq-cai'
+CANISTER_ID_BACKEND='bkyz2-fmaaa-aaaaa-qaaaq-cai'
+CANISTER_ID_backend='bkyz2-fmaaa-aaaaa-qaaaq-cai'
+CANISTER_ID='be2us-64aaa-aaaaa-qaabq-cai'
+CANISTER_CANDID_PATH='/Users/rbole/Sites/starterKits/ic-solidjs/.dfx/local/canisters/frontend/assetstorage.did'
+# END DFX CANISTER ENVIRONMENT VARIABLES
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+*.dfx
diff --git a/README.md b/README.md
@@ -0,0 +1,60 @@
+<p align="left" >
+  <img width="240"  src="public/icAcademy.png">
+</p>
+
+# Internet Computer + SolidJS + Vite
+
+This template is intended to make it easier for you to get started with development on the Internet Computer with SolidJS and Vite. SolidJS is a declarative JavaScript framework used for building UIs and web applications pragmatically and performatively.
+
+It is designed to help developers create fast, efficient, and reusable web applications. SolidJS provides a comprehensive set of components that can be used to build complex web applications quickly and easily.
+
+To clone and use the Github repository for your own purpose following the commands below. 
+
+**Note** to get a clean git repository. A tool called “digit” is used. Make sure you have it installed. If you haven't installed it yet, you can do so using the following command.
+
+```bash
+npm install -g degit
+```
+
+Summary of installation steps:
+1. Check needed tools
+2. Install and discuss the github repository
+3. Start a local Internet Computer replica
+4. Deploy frontend and backend canister to local replica
+5. Test the Motoko backend sayHelloTo function
+
+
+```bash
+mkdir myapp && cd myapp
+```
+```bash
+npx degit https://github.com/samlinux-development/ic-solidjs
+```
+```bash
+npm install
+```
+```bash
+dfx start --clean --background
+```
+```bash
+dfx deploy 
+```
+```bash
+echo http://$(dfx canister id frontend).localhost:4943
+```
+Open your browser and use the following URL scheme:
+
+- http://[canisterId].localhost:4943
+- e.g. http://be2us-64aaa-aaaaa-qaabq-cai.localhost:4943
+
+Check the sayHelloTo function with the CLI cammand below:
+```bash
+dfx canister call backend sayHelloTo '("Roland")'
+```
+
+## Deploying to the playground
+To test your dApp under the Internet Computer's environment, you can deploy it to the Motoko Playground.
+
+```bash
+dfx deploy --playground
+```
diff --git a/backend/main.mo b/backend/main.mo
@@ -0,0 +1,10 @@
+import Float "mo:base/Float";
+actor {
+	public query func sayHelloTo(name : Text) : async Text {
+    return "Hello " # name # " 👋 ";
+  };
+
+  public query func bmi(height : Float, weight : Float) : async Float {
+    weight / (height/100 * height/100);
+  };
+};
diff --git a/dfx.json b/dfx.json
@@ -0,0 +1,26 @@
+{
+  "canisters": {
+    "backend": {
+      "main": "backend/main.mo",
+      "type": "motoko"
+    },
+
+    "frontend": {
+      "dependencies": [
+        "backend"
+      ],
+      "source": [
+        "dist"
+      ],
+      "type": "assets"
+    }
+  },
+  "defaults": {
+    "build": {
+      "args": "",
+      "packtool": ""
+    }
+  },
+  "output_env_file": ".env",
+  "version": 1
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1"  />
+    <title>Vite + Solid + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "ic-solidjs",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@dfinity/agent": "^1.0.1",
+    "@dfinity/candid": "^1.0.1",
+    "@dfinity/principal": "^1.0.1",
+    "@solidjs/router": "^0.12.4",
+    "solid-js": "^1.8.15"
+  },
+  "devDependencies": {
+    "dotenv": "^16.4.5",
+    "typescript": "^5.2.2",
+    "vite": "^5.1.4",
+    "vite-plugin-environment": "^1.1.3",
+    "vite-plugin-solid": "^2.10.1"
+  }
+}
diff --git a/public/icAcademy.png b/public/icAcademy.png
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,27 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.solid:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
diff --git a/src/assets/solid.svg b/src/assets/solid.svg
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -0,0 +1,13 @@
+import { JSX } from "solid-js";
+import { A } from "@solidjs/router";
+function Navbar():JSX.Element {
+  return (
+    <>
+      <nav>
+        <A href="/">Home</A>
+      </nav>
+    </>
+  );
+}
+
+export default Navbar;
diff --git a/src/declarations/backend/backend.did b/src/declarations/backend/backend.did
@@ -0,0 +1,4 @@
+service : {
+  bmi: (float64, float64) -> (float64) query;
+  sayHelloTo: (text) -> (text) query;
+}
diff --git a/src/declarations/backend/backend.did.d.ts b/src/declarations/backend/backend.did.d.ts
@@ -0,0 +1,10 @@
+import type { Principal } from '@dfinity/principal';
+import type { ActorMethod } from '@dfinity/agent';
+import type { IDL } from '@dfinity/candid';
+
+export interface _SERVICE {
+  'bmi' : ActorMethod<[number, number], number>,
+  'sayHelloTo' : ActorMethod<[string], string>,
+}
+export declare const idlFactory: IDL.InterfaceFactory;
+export declare const init: ({ IDL }: { IDL: IDL }) => IDL.Type[];
diff --git a/src/declarations/backend/backend.did.js b/src/declarations/backend/backend.did.js
@@ -0,0 +1,7 @@
+export const idlFactory = ({ IDL }) => {
+  return IDL.Service({
+    'bmi' : IDL.Func([IDL.Float64, IDL.Float64], [IDL.Float64], ['query']),
+    'sayHelloTo' : IDL.Func([IDL.Text], [IDL.Text], ['query']),
+  });
+};
+export const init = ({ IDL }) => { return []; };
diff --git a/src/declarations/backend/index.d.ts b/src/declarations/backend/index.d.ts
@@ -0,0 +1,50 @@
+import type {
+  ActorSubclass,
+  HttpAgentOptions,
+  ActorConfig,
+  Agent,
+} from "@dfinity/agent";
+import type { Principal } from "@dfinity/principal";
+import type { IDL } from "@dfinity/candid";
+
+import { _SERVICE } from './backend.did';
+
+export declare const idlFactory: IDL.InterfaceFactory;
+export declare const canisterId: string;
+
+export declare interface CreateActorOptions {
+  /**
+   * @see {@link Agent}
+   */
+  agent?: Agent;
+  /**
+   * @see {@link HttpAgentOptions}
+   */
+  agentOptions?: HttpAgentOptions;
+  /**
+   * @see {@link ActorConfig}
+   */
+  actorOptions?: ActorConfig;
+}
+
+/**
+ * Intializes an {@link ActorSubclass}, configured with the provided SERVICE interface of a canister.
+ * @constructs {@link ActorSubClass}
+ * @param {string | Principal} canisterId - ID of the canister the {@link Actor} will talk to
+ * @param {CreateActorOptions} options - see {@link CreateActorOptions}
+ * @param {CreateActorOptions["agent"]} options.agent - a pre-configured agent you'd like to use. Supercedes agentOptions
+ * @param {CreateActorOptions["agentOptions"]} options.agentOptions - options to set up a new agent
+ * @see {@link HttpAgentOptions}
+ * @param {CreateActorOptions["actorOptions"]} options.actorOptions - options for the Actor
+ * @see {@link ActorConfig}
+ */
+export declare const createActor: (
+  canisterId: string | Principal,
+  options?: CreateActorOptions
+) => ActorSubclass<_SERVICE>;
+
+/**
+ * Intialized Actor using default settings, ready to talk to a canister using its candid interface
+ * @constructs {@link ActorSubClass}
+ */
+export declare const backend: ActorSubclass<_SERVICE>;
diff --git a/src/declarations/backend/index.js b/src/declarations/backend/index.js
@@ -0,0 +1,43 @@
+import { Actor, HttpAgent } from "@dfinity/agent";
+
+// Imports and re-exports candid interface
+import { idlFactory } from "./backend.did.js";
+export { idlFactory } from "./backend.did.js";
+
+/* CANISTER_ID is replaced by webpack based on node environment
+ * Note: canister environment variable will be standardized as
+ * process.env.CANISTER_ID_<CANISTER_NAME_UPPERCASE>
+ * beginning in dfx 0.15.0
+ */
+export const canisterId =
+  process.env.CANISTER_ID_BACKEND ||
+  process.env.BACKEND_CANISTER_ID;
+
+export const createActor = (canisterId, options = {}) => {
+  const agent = options.agent || new HttpAgent({ ...options.agentOptions });
+
+  if (options.agent && options.agentOptions) {
+    console.warn(
+      "Detected both agent and agentOptions passed to createActor. Ignoring agentOptions and proceeding with the provided agent."
+    );
+  }
+
+  // Fetch root key for certificate validation during development
+  if (process.env.DFX_NETWORK !== "ic") {
+    agent.fetchRootKey().catch((err) => {
+      console.warn(
+        "Unable to fetch root key. Check to ensure that your local replica is running"
+      );
+      console.error(err);
+    });
+  }
+
+  // Creates an actor with using the candid interface and the HttpAgent
+  return Actor.createActor(idlFactory, {
+    agent,
+    canisterId,
+    ...options.actorOptions,
+  });
+};
+
+export const backend = canisterId ? createActor(canisterId) : undefined;