diff --git a/package-lock.json b/package-lock.json index e59c9331c..1982a9362 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,7 +28,7 @@ "big.js": "^6.2.1", "casper-cep18-js-client": "1.0.2", "casper-js-sdk": "2.15.4", - "casper-wallet-core": "git+ssh://git@github.com:make-software/casper-wallet-core.git#v0.9.6", + "casper-wallet-core": "git+ssh://git@github.com:make-software/casper-wallet-core.git#v0.9.7", "date-fns": "^2.30.0", "i18next": "^23.11.0", "i18next-browser-languagedetector": "^7.2.1", @@ -49,7 +49,6 @@ "react-inlinesvg": "3.0.3", "react-loading-skeleton": "^3.3.1", "react-player": "^2.13.0", - "react-query": "^3.39.3", "react-redux": "8.0.5", "react-router-dom": "6.16.0", "react-virtualized": "^9.22.5", @@ -9057,11 +9056,11 @@ } }, "node_modules/apisauce": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/apisauce/-/apisauce-3.0.1.tgz", - "integrity": "sha512-4HEmETv0skPW+bFS4TzB5nQ5y2TdafbUpnAjp83MW8Re9lHwngao2hpnk7aIaxExJqSTxkpWl+ThgZbqjx2bpQ==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/apisauce/-/apisauce-3.1.0.tgz", + "integrity": "sha512-uE2c8SibGG1oCfN5uVgipnKAbZCBSp7c773aRjRIX4dsi+4Jyoj8HAENbJSV4B6ILltfvQRQFX5Sv4Jw/eeEiA==", "dependencies": { - "axios": "^1.4.0" + "axios": "^1.7.7" } }, "node_modules/append-buffer": { @@ -9778,6 +9777,7 @@ "version": "1.6.51", "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz", "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==", + "dev": true, "engines": { "node": ">=0.6" } @@ -10064,21 +10064,6 @@ "node": ">=8" } }, - "node_modules/broadcast-channel": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz", - "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==", - "dependencies": { - "@babel/runtime": "^7.7.2", - "detect-node": "^2.1.0", - "js-sha3": "0.8.0", - "microseconds": "0.2.0", - "nano-time": "1.0.0", - "oblivious-set": "1.0.0", - "rimraf": "3.0.2", - "unload": "2.2.0" - } - }, "node_modules/broccoli-node-api": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/broccoli-node-api/-/broccoli-node-api-1.7.0.tgz", @@ -10602,7 +10587,7 @@ "node_modules/casper-wallet-core": { "name": "CasperWalletCore", "version": "0.9.6", - "resolved": "git+ssh://git@github.com/make-software/casper-wallet-core.git#cef8e4ffb029396095993f020d19d472db3c4d02", + "resolved": "git+ssh://git@github.com/make-software/casper-wallet-core.git#da53dbc84f1341b28bfa306d3db614ff4971ba2e", "dependencies": { "@make-software/ces-js-parser": "^1.3.3", "@react-native/typescript-config": "0.74.83", @@ -13143,7 +13128,8 @@ "node_modules/detect-node": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz", - "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==" + "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==", + "dev": true }, "node_modules/diff": { "version": "4.0.2", @@ -20099,11 +20085,6 @@ "url": "https://github.com/sponsors/panva" } }, - "node_modules/js-sha3": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz", - "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==" - }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -21721,15 +21702,6 @@ "integrity": "sha512-q9JtQJKjpsVxCRVgQ+WapguSbKC3SQ5HEzFGPAJMStgh3QjCawp00UKv3MTTAArTmGmmPUvllHZoNbZ3gs0I+Q==", "dev": true }, - "node_modules/match-sorter": { - "version": "6.3.1", - "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.1.tgz", - "integrity": "sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==", - "dependencies": { - "@babel/runtime": "^7.12.5", - "remove-accents": "0.4.2" - } - }, "node_modules/matcher": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz", @@ -21872,11 +21844,6 @@ "node": ">=8.6" } }, - "node_modules/microseconds": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz", - "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==" - }, "node_modules/mime": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", @@ -22257,14 +22224,6 @@ "dev": true, "optional": true }, - "node_modules/nano-time": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz", - "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==", - "dependencies": { - "big-integer": "^1.6.16" - } - }, "node_modules/nanoclone": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz", @@ -22820,11 +22779,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/oblivious-set": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz", - "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==" - }, "node_modules/obuf": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz", @@ -24522,31 +24476,6 @@ "react": ">=16.6.0" } }, - "node_modules/react-query": { - "version": "3.39.3", - "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz", - "integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==", - "dependencies": { - "@babel/runtime": "^7.5.5", - "broadcast-channel": "^3.4.1", - "match-sorter": "^6.0.2" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/tannerlinsley" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "react-dom": { - "optional": true - }, - "react-native": { - "optional": true - } - } - }, "node_modules/react-redux": { "version": "8.0.5", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz", @@ -24939,11 +24868,6 @@ "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", "dev": true }, - "node_modules/remove-accents": { - "version": "0.4.2", - "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz", - "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==" - }, "node_modules/remove-bom-buffer": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/remove-bom-buffer/-/remove-bom-buffer-3.0.0.tgz", @@ -28110,15 +28034,6 @@ "node": ">= 10.0.0" } }, - "node_modules/unload": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz", - "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==", - "dependencies": { - "@babel/runtime": "^7.6.2", - "detect-node": "^2.0.4" - } - }, "node_modules/unpipe": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", @@ -36588,11 +36503,11 @@ } }, "apisauce": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/apisauce/-/apisauce-3.0.1.tgz", - "integrity": "sha512-4HEmETv0skPW+bFS4TzB5nQ5y2TdafbUpnAjp83MW8Re9lHwngao2hpnk7aIaxExJqSTxkpWl+ThgZbqjx2bpQ==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/apisauce/-/apisauce-3.1.0.tgz", + "integrity": "sha512-uE2c8SibGG1oCfN5uVgipnKAbZCBSp7c773aRjRIX4dsi+4Jyoj8HAENbJSV4B6ILltfvQRQFX5Sv4Jw/eeEiA==", "requires": { - "axios": "^1.4.0" + "axios": "^1.7.7" } }, "append-buffer": { @@ -37143,7 +37058,8 @@ "big-integer": { "version": "1.6.51", "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz", - "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==" + "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==", + "dev": true }, "big.js": { "version": "6.2.1", @@ -37367,21 +37283,6 @@ "fill-range": "^7.1.1" } }, - "broadcast-channel": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz", - "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==", - "requires": { - "@babel/runtime": "^7.7.2", - "detect-node": "^2.1.0", - "js-sha3": "0.8.0", - "microseconds": "0.2.0", - "nano-time": "1.0.0", - "oblivious-set": "1.0.0", - "rimraf": "3.0.2", - "unload": "2.2.0" - } - }, "broccoli-node-api": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/broccoli-node-api/-/broccoli-node-api-1.7.0.tgz", @@ -37770,8 +37671,8 @@ } }, "casper-wallet-core": { - "version": "git+ssh://git@github.com/make-software/casper-wallet-core.git#cef8e4ffb029396095993f020d19d472db3c4d02", - "from": "casper-wallet-core@git+ssh://git@github.com:make-software/casper-wallet-core.git#v0.9.6", + "version": "git+ssh://git@github.com/make-software/casper-wallet-core.git#da53dbc84f1341b28bfa306d3db614ff4971ba2e", + "from": "casper-wallet-core@git+ssh://git@github.com:make-software/casper-wallet-core.git#v0.9.7", "requires": { "@make-software/ces-js-parser": "^1.3.3", "@react-native/typescript-config": "0.74.83", @@ -39644,7 +39545,8 @@ "detect-node": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz", - "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==" + "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==", + "dev": true }, "diff": { "version": "4.0.2", @@ -44805,11 +44707,6 @@ "integrity": "sha512-MSJQC5vXco5Br38mzaQKiq9mwt7lwj2eXpgpRyQYNHYt2lq1PjkWa7DLXX0WVcQLE9HhMh3jPiufS7fhJf+CLQ==", "dev": true }, - "js-sha3": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz", - "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==" - }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -46045,15 +45942,6 @@ "integrity": "sha512-q9JtQJKjpsVxCRVgQ+WapguSbKC3SQ5HEzFGPAJMStgh3QjCawp00UKv3MTTAArTmGmmPUvllHZoNbZ3gs0I+Q==", "dev": true }, - "match-sorter": { - "version": "6.3.1", - "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.1.tgz", - "integrity": "sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==", - "requires": { - "@babel/runtime": "^7.12.5", - "remove-accents": "0.4.2" - } - }, "matcher": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz", @@ -46168,11 +46056,6 @@ "picomatch": "^2.3.1" } }, - "microseconds": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz", - "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==" - }, "mime": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", @@ -46464,14 +46347,6 @@ "dev": true, "optional": true }, - "nano-time": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz", - "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==", - "requires": { - "big-integer": "^1.6.16" - } - }, "nanoclone": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz", @@ -46883,11 +46758,6 @@ "es-abstract": "^1.22.1" } }, - "oblivious-set": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz", - "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==" - }, "obuf": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz", @@ -48126,16 +47996,6 @@ "react-fast-compare": "^3.0.1" } }, - "react-query": { - "version": "3.39.3", - "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz", - "integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==", - "requires": { - "@babel/runtime": "^7.5.5", - "broadcast-channel": "^3.4.1", - "match-sorter": "^6.0.2" - } - }, "react-redux": { "version": "8.0.5", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz", @@ -48423,11 +48283,6 @@ } } }, - "remove-accents": { - "version": "0.4.2", - "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz", - "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==" - }, "remove-bom-buffer": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/remove-bom-buffer/-/remove-bom-buffer-3.0.0.tgz", @@ -50881,15 +50736,6 @@ "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==" }, - "unload": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz", - "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==", - "requires": { - "@babel/runtime": "^7.6.2", - "detect-node": "^2.0.4" - } - }, "unpipe": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", diff --git a/package.json b/package.json index 54646437b..bdce8b8a3 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,7 @@ "big.js": "^6.2.1", "casper-cep18-js-client": "1.0.2", "casper-js-sdk": "2.15.4", - "casper-wallet-core": "git+ssh://git@github.com:make-software/casper-wallet-core.git#v0.9.6", + "casper-wallet-core": "git+ssh://git@github.com:make-software/casper-wallet-core.git#v0.9.7", "date-fns": "^2.30.0", "i18next": "^23.11.0", "i18next-browser-languagedetector": "^7.2.1", @@ -93,7 +93,6 @@ "react-inlinesvg": "3.0.3", "react-loading-skeleton": "^3.3.1", "react-player": "^2.13.0", - "react-query": "^3.39.3", "react-redux": "8.0.5", "react-router-dom": "6.16.0", "react-virtualized": "^9.22.5", diff --git a/src/apps/popup/pages/buy-cspr/amount.tsx b/src/apps/popup/pages/buy-cspr/amount.tsx index a6faccce4..c797d94ad 100644 --- a/src/apps/popup/pages/buy-cspr/amount.tsx +++ b/src/apps/popup/pages/buy-cspr/amount.tsx @@ -1,3 +1,5 @@ +import { formatNumber } from 'casper-wallet-core'; +import { IOnRampCurrencyItem } from 'casper-wallet-core/src/domain'; import React, { useEffect, useState } from 'react'; import { useForm, useWatch } from 'react-hook-form'; import { Trans, useTranslation } from 'react-i18next'; @@ -14,7 +16,6 @@ import { SpacingSize, VerticalSpaceContainer } from '@libs/layout'; -import { ResponseCurrencyProps } from '@libs/services/buy-cspr-service/types'; import { Input, List, @@ -24,29 +25,29 @@ import { Typography } from '@libs/ui/components'; import { useBuyCSPR } from '@libs/ui/forms/buy-cspr'; -import { formatNumber, handleNumericInput } from '@libs/ui/utils'; +import { handleNumericInput } from '@libs/ui/utils'; import { CurrencyRow } from './components/currency-row'; import { ListRow } from './components/list-row'; interface AmountProps { - currencies: ResponseCurrencyProps[]; - selectedCurrency: ResponseCurrencyProps; + availableCurrencies: IOnRampCurrencyItem[]; + selectedCurrency: IOnRampCurrencyItem; setPaymentAmount: React.Dispatch>; setSelectedCurrency: React.Dispatch< - React.SetStateAction + React.SetStateAction >; defaultAmount: string; } export const Amount = ({ - currencies, + availableCurrencies, selectedCurrency, setPaymentAmount, setSelectedCurrency, defaultAmount }: AmountProps) => { - const [sortedCurrency, setSortedCurrency] = useState( + const [sortedCurrency, setSortedCurrency] = useState( [] ); const { t } = useTranslation(); @@ -90,16 +91,17 @@ export const Amount = ({ useEffect(() => { const sortedCurrencies = sortCurrencies( - currencies, - selectedCurrency.code - ).filter(currency => - currency.code - .toLowerCase() - .includes(searchInputValue?.toLowerCase() || '') + availableCurrencies, + selectedCurrency?.code + ).filter( + currency => + currency?.code + .toLowerCase() + .includes(searchInputValue?.toLowerCase() || '') ); setSortedCurrency(sortedCurrencies); - }, [currencies, searchInputValue, selectedCurrency.code]); + }, [availableCurrencies, searchInputValue, selectedCurrency?.code]); return ( @@ -142,7 +144,8 @@ export const Amount = ({ rows={sortedCurrency} height={280} renderRow={currency => { - const isSelected = selectedCurrency.code === currency.code; + const isSelected = + selectedCurrency?.code === currency?.code; return ( void; + isLoadingOnRampCountriesAndCurrencies: boolean; } -export const CountryRow = ({ country, onClick }: CountryRowProps) => { - const [iconSrc, setIconSrc] = useState(''); - +export const CountryRow = ({ + country, + onClick, + isLoadingOnRampCountriesAndCurrencies +}: CountryRowProps) => { const { t } = useTranslation(); - useEffect(() => { - if (country.code) { - setIconSrc( - `https://purecatamphetamine.github.io/country-flag-icons/3x2/${country.code}.svg` - ); - } - }, [country.code]); - - const handleError = () => { - setIconSrc('/assets/icons/placeholder-image-gray.svg'); - }; - return ( - + Country @@ -53,24 +47,31 @@ export const CountryRow = ({ country, onClick }: CountryRowProps) => { - {`${country.name}`} - - {country.name} - + {isLoadingOnRampCountriesAndCurrencies ? ( + + ) : ( + <> + {`${country?.name}`} + + {country?.name} + + + )} - - Change - + {isLoadingOnRampCountriesAndCurrencies ? null : ( + + Change + + )} diff --git a/src/apps/popup/pages/buy-cspr/components/currency-row.tsx b/src/apps/popup/pages/buy-cspr/components/currency-row.tsx index 89e799c28..b50cb5602 100644 --- a/src/apps/popup/pages/buy-cspr/components/currency-row.tsx +++ b/src/apps/popup/pages/buy-cspr/components/currency-row.tsx @@ -1,9 +1,9 @@ +import { IOnRampCurrencyItem } from 'casper-wallet-core/src/domain'; import React from 'react'; import { Trans, useTranslation } from 'react-i18next'; import styled from 'styled-components'; import { CenteredFlexColumn, SpacingSize } from '@libs/layout'; -import { ResponseCurrencyProps } from '@libs/services/buy-cspr-service/types'; import { Tile, Typography } from '@libs/ui/components'; const Container = styled.div` @@ -11,7 +11,7 @@ const Container = styled.div` `; interface CurrencyRowProps { - selectedCurrency: ResponseCurrencyProps; + selectedCurrency: IOnRampCurrencyItem; onClick: () => void; } @@ -33,7 +33,7 @@ export const CurrencyRow = ({ color="contentAction" dataTestId="currency-row" > - {selectedCurrency.code} + {selectedCurrency?.code} diff --git a/src/apps/popup/pages/buy-cspr/components/list-row.tsx b/src/apps/popup/pages/buy-cspr/components/list-row.tsx index c97e13aa8..034847112 100644 --- a/src/apps/popup/pages/buy-cspr/components/list-row.tsx +++ b/src/apps/popup/pages/buy-cspr/components/list-row.tsx @@ -1,3 +1,7 @@ +import { + IOnRampCountry, + IOnRampCurrencyItem +} from 'casper-wallet-core/src/domain'; import React, { useEffect, useState } from 'react'; import styled from 'styled-components'; @@ -6,10 +10,6 @@ import { AlignedSpaceBetweenFlexRow, SpacingSize } from '@libs/layout'; -import { - ResponseCountryPropsWithId, - ResponseCurrencyProps -} from '@libs/services/buy-cspr-service/types'; import { Checkbox, Typography } from '@libs/ui/components'; const Container = styled(AlignedSpaceBetweenFlexRow)` @@ -19,10 +19,10 @@ const Container = styled(AlignedSpaceBetweenFlexRow)` `; interface ListRowProps { - country?: ResponseCountryPropsWithId; + country?: IOnRampCountry; handleSelect: (e: React.MouseEvent) => void; isSelected: boolean; - currency?: ResponseCurrencyProps; + currency?: IOnRampCurrencyItem; } export const ListRow = ({ @@ -53,18 +53,18 @@ export const ListRow = ({ {country && ( <> {`${country.name}`} - {country.name} + {country?.name} )} {currency && ( - {currency.code} + {currency?.code} )} diff --git a/src/apps/popup/pages/buy-cspr/country.tsx b/src/apps/popup/pages/buy-cspr/country.tsx index 87cb8c7d1..54293eabf 100644 --- a/src/apps/popup/pages/buy-cspr/country.tsx +++ b/src/apps/popup/pages/buy-cspr/country.tsx @@ -1,3 +1,4 @@ +import { IOnRampCountry } from 'casper-wallet-core/src/domain'; import React, { useEffect, useState } from 'react'; import { useForm, useWatch } from 'react-hook-form'; import { Trans, useTranslation } from 'react-i18next'; @@ -9,7 +10,6 @@ import { SpacingSize } from '@libs/layout'; import { useFetchWalletBalance } from '@libs/services/balance-service'; -import { ResponseCountryPropsWithId } from '@libs/services/buy-cspr-service/types'; import { ActiveAccountPlate, Input, @@ -25,20 +25,22 @@ import { ListRow } from './components/list-row'; import { sortCountries } from './utils'; interface CountryProps { - availableCountries: ResponseCountryPropsWithId[]; - setSelectedCountry: React.Dispatch< - React.SetStateAction - >; - selectedCountry: ResponseCountryPropsWithId; + availableCountries: IOnRampCountry[]; + setSelectedCountry: React.Dispatch>; + selectedCountry: IOnRampCountry; + isLoadingOnRampCountriesAndCurrencies: boolean; } +type ExtendedOnRampCountry = IOnRampCountry & { id: number }; + export const Country = ({ availableCountries, setSelectedCountry, - selectedCountry + selectedCountry, + isLoadingOnRampCountriesAndCurrencies }: CountryProps) => { const [sortedCountries, setSortedCountries] = useState< - ResponseCountryPropsWithId[] + ExtendedOnRampCountry[] >([]); const { t } = useTranslation(); @@ -54,11 +56,16 @@ export const Country = ({ useEffect(() => { const sortedCountries = sortCountries( availableCountries, - selectedCountry.code - ).filter( - country => - country?.name.toLowerCase().includes(inputValue?.toLowerCase() || '') - ); + selectedCountry?.code + ) + .filter( + country => + country?.name.toLowerCase().includes(inputValue?.toLowerCase() || '') + ) + .map((country, index) => ({ + ...country, + id: index + })); setSortedCountries(sortedCountries); }, [availableCountries, inputValue, selectedCountry]); @@ -92,7 +99,7 @@ export const Country = ({ rows={sortedCountries} height={280} renderRow={country => { - const isSelected = selectedCountry.code === country.code; + const isSelected = selectedCountry?.code === country?.code; return ( setValue('countryNameSearch', '')} + isLoadingOnRampCountriesAndCurrencies={ + isLoadingOnRampCountriesAndCurrencies + } /> )} loading={!sortedCountries.length} diff --git a/src/apps/popup/pages/buy-cspr/index.tsx b/src/apps/popup/pages/buy-cspr/index.tsx index 2391ee9cf..f87eec164 100644 --- a/src/apps/popup/pages/buy-cspr/index.tsx +++ b/src/apps/popup/pages/buy-cspr/index.tsx @@ -1,3 +1,10 @@ +import { + IGetOnRampProvidersData, + IOnRampCountry, + IOnRampCurrencyItem, + IOnRampProvider, + IProviderSelectionData +} from 'casper-wallet-core/src/domain'; import React, { useEffect, useState } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; @@ -14,17 +21,8 @@ import { PopupLayout, createErrorLocationState } from '@libs/layout'; -import { - dispatchFetchOnRampOptionGet, - dispatchFetchOnRampOptionPost, - dispatchFetchOnRampSelectionPost -} from '@libs/services/buy-cspr-service'; -import { - ProviderProps, - ResponseCountryPropsWithId, - ResponseCurrencyProps, - SelectionPostRequestData -} from '@libs/services/buy-cspr-service/types'; +import { useFetchOnRampCountriesAndCurrencies } from '@libs/services/buy-cspr-service/use-fetch-on-ramp-countries-and-currencies'; +import { useGetOnRampProviders } from '@libs/services/buy-cspr-service/use-get-on-ramp-providers'; import { Button, Typography } from '@libs/ui/components'; import { Amount } from './amount'; @@ -36,160 +34,131 @@ import { BuyCSPRSteps } from './utils'; export const BuyCSPRPage = () => { const [buyCSPRStep, setBuyCSPRStep] = useState(BuyCSPRSteps.Country); const [availableCountries, setAvailableCountries] = useState< - ResponseCountryPropsWithId[] + IOnRampCountry[] >([]); - const [selectedCountry, setSelectedCountry] = - useState({ - id: 0, - name: '', - code: '' - }); - const [currencies, setCurrencies] = useState([]); - const [selectedCurrency, setSelectedCurrency] = - useState({ + const [selectedCountry, setSelectedCountry] = useState({ + name: '', + code: '', + flagUri: '' + }); + const [availableCurrencies, setAvailableCurrencies] = useState< + IOnRampCurrencyItem[] + >([]); + const [selectedCurrency, setSelectedCurrency] = useState( + { id: 0, code: '', type_id: '', rate: 0 - }); + } + ); const [defaultAmount, setDefaultAmount] = useState('0'); const [fiatAmount, setFiatAmount] = useState(0); - const [availableProviders, setAvailableProviders] = useState( - [] - ); + const [availableProviders, setAvailableProviders] = useState< + IOnRampProvider[] + >([]); const [selectedProvider, setSelectedProvider] = - useState(null); - const [loadingAvailableProviders, setLoadingAvailableProviders] = - useState(false); - const [loadingRedirectUrl, setLoadingRedirectUrl] = useState(false); + useState(null); const { t } = useTranslation(); const navigate = useTypedNavigate(); const activeAccount = useSelector(selectVaultActiveAccount); - useEffect(() => { - dispatchFetchOnRampOptionGet() - .then(({ payload }) => { - if ('countries' in payload) { - const countriesWithId = payload.countries.map((country, id) => ({ - id, - ...country - })); - - const defaultSelectedCountry = countriesWithId.find( - country => country.code === payload.defaultCountry - ); + const { + currencies, + countries, + defaultCountry, + defaultCurrency, + defaultDepositAmount, + isLoadingOnRampCountriesAndCurrencies, + onRampCountriesAndCurrenciesError + } = useFetchOnRampCountriesAndCurrencies(); + const { + getOnRampProviders, + isProvidersLoading, + isProviderLocationLoading, + getOnRampProviderLocation + } = useGetOnRampProviders(); - const defaultSelectedCurrency = payload.currencies.find( - currency => currency.code === payload.defaultCurrency - ); + useEffect(() => { + if (onRampCountriesAndCurrenciesError) { + navigate( + ErrorPath, + createErrorLocationState({ + errorHeaderText: t('Something went wrong'), + errorContentText: + onRampCountriesAndCurrenciesError.message || + t( + 'Please check browser console for error details, this will be a valuable for our team to fix the issue.' + ), + errorPrimaryButtonLabel: t('Close'), + errorRedirectPath: RouterPath.Home + }) + ); + } + if (isLoadingOnRampCountriesAndCurrencies) return; - setAvailableCountries(countriesWithId); - setCurrencies(payload.currencies); - setSelectedCountry(defaultSelectedCountry!); - setSelectedCurrency(defaultSelectedCurrency!); - setDefaultAmount(payload.defaultAmount); - setFiatAmount(Number(payload.defaultAmount)); - } else { - navigate( - ErrorPath, - createErrorLocationState({ - errorHeaderText: t('Something went wrong'), - errorContentText: - payload.error.message || - t( - 'Please check browser console for error details, this will be a valuable for our team to fix the issue.' - ), - errorPrimaryButtonLabel: t('Close'), - errorRedirectPath: RouterPath.Home - }) - ); - } - }) - .catch(error => { - console.error(error.message, 'countries request failed'); - - navigate( - ErrorPath, - createErrorLocationState({ - errorHeaderText: error.message || t('Something went wrong'), - errorContentText: - typeof error.data === 'string' - ? error.data - : t( - 'Please check browser console for error details, this will be a valuable for our team to fix the issue.' - ), - errorPrimaryButtonLabel: t('Close'), - errorRedirectPath: RouterPath.Home - }) - ); - }); - }, [navigate, t]); + setAvailableCountries(countries); + setAvailableCurrencies(currencies); + setSelectedCountry(defaultCountry!); + setSelectedCurrency(defaultCurrency!); + setDefaultAmount(defaultDepositAmount!); + setFiatAmount(Number(defaultDepositAmount)); + }, [ + countries, + currencies, + defaultCountry, + defaultCurrency, + defaultDepositAmount, + isLoadingOnRampCountriesAndCurrencies, + navigate, + onRampCountriesAndCurrenciesError, + t + ]); const handleAmountSubmit = () => { - setLoadingAvailableProviders(true); - - dispatchFetchOnRampOptionPost({ + const data: IGetOnRampProvidersData = { amount: fiatAmount, - country: selectedCountry.code, - fiatCurrency: selectedCurrency.code, - paymentCurrency: selectedCurrency.code - }) - .then(({ payload }) => { - if ('availableProviders' in payload) { - if (payload.availableProviders.length === 0) { - setBuyCSPRStep(BuyCSPRSteps.NoProvider); - } else { - setAvailableProviders(payload.availableProviders); - - if (payload.availableProviders.length === 1) { - setSelectedProvider(payload.availableProviders[0]); - } + country: selectedCountry?.code, + fiatCurrency: selectedCurrency?.code, + paymentCurrency: selectedCurrency?.code + }; + getOnRampProviders(data, { + onSuccess: onRampProviders => { + if (onRampProviders.availableProviders.length === 0) { + setBuyCSPRStep(BuyCSPRSteps.NoProvider); + } else { + setAvailableProviders(onRampProviders.availableProviders); - setBuyCSPRStep(BuyCSPRSteps.Provider); + if (onRampProviders.availableProviders.length === 1) { + setSelectedProvider(onRampProviders.availableProviders[0]); } - } else { - navigate( - ErrorPath, - createErrorLocationState({ - errorHeaderText: t('Something went wrong'), - errorContentText: - payload.error.message || - t( - 'Please check browser console for error details, this will be a valuable for our team to fix the issue.' - ), - errorPrimaryButtonLabel: t('Close'), - errorRedirectPath: RouterPath.Home - }) - ); - } - }) - .catch(error => { - console.error(error.message, 'available provider request failed'); + setBuyCSPRStep(BuyCSPRSteps.Provider); + } + }, + onError: error => { navigate( ErrorPath, createErrorLocationState({ - errorHeaderText: error.message || t('Something went wrong'), + errorHeaderText: t('Something went wrong'), errorContentText: - typeof error.data === 'string' - ? error.data - : t( - 'Please check browser console for error details, this will be a valuable for our team to fix the issue.' - ), + error.message || + t( + 'Please check browser console for error details, this will be a valuable for our team to fix the issue.' + ), errorPrimaryButtonLabel: t('Close'), errorRedirectPath: RouterPath.Home }) ); - }) - .finally(() => setLoadingAvailableProviders(false)); + } + }); }; const handleSubmit = () => { - setLoadingRedirectUrl(true); if (activeAccount && selectedProvider) { - const data: SelectionPostRequestData = { + const data: IProviderSelectionData = { account: activeAccount.publicKey, fiatCurrency: selectedCurrency.code, cryptoAmount: null, @@ -198,45 +167,28 @@ export const BuyCSPRPage = () => { fiatAmount }; - dispatchFetchOnRampSelectionPost(data) - .then(({ payload }) => { - if ('location' in payload) { - window.open(payload.location, '_blank'); - } else { - navigate( - ErrorPath, - createErrorLocationState({ - errorHeaderText: t('Something went wrong'), - errorContentText: - payload.error.message || - t( - 'Please check browser console for error details, this will be a valuable for our team to fix the issue.' - ), - errorPrimaryButtonLabel: t('Close'), - errorRedirectPath: RouterPath.Home - }) - ); - } - }) - .catch(error => { + getOnRampProviderLocation(data, { + onSuccess: providerLocation => { + window.open(providerLocation.location, '_blank'); + }, + onError: error => { console.error(error.message, 'provider selection request failed'); navigate( ErrorPath, createErrorLocationState({ - errorHeaderText: error.message || t('Something went wrong'), + errorHeaderText: t('Something went wrong'), errorContentText: - typeof error.data === 'string' - ? error.data - : t( - 'Please check browser console for error details, this will be a valuable for our team to fix the issue.' - ), + error.message || + t( + 'Please check browser console for error details, this will be a valuable for our team to fix the issue.' + ), errorPrimaryButtonLabel: t('Close'), errorRedirectPath: RouterPath.Home }) ); - }) - .finally(() => setLoadingRedirectUrl(false)); + } + }); } }; @@ -246,11 +198,14 @@ export const BuyCSPRPage = () => { availableCountries={availableCountries} selectedCountry={selectedCountry} setSelectedCountry={setSelectedCountry} + isLoadingOnRampCountriesAndCurrencies={ + isLoadingOnRampCountriesAndCurrencies + } /> ), [BuyCSPRSteps.Amount]: ( { ), [BuyCSPRSteps.NoProvider]: ( ) }; @@ -302,7 +257,7 @@ export const BuyCSPRPage = () => { <> @@ -317,7 +272,7 @@ export const BuyCSPRPage = () => { ) : null}