Merge pull request #1053 from dfinity/chore-ic-pos-upgrade

ic-pos upgrade

motoko/ic-pos/.gitignore

@@ -32,3 +32,5 @@ yarn-error.log*
 
 # misc
 scratch/
+canister_ids.json
+

motoko/ic-pos/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [0.4.0] - 2024-11-25
+
+### Changed
+- Major front-end overhaul, upgrading many libraries and components.
+  - Removed recoil for state management, now using Tanstack Router and Tanstack Query.
+  - Removed old axios based fetching, replacing with Tanstack Query.
+  - Replacing custom actor and session implementations with `ic-use-actor` and `ic-use-internet-identity`
+  - Upgraded Vite to new version.
+  - Upgraded eslint rules and version
+  - Cleaned up and refactored project setup, routes, and components.
+  - Upgrading to newer versions of the icrc canisters. 
+
+### Fixed
+- User sessions now survive page reloads. 
+
 ## [0.3.0] - 2022-09-10
 
 ### Added

motoko/ic-pos/README.md

@@ -4,8 +4,6 @@ keywords: [advanced, motoko, bitcoin, pos, point of sale, ckbtc]
 
 # IC-POS
 
-[View this sample's code on GitHub](https://github.com/dfinity/examples/tree/master/motoko/ic-pos)
-
 ![](./media/header.png)
 
 
@@ -27,20 +25,20 @@ For deeper understanding of the ICP < > BTC integration, see the IC wiki article
 
 IC-POS is deployed on the Internet Computer. You can try it out here:
 
-https://hngac-6aaaa-aaaal-qb6tq-cai.icp0.io/
+https://hngac-6aaaa-aaaal-qb6tq-cai.icp0.io
 
-https://github.com/kristoferlund/ic-pos/assets/9698363/f67d9952-3ee1-4876-a5e5-6ed0e29bae9d
+**Note:** The live version of IC-POS uses real ckBTC tokens. To test, use only fractions of a token to avoid losing funds.
 
 ## Architecture
 
 ### Backend
 
-The backend is written in Motoko and consists of one canister, `icpos`. It exposes four public methods:
+The backend is written in Motoko and consists of one canister, `icpos`. It exposes five public methods:
 
 - `getMerchant` - returns the store configuration for a given principal.
 - `updateMerchant` - updates the store configuration for a given principal.
 - `setCourierApiKey` - sets the Courier API key used to send email and SMS notifications. Only the canister controller can call this method.
-- `setLedgerId` - sets the ledger ID to monitor for transactions. Only the canister controller can call this method.
+- `setLedgerId` - xsets the ledger ID to monitor for transactions. Only the canister controller can call this method.
 - `getLogs` - The canister maintains a debug log that can be fetched using this method.
 
 In addition to the public methods, the canister uses a [timer](https://internetcomputer.org/docs/current/motoko/main/timers/) to monitor ledger transactions. When a new transaction is found that matches a configured store – depending on the store settings – the canister will send a notification either by email or SMS.
@@ -56,37 +54,57 @@ The frontend interacts with the following IC canisters:
 - `ckbtc index` - to fetch transaction history.
 - `internet identity` - to authenticate users.
 
-# Local deployment
+## Setup, dev environment
 
-## Prerequisites
+Pre-requisites:
 
-- [x] Install the [IC SDK](https://internetcomputer.org/docs/current/developer-docs/setup/install/index.mdx).
-- [x] Install [Node.js](https://nodejs.org/en/).
-- [x] Clone the example dapp project: `git clone https://github.com/dfinity/examples`
+- [Local Internet Computer dev environment](https://internetcomputer.org/docs/current/developer-docs/backend/rust/dev-env)
+- [Node 20+](https://nodejs.org/en/)
+- [pnpm](https://pnpm.io/installation)
+
+## Deploy using script
 
-### Step 1: Start a local instance of the replica:
+To get started quickly and deploy the IC-POS app locally, you can run a deploy script. This script will start a local replica, deploy the necessary canisters, and build and deploy the frontend.
+
+```bash
+bash ./scripts/deploy.sh
+```
+
+Once the script has finished, you should proceed to step 10 to create a store and mint yourself some test tokens.
+
+## Deploy manually
+
+### 1. Clone the examples repository and navigate to the IC-POS project:
+
+```bash
+git clone https://github.com/dfinity/examples
+cd examples/motoko/ic-pos
+```
+
+
+### 2. Start a local instance of the replica:
 
 ```bash
 dfx start --clean --background
 ```
 
-### Step 2: Deploy the Internet Identity canister:
+### 3. Deploy the Internet Identity canister:
 
 Integration with the [Internet Identity](https://internetcomputer.org/internet-identity/) allows store owners to securely setup and manage their store. The Internet Identity canister is already deployed on the IC mainnet. For local development, you need to deploy it to your local instance of the IC.
 
 ```bash
-dfx deploy --network local internet_identity
+dfx deploy internet_identity
 ```
 
-### Step 3: Save the current principal as a variable:
+### 4. Save the current principal as a variable:
 
 The principal will be used when deploying the ledger canister.
 
 ```bash
 export OWNER=$(dfx identity get-principal)
 ```
 
-### Step 3: Deploy the ckBTC ledger canister:
+### 5. Deploy the ckBTC ledger canister:
 
 The responsibilities of the ledger canister is to keep track of token balances and handle token transfers.
 
@@ -101,7 +119,7 @@ Take a moment to read the details of the call we are making below. Not only are
 - Setting the transfer fee to 10 LCKBTC.
 
 ```bash
-dfx deploy --network local --specified-id mxzaz-hqaaa-aaaar-qaada-cai icrc1_ledger --argument '
+dfx deploy icrc1_ledger --argument '
   (variant {
     Init = record {
       token_name = "Local ckBTC";
@@ -129,61 +147,61 @@ dfx deploy --network local --specified-id mxzaz-hqaaa-aaaar-qaada-cai icrc1_ledg
 '
 ```
 
-### Step 4: Deploy the index canister:
+### 6. Deploy the index canister
 
 The index canister syncs the ledger transactions and indexes them by account.
 
 ```bash
-dfx deploy --network local icrc1_index --argument '
+dfx deploy icrc1_index --argument '
   record {
    ledger_id = (principal "mxzaz-hqaaa-aaaar-qaada-cai");
   }
 '
 ```
 
-### Step 5: Deploy the icpos canister:
+### 7. Deploy the icpos canister
 
 The icpos canister manages the store configuration and sends notifications when a payment is received.
 
 The `--argument '(0)'` argument is used to initialize the canister with `startBlock` set to 0. This is used to tell the canister to start monitoring the ledger from block 0. When deploying to the IC mainnet, this should be set to the current block height to prevent the canister from processing old transactions.
 
 ```bash
-dfx deploy --network local icpos --argument '(0)'
+dfx deploy icpos --argument '(0)'
 ```
 
-### Step 6: Configure the icpos canister:
+### 8. Configure the icpos canister
 
-ic-pos uses [Courier](https://courier.com/) to send email and SMS notifications. If you want to enable notifications, you need to sign up for a Courier account and and create and API key. Then issue the following command:
+IC-POS uses [Courier](https://courier.com/) to send email and SMS notifications. If you want to enable notifications, you need to sign up for a Courier account and and create and API key. Then issue the following command:
 
 ```bash
-dfx canister --network local call icpos setCourierApiKey "pk_prod_..."
+dfx canister call icpos setCourierApiKey "pk_prod_..."
 ```
 
-### Step 7: Build and run the frontend:
+### 9. Build and run the frontend
 
-Run npm to install dependencies and start the frontend. The frontend will be available at http://localhost:5173.
+Run npm to install dependencies and start a development version of the frontend. 
 
 ```bash
-npm install
-npm run dev
+pnpm install
+pnpm run dev
 ```
 
-Why don't we deploy the frontend as a local canister? Vite uses lazy loading of modules. This does not work when deploying to a local canister. When deploying to the IC mainnet, this is not an issue. Also, running using `npm run dev` allows for hot reloading of the frontend code when making changes.
+The app should now be accessible at a local url, typically `http://localhost:5173`.
 
-### Step 8: Make a transfer!
+### 10. Make a transfer!
 
-Now that everything is up and running, you can make a transfer to your newly created store.
 
-Transfers made from the owner principal will not trigger notifications in the UI since they are regarded as `mint` transactions. To test notifications, you need to make a transfer from another principal.
+
+Now that everything is up and running, you can make a transfer to your newly created store.
 
 The easiest way to do this is to create two stores using two different Internet Identity accounts, using two different web browsers. Then, transfer some tokens from one store to the other.
 
-#### 8.1: Create the first store and supply it with some tokens:
+#### 10.1 Create the first store and supply it with some tokens
 
-Log in to the frontend using the Internet Identity. Configure the store and navigate to the `Receive` page. Click on the principal pill to copy the address to your clipboard. Then, using the `dfx` command, mint some tokens from your owner principal to the store principal.
+Log in to the frontend using the Internet Identity. Configure the store with a name and then, on the main store page, click on the principal pill to copy the address to your clipboard. Using the `dfx` command, now mint some tokens from your owner principal to the store principal.
 
 ```bash
-dfx canister --network local call icrc1_ledger icrc1_transfer '
+dfx canister call icrc1_ledger icrc1_transfer '
   (record {
     to=(record {
       owner=(principal "[STORE PRINCIPAL 1 HERE]")
@@ -193,9 +211,9 @@ dfx canister --network local call icrc1_ledger icrc1_transfer '
 '
 ```
 
-#### 8.2: Create the second store:
+#### 10.2 Create the second store
 
-Log in to the frontend using **a new Internet Identity on another web browser**. Configure the store and navigate to the `Receive` page. Click on the principal pill to copy the address to your clipboard.
+Log in to the frontend using **a new Internet Identity using another web browser**. Give this store a name as well and copy the store principal like in the previous step. 
 
 Now, go back to the first browser/store, navigate to the `Send` page, and transfer some tokens to the second store.
 
@@ -205,14 +223,11 @@ If everything is working, you should see a notification in the second store.
 
 ## Possible improvements
 
-- Login state is not persisted. Reloading the app will log the user out. This should be done using `localStorage` or `sessionStorage`.
-- Show more information about transactions. A transaction detail page.
+- Show more information about transactions. 
+  - A transaction detail page.
+  - Pagination, currently only the first 5 transactions are shown.
 - Show a confirmation dialog after the user clicks on the `Send` button.
 
-## Known issues
-
--
-
 ## Contributing
 
 Contributions are welcome! Please open an issue or submit a pull request.

motoko/ic-pos/dfx.json

@@ -18,6 +18,7 @@
       "type": "custom",
       "candid": "https://github.com/dfinity/internet-identity/releases/latest/download/internet_identity.did",
       "wasm": "https://github.com/dfinity/internet-identity/releases/latest/download/internet_identity_dev.wasm.gz",
+      "specified_id": "rdmx6-jaaaa-aaaaa-aaadq-cai",
       "remote": {
         "id": {
           "ic": "rdmx6-jaaaa-aaaaa-aaadq-cai"
@@ -26,8 +27,9 @@
     },
     "icrc1_ledger": {
       "type": "custom",
-      "candid": "https://raw.githubusercontent.com/dfinity/ic/95787355499f3be929f2ab302ed44cdad7c64061/rs/rosetta-api/icrc1/ledger/ledger.did",
-      "wasm": "https://download.dfinity.systems/ic/95787355499f3be929f2ab302ed44cdad7c64061/canisters/ic-icrc1-ledger.wasm.gz",
+      "candid": "https://raw.githubusercontent.com/dfinity/ic/2e3589427cd9648d4edaebc1b96b5daf8fdd94d8/rs/rosetta-api/icrc1/ledger/ledger.did",
+      "wasm": "https://download.dfinity.systems/ic/2e3589427cd9648d4edaebc1b96b5daf8fdd94d8/canisters/ic-icrc1-ledger.wasm.gz",
+      "specified_id": "mxzaz-hqaaa-aaaar-qaada-cai",
       "remote": {
         "id": {
           "ic": "mxzaz-hqaaa-aaaar-qaada-cai"
@@ -36,8 +38,9 @@
     },
     "icrc1_index": {
       "type": "custom",
-      "candid": "https://raw.githubusercontent.com/dfinity/ic/95787355499f3be929f2ab302ed44cdad7c64061/rs/rosetta-api/icrc1/index/index.did",
-      "wasm": "https://download.dfinity.systems/ic/95787355499f3be929f2ab302ed44cdad7c64061/canisters/ic-icrc1-index.wasm.gz",
+      "candid": "https://raw.githubusercontent.com/dfinity/ic/2e3589427cd9648d4edaebc1b96b5daf8fdd94d8/rs/rosetta-api/icrc1/index/index.did",
+      "wasm": "https://download.dfinity.systems/ic/2e3589427cd9648d4edaebc1b96b5daf8fdd94d8/canisters/ic-icrc1-index.wasm.gz",
+      "specified_id": "n5wcd-faaaa-aaaar-qaaea-cai",
       "remote": {
         "id": {
           "ic": "n5wcd-faaaa-aaaar-qaaea-cai"

motoko/ic-pos/eslint.config.js

@@ -0,0 +1,24 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  {
+    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
+  },
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  {
+    rules: {
+      "react/react-in-jsx-scope": "off",
+      "react/jsx-uses-react": "off",
+    },
+  },
+];
+
+

motoko/ic-pos/src/index.html → motoko/ic-pos/index.html

@@ -10,7 +10,7 @@
 
 <body>
   <div id="root"></div>
-  <script type="module" src="/icpos_frontend/main.tsx"></script>
+  <script type="module" src="/src/icpos_frontend/main.tsx"></script>
 </body>
 
-</html>
+</html>