add ETH Pay and Reciept

dfx.json

@@ -1,14 +1,37 @@
 {
   "canisters": {
-    "Dorder_backend": {
-      "main": "src/OrderEase/main.mo",
-      "type": "motoko"
+    "evm_rpc": {
+      "type": "custom",
+      "candid": "/home/bahamin/Dorder/src/declarations/evm_rpc/evm_rpc.did",
+      "wasm": "https://github.com/internet-computer-protocol/evm-rpc-canister/releases/latest/download/evm_rpc_dev.wasm.gz",
+      "remote": {
+        "id": {
+          "ic": "be2us-64aaa-aaaaa-qaabq-cai"
+        }
+      }
+    },
+    "cketh": {
+      "type": "custom",
+      "candid": "/home/bahamin/Dorder/src/declarations/cketh/cketh.did",
+      "wasm": "https://download.dfinity.systems/ic/d87954601e4b22972899e9957e800406a0a6b929/canisters/ic-icrc1-ledger.wasm.gz",
+      "remote": {
+        "id": {
+          "ic": "bd3sg-teaaa-aaaaa-qaaba-cai"
+        }
+      }
+    },
+    "OrderEase": {
+      "dependencies": [
+        "evm_rpc",
+        "cketh"
+      ],
+      "type": "motoko",
+      "main": "OrderEase/main.mo"
     }
   },
   "defaults": {
     "build": {
-      "args": "",
-      "packtool": "mops sources"
+      "packtool": "npm run --silent sources"
     }
   },
   "output_env_file": ".env",

src/App.css

@@ -0,0 +1,90 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .logo.react {
+    animation: logo-spin infinite 60s linear;
+  }
+}
+
+.logo.motoko:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+.logo-stack {
+  display: inline-grid;
+}
+
+.logo-stack > * {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+@keyframes logo-swim {
+  from {
+    transform: rotate(4deg) translateY(0);
+  }
+  50% {
+    transform: rotate(-5deg) translateY(0);
+  }
+  to {
+    transform: rotate(4deg) translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .logo.motoko {
+    animation: logo-swim 5s ease-in-out infinite;
+  }
+}
+
+@keyframes logo-pulse {
+  from {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .logo.ethereum {
+    animation: logo-pulse 5s ease-in-out infinite;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

src/App.tsx

@@ -0,0 +1,88 @@
+import { useEffect, useState } from 'react';
+import './App.css';
+import motokoLogo from './assets/motoko_moving.png';
+import motokoShadowLogo from './assets/motoko_shadow.png';
+import reactLogo from './assets/react.svg';
+import ethLogo from './assets/eth.svg';
+import { backend } from './declarations/backend';
+import { Block } from './declarations/backend/backend.did';
+
+function App() {
+  const [loading, setLoading] = useState(false);
+  const [block, setBlock] = useState<Block | undefined>();
+  const [error, setError] = useState<string | undefined>();
+
+  const fetchBlock = async () => {
+    try {
+      setLoading(true);
+      setError(undefined);
+      const block = await backend.getLatestEthereumBlock();
+      setBlock(block);
+    } catch (err) {
+      console.error(err);
+      setError(String(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // useEffect(() => {
+  //   fetchBlock();
+  // }, []);
+
+  return (
+    <div className="App">
+      <div>
+        <a href="https://reactjs.org" target="_blank">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+        <a
+          href="https://internetcomputer.org/docs/current/developer-docs/build/cdks/motoko-dfinity/motoko/"
+          target="_blank"
+        >
+          <span className="logo-stack">
+            <img
+              src={motokoShadowLogo}
+              className="logo motoko-shadow"
+              alt="Motoko logo"
+            />
+            <img src={motokoLogo} className="logo motoko" alt="Motoko logo" />
+          </span>
+        </a>
+        <a href="https://github.com/internet-computer-protocol/evm-rpc-canister#readme" target="_blank">
+          <img src={ethLogo} className="logo ethereum" alt="Ethereum logo" />
+        </a>
+      </div>
+      <h1>React + Motoko + EVM RPC</h1>
+      <div className="card">
+        <button onClick={fetchBlock} style={{ opacity: loading ? 0.5 : 1 }}>
+          Get latest Ethereum block
+        </button>
+        {!!block && (
+          <pre
+            style={{
+              textAlign: 'left',
+              color: 'darkgreen',
+              maxWidth: 800,
+              opacity: loading ? 0.5 : 1,
+            }}
+          >
+            {JSON.stringify(
+              block,
+              (_, v) => (typeof v === 'bigint' ? v.toString() : v),
+              2,
+            )}
+          </pre>
+        )}
+        {!!error && (
+          <pre style={{ textAlign: 'left', color: 'darkred' }}>{error}</pre>
+        )}
+      </div>
+      <p className="read-the-docs">
+        Click on the React, Motoko, and Ethereum logos to learn more
+      </p>
+    </div>
+  );
+}
+
+export default App;

src/OrderEase/Cart.mo

@@ -1,8 +1,10 @@
+import Array "mo:base/Array";
 import Time "mo:base/Time";
 import Map "mo:map/Map";
 import { nhash } "mo:map/Map";
 
 import Menu "Menu";
+import R "Reciept";
 
 module Cart {
 
@@ -36,7 +38,7 @@ module Cart {
         status : OrderStatus;
         orderBy : Principal;
         orderType : OrderType;
-        totalAmount : ?Float;
+        totalAmount : Float;
         stage : OrderStage;
         createdAt : Time.Time;
         isPaid : Bool;
@@ -62,7 +64,7 @@ module Cart {
             items = items;
             status = #Pending;
             orderBy = p;
-            totalAmount = ?amount;
+            totalAmount = amount;
             stage = #Open;
             orderType = orderType;
             createdAt = Time.now();
@@ -100,4 +102,52 @@ module Cart {
         return totalAmount;
     };
 
+    public func checkout(cartMap : CartMap, p : Principal) : [Order] {
+        var filteredOrders : [Order] = [];
+        for (order in Map.vals(cartMap)) {
+            if (order.orderBy == p) {
+                if (order.stage == #Finalized) {
+                    filteredOrders := Array.append<Order>(filteredOrders, [order]);
+                    return filteredOrders;
+                };
+            };
+        };
+        return [];
+    };
+
+    public func combineChekouts(cartMap : CartMap, p : Principal, method : R.PaymentMethod, orders : [Order]) : Order {
+        var totalAmount : Float = 0.0;
+        for (element in orders.vals()) {
+            totalAmount += element.totalAmount;
+        };
+        var allItems : [CartItem] = [];
+        for (element in orders.vals()) {
+            switch (element.items) {
+                case (is) {
+                    for (element in is.vals()) {
+
+                        allItems := Array.append<CartItem>(allItems, [element]);
+                    };
+
+                };
+            };
+        };
+
+        let id = Map.size(cartMap) + 1;
+
+        let newReciept : Order = {
+            id = id;
+            items = allItems;
+            status = #Delivered;
+            orderBy = p;
+            totalAmount = totalAmount;
+            stage = #Finalized;
+            orderType = orders.orderType;
+            createdAt = Time.now();
+            isPaid = false;
+
+        };
+
+    };
+
 };