chore: use standard port for cert-var example

motoko/cert-var/package.json

@@ -30,7 +30,7 @@
     "terser-webpack-plugin": "5.1.1",
     "util": "0.12.3",
     "webpack": "5.76.0",
-    "webpack-cli": "4.5.0",
+    "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.7.3"
   },
   "browserslist": [

motoko/cert-var/src/cert_var_assets/src/index.js

@@ -2,7 +2,7 @@ import { HttpAgent } from '@dfinity/agent';
 import { Certificate } from '@dfinity/agent';
 import { IDL, PipeArrayBuffer, lebDecode } from '@dfinity/candid';
 import { Principal } from '@dfinity/principal'
-import { cert_var, canisterId } from '../../declarations'
+import { cert_var, canisterId } from '../../declarations/cert_var'
 
 const agent = new HttpAgent({});
 if (process.env.NODE_ENV !== "production") {

motoko/cert-var/src/declarations/cert_var/cert_var.did

@@ -0,0 +1,15 @@
+/// Simple counter (see `Counter.mo`), but uses `mo:base/CertifiedData` to
+/// implement the counter value as a certified variable.
+service : {
+  /// Returns the current counter value,
+  /// and, if available, an unforgeable certificate (from the system) about its authenticity.
+  /// When called via update call or inter-canister call, no certificate is present (and not needed,
+  /// as in these cases the system already certifies the response)
+  get: () -> (record {
+                certificate: opt blob;
+                value: nat32;
+              }) query;
+  /// Update counter and certificate (via system).
+  inc: () -> (nat32);
+  set: (nat32) -> ();
+}

motoko/cert-var/src/declarations/cert_var.did.d.ts → motoko/cert-var/src/declarations/cert_var/cert_var.did.d.ts

@@ -1,11 +1,14 @@
 import type { Principal } from '@dfinity/principal';
 import type { ActorMethod } from '@dfinity/agent';
+import type { IDL } from '@dfinity/candid';
 
 export interface _SERVICE {
   'get' : ActorMethod<
     [],
-    { 'certificate' : [] | [Uint8Array], 'value' : number }
+    { 'certificate' : [] | [Uint8Array | number[]], 'value' : number }
   >,
   'inc' : ActorMethod<[], number>,
   'set' : ActorMethod<[number], undefined>,
 }
+export declare const idlFactory: IDL.InterfaceFactory;
+export declare const init: (args: { IDL: typeof IDL }) => IDL.Type[];

motoko/cert-var/src/declarations/cert_var/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 './cert_var.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 cert_var: ActorSubclass<_SERVICE>;

motoko/cert-var/src/declarations/cert_var/index.js

@@ -0,0 +1,42 @@
+import { Actor, HttpAgent } from "@dfinity/agent";
+
+// Imports and re-exports candid interface
+import { idlFactory } from "./cert_var.did.js";
+export { idlFactory } from "./cert_var.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_CERT_VAR;
+
+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 cert_var = canisterId ? createActor(canisterId) : undefined;

motoko/cert-var/webpack.config.js

@@ -25,7 +25,7 @@ function initCanisterIds() {
   canisters = network === "local" ? localCanisters : prodCanisters;
 
   for (const canister in canisters) {
-    process.env[canister.toUpperCase() + "_CANISTER_ID"] =
+    process.env["CANISTER_ID_" + canister.toUpperCase()] =
       canisters[canister][network];
   }
 }
@@ -85,26 +85,29 @@ module.exports = {
     }),
     new webpack.EnvironmentPlugin({
       NODE_ENV: 'development',
-      CERT_VAR_CANISTER_ID: canisters["cert_var"]
+      ...process.env
     }),
     new webpack.ProvidePlugin({
       Buffer: [require.resolve("buffer/"), "Buffer"],
       process: require.resolve("process/browser"),
     }),
   ],
-  // proxy /api to port 8000 during development
+  // proxy /api to the local replica during development
   devServer: {
     proxy: {
       "/api": {
-        target: "http://localhost:8000",
+        target: "http://localhost:4943",
         changeOrigin: true,
         pathRewrite: {
           "^/api": "/api",
         },
       },
     },
     hot: true,
-    contentBase: path.resolve(__dirname, "./src/cert_var_assets"),
-    watchContentBase: true
+    static: [
+      path.resolve(__dirname, "./src/cert_var_assets/assets"),
+      path.join(__dirname, "dist", "cert_var_assets")
+    ],
+    liveReload: true
   },
 };