Skip to content

Commit daf9a06

Browse files
Merge pull request #1053 from dfinity/chore-ic-pos-upgrade
ic-pos upgrade
2 parents 0610e6b + 4c36b87 commit daf9a06

File tree

95 files changed

+7679
-8317
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

95 files changed

+7679
-8317
lines changed

motoko/ic-pos/.eslintrc.cjs

Lines changed: 0 additions & 17 deletions
This file was deleted.

motoko/ic-pos/.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,5 @@ yarn-error.log*
3232

3333
# misc
3434
scratch/
35+
canister_ids.json
36+

motoko/ic-pos/CHANGELOG.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,20 @@
11
# Changelog
22

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

520
### Added

motoko/ic-pos/README.md

Lines changed: 58 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ keywords: [advanced, motoko, bitcoin, pos, point of sale, ckbtc]
44

55
# IC-POS
66

7-
[View this sample's code on GitHub](https://github.com/dfinity/examples/tree/master/motoko/ic-pos)
8-
97
![](./media/header.png)
108

119

@@ -27,20 +25,20 @@ For deeper understanding of the ICP < > BTC integration, see the IC wiki article
2725

2826
IC-POS is deployed on the Internet Computer. You can try it out here:
2927

30-
https://hngac-6aaaa-aaaal-qb6tq-cai.icp0.io/
28+
https://hngac-6aaaa-aaaal-qb6tq-cai.icp0.io
3129

32-
https://github.com/kristoferlund/ic-pos/assets/9698363/f67d9952-3ee1-4876-a5e5-6ed0e29bae9d
30+
**Note:** The live version of IC-POS uses real ckBTC tokens. To test, use only fractions of a token to avoid losing funds.
3331

3432
## Architecture
3533

3634
### Backend
3735

38-
The backend is written in Motoko and consists of one canister, `icpos`. It exposes four public methods:
36+
The backend is written in Motoko and consists of one canister, `icpos`. It exposes five public methods:
3937

4038
- `getMerchant` - returns the store configuration for a given principal.
4139
- `updateMerchant` - updates the store configuration for a given principal.
4240
- `setCourierApiKey` - sets the Courier API key used to send email and SMS notifications. Only the canister controller can call this method.
43-
- `setLedgerId` - sets the ledger ID to monitor for transactions. Only the canister controller can call this method.
41+
- `setLedgerId` - xsets the ledger ID to monitor for transactions. Only the canister controller can call this method.
4442
- `getLogs` - The canister maintains a debug log that can be fetched using this method.
4543

4644
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:
5654
- `ckbtc index` - to fetch transaction history.
5755
- `internet identity` - to authenticate users.
5856

59-
# Local deployment
57+
## Setup, dev environment
6058

61-
## Prerequisites
59+
Pre-requisites:
6260

63-
- [x] Install the [IC SDK](https://internetcomputer.org/docs/current/developer-docs/setup/install/index.mdx).
64-
- [x] Install [Node.js](https://nodejs.org/en/).
65-
- [x] Clone the example dapp project: `git clone https://github.com/dfinity/examples`
61+
- [Local Internet Computer dev environment](https://internetcomputer.org/docs/current/developer-docs/backend/rust/dev-env)
62+
- [Node 20+](https://nodejs.org/en/)
63+
- [pnpm](https://pnpm.io/installation)
64+
65+
## Deploy using script
6666

67-
### Step 1: Start a local instance of the replica:
67+
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.
68+
69+
```bash
70+
bash ./scripts/deploy.sh
71+
```
72+
73+
Once the script has finished, you should proceed to step 10 to create a store and mint yourself some test tokens.
74+
75+
## Deploy manually
76+
77+
### 1. Clone the examples repository and navigate to the IC-POS project:
78+
79+
```bash
80+
git clone https://github.com/dfinity/examples
81+
cd examples/motoko/ic-pos
82+
```
83+
84+
85+
### 2. Start a local instance of the replica:
6886

6987
```bash
7088
dfx start --clean --background
7189
```
7290

73-
### Step 2: Deploy the Internet Identity canister:
91+
### 3. Deploy the Internet Identity canister:
7492

7593
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.
7694

7795
```bash
78-
dfx deploy --network local internet_identity
96+
dfx deploy internet_identity
7997
```
8098

81-
### Step 3: Save the current principal as a variable:
99+
### 4. Save the current principal as a variable:
82100

83101
The principal will be used when deploying the ledger canister.
84102

85103
```bash
86104
export OWNER=$(dfx identity get-principal)
87105
```
88106

89-
### Step 3: Deploy the ckBTC ledger canister:
107+
### 5. Deploy the ckBTC ledger canister:
90108

91109
The responsibilities of the ledger canister is to keep track of token balances and handle token transfers.
92110

@@ -101,7 +119,7 @@ Take a moment to read the details of the call we are making below. Not only are
101119
- Setting the transfer fee to 10 LCKBTC.
102120

103121
```bash
104-
dfx deploy --network local --specified-id mxzaz-hqaaa-aaaar-qaada-cai icrc1_ledger --argument '
122+
dfx deploy icrc1_ledger --argument '
105123
(variant {
106124
Init = record {
107125
token_name = "Local ckBTC";
@@ -129,61 +147,61 @@ dfx deploy --network local --specified-id mxzaz-hqaaa-aaaar-qaada-cai icrc1_ledg
129147
'
130148
```
131149

132-
### Step 4: Deploy the index canister:
150+
### 6. Deploy the index canister
133151

134152
The index canister syncs the ledger transactions and indexes them by account.
135153

136154
```bash
137-
dfx deploy --network local icrc1_index --argument '
155+
dfx deploy icrc1_index --argument '
138156
record {
139157
ledger_id = (principal "mxzaz-hqaaa-aaaar-qaada-cai");
140158
}
141159
'
142160
```
143161

144-
### Step 5: Deploy the icpos canister:
162+
### 7. Deploy the icpos canister
145163

146164
The icpos canister manages the store configuration and sends notifications when a payment is received.
147165

148166
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.
149167

150168
```bash
151-
dfx deploy --network local icpos --argument '(0)'
169+
dfx deploy icpos --argument '(0)'
152170
```
153171

154-
### Step 6: Configure the icpos canister:
172+
### 8. Configure the icpos canister
155173

156-
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:
174+
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:
157175

158176
```bash
159-
dfx canister --network local call icpos setCourierApiKey "pk_prod_..."
177+
dfx canister call icpos setCourierApiKey "pk_prod_..."
160178
```
161179

162-
### Step 7: Build and run the frontend:
180+
### 9. Build and run the frontend
163181

164-
Run npm to install dependencies and start the frontend. The frontend will be available at http://localhost:5173.
182+
Run npm to install dependencies and start a development version of the frontend.
165183

166184
```bash
167-
npm install
168-
npm run dev
185+
pnpm install
186+
pnpm run dev
169187
```
170188

171-
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.
189+
The app should now be accessible at a local url, typically `http://localhost:5173`.
172190

173-
### Step 8: Make a transfer!
191+
### 10. Make a transfer!
174192

175-
Now that everything is up and running, you can make a transfer to your newly created store.
176193

177-
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.
194+
195+
Now that everything is up and running, you can make a transfer to your newly created store.
178196

179197
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.
180198

181-
#### 8.1: Create the first store and supply it with some tokens:
199+
#### 10.1 Create the first store and supply it with some tokens
182200

183-
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.
201+
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.
184202

185203
```bash
186-
dfx canister --network local call icrc1_ledger icrc1_transfer '
204+
dfx canister call icrc1_ledger icrc1_transfer '
187205
(record {
188206
to=(record {
189207
owner=(principal "[STORE PRINCIPAL 1 HERE]")
@@ -193,9 +211,9 @@ dfx canister --network local call icrc1_ledger icrc1_transfer '
193211
'
194212
```
195213

196-
#### 8.2: Create the second store:
214+
#### 10.2 Create the second store
197215

198-
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.
216+
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.
199217

200218
Now, go back to the first browser/store, navigate to the `Send` page, and transfer some tokens to the second store.
201219

@@ -205,14 +223,11 @@ If everything is working, you should see a notification in the second store.
205223

206224
## Possible improvements
207225

208-
- Login state is not persisted. Reloading the app will log the user out. This should be done using `localStorage` or `sessionStorage`.
209-
- Show more information about transactions. A transaction detail page.
226+
- Show more information about transactions.
227+
- A transaction detail page.
228+
- Pagination, currently only the first 5 transactions are shown.
210229
- Show a confirmation dialog after the user clicks on the `Send` button.
211230

212-
## Known issues
213-
214-
-
215-
216231
## Contributing
217232

218233
Contributions are welcome! Please open an issue or submit a pull request.

motoko/ic-pos/dfx.json

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"type": "custom",
1919
"candid": "https://github.com/dfinity/internet-identity/releases/latest/download/internet_identity.did",
2020
"wasm": "https://github.com/dfinity/internet-identity/releases/latest/download/internet_identity_dev.wasm.gz",
21+
"specified_id": "rdmx6-jaaaa-aaaaa-aaadq-cai",
2122
"remote": {
2223
"id": {
2324
"ic": "rdmx6-jaaaa-aaaaa-aaadq-cai"
@@ -26,8 +27,9 @@
2627
},
2728
"icrc1_ledger": {
2829
"type": "custom",
29-
"candid": "https://raw.githubusercontent.com/dfinity/ic/95787355499f3be929f2ab302ed44cdad7c64061/rs/rosetta-api/icrc1/ledger/ledger.did",
30-
"wasm": "https://download.dfinity.systems/ic/95787355499f3be929f2ab302ed44cdad7c64061/canisters/ic-icrc1-ledger.wasm.gz",
30+
"candid": "https://raw.githubusercontent.com/dfinity/ic/2e3589427cd9648d4edaebc1b96b5daf8fdd94d8/rs/rosetta-api/icrc1/ledger/ledger.did",
31+
"wasm": "https://download.dfinity.systems/ic/2e3589427cd9648d4edaebc1b96b5daf8fdd94d8/canisters/ic-icrc1-ledger.wasm.gz",
32+
"specified_id": "mxzaz-hqaaa-aaaar-qaada-cai",
3133
"remote": {
3234
"id": {
3335
"ic": "mxzaz-hqaaa-aaaar-qaada-cai"
@@ -36,8 +38,9 @@
3638
},
3739
"icrc1_index": {
3840
"type": "custom",
39-
"candid": "https://raw.githubusercontent.com/dfinity/ic/95787355499f3be929f2ab302ed44cdad7c64061/rs/rosetta-api/icrc1/index/index.did",
40-
"wasm": "https://download.dfinity.systems/ic/95787355499f3be929f2ab302ed44cdad7c64061/canisters/ic-icrc1-index.wasm.gz",
41+
"candid": "https://raw.githubusercontent.com/dfinity/ic/2e3589427cd9648d4edaebc1b96b5daf8fdd94d8/rs/rosetta-api/icrc1/index/index.did",
42+
"wasm": "https://download.dfinity.systems/ic/2e3589427cd9648d4edaebc1b96b5daf8fdd94d8/canisters/ic-icrc1-index.wasm.gz",
43+
"specified_id": "n5wcd-faaaa-aaaar-qaaea-cai",
4144
"remote": {
4245
"id": {
4346
"ic": "n5wcd-faaaa-aaaar-qaaea-cai"

motoko/ic-pos/eslint.config.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import globals from "globals";
2+
import pluginJs from "@eslint/js";
3+
import tseslint from "typescript-eslint";
4+
import pluginReact from "eslint-plugin-react";
5+
6+
7+
/** @type {import('eslint').Linter.Config[]} */
8+
export default [
9+
{
10+
files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
11+
},
12+
{ languageOptions: { globals: globals.browser } },
13+
pluginJs.configs.recommended,
14+
...tseslint.configs.recommended,
15+
pluginReact.configs.flat.recommended,
16+
{
17+
rules: {
18+
"react/react-in-jsx-scope": "off",
19+
"react/jsx-uses-react": "off",
20+
},
21+
},
22+
];
23+
24+

motoko/ic-pos/src/index.html renamed to motoko/ic-pos/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
<body>
1212
<div id="root"></div>
13-
<script type="module" src="/icpos_frontend/main.tsx"></script>
13+
<script type="module" src="/src/icpos_frontend/main.tsx"></script>
1414
</body>
1515

16-
</html>
16+
</html>

0 commit comments

Comments
 (0)