diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
index 3ae07fc78..a9f876317 100644
--- a/.github/workflows/gh-pages.yml
+++ b/.github/workflows/gh-pages.yml
@@ -2,7 +2,9 @@ name: Deploy static content to Pages
 
 on:
   push:
-    branches: ["main"]
+    branches:
+      - main
+      - final
 
   workflow_dispatch:
 
diff --git a/package-lock.json b/package-lock.json
index 8af9a963e..1b1fdeb01 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@tanstack/react-query-devtools": "^5.28.4",
         "axios": "^1.6.8",
         "jotai": "^2.7.1",
+        "near-payments": "^0.1.10",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.22.3",
@@ -74,7 +75,6 @@
       "version": "7.24.2",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
       "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==",
-      "dev": true,
       "dependencies": {
         "@babel/highlight": "^7.24.2",
         "picocolors": "^1.0.0"
@@ -224,7 +224,6 @@
       "version": "7.24.3",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz",
       "integrity": "sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.24.0"
       },
@@ -279,7 +278,6 @@
       "version": "7.24.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz",
       "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -288,7 +286,6 @@
       "version": "7.22.20",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
       "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -320,7 +317,6 @@
       "version": "7.24.2",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.2.tgz",
       "integrity": "sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.22.20",
         "chalk": "^2.4.2",
@@ -335,7 +331,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -347,7 +342,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -361,7 +355,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -369,14 +362,12 @@
     "node_modules/@babel/highlight/node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
     "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -385,7 +376,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -394,7 +384,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -406,7 +395,6 @@
       "version": "7.24.1",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.1.tgz",
       "integrity": "sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==",
-      "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -473,7 +461,6 @@
       "version": "7.24.0",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz",
       "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.23.4",
         "@babel/helper-validator-identifier": "^7.22.20",
@@ -501,6 +488,144 @@
         "statuses": "^2.0.1"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.11.4",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz",
+      "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz",
+      "integrity": "sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.11.5",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.5.tgz",
+      "integrity": "sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/is-prop-valid": "^1.2.2",
+        "@emotion/serialize": "^1.1.4",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
@@ -1162,8 +1287,7 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
@@ -1175,6 +1299,109 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@microsoft/api-extractor": {
+      "version": "7.43.0",
+      "resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.43.0.tgz",
+      "integrity": "sha512-GFhTcJpB+MI6FhvXEI9b2K0snulNLWHqC/BbcJtyNYcKUiw7l3Lgis5ApsYncJ0leALX7/of4XfmXk+maT111w==",
+      "dependencies": {
+        "@microsoft/api-extractor-model": "7.28.13",
+        "@microsoft/tsdoc": "0.14.2",
+        "@microsoft/tsdoc-config": "~0.16.1",
+        "@rushstack/node-core-library": "4.0.2",
+        "@rushstack/rig-package": "0.5.2",
+        "@rushstack/terminal": "0.10.0",
+        "@rushstack/ts-command-line": "4.19.1",
+        "lodash": "~4.17.15",
+        "minimatch": "~3.0.3",
+        "resolve": "~1.22.1",
+        "semver": "~7.5.4",
+        "source-map": "~0.6.1",
+        "typescript": "5.4.2"
+      },
+      "bin": {
+        "api-extractor": "bin/api-extractor"
+      }
+    },
+    "node_modules/@microsoft/api-extractor-model": {
+      "version": "7.28.13",
+      "resolved": "https://registry.npmjs.org/@microsoft/api-extractor-model/-/api-extractor-model-7.28.13.tgz",
+      "integrity": "sha512-39v/JyldX4MS9uzHcdfmjjfS6cYGAoXV+io8B5a338pkHiSt+gy2eXQ0Q7cGFJ7quSa1VqqlMdlPrB6sLR/cAw==",
+      "dependencies": {
+        "@microsoft/tsdoc": "0.14.2",
+        "@microsoft/tsdoc-config": "~0.16.1",
+        "@rushstack/node-core-library": "4.0.2"
+      }
+    },
+    "node_modules/@microsoft/api-extractor/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@microsoft/api-extractor/node_modules/minimatch": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz",
+      "integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@microsoft/api-extractor/node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@microsoft/api-extractor/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@microsoft/tsdoc": {
+      "version": "0.14.2",
+      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.14.2.tgz",
+      "integrity": "sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug=="
+    },
+    "node_modules/@microsoft/tsdoc-config": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc-config/-/tsdoc-config-0.16.2.tgz",
+      "integrity": "sha512-OGiIzzoBLgWWR0UdRJX98oYO+XKGf7tiK4Zk6tQ/E4IJqGCe7dvkTvgDZV5cFJUzLGDOjeAXrnZoA6QkVySuxw==",
+      "dependencies": {
+        "@microsoft/tsdoc": "0.14.2",
+        "ajv": "~6.12.6",
+        "jju": "~1.4.0",
+        "resolve": "~1.19.0"
+      }
+    },
+    "node_modules/@microsoft/tsdoc-config/node_modules/resolve": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz",
+      "integrity": "sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==",
+      "dependencies": {
+        "is-core-module": "^2.1.0",
+        "path-parse": "^1.0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/@mswjs/cookies": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@mswjs/cookies/-/cookies-1.1.0.tgz",
@@ -1280,7 +1507,6 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
       "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
-      "dev": true,
       "dependencies": {
         "@types/estree": "^1.0.0",
         "estree-walker": "^2.0.2",
@@ -1305,7 +1531,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -1318,7 +1543,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -1331,7 +1555,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -1344,7 +1567,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -1357,7 +1579,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1370,7 +1591,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1383,7 +1603,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1396,7 +1615,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1409,7 +1627,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1422,7 +1639,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1435,7 +1651,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1448,7 +1663,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1461,12 +1675,105 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
       ]
     },
+    "node_modules/@rushstack/node-core-library": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-4.0.2.tgz",
+      "integrity": "sha512-hyES82QVpkfQMeBMteQUnrhASL/KHPhd7iJ8euduwNJG4mu2GSOKybf0rOEjOm1Wz7CwJEUm9y0yD7jg2C1bfg==",
+      "dependencies": {
+        "fs-extra": "~7.0.1",
+        "import-lazy": "~4.0.0",
+        "jju": "~1.4.0",
+        "resolve": "~1.22.1",
+        "semver": "~7.5.4",
+        "z-schema": "~5.0.2"
+      },
+      "peerDependencies": {
+        "@types/node": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rushstack/node-core-library/node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@rushstack/rig-package": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@rushstack/rig-package/-/rig-package-0.5.2.tgz",
+      "integrity": "sha512-mUDecIJeH3yYGZs2a48k+pbhM6JYwWlgjs2Ca5f2n1G2/kgdgP9D/07oglEGf6mRyXEnazhEENeYTSNDRCwdqA==",
+      "dependencies": {
+        "resolve": "~1.22.1",
+        "strip-json-comments": "~3.1.1"
+      }
+    },
+    "node_modules/@rushstack/terminal": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@rushstack/terminal/-/terminal-0.10.0.tgz",
+      "integrity": "sha512-UbELbXnUdc7EKwfH2sb8ChqNgapUOdqcCIdQP4NGxBpTZV2sQyeekuK3zmfQSa/MN+/7b4kBogl2wq0vpkpYGw==",
+      "dependencies": {
+        "@rushstack/node-core-library": "4.0.2",
+        "supports-color": "~8.1.1"
+      },
+      "peerDependencies": {
+        "@types/node": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rushstack/terminal/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/@rushstack/ts-command-line": {
+      "version": "4.19.1",
+      "resolved": "https://registry.npmjs.org/@rushstack/ts-command-line/-/ts-command-line-4.19.1.tgz",
+      "integrity": "sha512-J7H768dgcpG60d7skZ5uSSwyCZs/S2HrWP1Ds8d1qYAyaaeJmpmmLr9BVw97RjFzmQPOYnoXcKA4GkqDCkduQg==",
+      "dependencies": {
+        "@rushstack/terminal": "0.10.0",
+        "@types/argparse": "1.0.38",
+        "argparse": "~1.0.9",
+        "string-argv": "~0.3.1"
+      }
+    },
+    "node_modules/@rushstack/ts-command-line/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
     "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
@@ -2058,6 +2365,11 @@
         "react": "^18.0.0"
       }
     },
+    "node_modules/@types/argparse": {
+      "version": "1.0.38",
+      "resolved": "https://registry.npmjs.org/@types/argparse/-/argparse-1.0.38.tgz",
+      "integrity": "sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA=="
+    },
     "node_modules/@types/cookie": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
@@ -2067,8 +2379,7 @@
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-      "dev": true
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
     },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
@@ -2089,11 +2400,16 @@
       "version": "20.11.30",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.30.tgz",
       "integrity": "sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.11",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
@@ -2352,6 +2668,99 @@
         "vite": "^4 || ^5"
       }
     },
+    "node_modules/@volar/language-core": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.11.1.tgz",
+      "integrity": "sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==",
+      "dependencies": {
+        "@volar/source-map": "1.11.1"
+      }
+    },
+    "node_modules/@volar/source-map": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.11.1.tgz",
+      "integrity": "sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==",
+      "dependencies": {
+        "muggle-string": "^0.3.1"
+      }
+    },
+    "node_modules/@volar/typescript": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.11.1.tgz",
+      "integrity": "sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==",
+      "dependencies": {
+        "@volar/language-core": "1.11.1",
+        "path-browserify": "^1.0.1"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.4.21",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.21.tgz",
+      "integrity": "sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==",
+      "dependencies": {
+        "@babel/parser": "^7.23.9",
+        "@vue/shared": "3.4.21",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.0.2"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.4.21",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz",
+      "integrity": "sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==",
+      "dependencies": {
+        "@vue/compiler-core": "3.4.21",
+        "@vue/shared": "3.4.21"
+      }
+    },
+    "node_modules/@vue/language-core": {
+      "version": "1.8.27",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.27.tgz",
+      "integrity": "sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==",
+      "dependencies": {
+        "@volar/language-core": "~1.11.1",
+        "@volar/source-map": "~1.11.1",
+        "@vue/compiler-dom": "^3.3.0",
+        "@vue/shared": "^3.3.0",
+        "computeds": "^0.0.1",
+        "minimatch": "^9.0.3",
+        "muggle-string": "^0.3.1",
+        "path-browserify": "^1.0.1",
+        "vue-template-compiler": "^2.7.14"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.4.21",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz",
+      "integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g=="
+    },
+    "node_modules/@xstate/react": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@xstate/react/-/react-4.1.0.tgz",
+      "integrity": "sha512-Fh89luCwuMXIVXIua67d8pNuVgdGpqke2jHfIIL+ZjkfNh6YFtPDSwNSZZDhdNUsOW1zZYSbtUzbC8MIUyTSHQ==",
+      "dependencies": {
+        "use-isomorphic-layout-effect": "^1.1.2",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "xstate": "^5.6.2"
+      },
+      "peerDependenciesMeta": {
+        "xstate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
@@ -2377,7 +2786,6 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -2532,11 +2940,47 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/babel-plugin-macros/node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/babel-plugin-macros/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
@@ -2554,7 +2998,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
       "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -2607,7 +3050,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -2815,11 +3257,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/computeds": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
+      "integrity": "sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q=="
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
@@ -2891,14 +3337,17 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
+    "node_modules/de-indent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg=="
     },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -2993,7 +3442,6 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
       "engines": {
         "node": ">=0.12"
       },
@@ -3005,7 +3453,6 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
       "dependencies": {
         "is-arrayish": "^0.2.1"
       }
@@ -3014,7 +3461,7 @@
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz",
       "integrity": "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==",
-      "dev": true,
+      "devOptional": true,
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
@@ -3061,7 +3508,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -3248,8 +3694,7 @@
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "dev": true
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
     "node_modules/esutils": {
       "version": "2.0.3",
@@ -3263,8 +3708,7 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-glob": {
       "version": "3.3.2",
@@ -3297,8 +3741,7 @@
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
@@ -3363,6 +3806,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -3460,6 +3908,19 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/fs-extra": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
+      "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3470,7 +3931,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -3484,7 +3944,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -3596,6 +4055,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
+    },
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -3615,7 +4079,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3624,7 +4087,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -3632,12 +4094,28 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "bin": {
+        "he": "bin/he"
+      }
+    },
     "node_modules/headers-polyfill": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/headers-polyfill/-/headers-polyfill-4.0.3.tgz",
       "integrity": "sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ==",
       "dev": true
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -3651,7 +4129,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
       "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dev": true,
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -3663,6 +4140,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/import-lazy": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz",
+      "integrity": "sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -3691,8 +4176,7 @@
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "dev": true
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
     },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
@@ -3710,7 +4194,6 @@
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
       "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
-      "dev": true,
       "dependencies": {
         "hasown": "^2.0.0"
       },
@@ -3805,6 +4288,11 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jju": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz",
+      "integrity": "sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA=="
+    },
     "node_modules/jotai": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.7.1.tgz",
@@ -3863,14 +4351,12 @@
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -3890,6 +4376,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -3899,6 +4393,11 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/kolorist": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
+      "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ=="
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -3924,8 +4423,7 @@
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/locate-path": {
       "version": "6.0.0",
@@ -3942,6 +4440,21 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ=="
+    },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3972,7 +4485,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -3980,6 +4492,17 @@
         "node": ">=10"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.30.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.9.tgz",
+      "integrity": "sha512-S1+hd+dIrC8EZqKyT9DstTH/0Z+f76kmmvZnkfQVmOpDEF9iVgdYif3Q/pIWHmCoo59bQVGW0kVL3e2nl+9+Sw==",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -4025,7 +4548,6 @@
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
       "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
-      "dev": true,
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -4048,8 +4570,7 @@
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/msw": {
       "version": "2.2.8",
@@ -4106,6 +4627,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/muggle-string": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.3.1.tgz",
+      "integrity": "sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg=="
+    },
     "node_modules/mute-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-1.0.0.tgz",
@@ -4130,7 +4656,7 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
       "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "github",
@@ -4150,6 +4676,22 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "node_modules/near-payments": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/near-payments/-/near-payments-0.1.10.tgz",
+      "integrity": "sha512-xVG+9zeYwbuuW5NVnxwTw82G8/bYna97nFlO7vch6AxXZOsP+dmBZ/X0ILYadAUtiTFp4IwHrZRBRY8YuKxANw==",
+      "dependencies": {
+        "@emotion/react": "^11.11.4",
+        "@emotion/styled": "^11.11.0",
+        "@xstate/react": "^4.1.0",
+        "vite-plugin-dts": "^3.8.1",
+        "xstate": "^5.9.1"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
     "node_modules/no-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
@@ -4268,7 +4810,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -4280,7 +4821,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
       "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
@@ -4294,6 +4834,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -4324,8 +4869,7 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-scurry": {
       "version": "1.10.1",
@@ -4362,7 +4906,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -4370,14 +4913,12 @@
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -4407,7 +4948,7 @@
       "version": "8.4.38",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
       "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "opencollective",
@@ -4570,7 +5111,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -4618,6 +5158,11 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/react-router": {
       "version": "6.22.3",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
@@ -4687,7 +5232,6 @@
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -4704,7 +5248,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -4738,7 +5281,7 @@
       "version": "4.13.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.13.0.tgz",
       "integrity": "sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/estree": "1.0.5"
       },
@@ -4810,7 +5353,6 @@
       "version": "7.6.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
       "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
-      "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -4873,15 +5415,27 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
       "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
+    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -4897,6 +5451,14 @@
       "integrity": "sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==",
       "dev": true
     },
+    "node_modules/string-argv": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
+      "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==",
+      "engines": {
+        "node": ">=0.6.19"
+      }
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -4991,7 +5553,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       },
@@ -4999,6 +5560,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -5059,7 +5625,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -5153,7 +5718,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
       "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -5222,7 +5786,6 @@
       "version": "5.4.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz",
       "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==",
-      "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -5235,7 +5798,15 @@
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true
+      "devOptional": true
+    },
+    "node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
     },
     "node_modules/update-browserslist-db": {
       "version": "1.0.13",
@@ -5271,22 +5842,50 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
       "dependencies": {
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/validator": {
+      "version": "13.11.0",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.11.0.tgz",
+      "integrity": "sha512-Ii+sehpSfZy+At5nPdnyMhx78fEoPDkR2XW/zimHEL3MyGJQOCQ7WeP20jPYRz7ZCpcKLB21NxuXHF3bxjStBQ==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/vite": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.6.tgz",
       "integrity": "sha512-yYIAZs9nVfRJ/AiOLCA91zzhjsHUgMjB+EigzFb6W2XTLO8JixBCKCjvhKZaye+NKYHCrkv3Oh50dH9EdLU2RA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "esbuild": "^0.19.3",
         "postcss": "^8.4.35",
@@ -5337,6 +5936,32 @@
         }
       }
     },
+    "node_modules/vite-plugin-dts": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-dts/-/vite-plugin-dts-3.8.1.tgz",
+      "integrity": "sha512-zEYyQxH7lKto1VTKZHF3ZZeOPkkJgnMrePY4VxDHfDSvDjmYMMfWjZxYmNwW8QxbaItWJQhhXY+geAbyNphI7g==",
+      "dependencies": {
+        "@microsoft/api-extractor": "7.43.0",
+        "@rollup/pluginutils": "^5.1.0",
+        "@vue/language-core": "^1.8.27",
+        "debug": "^4.3.4",
+        "kolorist": "^1.8.0",
+        "magic-string": "^0.30.8",
+        "vue-tsc": "^1.8.27"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "typescript": "*",
+        "vite": "*"
+      },
+      "peerDependenciesMeta": {
+        "vite": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vite-plugin-svgr": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-4.2.0.tgz",
@@ -5351,6 +5976,31 @@
         "vite": "^2.6.0 || 3 || 4 || 5"
       }
     },
+    "node_modules/vue-template-compiler": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
+      "integrity": "sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==",
+      "dependencies": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
+      }
+    },
+    "node_modules/vue-tsc": {
+      "version": "1.8.27",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.27.tgz",
+      "integrity": "sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==",
+      "dependencies": {
+        "@volar/typescript": "~1.11.1",
+        "@vue/language-core": "1.8.27",
+        "semver": "^7.5.4"
+      },
+      "bin": {
+        "vue-tsc": "bin/vue-tsc.js"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -5466,6 +6116,15 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
     },
+    "node_modules/xstate": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/xstate/-/xstate-5.10.0.tgz",
+      "integrity": "sha512-rn3AbPFHngLqtfFTe9KDXJ1wQX4ACDKnQyQ2ShjuKor3iVnxDSKyDL9llFLiOpaBQu+cFMKcZYlpXo5nb/q5rw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/xstate"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -5478,8 +6137,7 @@
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "node_modules/yaml": {
       "version": "2.4.1",
@@ -5551,6 +6209,34 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/z-schema": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/z-schema/-/z-schema-5.0.5.tgz",
+      "integrity": "sha512-D7eujBWkLa3p2sIpJA0d1pr7es+a7m0vFAnZLlCEKq/Ij2k0MLi9Br2UPxoxdYystm5K1yeBGzub0FlYUEWj2Q==",
+      "dependencies": {
+        "lodash.get": "^4.4.2",
+        "lodash.isequal": "^4.5.0",
+        "validator": "^13.7.0"
+      },
+      "bin": {
+        "z-schema": "bin/z-schema"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "commander": "^9.4.1"
+      }
+    },
+    "node_modules/z-schema/node_modules/commander": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "optional": true,
+      "engines": {
+        "node": "^12.20.0 || >=14"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 1485ef0cc..dc1fd8a3c 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@tanstack/react-query-devtools": "^5.28.4",
     "axios": "^1.6.8",
     "jotai": "^2.7.1",
+    "near-payments": "^0.1.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
diff --git a/src/api/useCarts.ts b/src/api/useCarts.ts
index fc30dc66b..2efcfbeff 100644
--- a/src/api/useCarts.ts
+++ b/src/api/useCarts.ts
@@ -4,20 +4,37 @@ import {
   useQueryClient,
 } from "@tanstack/react-query";
 import { apiClient } from "./axios";
-import type { ICart, IProduct } from "@/types";
+import type { ICart, IProduct, ResponseDto } from "@/types";
+import type { InfiniteData } from "@tanstack/react-query";
 
 const fetchCarts = async (page: number) => {
   const query = new URLSearchParams({ page: page.toString(), limit: "5" });
-  const { data } = await apiClient.get<ICart[]>(`/carts?${query.toString()}`);
+  const { data } = await apiClient.get<ResponseDto<ICart[]>>(
+    `/carts?${query.toString()}`
+  );
   return data;
 };
 
 const postCart = async (product: IProduct) => {
-  const { data } = await apiClient.post<ICart>("/carts", product);
+  const { data } = await apiClient.post<{
+    ok: boolean;
+    code: string;
+    message?: string;
+    data?: IProduct;
+  }>("/carts", product);
+  return data;
+};
+const changeQuantity = async (productId: number, quantity: number) => {
+  const { data } = await apiClient.patch<{
+    ok: boolean;
+    code: string;
+    message?: string;
+    product?: IProduct;
+  }>(`/carts/${productId}`, { quantity });
   return data;
 };
 const deleteCartItem = async (id: number) => {
-  const { data } = await apiClient.delete<ICart>(`/carts/${id}`);
+  const { data } = await apiClient.delete<IProduct>(`/carts/${id}`);
   return data;
 };
 
@@ -31,20 +48,127 @@ export const useCarts = () => {
   });
 };
 
-export const usePostCarts = () => {
+export const usePostCarts = (successCallback?: () => void) => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: (product: IProduct) => postCart(product),
+
+    onMutate: async (newTodo) => {
+      await queryClient.cancelQueries({ queryKey: ["carts"] });
+
+      // Snapshot the previous value
+      const previousTodos = queryClient.getQueryData(["carts"]);
+
+      // Optimistically update to the new value --> if exists quantity should be updated
+      queryClient.setQueryData(
+        ["carts"],
+        (old: InfiniteData<ResponseDto<ICart[]>> | undefined) => {
+          if (!old) return;
+          const existingItem = old.pages.flatMap((page) =>
+            page.data.find((item) => item.product.id === newTodo.id)
+          );
+          if (!existingItem) {
+            return {
+              pageParams: old.pageParams,
+              pages: [
+                {
+                  data: [
+                    ...old.pages.flatMap((page) => page.data),
+                    { product: newTodo, quantity: 1 },
+                  ],
+                  nextCursor: null,
+                },
+              ],
+            };
+          } else {
+            const updatedData = old.pages.flatMap((page) =>
+              page.data.map((item) => {
+                if (item.product.id === newTodo.id) {
+                  return { ...item, quantity: item.quantity + 1 };
+                }
+                return item;
+              })
+            );
+            return {
+              pageParams: old.pageParams,
+              pages: [
+                {
+                  data: updatedData,
+                  nextCursor: null,
+                },
+              ],
+            };
+          }
+        }
+      );
+      return { previousTodos };
+    },
+    onError: (_err, _newTodo, context) => {
+      queryClient.setQueryData(["carts"], context?.previousTodos);
+    },
     onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: ["carts"],
-        exact: true,
-      });
+      successCallback?.();
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["carts"] });
     },
   });
 };
-export const useDeleteCartItem = () => {
+export const useDeleteCartItem = (successCallback?: () => void) => {
+  const queryClient = useQueryClient();
   return useMutation({
     mutationFn: (id: number) => deleteCartItem(id),
+    onSuccess: () => {
+      successCallback?.();
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["carts"] });
+    },
+  });
+};
+export const useChangeQuantity = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      productId,
+      quantity,
+    }: {
+      productId: number;
+      quantity: number;
+    }) => changeQuantity(productId, quantity),
+    onMutate: async ({ productId, quantity }) => {
+      await queryClient.cancelQueries({ queryKey: ["carts"] });
+      const previousData = queryClient.getQueryData(["carts"]);
+      queryClient.setQueryData(
+        ["carts"],
+        (old: InfiniteData<ResponseDto<ICart[]>> | undefined) => {
+          if (!old) return;
+          const updatedData = old.pages.flatMap((page) =>
+            page.data.map((item) => {
+              if (item.product.id === productId) {
+                return { ...item, quantity };
+              }
+              return item;
+            })
+          );
+          return {
+            pageParams: old.pageParams,
+            pages: [
+              {
+                data: updatedData,
+                nextCursor: null,
+              },
+            ],
+          };
+        }
+      );
+      return { previousData };
+    },
+    onError: (_err, _newTodo, context) => {
+      queryClient.setQueryData(["carts"], context?.previousData);
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["carts"] });
+    },
   });
 };
diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
index 888c551d6..85cf7b927 100644
--- a/src/app/cart/page.tsx
+++ b/src/app/cart/page.tsx
@@ -1,34 +1,30 @@
 import Spinner from "@/assets/spinner.svg?react";
-import { useEffect } from "react";
-import { useCarts } from "@/api";
+import { useEffect, useRef } from "react";
+import { useCarts, useDeleteCartItem, useChangeQuantity } from "@/api";
 import { useIntersectionObserver } from "@/hooks";
-import { Loading, Checkbox, Footer, Button } from "@/components";
+import {
+  Loading,
+  Checkbox,
+  Footer,
+  TotalPrice,
+  Modal,
+  Button,
+} from "@/components";
+import selectedCartAtom from "@/atoms/cartAtom";
+import { useAtom } from "jotai";
+import type { ModalRef } from "@/components";
+import { useNavigate } from "react-router-dom";
 
-function TotalPrice() {
-  return (
-    <article className="flex flex-col w-full md:p-0 px-2 py-4">
-      <h3 className="border-b w-full">결제예상금액</h3>
-      <div className="flex justify-between">
-        <div className="underline decoration-primary-400 decoration-4 underline-offset-[-2px]">
-          총 상품금액
-        </div>
-        <div className="underline decoration-primary-400 decoration-4 underline-offset-[-2px]">
-          0원
-        </div>
-      </div>
-      <div>
-        <Button type="primary" block>
-          주문하기
-        </Button>
-      </div>
-    </article>
-  );
-}
 const Cart = () => {
   const { data, isLoading, isError, hasNextPage, fetchNextPage, isFetching } =
     useCarts();
+  const modalRef = useRef<ModalRef | null>(null);
+  const confirmModalRef = useRef<ModalRef | null>(null);
   const { ref, isIntersecting } = useIntersectionObserver();
-  // const { mutate: deleteCartItem } = useDeleteCartItem();
+  const { mutate: deleteCartItem } = useDeleteCartItem(modalRef.current?.open);
+  const { mutate: changeQuantity } = useChangeQuantity();
+  const [selectedCart, setSelectedCart] = useAtom(selectedCartAtom);
+  const navigate = useNavigate();
 
   useEffect(() => {
     if (isIntersecting && hasNextPage) {
@@ -43,53 +39,157 @@ const Cart = () => {
     return <div>Error</div>;
   }
   return (
-    <section className="pb-[73px] md:pb-0">
-      <h2 className="border-b-2 border-secondary-700 text-center text-xl pb-2">
-        장바구니
-      </h2>
-      <div className="grid grid-cols-2">
-        <div className="col-span-2 md:col-span-1">
-          <div className="flex gap-4 items-center">
-            <Checkbox id="all" />
-            <label htmlFor="all">선택 해제</label>
+    <>
+      <section className="pb-[73px] md:pb-0">
+        <h2 className="border-b-2 border-secondary-700 text-center text-xl pb-2">
+          장바구니
+        </h2>
+        <div className="grid grid-cols-2">
+          <div className="col-span-2 md:col-span-1">
+            <div className="flex gap-4 items-center">
+              <Checkbox
+                id="all"
+                checked={
+                  data?.pages
+                    .flatMap((item) => item.data)
+                    .every((item) =>
+                      selectedCart.some((cart) => cart.id === item.id)
+                    ) ?? false
+                }
+                onChange={(e) => {
+                  setSelectedCart(
+                    e.target.checked
+                      ? data?.pages.flatMap((item) => item.data) ?? []
+                      : []
+                  );
+                }}
+              />
+              <label htmlFor="all">선택 해제</label>
+            </div>
+            <ol className="flex flex-col divide-y">
+              {data?.pages
+                .flatMap((item) => item.data)
+                .map(({ product, quantity, id: cartId }) => {
+                  const { id, name, imageUrl, price } = product;
+                  return (
+                    <li key={id}>
+                      <div className="flex gap-3">
+                        <Checkbox
+                          id={`${id}`}
+                          checked={selectedCart.some(
+                            (item) => item.id === cartId
+                          )}
+                          onChange={(e) => {
+                            setSelectedCart((prev) => {
+                              if (e.target.checked) {
+                                return [
+                                  ...prev,
+                                  { product, quantity, id: cartId },
+                                ];
+                              }
+                              return prev.filter((item) => item.id !== cartId);
+                            });
+                          }}
+                        />
+                        <img
+                          src={imageUrl}
+                          alt={name}
+                          className="aspect-square w-36"
+                        />
+                        <div>{name}</div>
+                        <div className="flex flex-col justify-between ml-auto">
+                          <button
+                            onClick={() => {
+                              deleteCartItem(id);
+                            }}
+                          >
+                            삭제
+                          </button>
+                          <input
+                            type="number"
+                            className="border"
+                            value={quantity}
+                            max={20}
+                            min={1}
+                            onChange={(e) => {
+                              changeQuantity({
+                                productId: id,
+                                quantity: +e.target.value,
+                              });
+                              setSelectedCart((prev) =>
+                                prev.map((item) =>
+                                  item.id === cartId
+                                    ? { ...item, quantity: +e.target.value }
+                                    : item
+                                )
+                              );
+                            }}
+                          />
+                          <div>
+                            {(price * quantity).toLocaleString("ko-KR")}원
+                          </div>
+                        </div>
+                      </div>
+                    </li>
+                  );
+                })}
+              <div ref={ref} />
+            </ol>
+            {isFetching && (
+              <div className="justify-center">
+                <Spinner />
+              </div>
+            )}
+          </div>
+
+          <div className="hidden md:flex h-max">
+            <TotalPrice comformModalOpen={confirmModalRef.current?.open} />
           </div>
-          <ol className="flex flex-col divide-y">
-            {data?.pages.flat().map(({ id, product }) => (
-              <li key={id}>
-                <div className="flex gap-3">
-                  <Checkbox id={`${id}`} />
-                  <img
-                    src={product.imageUrl}
-                    alt={product.name}
-                    className="aspect-square w-36"
-                  />
-                  <div>{product.name}</div>
-                  <div className="flex flex-col justify-between ml-auto">
-                    <button
-                      onClick={() => {
-                        // deleteCartItem(id);
-                      }}
-                    >
-                      삭제
-                    </button>
-                    <input type="number" value={1} />
-                    <div>{product.price.toLocaleString("ko-KR")}원</div>
-                  </div>
-                </div>
-              </li>
-            ))}
-            <div ref={ref} />
-            {isFetching && <Spinner />}
-          </ol>
         </div>
-        <div className="hidden md:flex h-max">
-          <TotalPrice />
+        <Footer className="md:hidden">
+          <TotalPrice comformModalOpen={confirmModalRef.current?.open} />
+        </Footer>
+      </section>
+      <Modal ref={modalRef}>
+        <div className="flex flex-col gap-4 p-8">
+          <h2 className="text-lg">상품이 삭제되었습니다.</h2>
+          <Button
+            block
+            onClick={(e) => {
+              modalRef.current?.close();
+              e.stopPropagation();
+            }}
+          >
+            확인
+          </Button>
+        </div>
+      </Modal>
+      <Modal ref={confirmModalRef}>
+        <div className="flex flex-col gap-4 p-8">
+          <h2 className="text-lg">상품을 주문하시겠습니까?</h2>
+          <div className="grid grid-cols-2 gap-4">
+            <Button
+              onClick={(e) => {
+                confirmModalRef.current?.close();
+                e.stopPropagation();
+              }}
+            >
+              취소
+            </Button>
+            <Button
+              type="primary"
+              onClick={() => {
+                navigate("/order", {
+                  state: { selectedCart },
+                });
+              }}
+            >
+              주문하기
+            </Button>
+          </div>
         </div>
-      </div>
-      <Footer className="md:hidden">
-        <TotalPrice />
-      </Footer>
-    </section>
+      </Modal>
+    </>
   );
 };
 
diff --git a/src/app/order/page.tsx b/src/app/order/page.tsx
index 283f7df78..7837174bd 100644
--- a/src/app/order/page.tsx
+++ b/src/app/order/page.tsx
@@ -1,5 +1,128 @@
+import { useLocation, useNavigate } from "react-router-dom";
+import { useRef, useState } from "react";
+import { Footer, Button, Modal } from "@/components";
+import { useLoadNearPayments } from "near-payments";
+import type { PaymentCancel, PaymentResult } from "near-payments";
+import { ICart } from "@/types";
+import type { ModalRef } from "@/components";
+import { ERROR_MSG } from "@/constants";
+
 const Order = () => {
-  return <div>Order</div>;
+  const location = useLocation();
+  const navigate = useNavigate();
+  const modalRef = useRef<ModalRef | null>(null);
+  const [message, setMessage] = useState<string>("");
+  const { selectedCart: data }: { selectedCart: ICart[] } = location.state;
+
+  const loadNearPayments = useLoadNearPayments({
+    clientId: import.meta.env.VITE_CLIENT_ID,
+  });
+
+  const openPayments = async () => {
+    try {
+      await loadNearPayments({
+        orderId: window.crypto.randomUUID(),
+        totalAmount: totalPrice,
+        onPaymentComplete: (paymentResult: PaymentResult) => {
+          if (paymentResult.success) {
+            setMessage(paymentResult.message);
+          } else {
+            throw new Error(paymentResult.message);
+          }
+        },
+        onPaymentCancel: (paymentCancel: PaymentCancel) => {
+          if (paymentCancel.success) {
+            setMessage(paymentCancel.message);
+          } else {
+            throw new Error(paymentCancel.message);
+          }
+        },
+      });
+    } catch (error) {
+      if (error instanceof Error) {
+        setMessage(ERROR_MSG[error.message] ?? error.message);
+      }
+    } finally {
+      modalRef.current?.open();
+    }
+  };
+  const totalPrice = data.reduce(
+    (acc, cur) => acc + cur.product.price * cur.quantity,
+    0
+  );
+  return (
+    <>
+      <section>
+        <h2 className="border-b-2 border-secondary-700 text-center text-xl pb-2 font-bold">
+          주문/결제
+        </h2>
+        <div className="grid md:grid-cols-2">
+          <div className="px-4 py-8">
+            <div className="border-b-2 border-secondary-500 py-2 text-lg font-bold">
+              주문상품 ({data.length}건)
+            </div>
+            <ol className="flex flex-col divide-y">
+              {data?.map(({ product, quantity, id: cartId }) => {
+                const { name, imageUrl } = product;
+                return (
+                  <li key={cartId} className="py-2">
+                    <div className="flex gap-3">
+                      <img
+                        src={imageUrl}
+                        alt={name}
+                        className="aspect-square w-36"
+                      />
+                      <div className="flex flex-col gap-3">
+                        <span className="text-lg">{name}</span>
+                        <span>수량: {quantity}</span>
+                      </div>
+                    </div>
+                  </li>
+                );
+              })}
+            </ol>
+          </div>
+          <div className="hidden md:flex h-max border flex-col">
+            <div className="border-b px-2 py-4">결제금액</div>
+            <div className="px-2 py-4">
+              <div className="flex justify-between">
+                <div className="underline decoration-primary-400 decoration-4 underline-offset-[-2px]">
+                  총 상품금액
+                </div>
+                <div className="underline decoration-primary-400 decoration-4 underline-offset-[-2px]">
+                  {totalPrice.toLocaleString("ko-KR")}원
+                </div>
+              </div>
+              <Button type="primary" block onClick={openPayments}>
+                {totalPrice.toLocaleString("ko-KR")}원 결제하기
+              </Button>
+            </div>
+          </div>
+        </div>
+        <Footer className="md:hidden p-8">
+          <Button type="primary" block onClick={openPayments}>
+            {totalPrice.toLocaleString("ko-KR")}원 결제하기
+          </Button>
+        </Footer>
+      </section>
+      <Modal ref={modalRef}>
+        <div className="flex flex-col gap-4 p-8">
+          <h2 className="text-lg">{message}</h2>
+          <Button
+            block
+            type="primary"
+            onClick={(e) => {
+              modalRef.current?.close();
+              e.stopPropagation();
+              navigate("/");
+            }}
+          >
+            홈으로
+          </Button>
+        </div>
+      </Modal>
+    </>
+  );
 };
 
 export default Order;
diff --git a/src/atoms/cartAtom.ts b/src/atoms/cartAtom.ts
index 2f4ce7e28..4dcc8b638 100644
--- a/src/atoms/cartAtom.ts
+++ b/src/atoms/cartAtom.ts
@@ -1,6 +1,6 @@
 import { ICart } from "@/types/cart";
-import { atomWithStorage } from "jotai/utils";
+import { atom } from "jotai";
 
-const cartAtom = atomWithStorage<ICart[]>("cart", []);
+const selectedCartAtom = atom<ICart[]>([]);
 
-export default cartAtom;
+export default selectedCartAtom;
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 848e58258..949ef5378 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -14,11 +14,13 @@ const Button = ({
   htmlType = "button",
   type = "default",
   block = false,
+  disabled,
   ...props
 }: ButtonProps) => {
   return (
     <button
       {...props}
+      disabled={disabled}
       type={htmlType}
       className={twMerge(
         "text-white rounded-md px-4 py-2 transition-colors hover:brightness-105 disabled:opacity-40 flex justify-center items-center",
@@ -27,7 +29,8 @@ const Button = ({
           type === "secondary" && "bg-secondary-400 text-white",
           type === "default" &&
             "bg-white border text-gray-500 hover:border-primary-400 hover:text-primary-400",
-          block && "w-full"
+          block && "w-full",
+          disabled && "cursor-not-allowed"
         ),
         className
       )}
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index c0f52bd43..dd3cc8649 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -2,14 +2,13 @@ import Cart from "@/assets/cart.svg?react";
 import { useRef } from "react";
 import { usePostCarts } from "@/api";
 import { Modal, Button, LinkButton } from "@/components";
-
 import type { IProduct } from "@/types";
 import type { ModalRef } from "@/components";
 
 const Card = (props: IProduct) => {
   const modalRef = useRef<ModalRef | null>(null);
   const { name, imageUrl, price } = props;
-  const { mutate: addCart } = usePostCarts();
+  const { mutate: addCart } = usePostCarts(modalRef.current?.open);
 
   return (
     <>
@@ -33,7 +32,6 @@ const Card = (props: IProduct) => {
             onClick={(e) => {
               e.preventDefault();
               addCart(props);
-              modalRef.current?.open();
             }}
           >
             <Cart />
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 72ec24fc7..df8115b3f 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,14 +1,10 @@
 import Cart from "@/assets/cart.svg?react";
 import { Link, useLocation } from "react-router-dom";
 import { twJoin, twMerge } from "tailwind-merge";
-import { Count } from "@/components";
-import { cartAtom } from "@/atoms";
-import { useAtomValue } from "jotai";
 import type { ComponentProps } from "react";
 
 const Header = (props: ComponentProps<"header">) => {
   const { className } = props;
-  const cart = useAtomValue(cartAtom);
   const location = useLocation();
   return (
     <header
@@ -28,17 +24,15 @@ const Header = (props: ComponentProps<"header">) => {
         <nav>
           <ul className="flex gap-4">
             <li>
-              <Count count={cart.length}>
-                <Link
-                  to="/cart"
-                  className={twJoin(
-                    "underline-offset-2",
-                    location.pathname === "/cart" && "underline"
-                  )}
-                >
-                  장바구니
-                </Link>
-              </Count>
+              <Link
+                to="/cart"
+                className={twJoin(
+                  "underline-offset-2",
+                  location.pathname === "/cart" && "underline"
+                )}
+              >
+                장바구니
+              </Link>
             </li>
             <li>
               <Link
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index cbdf24c9d..0ec3d4d43 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -2,7 +2,10 @@ import Spinner from "@/assets/spinner.svg?react";
 const Loading = () => {
   return (
     <div className="w-dvw h-dvh flex justify-center items-center fixed top-0 left-0 z-50 bg-white-dimmed">
-      <div role="status">
+      <div
+        role="status"
+        className="w-8 h-8 text-gray-200 animate-spin dark:text-gray-400 fill-primary-400"
+      >
         <Spinner />
         <span className="sr-only">Loading...</span>
       </div>
diff --git a/src/components/TotalPrice.tsx b/src/components/TotalPrice.tsx
new file mode 100644
index 000000000..caccf293b
--- /dev/null
+++ b/src/components/TotalPrice.tsx
@@ -0,0 +1,41 @@
+import { Button } from ".";
+import { useAtomValue } from "jotai";
+import selectedCartAtom from "@/atoms/cartAtom";
+
+interface Props {
+  comformModalOpen: (() => void) | undefined;
+}
+const TotalPrice = ({ comformModalOpen }: Props) => {
+  const selectedCart = useAtomValue(selectedCartAtom);
+  const totalPrice = selectedCart.reduce(
+    (acc, cur) => acc + cur.product.price * cur.quantity,
+    0
+  );
+  return (
+    <article className="flex flex-col w-full md:p-0 px-2 py-4">
+      <h3 className="border-b w-full">결제예상금액</h3>
+      <div className="flex justify-between">
+        <div className="underline decoration-primary-400 decoration-4 underline-offset-[-2px]">
+          총 상품금액
+        </div>
+        <div className="underline decoration-primary-400 decoration-4 underline-offset-[-2px]">
+          {totalPrice.toLocaleString("ko-KR")}원
+        </div>
+      </div>
+      <div>
+        <Button
+          type="primary"
+          block
+          disabled={selectedCart.length === 0}
+          onClick={() => {
+            comformModalOpen?.();
+          }}
+        >
+          주문하기
+        </Button>
+      </div>
+    </article>
+  );
+};
+
+export default TotalPrice;
diff --git a/src/components/index.ts b/src/components/index.ts
index 9118290a2..9433f0fb4 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -10,6 +10,7 @@ import Checkbox from "./Checkbox";
 import Footer from "./Footer";
 import Button from "./Button";
 import LinkButton from "./LinkButton";
+import TotalPrice from "./TotalPrice";
 
 export {
   Provider,
@@ -23,5 +24,6 @@ export {
   Footer,
   Button,
   LinkButton,
+  TotalPrice,
 };
 export type { ModalRef };
diff --git a/src/constants/index.ts b/src/constants/index.ts
new file mode 100644
index 000000000..ad94b3237
--- /dev/null
+++ b/src/constants/index.ts
@@ -0,0 +1,11 @@
+export const ERROR_MSG: {
+  [key: string]: string;
+} = {
+  INVALID_CLIENT_ID: "유효하지 않은 CLIENT ID입니다.",
+  INVALID_ORDER_ID: "유효하지 않은 주문 번호입니다.",
+  INVALID_AMOUNT: "유효하지 않은 금액입니다.",
+  INVALID_OWNER_CARDS: "유효하지 않은 카드 정보입니다.",
+  INVALID_PAYMENT_COMPLETE_CALLBACK: "결제 완료 콜백 함수가 유효하지 않습니다.",
+  INVALID_PAYMENT_CANCEL_CALLBACK: "결제 취소 콜백 함수가 유효하지 않습니다.",
+  PAYMENT_PROCESS_ERROR: "결제 프로세스 중 오류가 발생했습니다.",
+};
diff --git a/src/main.tsx b/src/main.tsx
index 02a080fcb..ae5324e6d 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { RouterProvider } from "react-router-dom";
+import { OverlayProvider } from "near-payments";
 import router from "./router";
 import "./index.css";
 import { worker } from "@/mocks/browser";
@@ -15,6 +16,8 @@ worker.start(workerStartOptions);
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <RouterProvider router={router} />
+    <OverlayProvider>
+      <RouterProvider router={router} />
+    </OverlayProvider>
   </React.StrictMode>
 );
diff --git a/src/mocks/api/cart.ts b/src/mocks/api/cart.ts
index 82c943f8c..3d125c7d1 100644
--- a/src/mocks/api/cart.ts
+++ b/src/mocks/api/cart.ts
@@ -1,40 +1,72 @@
 import { HttpResponse, delay } from "msw";
 import { pagination } from "@/utils";
-// import { groupByProductId } from "@/utils/cart";
+import { addToCart, getCartData, deleteProductFromCart } from "@/utils/cart";
 import type { ICart, IProduct } from "@/types";
 
 const getCarts = async (page: number, limit: number) => {
-  const cartData = localStorage.getItem("cart") || "[]";
-  const parsedCartData = JSON.parse(cartData);
   try {
-    const paginatedData = pagination<ICart>(parsedCartData, page, limit);
-    // const groupByProduct = groupByProductId(paginatedData);
-    await delay(1000);
-    return HttpResponse.json(paginatedData);
-  } catch (error) {
-    return new HttpResponse("Failed to fetch cart items", {
-      status: 500,
+    const cartData = getCartData();
+    const paginatedData = pagination<ICart>(cartData, page, limit);
+
+    await delay(500);
+    return HttpResponse.json({
+      ok: true,
+      data: paginatedData,
+      page: {
+        total: cartData.length,
+        page,
+        limit,
+      },
     });
+  } catch (error) {
+    return HttpResponse.error();
   }
 };
 
-const addToCart = async (product: IProduct) => {
-  const newItem = {
-    id: window.crypto.randomUUID(),
-    product,
-  };
-  const cartData = localStorage.getItem("cart") || "[]";
-  const parsedCartData = JSON.parse(cartData);
+const postCart = async (product: IProduct) => {
   try {
-    const newCart = [...parsedCartData, newItem];
-    localStorage.setItem("cart", JSON.stringify(newCart));
-    await delay(1000);
-    return HttpResponse.json(newItem);
+    addToCart(product);
+    await delay(500);
+    return HttpResponse.json(
+      {
+        data: product,
+        code: "ITEM_ADDED_TO_CART",
+        ok: true,
+      },
+      { status: 200 }
+    );
   } catch (error) {
-    return new HttpResponse("Failed to add item to cart", {
-      status: 500,
+    return HttpResponse.error();
+  }
+};
+const changeQuantity = async (productId: IProduct["id"], quantity: number) => {
+  try {
+    const cartData = getCartData();
+    const updatedData = cartData.map((item) => {
+      if (item.product.id === productId) {
+        return { ...item, quantity };
+      }
+      return item;
     });
+
+    localStorage.setItem("cart", JSON.stringify(updatedData));
+    await delay(500);
+    return HttpResponse.json({
+      ok: true,
+      data: updatedData.find((item) => item.product.id === productId),
+    });
+  } catch (error) {
+    return HttpResponse.error();
+  }
+};
+const deleteCartItem = async (productId: IProduct["id"]) => {
+  try {
+    deleteProductFromCart(productId);
+    await delay(500);
+    return HttpResponse.json(productId);
+  } catch (error) {
+    return HttpResponse.error();
   }
 };
 
-export { getCarts, addToCart };
+export { getCarts, postCart, deleteCartItem, changeQuantity };
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index cbb1a16cf..73301230a 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -1,7 +1,12 @@
 import { http, HttpResponse } from "msw";
 import { IProduct } from "@/types/product";
 import { getProduct, getProducts } from "@/mocks/api/product";
-import { getCarts, addToCart } from "@/mocks/api/cart";
+import {
+  getCarts,
+  postCart,
+  deleteCartItem,
+  changeQuantity,
+} from "@/mocks/api/cart";
 
 export const handlers = [
   http.get("/products", ({ request }) => {
@@ -30,10 +35,15 @@ export const handlers = [
         status: 400,
       });
     }
-    return addToCart(body as IProduct);
+    return postCart(body as IProduct);
+  }),
+  http.patch("/carts/:productId", async ({ params, request }) => {
+    const { productId } = params;
+    const { quantity } = (await request.json()) as { quantity: number };
+    return changeQuantity(Number(productId), quantity);
+  }),
+  http.delete("/carts/:productId", ({ params }) => {
+    const { productId } = params;
+    return deleteCartItem(Number(productId));
   }),
-  // http.delete("/cart/:productId", ({ params }) => {
-  //   const { productId } = params;
-  //   return deleteCartItem(Number(productId));
-  // }),
 ];
diff --git a/src/types/cart.ts b/src/types/cart.ts
index 83c4a1054..15040948f 100644
--- a/src/types/cart.ts
+++ b/src/types/cart.ts
@@ -1,6 +1,7 @@
-import { IProduct } from "./product";
+import type { IProduct } from "./product";
 
-export interface ICart {
+export type ICart = {
   id: string;
   product: IProduct;
-}
+  quantity: number;
+};
diff --git a/src/types/common.ts b/src/types/common.ts
new file mode 100644
index 000000000..1d61e797c
--- /dev/null
+++ b/src/types/common.ts
@@ -0,0 +1,26 @@
+interface PageDto {
+  total: number;
+  page: number;
+  limit: number;
+}
+
+export interface ResponseDto<T> {
+  data: T;
+  page?: PageDto;
+}
+
+export type MutateResponseDto<T> = SuccessResponse<T> | ErrorResponse;
+
+interface SuccessResponse<T> {
+  ok: true;
+  data: T;
+  page?: PageDto;
+}
+
+interface ErrorResponse {
+  ok: false;
+  data: {
+    code: string;
+    message: string;
+  };
+}
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
deleted file mode 100644
index 4dcf2307e..000000000
--- a/src/types/index.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-declare interface PageDto {
-  total: number;
-  page: number;
-  limit: number;
-}
diff --git a/src/types/index.ts b/src/types/index.ts
index 5e879023c..876a5e06d 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,5 +1,5 @@
 import type { IProduct } from "./product";
 import type { ICart } from "./cart";
 import type { IOrder } from "./order";
-
-export type { IProduct, ICart, IOrder };
+import type { ResponseDto } from "./common";
+export type { IProduct, ICart, IOrder, ResponseDto };
diff --git a/src/utils/cart.ts b/src/utils/cart.ts
index 2ad260401..2f1da1cad 100644
--- a/src/utils/cart.ts
+++ b/src/utils/cart.ts
@@ -1,22 +1,35 @@
+import { IProduct } from "@/types";
 import { ICart } from "@/types/cart";
-import { IOrder } from "@/types/order";
 
-const groupByProductId = (cart: ICart[]): IOrder[] => {
-  return cart.reduce((acc: IOrder[], item: ICart) => {
-    const existingItem = acc.find((order) => order.id === item.product.id);
-    if (existingItem) {
-      existingItem.quantity += 1;
-    } else {
-      acc.push({
-        id: item.product.id,
-        name: item.product.name,
-        price: item.product.price,
-        imageUrl: item.product.imageUrl,
-        quantity: 1,
-      });
-    }
-    return acc;
-  }, []);
+const getCartData = () => {
+  const cartData = localStorage.getItem("cart") || "[]";
+  return JSON.parse(cartData) as ICart[];
 };
+const addToCart = (product: IProduct) => {
+  const data: ICart[] = getCartData();
+  const exist = data.find((item) => item.product.id === product.id);
+  if (exist) {
+    const newData = data.map((item) => {
+      if (item.product.id === product.id) {
+        return { ...item, quantity: item.quantity + 1 };
+      }
+      return item;
+    });
+    localStorage.setItem("cart", JSON.stringify(newData));
+    return;
+  }
 
-export { groupByProductId };
+  const newData = [
+    ...data,
+    { id: window.crypto.randomUUID(), product, quantity: 1 },
+  ];
+  localStorage.setItem("cart", JSON.stringify(newData));
+};
+
+const deleteProductFromCart = (productId: ICart["product"]["id"]) => {
+  const data: ICart[] = getCartData();
+  const newData = data.filter((item) => item.product.id !== productId);
+  localStorage.setItem("cart", JSON.stringify(newData));
+};
+
+export { addToCart, getCartData, deleteProductFromCart };