From 7ab980e3aec137674cdefd90491a1228575d497d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1s=20Rocchi?= <84542297+rocky-fleek@users.noreply.github.com> Date: Thu, 25 Aug 2022 12:42:38 -0300 Subject: [PATCH] Release: 0.5.4 (#547) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * it returns to the page to show the error code and desc * show the errors depends the code * it returns the emoji but we need to define and tests the other possible errors * added translation - redux function for match the errors - moved emojiError object * removed comments and clgs * added standard in redux/send * merge conflicts solved * fix: refresh button logic / disabled state and animation * Fixed token standard in handleRequestTransfer (#541) Co-authored-by: rocky-fleek * Chore/fe structure (#546) * renamed Background folder * Deleted @ui folder and moved it to @components * Removed lib folder * Created scripts folder * Created views folder * fix: dont ovewritte whitelist in case is another one present (#523) * Revert "Chore/fe structure (#546)" (#548) This reverts commit 1a55622ee0f8ad739e929e846cd3b03358bc2b64. Seems there was a merge error and the `Popup/Views` was deleted * Replaced extension 32x32 icon (#549) Co-authored-by: rocky-fleek * Revert "Revert "Chore/fe structure (#546)" (#548)" (#550) This reverts commit 1fa41187eb11089c28060183b3fc8fe39db4a70d. * details done * removed string and put into translation * updated manually npm * Chore/fe structure (#551) * renamed Background folder * Deleted @ui folder and moved it to @components * Removed lib folder * Created scripts folder * Created views folder * Specified extension folder on gitignore * added extension folder * Removed extension * Moved send flow files to new location * Fixed error matching * Fixed locales error * updated dependencies versions, but no npm * Fixed amount parsing for new ledger interface. refactored flow to use standard scoped parsing * Removed unnecessary object for icp/rosetta txs * Token selection logic / Tests fixes (#557) * chore: token selection logic / test fixes * chore: logs removed * Fixed transactionId and object proptypes * Auto fix with --fix * Fixed remaining issues * Updated controller to 0.19.8 and bumped plug version to 0.5.4 * Moved whitelist population to requestConnect * Removed whitelist population * fix: DIP20_AMOUNT_MAP * Fix/timeout on get balances (#572) * Fixed error parsing to take into account Error in amount field * Changed fetchAssets to take into account assets loading Co-authored-by: Cancu Co-authored-by: Max ⚡️ Co-authored-by: Cancu <52618089+Cancuuu@users.noreply.github.com> Co-authored-by: tomiir Co-authored-by: angarita-dev <44899916+angarita-dev@users.noreply.github.com> Co-authored-by: Alejo Acevedo Co-authored-by: Alina Sytnik <33018206+alinasytnik@users.noreply.github.com> --- .eslintrc.js | 1 - .gitignore | 3 + .storybook/main.js | 1 - jsconfig.json | 6 +- package.json | 4 +- source/Background/script.js | 2 +- source/Background/utils.js | 3 +- source/Modules/Controller/connection.js | 14 +- source/Modules/Controller/controllerBase.js | 2 +- source/Modules/Controller/transaction.js | 5 +- .../{lib => Modules}/NotificationManager.js | 2 +- source/Modules/index.js | 1 + .../Popup/Views/SendFlow/hooks/useSteps.jsx | 244 --- source/assets/icons/favicon-32.png | Bin 830 -> 1745 bytes source/assets/icons/fly-bill.svg | 9 + source/assets/icons/nomouth-face.svg | 9 + source/assets/icons/red-flag.svg | 9 + .../ActionButton/action-button.stories.jsx | 0 .../{ui => components}/ActionButton/index.jsx | 0 .../{ui => components}/ActionButton/styles.js | 0 .../ActionCard/action-card.stories.jsx | 0 .../{ui => components}/ActionCard/index.jsx | 2 +- .../{ui => components}/ActionCard/styles.js | 0 source/components/ActionDialog/index.jsx | 2 +- source/components/Actions/index.jsx | 2 +- source/components/Activity/index.jsx | 4 +- .../components/ActivityItemDetails/index.js | 2 +- .../components/ActivityItemDetails/styles.js | 0 .../components/ActivityItemDisplay/index.js | 0 .../components/ActivityItemDisplay/styles.js | 0 .../components/SwapIcon/index.jsx | 2 +- .../components/SwapIcon/styles.js | 0 .../components/items/JellyItem.js | 0 .../components/LiquidityIcon/index.jsx | 2 +- .../components/LiquidityIcon/styles.js | 2 +- .../LiquidityItem/components/TokenAmounts.jsx | 2 + .../components/items/LiquidityItem/index.js | 2 +- .../ActivityItem/components/items/NFTItem.js | 2 +- .../ActivityItem/components/items/PlugItem.js | 0 .../ActivityItem/components/items/SwapItem.js | 2 +- .../components/items/TokenItem.js | 0 .../ActivityItem/components/items/styles.js | 0 .../{ui => components}/ActivityItem/index.jsx | 0 .../{ui => components}/ActivityItem/styles.js | 0 .../{ui => components}/ActivityItem/utils.js | 0 .../components/AddressRow/index.jsx | 2 +- .../components/TranslationModal/index.jsx | 3 +- .../components/AddressTranslation/index.jsx | 2 +- .../Alert/alert.stories.jsx | 0 source/{ui => components}/Alert/index.jsx | 0 source/{ui => components}/Alert/styles.js | 0 .../AppItem/app-item.stories.jsx | 0 source/{ui => components}/AppItem/index.jsx | 0 source/{ui => components}/AppItem/styles.js | 0 source/components/Apps/index.jsx | 7 +- .../{ui => components}/AssetFormat/index.jsx | 0 .../AssetItem/asset-item.stories.jsx | 0 source/{ui => components}/AssetItem/index.jsx | 8 +- source/{ui => components}/AssetItem/styles.js | 0 source/{ui => components}/Badge/index.jsx | 0 source/{ui => components}/Badge/styles.js | 0 .../Button/button.stories.jsx | 0 source/{ui => components}/Button/index.jsx | 2 +- source/{ui => components}/Button/styles.js | 0 .../components/Container/index.jsx | 0 .../components/Container/styles.js | 0 .../CanisterInfo/components/Item/index.jsx | 0 .../CanisterInfo/components/Item/styles.js | 0 source/{ui => components}/Card/index.jsx | 0 source/{ui => components}/Card/styles.js | 0 source/{ui => components}/Checkbox/index.jsx | 0 source/{ui => components}/Checkbox/styles.js | 0 .../CodeBox/codebox.stories.jsx | 0 source/{ui => components}/CodeBox/index.jsx | 0 source/{ui => components}/CodeBox/styles.js | 0 .../components/ConnectAccountItem/index.jsx | 2 +- .../ConnectAccountsModal/layout.jsx | 2 +- .../components/ConnectionControls/index.jsx | 138 +- .../components/ConnectionControls/styles.js | 25 +- .../components/NetworkSelector/index.jsx | 2 +- source/components/ConnectionStatus/index.jsx | 3 +- source/components/ConnectionStatus/styles.js | 3 + source/components/ContactItem/index.jsx | 2 +- source/{ui => components}/Container/index.jsx | 0 source/{ui => components}/Container/styles.js | 0 .../{ui => components}/DataDisplay/index.jsx | 0 .../{ui => components}/DataDisplay/styles.js | 0 source/{ui => components}/Dialog/index.jsx | 0 source/{ui => components}/Dialog/styles.js | 0 source/components/DisplayBox/index.jsx | 4 +- .../FormInput/form-input.stories.jsx | 0 source/{ui => components}/FormInput/index.jsx | 0 source/{ui => components}/FormInput/styles.js | 0 source/{ui => components}/FormItem/index.jsx | 0 source/{ui => components}/FormItem/styles.js | 0 .../fullscreen-container.stories.jsx | 0 .../FullscreenContainer/index.jsx | 2 +- .../FullscreenContainer/styles.js | 0 .../GenericIcon/generic-icon.stories.jsx | 0 .../{ui => components}/GenericIcon/index.jsx | 2 +- .../{ui => components}/GenericIcon/styles.js | 0 source/components/GroupedDisplay/index.jsx | 65 - source/components/GroupedDisplay/styles.js | 0 source/{ui => components}/Header/index.jsx | 0 source/{ui => components}/Header/styles.js | 0 .../hover-animation.stories.jsx | 0 .../HoverAnimation/index.jsx | 0 .../HoverAnimation/styles.js | 0 .../{ui => components}/ICNSDisplay/index.jsx | 0 .../{ui => components}/ICNSDisplay/styles.js | 0 source/components/IDInput/index.jsx | 9 +- .../IncomingAction/index.jsx | 0 .../IncomingAction/styles.js | 0 source/{ui => components}/InfoRow/index.jsx | 0 .../InfoRow/info-row.stories.jsx | 0 source/{ui => components}/InfoRow/styles.js | 0 source/{ui => components}/InputBase/index.jsx | 0 source/{ui => components}/InputBase/styles.js | 0 .../{ui => components}/LinkButton/index.jsx | 0 .../LinkButton/link-button.stories.jsx | 0 .../{ui => components}/LinkButton/styles.js | 0 source/{ui => components}/ListItem/index.jsx | 0 source/{ui => components}/ListItem/styles.js | 0 source/{ui => components}/MenuItem/index.jsx | 3 +- .../MenuItem/menu-item.stories.jsx | 0 source/{ui => components}/MenuItem/styles.js | 0 .../MenuItemDetailed/index.jsx | 0 .../menu-item-detailed.stories.jsx | 0 .../MenuItemDetailed/styles.js | 0 .../{ui => components}/MultiInput/index.jsx | 8 +- .../MultiInput/multi-input.stories.jsx | 0 .../{ui => components}/MultiInput/styles.js | 0 .../{ui => components}/NFTDisplayer/index.jsx | 2 +- .../{ui => components}/NFTDisplayer/styles.js | 0 .../NFTs/components/NFTCollection/index.jsx | 3 +- source/components/NavBar/index.jsx | 3 +- source/components/NavBar/styles.js | 4 + source/components/Profile/index.jsx | 11 +- source/components/SeedPhrase/index.jsx | 2 +- source/{ui => components}/Select/index.jsx | 4 +- .../Select/select.stories.jsx | 0 source/{ui => components}/Select/styles.js | 0 .../{ui => components}/SelectButton/index.jsx | 0 .../SelectButton/select-button.stories.jsx | 0 .../{ui => components}/SelectButton/styles.js | 0 .../SwapInfo/components/AssetInfo/index.jsx | 2 +- source/{ui => components}/Tab/index.jsx | 0 source/{ui => components}/Tab/styles.js | 0 source/{ui => components}/Tab/tab.stories.jsx | 0 source/{ui => components}/Tabs/index.jsx | 0 source/{ui => components}/Tabs/styles.js | 0 .../{ui => components}/Tabs/tabs.stories.jsx | 0 source/{ui => components}/TextInput/index.jsx | 0 source/{ui => components}/TextInput/styles.js | 0 .../TextInput/text-input.stories.jsx | 0 source/{ui => components}/Title/index.jsx | 0 source/{ui => components}/Title/styles.js | 0 source/components/TokenIcon/index.js | 2 +- source/components/Tokens/index.jsx | 21 +- source/{ui => components}/USDFormat/index.jsx | 0 source/components/index.js | 41 + source/{ui => components}/theme/index.js | 0 source/hooks/useContacts.jsx | 2 +- source/locales/en/translation.json | 23 + source/redux/icp.js | 30 +- source/redux/send.js | 61 +- source/{ => scripts}/ContentScript/index.js | 0 .../ContentScript/utils/index.js | 0 .../ContentScript/utils/inject-script.js | 0 source/{ => scripts}/Inpage/index.js | 0 source/shared/ProviderWrapper.js | 4 +- source/shared/constants/currencies.js | 7 +- source/shared/constants/nft.js | 2 +- source/shared/services/ICNS.js | 5 +- source/shared/utils/contacts.js | 4 +- source/shared/utils/send.js | 2 + source/ui/index.js | 43 - source/{Popup => views/Extension}/Popup.jsx | 4 +- .../Extension}/Views/AddToken/Steps/Step1.jsx | 2 +- .../Extension}/Views/AddToken/Steps/Step2.jsx | 4 +- .../Views/AddToken/components/CustomToken.jsx | 2 +- .../Views/AddToken/components/DabInfo.jsx | 2 +- .../Views/AddToken/components/SearchToken.jsx | 4 +- .../Views/AddToken/hooks/useSteps.jsx | 2 +- .../Extension}/Views/AddToken/index.jsx | 3 +- .../Extension}/Views/AddToken/styles.js | 0 .../Extension}/Views/ClockError/index.js | 0 .../Extension}/Views/ClockError/styles.js | 0 .../Views/Contacts/components/AddContact.jsx | 2 +- .../Views/Contacts/components/Home.jsx | 2 +- .../Views/Contacts/contacts.stories.jsx | 0 .../Views/Contacts/hooks/useSteps.jsx | 3 +- .../Extension}/Views/Contacts/index.jsx | 5 +- .../Extension}/Views/Contacts/styles.js | 0 .../Extension}/Views/Deposit/index.jsx | 5 +- .../Extension}/Views/Deposit/styles.js | 0 .../Extension}/Views/Error/index.jsx | 3 +- .../Extension}/Views/Error/styles.js | 0 .../Views/ExportIdentity/hooks/useSteps.jsx | 2 +- .../Extension}/Views/ExportIdentity/index.jsx | 3 +- .../Views/ExportIdentity/steps/Step1.jsx | 2 +- .../Views/ExportIdentity/steps/Step2.jsx | 4 +- .../Extension}/Views/Help/index.jsx | 7 +- .../Extension}/Views/Help/styles.js | 0 .../Extension}/Views/Home/index.jsx | 2 +- .../Extension}/Views/Login/index.jsx | 5 +- .../Extension}/Views/Login/login.stories.jsx | 0 .../Extension}/Views/Login/styles.js | 0 .../Views/NFTDetails/components/section.jsx | 2 +- .../Extension}/Views/NFTDetails/index.jsx | 4 +- .../Extension}/Views/NFTDetails/styles.js | 0 .../Network/components/NetworkCard/index.jsx | 0 .../Network/components/NetworkCard/styles.js | 0 .../Network/components/NoNetworks/index.jsx | 2 +- .../Network/components/NoNetworks/styles.js | 0 .../Extension}/Views/Network/index.jsx | 5 +- .../Extension}/Views/Network/styles.js | 0 .../Views/NetworkCreation/constants.js | 0 .../Views/NetworkCreation/index.jsx | 4 +- .../Views/NetworkCreation/styles.js | 0 .../Views/SeedPhrase/Steps/Step1.jsx | 2 +- .../Views/SeedPhrase/Steps/Step2.jsx | 3 +- .../Views/SeedPhrase/hooks/useSteps.jsx | 2 +- .../Extension}/Views/SeedPhrase/index.jsx | 3 +- .../views/Extension/Views/SendError/index.jsx | 46 + .../views/Extension/Views/SendError/styles.js | 29 + .../SendFlow/components/cancelButton.jsx | 2 +- .../Views/SendFlow/components/index.js | 0 .../Views/SendFlow/hooks/useSteps.jsx | 288 ++++ .../Extension}/Views/SendFlow/index.jsx | 3 +- .../Views/SendFlow/steps/confirm/index.jsx | 19 +- .../Extension}/Views/SendFlow/steps/index.js | 0 .../components/cyclesToAccountWarning.jsx | 2 +- .../steps/selectAsset/components/index.jsx | 0 .../SendFlow/steps/selectAsset/index.jsx | 137 +- .../SendFlow/steps/xtcToCanister/index.jsx | 2 +- .../Extension}/Views/SendFlow/styles.js | 0 .../Extension}/Views/SendFlow/utils/index.js | 0 .../SendNFT/components/InputStep/index.jsx | 4 +- .../SendNFT/components/InputStep/styles.js | 0 .../SendNFT/components/NFTDisplay/index.jsx | 2 +- .../SendNFT/components/NFTDisplay/styles.js | 0 .../SendNFT/components/ReviewStep/index.jsx | 4 +- .../SendNFT/components/ReviewStep/styles.js | 0 .../Extension}/Views/SendNFT/index.jsx | 5 +- .../Extension}/Views/SendNFT/useSteps.jsx | 0 .../Extension}/Views/SendNFT/utils.js | 0 .../Extension}/Views/Settings/index.jsx | 7 +- .../Extension}/Views/Settings/styles.js | 0 .../Extension}/Views/Swap/Steps/Step1.jsx | 12 +- .../Extension}/Views/Swap/Steps/Step2.jsx | 9 +- .../Extension}/Views/Swap/hooks/useSteps.jsx | 2 +- .../Extension}/Views/Swap/index.jsx | 3 +- .../Extension}/Views/Swap/styles.js | 0 .../components/DetailItem/index.jsx | 3 +- .../components/DetailItem/styles.js | 0 .../components/ICNSSelector/index.jsx | 2 +- .../components/ICNSSelector/styles.js | 0 .../components/ICNSToggle/index.jsx | 3 +- .../components/ICNSToggle/styles.js | 0 .../components/InfoModal/index.jsx | 2 +- .../components/InfoModal/styles.js | 0 .../Extension}/Views/WalletDetails/index.jsx | 5 +- .../Extension}/Views/WalletDetails/styles.js | 0 source/{Popup => views/Extension}/app.jsx | 2 +- source/{Popup => views/Extension}/index.jsx | 8 +- .../Extension}/popup.stories.jsx | 0 .../Views/Welcome/components/Header/index.jsx | 0 .../Views/Welcome/components/Header/styles.js | 0 .../Options/Views/Welcome/hooks/useSteps.jsx | 0 .../Options/Views/Welcome/index.jsx | 2 +- .../Views/Welcome/steps/ActionsStep.jsx | 2 +- .../Welcome/steps/CreatePasswordStep.jsx | 2 +- .../Views/Welcome/steps/ImportWalletStep.jsx | 2 +- .../Options/Views/Welcome/steps/MemeStep.jsx | 2 +- .../Views/Welcome/steps/SeedPhraseStep.jsx | 5 +- .../Options/Views/Welcome/steps/index.jsx | 0 .../Options/Views/Welcome/styles.js | 0 source/{ => views}/Options/index.jsx | 4 +- .../{ => views}/Options/options.stories.jsx | 0 .../Popup}/components/AllowAgent/index.jsx | 13 +- .../Popup}/components/AllowAgent/styles.js | 0 .../Popup}/components/AppConnection/index.jsx | 4 +- .../Popup}/components/AppConnection/styles.js | 0 .../components/BurnXTC/components/Data.jsx | 2 +- .../components/BurnXTC/components/Details.jsx | 2 +- .../BurnXTC/components/RequestHandler.jsx | 0 .../components/BurnXTC/constants/index.js | 0 .../components/BurnXTC/hooks/useRequests.jsx | 2 +- .../Popup}/components/BurnXTC/index.jsx | 5 +- .../Popup}/components/BurnXTC/styles.js | 0 .../Popup}/components/ImportToken/index.jsx | 28 +- .../Popup}/components/ImportToken/styles.js | 2 +- .../Popup}/components/LoginProxy/index.jsx | 1 + .../components/NotificationError/index.jsx | 2 +- .../components/NotificationError/styles.js | 0 .../Popup}/components/Principal/index.jsx | 0 .../BatchTransactions/constants/index.js | 0 .../hooks/useRPCTransactions.jsx | 2 +- .../components/BatchTransactions/index.jsx | 5 +- .../components/BatchTransactions/styles.js | 0 .../components/Sign/components/Data/index.jsx | 2 +- .../Details/components/AssetDisplay.jsx | 12 +- .../components/CanisterInfoDisplay.jsx | 0 .../Details/components/DisplayBox.jsx | 2 +- .../Details/components/NFTDisplay.jsx | 0 .../Details/components/WarningBox.jsx | 0 .../Sign/components/Details/constants.js | 0 .../Sign/components/Details/index.jsx | 2 +- .../Sign/components/Details/styles.js | 0 .../Sign/components/Details/utils.js | 23 +- .../Sign/components/WarningModal/index.jsx | 2 +- .../Sign/components/WarningModal/styles.js | 0 .../components/Sign/components/index.js | 0 .../Popup}/components/Sign/constants/index.js | 0 .../components/Sign/hooks/useRequest.jsx | 2 +- .../components/Sign/hooks/useRequests.jsx | 2 +- .../Popup}/components/Sign/index.jsx | 5 +- .../Popup}/components/Sign/styles.js | 0 .../components/Transfer/components/Data.jsx | 4 +- .../Transfer/components/Details.jsx | 4 +- .../Transfer/components/RequestHandler.jsx | 0 .../components/Transfer/constants/index.js | 0 .../components/Transfer/hooks/useRequests.jsx | 2 +- .../Popup}/components/Transfer/index.jsx | 6 +- .../Popup}/components/Transfer/styles.js | 0 .../Notification => views/Popup}/index.jsx | 8 +- tests/e2e/edit-account.test.js | 3 - tests/e2e/help.test.js | 23 +- tests/e2e/send-tokens.test.js | 9 +- webpack.config.js | 13 +- webpack.inpage.js | 5 +- yarn.lock | 1381 ++++++++--------- 333 files changed, 1672 insertions(+), 1534 deletions(-) rename source/{lib => Modules}/NotificationManager.js (95%) delete mode 100644 source/Popup/Views/SendFlow/hooks/useSteps.jsx create mode 100644 source/assets/icons/fly-bill.svg create mode 100644 source/assets/icons/nomouth-face.svg create mode 100644 source/assets/icons/red-flag.svg rename source/{ui => components}/ActionButton/action-button.stories.jsx (100%) rename source/{ui => components}/ActionButton/index.jsx (100%) rename source/{ui => components}/ActionButton/styles.js (100%) rename source/{ui => components}/ActionCard/action-card.stories.jsx (100%) rename source/{ui => components}/ActionCard/index.jsx (94%) rename source/{ui => components}/ActionCard/styles.js (100%) rename source/{ui => components}/ActivityItem/components/ActivityItemDetails/index.js (95%) rename source/{ui => components}/ActivityItem/components/ActivityItemDetails/styles.js (100%) rename source/{ui => components}/ActivityItem/components/ActivityItemDisplay/index.js (100%) rename source/{ui => components}/ActivityItem/components/ActivityItemDisplay/styles.js (100%) rename source/{ui => components}/ActivityItem/components/SwapIcon/index.jsx (96%) rename source/{ui => components}/ActivityItem/components/SwapIcon/styles.js (100%) rename source/{ui => components}/ActivityItem/components/items/JellyItem.js (100%) rename source/{ui => components}/ActivityItem/components/items/LiquidityItem/components/LiquidityIcon/index.jsx (94%) rename source/{ui => components}/ActivityItem/components/items/LiquidityItem/components/LiquidityIcon/styles.js (91%) rename source/{ui => components}/ActivityItem/components/items/LiquidityItem/components/TokenAmounts.jsx (93%) rename source/{ui => components}/ActivityItem/components/items/LiquidityItem/index.js (97%) rename source/{ui => components}/ActivityItem/components/items/NFTItem.js (97%) rename source/{ui => components}/ActivityItem/components/items/PlugItem.js (100%) rename source/{ui => components}/ActivityItem/components/items/SwapItem.js (96%) rename source/{ui => components}/ActivityItem/components/items/TokenItem.js (100%) rename source/{ui => components}/ActivityItem/components/items/styles.js (100%) rename source/{ui => components}/ActivityItem/index.jsx (100%) rename source/{ui => components}/ActivityItem/styles.js (100%) rename source/{ui => components}/ActivityItem/utils.js (100%) rename source/{ui => components}/Alert/alert.stories.jsx (100%) rename source/{ui => components}/Alert/index.jsx (100%) rename source/{ui => components}/Alert/styles.js (100%) rename source/{ui => components}/AppItem/app-item.stories.jsx (100%) rename source/{ui => components}/AppItem/index.jsx (100%) rename source/{ui => components}/AppItem/styles.js (100%) rename source/{ui => components}/AssetFormat/index.jsx (100%) rename source/{ui => components}/AssetItem/asset-item.stories.jsx (100%) rename source/{ui => components}/AssetItem/index.jsx (94%) rename source/{ui => components}/AssetItem/styles.js (100%) rename source/{ui => components}/Badge/index.jsx (100%) rename source/{ui => components}/Badge/styles.js (100%) rename source/{ui => components}/Button/button.stories.jsx (100%) rename source/{ui => components}/Button/index.jsx (97%) rename source/{ui => components}/Button/styles.js (100%) rename source/{ui => components}/CanisterInfo/components/Container/index.jsx (100%) rename source/{ui => components}/CanisterInfo/components/Container/styles.js (100%) rename source/{ui => components}/CanisterInfo/components/Item/index.jsx (100%) rename source/{ui => components}/CanisterInfo/components/Item/styles.js (100%) rename source/{ui => components}/Card/index.jsx (100%) rename source/{ui => components}/Card/styles.js (100%) rename source/{ui => components}/Checkbox/index.jsx (100%) rename source/{ui => components}/Checkbox/styles.js (100%) rename source/{ui => components}/CodeBox/codebox.stories.jsx (100%) rename source/{ui => components}/CodeBox/index.jsx (100%) rename source/{ui => components}/CodeBox/styles.js (100%) rename source/{ui => components}/Container/index.jsx (100%) rename source/{ui => components}/Container/styles.js (100%) rename source/{ui => components}/DataDisplay/index.jsx (100%) rename source/{ui => components}/DataDisplay/styles.js (100%) rename source/{ui => components}/Dialog/index.jsx (100%) rename source/{ui => components}/Dialog/styles.js (100%) rename source/{ui => components}/FormInput/form-input.stories.jsx (100%) rename source/{ui => components}/FormInput/index.jsx (100%) rename source/{ui => components}/FormInput/styles.js (100%) rename source/{ui => components}/FormItem/index.jsx (100%) rename source/{ui => components}/FormItem/styles.js (100%) rename source/{ui => components}/FullscreenContainer/fullscreen-container.stories.jsx (100%) rename source/{ui => components}/FullscreenContainer/index.jsx (94%) rename source/{ui => components}/FullscreenContainer/styles.js (100%) rename source/{ui => components}/GenericIcon/generic-icon.stories.jsx (100%) rename source/{ui => components}/GenericIcon/index.jsx (95%) rename source/{ui => components}/GenericIcon/styles.js (100%) delete mode 100644 source/components/GroupedDisplay/index.jsx delete mode 100644 source/components/GroupedDisplay/styles.js rename source/{ui => components}/Header/index.jsx (100%) rename source/{ui => components}/Header/styles.js (100%) rename source/{ui => components}/HoverAnimation/hover-animation.stories.jsx (100%) rename source/{ui => components}/HoverAnimation/index.jsx (100%) rename source/{ui => components}/HoverAnimation/styles.js (100%) rename source/{ui => components}/ICNSDisplay/index.jsx (100%) rename source/{ui => components}/ICNSDisplay/styles.js (100%) rename source/{ui => components}/IncomingAction/index.jsx (100%) rename source/{ui => components}/IncomingAction/styles.js (100%) rename source/{ui => components}/InfoRow/index.jsx (100%) rename source/{ui => components}/InfoRow/info-row.stories.jsx (100%) rename source/{ui => components}/InfoRow/styles.js (100%) rename source/{ui => components}/InputBase/index.jsx (100%) rename source/{ui => components}/InputBase/styles.js (100%) rename source/{ui => components}/LinkButton/index.jsx (100%) rename source/{ui => components}/LinkButton/link-button.stories.jsx (100%) rename source/{ui => components}/LinkButton/styles.js (100%) rename source/{ui => components}/ListItem/index.jsx (100%) rename source/{ui => components}/ListItem/styles.js (100%) rename source/{ui => components}/MenuItem/index.jsx (97%) rename source/{ui => components}/MenuItem/menu-item.stories.jsx (100%) rename source/{ui => components}/MenuItem/styles.js (100%) rename source/{ui => components}/MenuItemDetailed/index.jsx (100%) rename source/{ui => components}/MenuItemDetailed/menu-item-detailed.stories.jsx (100%) rename source/{ui => components}/MenuItemDetailed/styles.js (100%) rename source/{ui => components}/MultiInput/index.jsx (94%) rename source/{ui => components}/MultiInput/multi-input.stories.jsx (100%) rename source/{ui => components}/MultiInput/styles.js (100%) rename source/{ui => components}/NFTDisplayer/index.jsx (97%) rename source/{ui => components}/NFTDisplayer/styles.js (100%) rename source/{ui => components}/Select/index.jsx (94%) rename source/{ui => components}/Select/select.stories.jsx (100%) rename source/{ui => components}/Select/styles.js (100%) rename source/{ui => components}/SelectButton/index.jsx (100%) rename source/{ui => components}/SelectButton/select-button.stories.jsx (100%) rename source/{ui => components}/SelectButton/styles.js (100%) rename source/{ui => components}/Tab/index.jsx (100%) rename source/{ui => components}/Tab/styles.js (100%) rename source/{ui => components}/Tab/tab.stories.jsx (100%) rename source/{ui => components}/Tabs/index.jsx (100%) rename source/{ui => components}/Tabs/styles.js (100%) rename source/{ui => components}/Tabs/tabs.stories.jsx (100%) rename source/{ui => components}/TextInput/index.jsx (100%) rename source/{ui => components}/TextInput/styles.js (100%) rename source/{ui => components}/TextInput/text-input.stories.jsx (100%) rename source/{ui => components}/Title/index.jsx (100%) rename source/{ui => components}/Title/styles.js (100%) rename source/{ui => components}/USDFormat/index.jsx (100%) rename source/{ui => components}/theme/index.js (100%) rename source/{ => scripts}/ContentScript/index.js (100%) rename source/{ => scripts}/ContentScript/utils/index.js (100%) rename source/{ => scripts}/ContentScript/utils/inject-script.js (100%) rename source/{ => scripts}/Inpage/index.js (100%) delete mode 100644 source/ui/index.js rename source/{Popup => views/Extension}/Popup.jsx (93%) rename source/{Popup => views/Extension}/Views/AddToken/Steps/Step1.jsx (97%) rename source/{Popup => views/Extension}/Views/AddToken/Steps/Step2.jsx (98%) rename source/{Popup => views/Extension}/Views/AddToken/components/CustomToken.jsx (99%) rename source/{Popup => views/Extension}/Views/AddToken/components/DabInfo.jsx (95%) rename source/{Popup => views/Extension}/Views/AddToken/components/SearchToken.jsx (98%) rename source/{Popup => views/Extension}/Views/AddToken/hooks/useSteps.jsx (97%) rename source/{Popup => views/Extension}/Views/AddToken/index.jsx (82%) rename source/{Popup => views/Extension}/Views/AddToken/styles.js (100%) rename source/{Popup => views/Extension}/Views/ClockError/index.js (100%) rename source/{Popup => views/Extension}/Views/ClockError/styles.js (100%) rename source/{Popup => views/Extension}/Views/Contacts/components/AddContact.jsx (99%) rename source/{Popup => views/Extension}/Views/Contacts/components/Home.jsx (96%) rename source/{Popup => views/Extension}/Views/Contacts/contacts.stories.jsx (100%) rename source/{Popup => views/Extension}/Views/Contacts/hooks/useSteps.jsx (96%) rename source/{Popup => views/Extension}/Views/Contacts/index.jsx (86%) rename source/{Popup => views/Extension}/Views/Contacts/styles.js (100%) rename source/{Popup => views/Extension}/Views/Deposit/index.jsx (99%) rename source/{Popup => views/Extension}/Views/Deposit/styles.js (100%) rename source/{Popup => views/Extension}/Views/Error/index.jsx (93%) rename source/{Popup => views/Extension}/Views/Error/styles.js (100%) rename source/{Popup => views/Extension}/Views/ExportIdentity/hooks/useSteps.jsx (96%) rename source/{Popup => views/Extension}/Views/ExportIdentity/index.jsx (86%) rename source/{Popup => views/Extension}/Views/ExportIdentity/steps/Step1.jsx (98%) rename source/{Popup => views/Extension}/Views/ExportIdentity/steps/Step2.jsx (98%) rename source/{Popup => views/Extension}/Views/Help/index.jsx (85%) rename source/{Popup => views/Extension}/Views/Help/styles.js (100%) rename source/{Popup => views/Extension}/Views/Home/index.jsx (99%) rename source/{Popup => views/Extension}/Views/Login/index.jsx (97%) rename source/{Popup => views/Extension}/Views/Login/login.stories.jsx (100%) rename source/{Popup => views/Extension}/Views/Login/styles.js (100%) rename source/{Popup => views/Extension}/Views/NFTDetails/components/section.jsx (96%) rename source/{Popup => views/Extension}/Views/NFTDetails/index.jsx (98%) rename source/{Popup => views/Extension}/Views/NFTDetails/styles.js (100%) rename source/{Popup => views/Extension}/Views/Network/components/NetworkCard/index.jsx (100%) rename source/{Popup => views/Extension}/Views/Network/components/NetworkCard/styles.js (100%) rename source/{Popup => views/Extension}/Views/Network/components/NoNetworks/index.jsx (96%) rename source/{Popup => views/Extension}/Views/Network/components/NoNetworks/styles.js (100%) rename source/{Popup => views/Extension}/Views/Network/index.jsx (96%) rename source/{Popup => views/Extension}/Views/Network/styles.js (100%) rename source/{Popup => views/Extension}/Views/NetworkCreation/constants.js (100%) rename source/{Popup => views/Extension}/Views/NetworkCreation/index.jsx (98%) rename source/{Popup => views/Extension}/Views/NetworkCreation/styles.js (100%) rename source/{Popup => views/Extension}/Views/SeedPhrase/Steps/Step1.jsx (98%) rename source/{Popup => views/Extension}/Views/SeedPhrase/Steps/Step2.jsx (90%) rename source/{Popup => views/Extension}/Views/SeedPhrase/hooks/useSteps.jsx (96%) rename source/{Popup => views/Extension}/Views/SeedPhrase/index.jsx (85%) create mode 100644 source/views/Extension/Views/SendError/index.jsx create mode 100644 source/views/Extension/Views/SendError/styles.js rename source/{Popup => views/Extension}/Views/SendFlow/components/cancelButton.jsx (90%) rename source/{Popup => views/Extension}/Views/SendFlow/components/index.js (100%) create mode 100644 source/views/Extension/Views/SendFlow/hooks/useSteps.jsx rename source/{Popup => views/Extension}/Views/SendFlow/index.jsx (86%) rename source/{Popup => views/Extension}/Views/SendFlow/steps/confirm/index.jsx (98%) rename source/{Popup => views/Extension}/Views/SendFlow/steps/index.js (100%) rename source/{Popup => views/Extension}/Views/SendFlow/steps/selectAsset/components/cyclesToAccountWarning.jsx (93%) rename source/{Popup => views/Extension}/Views/SendFlow/steps/selectAsset/components/index.jsx (100%) rename source/{Popup => views/Extension}/Views/SendFlow/steps/selectAsset/index.jsx (56%) rename source/{Popup => views/Extension}/Views/SendFlow/steps/xtcToCanister/index.jsx (99%) rename source/{Popup => views/Extension}/Views/SendFlow/styles.js (100%) rename source/{Popup => views/Extension}/Views/SendFlow/utils/index.js (100%) rename source/{Popup => views/Extension}/Views/SendNFT/components/InputStep/index.jsx (98%) rename source/{Popup => views/Extension}/Views/SendNFT/components/InputStep/styles.js (100%) rename source/{Popup => views/Extension}/Views/SendNFT/components/NFTDisplay/index.jsx (95%) rename source/{Popup => views/Extension}/Views/SendNFT/components/NFTDisplay/styles.js (100%) rename source/{Popup => views/Extension}/Views/SendNFT/components/ReviewStep/index.jsx (97%) rename source/{Popup => views/Extension}/Views/SendNFT/components/ReviewStep/styles.js (100%) rename source/{Popup => views/Extension}/Views/SendNFT/index.jsx (89%) rename source/{Popup => views/Extension}/Views/SendNFT/useSteps.jsx (100%) rename source/{Popup => views/Extension}/Views/SendNFT/utils.js (100%) rename source/{Popup => views/Extension}/Views/Settings/index.jsx (83%) rename source/{Popup => views/Extension}/Views/Settings/styles.js (100%) rename source/{Popup => views/Extension}/Views/Swap/Steps/Step1.jsx (92%) rename source/{Popup => views/Extension}/Views/Swap/Steps/Step2.jsx (88%) rename source/{Popup => views/Extension}/Views/Swap/hooks/useSteps.jsx (98%) rename source/{Popup => views/Extension}/Views/Swap/index.jsx (82%) rename source/{Popup => views/Extension}/Views/Swap/styles.js (100%) rename source/{Popup => views/Extension}/Views/WalletDetails/components/DetailItem/index.jsx (96%) rename source/{Popup => views/Extension}/Views/WalletDetails/components/DetailItem/styles.js (100%) rename source/{Popup => views/Extension}/Views/WalletDetails/components/ICNSSelector/index.jsx (98%) rename source/{Popup => views/Extension}/Views/WalletDetails/components/ICNSSelector/styles.js (100%) rename source/{Popup => views/Extension}/Views/WalletDetails/components/ICNSToggle/index.jsx (97%) rename source/{Popup => views/Extension}/Views/WalletDetails/components/ICNSToggle/styles.js (100%) rename source/{Popup => views/Extension}/Views/WalletDetails/components/InfoModal/index.jsx (96%) rename source/{Popup => views/Extension}/Views/WalletDetails/components/InfoModal/styles.js (100%) rename source/{Popup => views/Extension}/Views/WalletDetails/index.jsx (99%) rename source/{Popup => views/Extension}/Views/WalletDetails/styles.js (100%) rename source/{Popup => views/Extension}/app.jsx (96%) rename source/{Popup => views/Extension}/index.jsx (91%) rename source/{Popup => views/Extension}/popup.stories.jsx (100%) rename source/{ => views}/Options/Views/Welcome/components/Header/index.jsx (100%) rename source/{ => views}/Options/Views/Welcome/components/Header/styles.js (100%) rename source/{ => views}/Options/Views/Welcome/hooks/useSteps.jsx (100%) rename source/{ => views}/Options/Views/Welcome/index.jsx (94%) rename source/{ => views}/Options/Views/Welcome/steps/ActionsStep.jsx (96%) rename source/{ => views}/Options/Views/Welcome/steps/CreatePasswordStep.jsx (99%) rename source/{ => views}/Options/Views/Welcome/steps/ImportWalletStep.jsx (96%) rename source/{ => views}/Options/Views/Welcome/steps/MemeStep.jsx (82%) rename source/{ => views}/Options/Views/Welcome/steps/SeedPhraseStep.jsx (95%) rename source/{ => views}/Options/Views/Welcome/steps/index.jsx (100%) rename source/{ => views}/Options/Views/Welcome/styles.js (100%) rename source/{ => views}/Options/index.jsx (87%) rename source/{ => views}/Options/options.stories.jsx (100%) rename source/{Pages/Notification => views/Popup}/components/AllowAgent/index.jsx (96%) rename source/{Pages/Notification => views/Popup}/components/AllowAgent/styles.js (100%) rename source/{Pages/Notification => views/Popup}/components/AppConnection/index.jsx (98%) rename source/{Pages/Notification => views/Popup}/components/AppConnection/styles.js (100%) rename source/{Pages/Notification => views/Popup}/components/BurnXTC/components/Data.jsx (95%) rename source/{Pages/Notification => views/Popup}/components/BurnXTC/components/Details.jsx (97%) rename source/{Pages/Notification => views/Popup}/components/BurnXTC/components/RequestHandler.jsx (100%) rename source/{Pages/Notification => views/Popup}/components/BurnXTC/constants/index.js (100%) rename source/{Pages/Notification => views/Popup}/components/BurnXTC/hooks/useRequests.jsx (98%) rename source/{Pages/Notification => views/Popup}/components/BurnXTC/index.jsx (97%) rename source/{Pages/Notification => views/Popup}/components/BurnXTC/styles.js (100%) rename source/{Pages/Notification => views/Popup}/components/ImportToken/index.jsx (89%) rename source/{Pages/Notification => views/Popup}/components/ImportToken/styles.js (98%) rename source/{Pages/Notification => views/Popup}/components/LoginProxy/index.jsx (95%) rename source/{Pages/Notification => views/Popup}/components/NotificationError/index.jsx (95%) rename source/{Pages/Notification => views/Popup}/components/NotificationError/styles.js (100%) rename source/{Pages/Notification => views/Popup}/components/Principal/index.jsx (100%) rename source/{Pages/Notification => views/Popup}/components/Sign/components/BatchTransactions/constants/index.js (100%) rename source/{Pages/Notification => views/Popup}/components/Sign/components/BatchTransactions/hooks/useRPCTransactions.jsx (98%) rename source/{Pages/Notification => views/Popup}/components/Sign/components/BatchTransactions/index.jsx (97%) rename source/{Pages/Notification => views/Popup}/components/Sign/components/BatchTransactions/styles.js (100%) rename source/{Pages/Notification => views/Popup}/components/Sign/components/Data/index.jsx (98%) rename source/{Pages/Notification => views/Popup}/components/Sign/components/Details/components/AssetDisplay.jsx (89%) rename source/{Pages/Notification => views/Popup}/components/Sign/components/Details/components/CanisterInfoDisplay.jsx (100%) rename source/{Pages/Notification => views/Popup}/components/Sign/components/Details/components/DisplayBox.jsx (97%) rename source/{Pages/Notification => views/Popup}/components/Sign/components/Details/components/NFTDisplay.jsx (100%) rename source/{Pages/Notification => views/Popup}/components/Sign/components/Details/components/WarningBox.jsx (100%) rename source/{Pages/Notification => views/Popup}/components/Sign/components/Details/constants.js (100%) rename source/{Pages/Notification => views/Popup}/components/Sign/components/Details/index.jsx (98%) rename source/{Pages/Notification => views/Popup}/components/Sign/components/Details/styles.js (100%) rename source/{Pages/Notification => views/Popup}/components/Sign/components/Details/utils.js (62%) rename source/{Pages/Notification => views/Popup}/components/Sign/components/WarningModal/index.jsx (96%) rename source/{Pages/Notification => views/Popup}/components/Sign/components/WarningModal/styles.js (100%) rename source/{Pages/Notification => views/Popup}/components/Sign/components/index.js (100%) rename source/{Pages/Notification => views/Popup}/components/Sign/constants/index.js (100%) rename source/{Pages/Notification => views/Popup}/components/Sign/hooks/useRequest.jsx (98%) rename source/{Pages/Notification => views/Popup}/components/Sign/hooks/useRequests.jsx (98%) rename source/{Pages/Notification => views/Popup}/components/Sign/index.jsx (98%) rename source/{Pages/Notification => views/Popup}/components/Sign/styles.js (100%) rename source/{Pages/Notification => views/Popup}/components/Transfer/components/Data.jsx (90%) rename source/{Pages/Notification => views/Popup}/components/Transfer/components/Details.jsx (95%) rename source/{Pages/Notification => views/Popup}/components/Transfer/components/RequestHandler.jsx (100%) rename source/{Pages/Notification => views/Popup}/components/Transfer/constants/index.js (100%) rename source/{Pages/Notification => views/Popup}/components/Transfer/hooks/useRequests.jsx (98%) rename source/{Pages/Notification => views/Popup}/components/Transfer/index.jsx (97%) rename source/{Pages/Notification => views/Popup}/components/Transfer/styles.js (100%) rename source/{Pages/Notification => views/Popup}/index.jsx (94%) diff --git a/.eslintrc.js b/.eslintrc.js index 3cec396e..486f18c0 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -47,7 +47,6 @@ module.exports = { 'import/resolver': { alias: { map: [ - ['@ui', './source/ui'], ['@components', './source/components'], ['@modules', './source/Modules'], ['@assets', './source/assets'], diff --git a/.gitignore b/.gitignore index f8e2f687..091a2a97 100644 --- a/.gitignore +++ b/.gitignore @@ -102,6 +102,9 @@ public/ ## Build directory extension/ +!source/views/Extension +!source/views/Extension/* +!source/views/Extension/** dist/ .awcache diff --git a/.storybook/main.js b/.storybook/main.js index 8f4afd89..7e14c9f8 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -29,7 +29,6 @@ module.exports = { ]; config.resolve.alias = { - "@ui": path.join(path.resolve(__dirname, "../source/ui")), "@components": path.join(path.resolve(__dirname, "../source/components")), "@assets": path.join(path.resolve(__dirname, "../source/assets")), "@shared": path.join(path.resolve(__dirname, "../source/shared")), diff --git a/jsconfig.json b/jsconfig.json index 69940934..90b41bc3 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -2,8 +2,6 @@ "compilerOptions": { "baseUrl": "./", "paths": { - "@ui": ["source/ui"], - "@ui/*": ["source/ui/*"], "@components": ["source/components"], "@components/*": ["source/components/*"], "@assets": ["source/assets"], @@ -14,8 +12,8 @@ "@hooks/*": ["source/hooks/*"], "@redux": ["source/redux"], "@redux/*": ["source/redux/*"], - "@background": ["source/Background"], - "@background/*": ["source/Background/*"], + "@background": ["source/background"], + "@background/*": ["source/background/*"], "@modules/*": ["source/Modules/*"] } }, diff --git a/package.json b/package.json index 7f78de7a..22a4b214 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "plug", - "version": "0.5.3", + "version": "0.5.4", "description": "Your plug into the Internet Computer", "private": true, "repository": "https://github.com/Psychedelic/plug", @@ -38,7 +38,7 @@ "@metamask/post-message-stream": "^4.0.0", "@psychedelic/browser-rpc": "2.1.0", "@psychedelic/dab-js": "1.4.5", - "@psychedelic/plug-controller": "0.19.7", + "@psychedelic/plug-controller": "0.19.8", "@psychedelic/plug-inpage-provider": "^2.3.0", "@reduxjs/toolkit": "^1.6.0", "advanced-css-reset": "^1.2.2", diff --git a/source/Background/script.js b/source/Background/script.js index 635526d2..732b176e 100644 --- a/source/Background/script.js +++ b/source/Background/script.js @@ -6,9 +6,9 @@ import { ConnectionModule, TransactionModule, InformationModule, + NotificationManager, } from '@modules'; -import NotificationManager from '../lib/NotificationManager'; import { getKeyringHandler, HANDLER_TYPES, diff --git a/source/Background/utils.js b/source/Background/utils.js index 07d79953..02dc7754 100644 --- a/source/Background/utils.js +++ b/source/Background/utils.js @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ import PlugController from '@psychedelic/plug-controller'; import { validateCanisterId, validatePrincipalId, validateAccountId } from '@shared/utils/ids'; @@ -183,7 +184,7 @@ export const handleCallRequest = async ({ if (redirected) callback(null, true); return true; } catch (e) { - console.log('Error when executing update transaction', e); + console.warn('Error when executing update transaction', e); callback(ERRORS.SERVER_ERROR(e), null, [{ portId, callId }]); if (redirected) callback(null, false); return false; diff --git a/source/Modules/Controller/connection.js b/source/Modules/Controller/connection.js index 301975f7..88366f89 100644 --- a/source/Modules/Controller/connection.js +++ b/source/Modules/Controller/connection.js @@ -9,7 +9,8 @@ import { getApp, removeApp, } from '../storageManager'; -import SIZES from '../../Pages/Notification/components/Transfer/constants'; +import SIZES from '../../views/Popup/components/Transfer/constants'; + import { ControllerModuleBase } from './controllerBase'; export class ConnectionModule extends ControllerModuleBase { @@ -130,6 +131,11 @@ export class ConnectionModule extends ControllerModuleBase { const date = new Date().toISOString(); + const populatedWhitelist = canistersInfo.reduce( + (accum, canisterInfo) => ({ ...accum, [canisterInfo.id]: canisterInfo }), + {}, + ); + getApps(this.keyring?.currentWalletId.toString(), (apps = {}) => { const newApps = { ...apps, @@ -143,7 +149,7 @@ export class ConnectionModule extends ControllerModuleBase { events: [ ...apps[domainUrl]?.events || [], ], - whitelist, + whitelist: populatedWhitelist, host, }, }; @@ -208,7 +214,7 @@ export class ConnectionModule extends ControllerModuleBase { ? CONNECTION_STATUS.accepted : response.status; const whitelist = response.status === CONNECTION_STATUS.accepted - ? response.whitelist + ? apps[url]?.whitelist : []; const date = new Date().toISOString(); @@ -219,7 +225,7 @@ export class ConnectionModule extends ControllerModuleBase { ...apps[url], status: status || CONNECTION_STATUS.rejected, date, - whitelist, + whitelist: { ...apps[url]?.whitelist, ...whitelist }, events: [ ...apps[url]?.events || [], { diff --git a/source/Modules/Controller/controllerBase.js b/source/Modules/Controller/controllerBase.js index 171ed6d0..c8de0ed9 100644 --- a/source/Modules/Controller/controllerBase.js +++ b/source/Modules/Controller/controllerBase.js @@ -3,7 +3,7 @@ import extension from 'extensionizer'; import { checkPendingTransaction, createPendingTransaction, removePendingTransaction } from '@modules/storageManager'; import ERRORS from '@background/errors'; -import SIZES from '../../Pages/Notification/components/Transfer/constants'; +import SIZES from '../../views/Popup/components/Transfer/constants'; export class ControllerModuleBase { constructor(backgroundController, secureController, keyring) { diff --git a/source/Modules/Controller/transaction.js b/source/Modules/Controller/transaction.js index 788e7388..5a372db2 100644 --- a/source/Modules/Controller/transaction.js +++ b/source/Modules/Controller/transaction.js @@ -18,7 +18,8 @@ import { XTC_FEE } from '@shared/constants/addresses'; import { getKeyringHandler, HANDLER_TYPES } from '@background/Keyring'; import { blobFromBuffer, blobToUint8Array } from '@dfinity/candid'; -import SIZES from '../../Pages/Notification/components/Transfer/constants'; +import SIZES from '../../views/Popup/components/Transfer/constants'; + import { getBatchTransactions, getProtectedIds, setBatchTransactions, getApp, } from '../storageManager'; @@ -136,7 +137,7 @@ export class TransactionModule extends ControllerModuleBase { ...transfer, amount: parsedAmount, canisterId: ICP_CANISTER_ID, - standard: 'icp', + standard: 'ROSETTA', }); if (response.error) { diff --git a/source/lib/NotificationManager.js b/source/Modules/NotificationManager.js similarity index 95% rename from source/lib/NotificationManager.js rename to source/Modules/NotificationManager.js index bbd9c2a3..3b389e15 100644 --- a/source/lib/NotificationManager.js +++ b/source/Modules/NotificationManager.js @@ -1,6 +1,6 @@ import extension from 'extensionizer'; -class NotificationManager { +export class NotificationManager { constructor(image) { this.iconUrl = image; } diff --git a/source/Modules/index.js b/source/Modules/index.js index 5de7eda0..11e07d5a 100644 --- a/source/Modules/index.js +++ b/source/Modules/index.js @@ -2,3 +2,4 @@ export * from './storageManager'; export * from './Controller/connection'; export * from './Controller/transaction'; export * from './Controller/information'; +export * from './NotificationManager'; diff --git a/source/Popup/Views/SendFlow/hooks/useSteps.jsx b/source/Popup/Views/SendFlow/hooks/useSteps.jsx deleted file mode 100644 index 85f28f63..00000000 --- a/source/Popup/Views/SendFlow/hooks/useSteps.jsx +++ /dev/null @@ -1,244 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { useTranslation } from 'react-i18next'; -import { useDispatch, useSelector } from 'react-redux'; -import { LinkButton } from '@ui'; -import BackIcon from '@assets/icons/back.svg'; -import { setAssets } from '@redux/wallet'; -import { HANDLER_TYPES, sendMessage } from '@background/Keyring'; -import { USD_PER_TC } from '@shared/constants/currencies'; -import { - isICNSName, validateAddress, validateCanisterId, validatePrincipalId, -} from '@shared/utils/ids'; -import { ADDRESS_TYPES, getAssetFee } from '@shared/constants/addresses'; -import { useICPPrice } from '@redux/icp'; -import { - setSendTokenAmount, - setSendTokenSelectedAsset, - setSendTokenAddressInfo, - swapSendTokenValues, - sendToken, - burnXTC, - resetState, -} from '@redux/send'; -import { useICNS } from '@hooks'; -import { - MAX_DECIMALS, - DISPLAY_DECIMALS, - XTC_OPTIONS, -} from '@shared/constants/send'; -import { truncateFloatForDisplay } from '@shared/utils/send'; - -import { - SelectAssetStep, - XtcToCanisterStep, - ConfirmStep, -} from '../steps'; - -import { CancelButton } from '../components'; - -const getAddressType = (address) => { - const type = validatePrincipalId(address) ? ADDRESS_TYPES.PRINCIPAL : ADDRESS_TYPES.ACCOUNT; - return isICNSName(address) ? ADDRESS_TYPES.ICNS : type; -}; - -const useSteps = () => { - const { t } = useTranslation(); - const dispatch = useDispatch(); - - const { assets } = useSelector((state) => state.wallet); - const { - amount, - address, - selectedAsset, - primaryValue, - fulfilled, - } = useSelector((state) => state.send); - const icpPrice = useICPPrice(); - - const [step, setStep] = useState(0); - const [destination, setDestination] = useState(XTC_OPTIONS.SEND); - const [sendingXTCtoCanister, setSendingXTCtoCanister] = useState(false); - - const { - loading, resolvedAddress, isValid: isValidICNS, - } = useICNS(address, selectedAsset?.symbol); - - const handleChangeAsset = (value) => { - dispatch(setSendTokenAddressInfo({ isValid: null, resolvedAddress: null, type: null })); - dispatch(setSendTokenSelectedAsset({ icpPrice, value })); - }; - const handleChangeDestination = (value) => setDestination(value); - - const fee = getAssetFee(selectedAsset); - const getAvailableAmount = (value) => ( - truncateFloatForDisplay(value - fee, MAX_DECIMALS, DISPLAY_DECIMALS) - ); - - const handleSendClick = () => { - if (sendingXTCtoCanister && destination === XTC_OPTIONS.BURN) { - dispatch(burnXTC()); - } else { - dispatch(sendToken()); - } - }; - - const available = getAvailableAmount((selectedAsset?.amount || 0)); - const convertedAmount = Math.max(available * primaryValue.conversionRate, 0); - const [availableAmount, setAvailableAmount] = useState({ - amount: convertedAmount, - prefix: primaryValue.prefix, - suffix: primaryValue.suffix, - }); - - // TODO: Refactor cleaner way - // when seeing asset as USD, - // we need to convert back the amount to the correct rate when going to review - const convertToPrimaryAsset = () => { - const parsedAmount = truncateFloatForDisplay( - amount / primaryValue.conversionRate, - MAX_DECIMALS, - DISPLAY_DECIMALS, - ); - - dispatch(setSendTokenAmount(parsedAmount)); - }; - - // TODO: Refactor cleaner way - // when coming back from review we need to view amount with the correct rate - const convertToSecondaryAsset = () => { - const parsedAmount = truncateFloatForDisplay( - amount * primaryValue.conversionRate, - MAX_DECIMALS, - DISPLAY_DECIMALS, - ); - - dispatch(setSendTokenAmount(parsedAmount)); - }; - - const handleSwapValues = () => dispatch(swapSendTokenValues()); - - const handleNextStep = () => { - const newStep = sendingXTCtoCanister ? 1 : 2; - - convertToPrimaryAsset(); - setStep(newStep); - }; - - const handlePreviousStep = () => { - const newStep = sendingXTCtoCanister ? 1 : 0; - - setStep(newStep); - if (!sendingXTCtoCanister) convertToSecondaryAsset(); - }; - - useEffect(() => { - const maxAmount = convertedAmount; - setAvailableAmount( - { - amount: maxAmount, - prefix: primaryValue.prefix, - suffix: primaryValue.suffix, - }, - ); - - if (amount > maxAmount) { - const parsedAmount = truncateFloatForDisplay( - maxAmount, - MAX_DECIMALS, - DISPLAY_DECIMALS, - ); - - dispatch(setSendTokenAmount(parsedAmount)); - } - }, [primaryValue, convertedAmount]); - - useEffect(() => { - if (!assets?.length) { - sendMessage({ - type: HANDLER_TYPES.GET_ASSETS, - params: {}, - }, (keyringAssets) => { - dispatch(setAssets({ keyringAssets, icpPrice })); - }); - } - }, []); - - useEffect(() => { - dispatch(setSendTokenSelectedAsset({ icpPrice })); - }, [icpPrice]); - - useEffect(() => { - if (address !== null) { - let isValid = validateAddress(address) || isValidICNS; - const type = getAddressType(address); - // TODO: Serialize token standard in asset and check for 'icp' standard tokens here - if (type === ADDRESS_TYPES.ACCOUNT && !['ICP', 'OGY'].includes(selectedAsset?.symbol)) { - isValid = false; - } - dispatch(setSendTokenAddressInfo({ isValid, type, resolvedAddress })); - - setSendingXTCtoCanister(selectedAsset?.symbol === 'XTC' && validateCanisterId(address)); - } - }, [address, selectedAsset, isValidICNS, resolvedAddress]); - - useEffect(() => { - if (fulfilled) { - dispatch(resetState()); - setStep(0); - } - }, [fulfilled]); - - const step2c = { - component: setStep(2)} - destination={destination} - handleChangeDestination={handleChangeDestination} - />, - left: { convertToSecondaryAsset(); setStep(0); }} - startIcon={BackIcon} - />, - right: , - center: `${t('send.choose')}`, - }; - - let step2; - - if (sendingXTCtoCanister) { - step2 = step2c; - } - - const steps = [ - { - component: , - left: null, - right: , - center: t('send.title'), - }, - { - ...step2, - }, - { - component: , - left: handlePreviousStep()} - startIcon={BackIcon} - />, - right: , - center: `${t('send.review')}`, - }, - ]; - - return steps[step]; -}; - -export default useSteps; diff --git a/source/assets/icons/favicon-32.png b/source/assets/icons/favicon-32.png index 218b355a6206fe9b07311176983493f0715de714..08b079d4dfef891e8c3fe789af9bd5f7c205863b 100644 GIT binary patch delta 1680 zcmV;B25vXge!s27-Obp71 zMq`*pqeSG9C=a6!k*Guo<0Tjo2SyVOI$jbmQ^7#^2M~m`tJFD=R4my-?;?0z-F^qw0gq=$bWPy2(bawf`1E&YD#fP zQqlF7U9QUmhseOjSf_IVmC4foL}?-rx~$ISDvdT((Mql(uaq%e&8m9*uOO2$vNDOc zz5P&(K)-UjG|?xMCqIF?b6!VL(PYMvqOq|tuH19a6=T-S8H!ws+l}`2_JkzTGBbP~ zUT>w^;c(dGB!9{|oKB}QIR~Hkz=4Bt|7}ah9cMJ*7a; zZZLr*qLf@pU?)0c4WfZ1J|bF0j3^kc)C2Aw_}%`vdVfgnSSP);(@>OxtS>VA1(==K z(O1qthd>0jcNAKpg@z}pfex(B+BXs(xn86FwY@X1#vT&jKL-<3^ zSf8|eCx0TlwuAV)pm{hSk&>ARS*%PZ2W_Dyh?{r7v;7=QHWM7Ljz!*#`?!-`w=+c_ zi|`$5jYb<+leal z1^O^<{&+<9S7sFAS{q4V4pY2%DhTzD+Yr%d5r18htX4zvb|O+*2J!3N2zh->c`UA> zPpd`EIu|6CB1B@FBQgSaU;%T8V%~l~<{s&Rud5Xm-ZrJ*lA5ZNT|OVijUNZv+@x4( zd|@FDA3ds!^D%`)2=KXmNX<@Vs%b(3aV_w4O&ISo0;Z4*vw9e&6&FLg+Jf7gBi==1H5sx0?QuZ52M8Nux&A5>4X0qFIul0! zXrS2%S=1{e0+ii?QVR?!0~Wn80hM+g>+ge3(}}_{t5G-QG(@-f4+5%;%&gK|JAeJ6 zgy&zn2y;5~BwYwZAHv}}H_mw}a~dx~v>PL>63FmokcbvtooaOUcB8iA61+w~rqodE ze0&7Bi$!Dur21BfTTdV!;u7F6X9O_u;cE&3Xj#^X*iwBD9)E2ye53MkR+oV)l?G?6 zA=Kx2kv=^KcTb;yA8PlYs3iwAj(;pPr*R)=_W5Qn)Qt^s2_*D^EkB#^{4?#aj_3iq zfnYbMfPB9L4?VOEh3wd6XOCvts>rsqv|z*f4LJYjdAySSEXL%I!ki;P9I;!Vx_Slr zgZmPx;XaVpndli_kl%x?WlgcR&!@($g(g(~q3ypT$$(cq>zHUBk8d5zm4Bn_OA(N} z$cXfk*-*845)$BB@G>h$#v62dv`Q{|G@w{gucvr z3njguK}U_sjVXl#D6cPv_WWriK{d(E&0ETXMQJiAZizLEJ#0G$dT})Lv3-_Uj1W^G zm9GIV6v8dGp`>LkT;a>frhf&MQKmADww_T%CsfMk;;R;WgZBE`+VulR a{{}cEkJLZRLIeN+00{s|MNUMnLSTYsQ!VHK delta 757 zcmVF6@uYI+8_HzcCk&Rm9CB2Z1bMZJ-V9b z+->*PECfGrIQRZ`e!t)M{(ip$BglcR!ubJ|diV<=>inlrb$>q3E67DEnE0Hh^SK2q zGphnt1^jmbL^SxQ&qskv>~S6Pi>iQhb(8MibfZ)Omi+uOB-in1pqE9XT{I-MHJ<1X zCqm!1AeJmeG~v{3d~pY54u$pz-%A`JlobTo3h;LmNFOG(VDrQfO(nB}YwZ{+i(hdu z+2|!bOL7`j0DphN)VEr`3Rrb^Y`np%WQM%of;em2V6Y8uW_Fr7FIAv4MzH5O(D+_K zZIHk{Lr@xD_$^WZ1j;GKswke+P~6)_5hsQ2+z5(-FYi(HKZB%eE0=TB{V}{ zy@o4$H7?8uy(NvVYrlq6oB^o?R+8%+7*_E3f*t4j6@OMe`FFh~qoMs7{qr^h?T>7@ zebK>NCNdj$Vie7?D63aHumW&BcbI@t)C&*0x*% zcCqaNOn;&cHDkW-G_R5xf%*!RZwB$4yHvYTZdUS z`XzhEeG+D$-!xtARSo?z1tb;FCsw~ZDojEegl-B`_zwZK&R2ng0-;I zb!@N8b~e%ZQe_@~LX{rJ&Dw{^B^nlCw}fU5=&}}bMgA$xHkc~@fq)Yk66wOaU=hnR nkV2dVtG!S0H#4ASc(%k(@2dUBp(pmt00000NkvXXu0mjfuqkDL diff --git a/source/assets/icons/fly-bill.svg b/source/assets/icons/fly-bill.svg new file mode 100644 index 00000000..31be9b79 --- /dev/null +++ b/source/assets/icons/fly-bill.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/source/assets/icons/nomouth-face.svg b/source/assets/icons/nomouth-face.svg new file mode 100644 index 00000000..e09dd1a3 --- /dev/null +++ b/source/assets/icons/nomouth-face.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/source/assets/icons/red-flag.svg b/source/assets/icons/red-flag.svg new file mode 100644 index 00000000..dbc20e38 --- /dev/null +++ b/source/assets/icons/red-flag.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/source/ui/ActionButton/action-button.stories.jsx b/source/components/ActionButton/action-button.stories.jsx similarity index 100% rename from source/ui/ActionButton/action-button.stories.jsx rename to source/components/ActionButton/action-button.stories.jsx diff --git a/source/ui/ActionButton/index.jsx b/source/components/ActionButton/index.jsx similarity index 100% rename from source/ui/ActionButton/index.jsx rename to source/components/ActionButton/index.jsx diff --git a/source/ui/ActionButton/styles.js b/source/components/ActionButton/styles.js similarity index 100% rename from source/ui/ActionButton/styles.js rename to source/components/ActionButton/styles.js diff --git a/source/ui/ActionCard/action-card.stories.jsx b/source/components/ActionCard/action-card.stories.jsx similarity index 100% rename from source/ui/ActionCard/action-card.stories.jsx rename to source/components/ActionCard/action-card.stories.jsx diff --git a/source/ui/ActionCard/index.jsx b/source/components/ActionCard/index.jsx similarity index 94% rename from source/ui/ActionCard/index.jsx rename to source/components/ActionCard/index.jsx index 7bde2f7b..bd94a24c 100644 --- a/source/ui/ActionCard/index.jsx +++ b/source/components/ActionCard/index.jsx @@ -32,5 +32,5 @@ ActionCard.propTypes = { button: PropTypes.string.isRequired, onClick: PropTypes.func.isRequired, // eslint-disable-next-line react/forbid-prop-types - buttonProps: PropTypes.object, + buttonProps: PropTypes.objectOf(PropTypes.string), }; diff --git a/source/ui/ActionCard/styles.js b/source/components/ActionCard/styles.js similarity index 100% rename from source/ui/ActionCard/styles.js rename to source/components/ActionCard/styles.js diff --git a/source/components/ActionDialog/index.jsx b/source/components/ActionDialog/index.jsx index fcec4bde..bb934f96 100644 --- a/source/components/ActionDialog/index.jsx +++ b/source/components/ActionDialog/index.jsx @@ -7,7 +7,7 @@ import IconButton from '@material-ui/core/IconButton'; import CloseIcon from '@material-ui/icons/Close'; import clsx from 'clsx'; -import { Button } from '@ui'; +import Button from '../Button'; import useStyles from './styles'; const ActionDialog = ({ diff --git a/source/components/Actions/index.jsx b/source/components/Actions/index.jsx index e67e6d0a..364c2637 100644 --- a/source/components/Actions/index.jsx +++ b/source/components/Actions/index.jsx @@ -1,8 +1,8 @@ import React from 'react'; import { useRouter } from '@components/Router'; -import { ActionButton } from '@ui'; import clsx from 'clsx'; import PropTypes from 'prop-types'; +import ActionButton from '../ActionButton'; import useStyles from './styles'; const ACTIONS = ['deposit', 'send', 'swap']; diff --git a/source/components/Activity/index.jsx b/source/components/Activity/index.jsx index 55afe180..d9ba3b2f 100644 --- a/source/components/Activity/index.jsx +++ b/source/components/Activity/index.jsx @@ -1,12 +1,12 @@ import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { ActivityItem } from '@ui'; import { HANDLER_TYPES, sendMessage } from '@background/Keyring'; -import LoadingWrapper from '@components/LoadingWrapper'; import { useActivity } from '@hooks'; import { setTransactions, setTransactionsLoading } from '@redux/wallet'; import { useICPPrice } from '@redux/icp'; +import LoadingWrapper from '../LoadingWrapper'; +import ActivityItem from '../ActivityItem'; import useStyles from './styles'; import EmptyState from './components/EmptyState'; diff --git a/source/ui/ActivityItem/components/ActivityItemDetails/index.js b/source/components/ActivityItem/components/ActivityItemDetails/index.js similarity index 95% rename from source/ui/ActivityItem/components/ActivityItemDetails/index.js rename to source/components/ActivityItem/components/ActivityItemDetails/index.js index cf8e464e..30a55913 100644 --- a/source/ui/ActivityItem/components/ActivityItemDetails/index.js +++ b/source/components/ActivityItem/components/ActivityItemDetails/index.js @@ -47,7 +47,7 @@ ActivityItemDetails.propTypes = { secondary: PropTypes.string.isRequired, isTransaction: PropTypes.bool.isRequired, hovering: PropTypes.bool.isRequired, - details: PropTypes.objectOf(PropTypes.any).isRequired, + details: PropTypes.objectOf(PropTypes.string).isRequired, setOpenDetail: PropTypes.func.isRequired, }; diff --git a/source/ui/ActivityItem/components/ActivityItemDetails/styles.js b/source/components/ActivityItem/components/ActivityItemDetails/styles.js similarity index 100% rename from source/ui/ActivityItem/components/ActivityItemDetails/styles.js rename to source/components/ActivityItem/components/ActivityItemDetails/styles.js diff --git a/source/ui/ActivityItem/components/ActivityItemDisplay/index.js b/source/components/ActivityItem/components/ActivityItemDisplay/index.js similarity index 100% rename from source/ui/ActivityItem/components/ActivityItemDisplay/index.js rename to source/components/ActivityItem/components/ActivityItemDisplay/index.js diff --git a/source/ui/ActivityItem/components/ActivityItemDisplay/styles.js b/source/components/ActivityItem/components/ActivityItemDisplay/styles.js similarity index 100% rename from source/ui/ActivityItem/components/ActivityItemDisplay/styles.js rename to source/components/ActivityItem/components/ActivityItemDisplay/styles.js diff --git a/source/ui/ActivityItem/components/SwapIcon/index.jsx b/source/components/ActivityItem/components/SwapIcon/index.jsx similarity index 96% rename from source/ui/ActivityItem/components/SwapIcon/index.jsx rename to source/components/ActivityItem/components/SwapIcon/index.jsx index 485beab2..3985f356 100644 --- a/source/ui/ActivityItem/components/SwapIcon/index.jsx +++ b/source/components/ActivityItem/components/SwapIcon/index.jsx @@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'; import SwapArrowImg from '@assets/icons/swap-arrow.svg'; import UnknownIcon from '@assets/icons/unknown-icon.svg'; import { currencyPropTypes } from '@shared/constants/currencies'; -import { TokenIcon } from '@components'; +import TokenIcon from '../../../TokenIcon'; import useStyles from './styles'; diff --git a/source/ui/ActivityItem/components/SwapIcon/styles.js b/source/components/ActivityItem/components/SwapIcon/styles.js similarity index 100% rename from source/ui/ActivityItem/components/SwapIcon/styles.js rename to source/components/ActivityItem/components/SwapIcon/styles.js diff --git a/source/ui/ActivityItem/components/items/JellyItem.js b/source/components/ActivityItem/components/items/JellyItem.js similarity index 100% rename from source/ui/ActivityItem/components/items/JellyItem.js rename to source/components/ActivityItem/components/items/JellyItem.js diff --git a/source/ui/ActivityItem/components/items/LiquidityItem/components/LiquidityIcon/index.jsx b/source/components/ActivityItem/components/items/LiquidityItem/components/LiquidityIcon/index.jsx similarity index 94% rename from source/ui/ActivityItem/components/items/LiquidityItem/components/LiquidityIcon/index.jsx rename to source/components/ActivityItem/components/items/LiquidityItem/components/LiquidityIcon/index.jsx index 8dffeefb..96367beb 100644 --- a/source/ui/ActivityItem/components/items/LiquidityItem/components/LiquidityIcon/index.jsx +++ b/source/components/ActivityItem/components/items/LiquidityItem/components/LiquidityIcon/index.jsx @@ -3,7 +3,7 @@ import clsx from 'clsx'; import PropTypes from 'prop-types'; import UnknownIcon from '@assets/icons/unknown-icon.svg'; import { currencyPropTypes } from '@shared/constants/currencies'; -import { TokenIcon } from '@components'; +import TokenIcon from '../../../../../../TokenIcon'; import useStyles from './styles'; diff --git a/source/ui/ActivityItem/components/items/LiquidityItem/components/LiquidityIcon/styles.js b/source/components/ActivityItem/components/items/LiquidityItem/components/LiquidityIcon/styles.js similarity index 91% rename from source/ui/ActivityItem/components/items/LiquidityItem/components/LiquidityIcon/styles.js rename to source/components/ActivityItem/components/items/LiquidityItem/components/LiquidityIcon/styles.js index d0d37f6a..d98dce97 100644 --- a/source/ui/ActivityItem/components/items/LiquidityItem/components/LiquidityIcon/styles.js +++ b/source/components/ActivityItem/components/items/LiquidityItem/components/LiquidityIcon/styles.js @@ -1,5 +1,5 @@ import { makeStyles } from '@material-ui/core/styles'; -import { SHADOW_1 } from '@shared/styles/shadows'; +import SHADOW_1 from '@shared/styles/shadows'; export default makeStyles((theme) => ({ root: { diff --git a/source/ui/ActivityItem/components/items/LiquidityItem/components/TokenAmounts.jsx b/source/components/ActivityItem/components/items/LiquidityItem/components/TokenAmounts.jsx similarity index 93% rename from source/ui/ActivityItem/components/items/LiquidityItem/components/TokenAmounts.jsx rename to source/components/ActivityItem/components/items/LiquidityItem/components/TokenAmounts.jsx index 13f330aa..f2401f67 100644 --- a/source/ui/ActivityItem/components/items/LiquidityItem/components/TokenAmounts.jsx +++ b/source/components/ActivityItem/components/items/LiquidityItem/components/TokenAmounts.jsx @@ -19,6 +19,7 @@ const TokenAmounts = ({ token0, token1 }) => { value={amount0} displayType="text" thousandSeparator="," + // eslint-disable-next-line react/prop-types suffix={` ${token0?.token?.details?.symbol}`} decimalScale={3} /> @@ -27,6 +28,7 @@ const TokenAmounts = ({ token0, token1 }) => { value={amount1} displayType="text" thousandSeparator="," + // eslint-disable-next-line react/prop-types suffix={` ${token1?.token?.details?.symbol}`} decimalScale={3} /> diff --git a/source/ui/ActivityItem/components/items/LiquidityItem/index.js b/source/components/ActivityItem/components/items/LiquidityItem/index.js similarity index 97% rename from source/ui/ActivityItem/components/items/LiquidityItem/index.js rename to source/components/ActivityItem/components/items/LiquidityItem/index.js index b3175eee..b8d2805f 100644 --- a/source/ui/ActivityItem/components/items/LiquidityItem/index.js +++ b/source/components/ActivityItem/components/items/LiquidityItem/index.js @@ -62,7 +62,7 @@ LiquidityItem.defaultProps = { LiquidityItem.propTypes = { type: PropTypes.number, - details: PropTypes.objectOf(PropTypes.any), + details: PropTypes.objectOf(PropTypes.string), date: PropTypes.oneOfType([ PropTypes.instanceOf(Date), PropTypes.string, diff --git a/source/ui/ActivityItem/components/items/NFTItem.js b/source/components/ActivityItem/components/items/NFTItem.js similarity index 97% rename from source/ui/ActivityItem/components/items/NFTItem.js rename to source/components/ActivityItem/components/items/NFTItem.js index 15667634..fbaf9846 100644 --- a/source/ui/ActivityItem/components/items/NFTItem.js +++ b/source/components/ActivityItem/components/items/NFTItem.js @@ -71,7 +71,7 @@ NFTItem.defaultProps = { NFTItem.propTypes = { type: PropTypes.number, canisterId: PropTypes.string, - details: PropTypes.objectOf(PropTypes.any), + details: PropTypes.objectOf(PropTypes.string), to: PropTypes.string, from: PropTypes.string, logo: PropTypes.string.isRequired, diff --git a/source/ui/ActivityItem/components/items/PlugItem.js b/source/components/ActivityItem/components/items/PlugItem.js similarity index 100% rename from source/ui/ActivityItem/components/items/PlugItem.js rename to source/components/ActivityItem/components/items/PlugItem.js diff --git a/source/ui/ActivityItem/components/items/SwapItem.js b/source/components/ActivityItem/components/items/SwapItem.js similarity index 96% rename from source/ui/ActivityItem/components/items/SwapItem.js rename to source/components/ActivityItem/components/items/SwapItem.js index 013189c9..fae1c498 100644 --- a/source/ui/ActivityItem/components/items/SwapItem.js +++ b/source/components/ActivityItem/components/items/SwapItem.js @@ -76,7 +76,7 @@ SwapItem.defaultProps = { }; SwapItem.propTypes = { - details: PropTypes.objectOf(PropTypes.any), + details: PropTypes.objectOf(PropTypes.string), // eslint-disable-line react/forbid-prop-types date: PropTypes.oneOfType([ PropTypes.instanceOf(Date), PropTypes.string, diff --git a/source/ui/ActivityItem/components/items/TokenItem.js b/source/components/ActivityItem/components/items/TokenItem.js similarity index 100% rename from source/ui/ActivityItem/components/items/TokenItem.js rename to source/components/ActivityItem/components/items/TokenItem.js diff --git a/source/ui/ActivityItem/components/items/styles.js b/source/components/ActivityItem/components/items/styles.js similarity index 100% rename from source/ui/ActivityItem/components/items/styles.js rename to source/components/ActivityItem/components/items/styles.js diff --git a/source/ui/ActivityItem/index.jsx b/source/components/ActivityItem/index.jsx similarity index 100% rename from source/ui/ActivityItem/index.jsx rename to source/components/ActivityItem/index.jsx diff --git a/source/ui/ActivityItem/styles.js b/source/components/ActivityItem/styles.js similarity index 100% rename from source/ui/ActivityItem/styles.js rename to source/components/ActivityItem/styles.js diff --git a/source/ui/ActivityItem/utils.js b/source/components/ActivityItem/utils.js similarity index 100% rename from source/ui/ActivityItem/utils.js rename to source/components/ActivityItem/utils.js diff --git a/source/components/AddressTranslation/components/AddressRow/index.jsx b/source/components/AddressTranslation/components/AddressRow/index.jsx index d12c11ba..2763ba38 100644 --- a/source/components/AddressTranslation/components/AddressRow/index.jsx +++ b/source/components/AddressTranslation/components/AddressRow/index.jsx @@ -6,11 +6,11 @@ import extension from 'extensionizer'; import { Info } from 'react-feather'; import clsx from 'clsx'; -import { Dialog } from '@ui'; import { ADDRESS_TYPES } from '@shared/constants/addresses'; import { getAccountDashboardURL } from '@shared/constants/urls'; import ArrowUpRight from '@assets/icons/arrow-up-right.png'; import shortAddress from '@shared/utils/short-address'; +import Dialog from '../../../Dialog'; import useStyles from './styles'; import TranslationModal from '../TranslationModal'; diff --git a/source/components/AddressTranslation/components/TranslationModal/index.jsx b/source/components/AddressTranslation/components/TranslationModal/index.jsx index edc392c6..5e4a6f3a 100644 --- a/source/components/AddressTranslation/components/TranslationModal/index.jsx +++ b/source/components/AddressTranslation/components/TranslationModal/index.jsx @@ -5,8 +5,9 @@ import { useTranslation } from 'react-i18next'; import extension from 'extensionizer'; import clsx from 'clsx'; -import { Button, LinkButton } from '@ui'; import { icnsUrl } from '@shared/constants/urls'; +import Button from '../../../Button'; +import LinkButton from '../../../LinkButton'; import useStyles from './styles'; diff --git a/source/components/AddressTranslation/index.jsx b/source/components/AddressTranslation/index.jsx index 8db909a1..89fae5bd 100644 --- a/source/components/AddressTranslation/index.jsx +++ b/source/components/AddressTranslation/index.jsx @@ -1,10 +1,10 @@ import React from 'react'; -import { Card } from '@ui'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; import { Typography } from '@material-ui/core'; import ArrowImg from '@assets/icons/send-arrow.svg'; +import Card from '../Card'; import useStyles from './styles'; import AddressRow from './components/AddressRow'; diff --git a/source/ui/Alert/alert.stories.jsx b/source/components/Alert/alert.stories.jsx similarity index 100% rename from source/ui/Alert/alert.stories.jsx rename to source/components/Alert/alert.stories.jsx diff --git a/source/ui/Alert/index.jsx b/source/components/Alert/index.jsx similarity index 100% rename from source/ui/Alert/index.jsx rename to source/components/Alert/index.jsx diff --git a/source/ui/Alert/styles.js b/source/components/Alert/styles.js similarity index 100% rename from source/ui/Alert/styles.js rename to source/components/Alert/styles.js diff --git a/source/ui/AppItem/app-item.stories.jsx b/source/components/AppItem/app-item.stories.jsx similarity index 100% rename from source/ui/AppItem/app-item.stories.jsx rename to source/components/AppItem/app-item.stories.jsx diff --git a/source/ui/AppItem/index.jsx b/source/components/AppItem/index.jsx similarity index 100% rename from source/ui/AppItem/index.jsx rename to source/components/AppItem/index.jsx diff --git a/source/ui/AppItem/styles.js b/source/components/AppItem/styles.js similarity index 100% rename from source/ui/AppItem/styles.js rename to source/components/AppItem/styles.js diff --git a/source/components/Apps/index.jsx b/source/components/Apps/index.jsx index 0c7e7e03..20ee8863 100644 --- a/source/components/Apps/index.jsx +++ b/source/components/Apps/index.jsx @@ -1,13 +1,14 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import Typography from '@material-ui/core/Typography'; -import { - AppItem, Dialog, CanisterInfoContainer, CanisterInfoItem, -} from '@ui'; import ThinkingEmoji from '@assets/icons/thinking-emoji.svg'; import { useApps } from '@hooks'; import ActionDialog from '../ActionDialog'; +import AppItem from '../AppItem'; +import Dialog from '../Dialog'; +import CanisterInfoContainer from '../CanisterInfo/components/Container'; +import CanisterInfoItem from '../CanisterInfo/components/Item'; import useStyles from './styles'; import EmptyState from './components/EmptyState'; diff --git a/source/ui/AssetFormat/index.jsx b/source/components/AssetFormat/index.jsx similarity index 100% rename from source/ui/AssetFormat/index.jsx rename to source/components/AssetFormat/index.jsx diff --git a/source/ui/AssetItem/asset-item.stories.jsx b/source/components/AssetItem/asset-item.stories.jsx similarity index 100% rename from source/ui/AssetItem/asset-item.stories.jsx rename to source/components/AssetItem/asset-item.stories.jsx diff --git a/source/ui/AssetItem/index.jsx b/source/components/AssetItem/index.jsx similarity index 94% rename from source/ui/AssetItem/index.jsx rename to source/components/AssetItem/index.jsx index e16247e3..20f9e257 100644 --- a/source/ui/AssetItem/index.jsx +++ b/source/components/AssetItem/index.jsx @@ -8,8 +8,8 @@ import clsx from 'clsx'; import Skeleton from 'react-loading-skeleton'; import 'react-loading-skeleton/dist/skeleton.css'; -import { TokenIcon } from '@components'; import RefreshIcon from '@assets/icons/blue-refresh.png'; +import TokenIcon from '../TokenIcon'; import useStyles from './styles'; @@ -17,17 +17,14 @@ const AssetItem = ({ updateToken, logo, name, amount, value, symbol, loading, failed, assetNameTestId, }) => { const classes = useStyles(); - const [fetchLoading, setFetchLoading] = useState(false); const { t } = useTranslation(); const { currentNetwork, usingMainnet } = useSelector((state) => state.network); const handleFetchAssets = async () => { // Avoid calling multiple times - if (fetchLoading) return; + if (loading) return; - setFetchLoading(true); await updateToken(); - setFetchLoading(false); }; const ledgerNotSpecified = !usingMainnet && !currentNetwork?.ledgerCanisterId; return ( @@ -79,7 +76,6 @@ const AssetItem = ({ : ()} )} - ); diff --git a/source/ui/AssetItem/styles.js b/source/components/AssetItem/styles.js similarity index 100% rename from source/ui/AssetItem/styles.js rename to source/components/AssetItem/styles.js diff --git a/source/ui/Badge/index.jsx b/source/components/Badge/index.jsx similarity index 100% rename from source/ui/Badge/index.jsx rename to source/components/Badge/index.jsx diff --git a/source/ui/Badge/styles.js b/source/components/Badge/styles.js similarity index 100% rename from source/ui/Badge/styles.js rename to source/components/Badge/styles.js diff --git a/source/ui/Button/button.stories.jsx b/source/components/Button/button.stories.jsx similarity index 100% rename from source/ui/Button/button.stories.jsx rename to source/components/Button/button.stories.jsx diff --git a/source/ui/Button/index.jsx b/source/components/Button/index.jsx similarity index 97% rename from source/ui/Button/index.jsx rename to source/components/Button/index.jsx index d4cc437d..2667aaa4 100644 --- a/source/ui/Button/index.jsx +++ b/source/components/Button/index.jsx @@ -72,6 +72,6 @@ Button.propTypes = { loading: PropTypes.bool, disabled: PropTypes.bool, fullWidth: PropTypes.bool, - wrapperStyle: PropTypes.object, + wrapperStyle: PropTypes.objectOf(PropTypes.string), buttonTestId: PropTypes.string, }; diff --git a/source/ui/Button/styles.js b/source/components/Button/styles.js similarity index 100% rename from source/ui/Button/styles.js rename to source/components/Button/styles.js diff --git a/source/ui/CanisterInfo/components/Container/index.jsx b/source/components/CanisterInfo/components/Container/index.jsx similarity index 100% rename from source/ui/CanisterInfo/components/Container/index.jsx rename to source/components/CanisterInfo/components/Container/index.jsx diff --git a/source/ui/CanisterInfo/components/Container/styles.js b/source/components/CanisterInfo/components/Container/styles.js similarity index 100% rename from source/ui/CanisterInfo/components/Container/styles.js rename to source/components/CanisterInfo/components/Container/styles.js diff --git a/source/ui/CanisterInfo/components/Item/index.jsx b/source/components/CanisterInfo/components/Item/index.jsx similarity index 100% rename from source/ui/CanisterInfo/components/Item/index.jsx rename to source/components/CanisterInfo/components/Item/index.jsx diff --git a/source/ui/CanisterInfo/components/Item/styles.js b/source/components/CanisterInfo/components/Item/styles.js similarity index 100% rename from source/ui/CanisterInfo/components/Item/styles.js rename to source/components/CanisterInfo/components/Item/styles.js diff --git a/source/ui/Card/index.jsx b/source/components/Card/index.jsx similarity index 100% rename from source/ui/Card/index.jsx rename to source/components/Card/index.jsx diff --git a/source/ui/Card/styles.js b/source/components/Card/styles.js similarity index 100% rename from source/ui/Card/styles.js rename to source/components/Card/styles.js diff --git a/source/ui/Checkbox/index.jsx b/source/components/Checkbox/index.jsx similarity index 100% rename from source/ui/Checkbox/index.jsx rename to source/components/Checkbox/index.jsx diff --git a/source/ui/Checkbox/styles.js b/source/components/Checkbox/styles.js similarity index 100% rename from source/ui/Checkbox/styles.js rename to source/components/Checkbox/styles.js diff --git a/source/ui/CodeBox/codebox.stories.jsx b/source/components/CodeBox/codebox.stories.jsx similarity index 100% rename from source/ui/CodeBox/codebox.stories.jsx rename to source/components/CodeBox/codebox.stories.jsx diff --git a/source/ui/CodeBox/index.jsx b/source/components/CodeBox/index.jsx similarity index 100% rename from source/ui/CodeBox/index.jsx rename to source/components/CodeBox/index.jsx diff --git a/source/ui/CodeBox/styles.js b/source/components/CodeBox/styles.js similarity index 100% rename from source/ui/CodeBox/styles.js rename to source/components/CodeBox/styles.js diff --git a/source/components/ConnectAccountsModal/components/ConnectAccountItem/index.jsx b/source/components/ConnectAccountsModal/components/ConnectAccountItem/index.jsx index 5f56bb02..0095716e 100644 --- a/source/components/ConnectAccountsModal/components/ConnectAccountItem/index.jsx +++ b/source/components/ConnectAccountsModal/components/ConnectAccountItem/index.jsx @@ -2,9 +2,9 @@ import React from 'react'; import clsx from 'clsx'; import PropTypes from 'prop-types'; -import { Checkbox } from '@ui'; import { Typography } from '@material-ui/core'; import shortAddress from '@shared/utils/short-address'; +import Checkbox from '../../../Checkbox'; import useStyles from './styles'; import UserIcon from '../../../UserIcon'; diff --git a/source/components/ConnectAccountsModal/layout.jsx b/source/components/ConnectAccountsModal/layout.jsx index 3eb85b1f..6090f288 100644 --- a/source/components/ConnectAccountsModal/layout.jsx +++ b/source/components/ConnectAccountsModal/layout.jsx @@ -6,7 +6,7 @@ import { Typography } from '@material-ui/core'; import { getTabURL } from '@shared/utils/chrome-tabs'; import { useScroll } from '@hooks'; -import { Checkbox } from '@ui'; +import Checkbox from '../Checkbox'; import ConnectAccountItem from './components/ConnectAccountItem'; import useStyles from './styles'; diff --git a/source/components/ConnectionStatus/components/ConnectionControls/index.jsx b/source/components/ConnectionStatus/components/ConnectionControls/index.jsx index f126d0ae..41c2418b 100644 --- a/source/components/ConnectionStatus/components/ConnectionControls/index.jsx +++ b/source/components/ConnectionStatus/components/ConnectionControls/index.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { capitalize } from '@material-ui/core'; import { getTabURL } from '@shared/utils/chrome-tabs'; @@ -30,7 +30,7 @@ const ConnectionControls = ({ disableNavigation, hidden }) => { const icpPrice = useICPPrice(); const dispatch = useDispatch(); const { getContacts } = useContacts(); - const { navigator } = disableNavigation ? {} : useRouter(); + const { tabIndex } = disableNavigation ? {} : useRouter(); const { principalId, walletNumber, @@ -43,7 +43,20 @@ const ConnectionControls = ({ disableNavigation, hidden }) => { const [selectorOpen, setSelectorOpen] = useState(false); const [connected, setConnected] = useState(false); - const loading = assetsLoading || transactionsLoading || collectionsLoading; + const isTabInfoLoading = useMemo(() => { + switch (tabIndex) { + case TABS.TOKENS: + return assetsLoading; + case TABS.NFTS: + return collectionsLoading; + case TABS.ACTIVITY: + return transactionsLoading; + default: + return assetsLoading || transactionsLoading || collectionsLoading; + } + }, [tabIndex, assetsLoading, transactionsLoading, collectionsLoading]); + + const refreshButtonInactive = isTabInfoLoading || disableNavigation; extensionizer.tabs.query({ active: true }, (tabs) => { const url = getTabURL(tabs?.[0]); @@ -54,45 +67,62 @@ const ConnectionControls = ({ disableNavigation, hidden }) => { }); }); - const refreshWallet = () => { - if (disableNavigation || loading) return; - navigator?.navigate?.('home', TABS.TOKENS); + const loadAssets = () => { + dispatch(setAssetsLoading(true)); + sendMessage( + { + type: HANDLER_TYPES.GET_ASSETS, + params: { refresh: true }, + }, + (keyringAssets) => { + dispatch(setAssets({ keyringAssets, icpPrice })); + dispatch(setAssetsLoading(false)); + }, + ); + }; - if (icpPrice) { - // Contacts - getContacts(true); + const loadTransactions = () => { + dispatch(setTransactionsLoading(true)); + sendMessage( + { + type: HANDLER_TYPES.GET_TRANSACTIONS, + params: {}, + }, + (trxs) => { + dispatch(setTransactions({ ...trxs, icpPrice, useICNS })); + dispatch(setTransactionsLoading(false)); + }, + ); + }; - // NFTS - dispatch(setCollectionsLoading(true)); - sendMessage({ + const loadCollections = () => { + dispatch(setCollectionsLoading(true)); + sendMessage( + { type: HANDLER_TYPES.GET_NFTS, params: { refresh: true }, - }, (nftCollections) => { + }, + (nftCollections) => { if (nftCollections?.length) { - dispatch(setCollections({ collections: nftCollections, principalId })); + dispatch( + setCollections({ collections: nftCollections, principalId }), + ); } dispatch(setCollectionsLoading(false)); - }); + }, + ); + }; - // Transactions - dispatch(setTransactionsLoading(true)); - sendMessage({ - type: HANDLER_TYPES.GET_TRANSACTIONS, - params: {}, - }, (trxs) => { - dispatch(setTransactions({ ...trxs, icpPrice, useICNS })); - dispatch(setTransactionsLoading(false)); - }); + const refreshWallet = () => { + if (refreshButtonInactive) return; - // Tokens - dispatch(setAssetsLoading(true)); - sendMessage({ - type: HANDLER_TYPES.GET_ASSETS, - params: { refresh: true }, - }, (keyringAssets) => { - dispatch(setAssets({ keyringAssets, icpPrice })); - dispatch(setAssetsLoading(false)); - }); + if (icpPrice) { + // Contacts + getContacts(true); + + loadAssets(); + loadCollections(); + loadTransactions(); } }; @@ -104,25 +134,43 @@ const ConnectionControls = ({ disableNavigation, hidden }) => { return ( !hidden && (
-
setSelectorOpen(true)}> -
+
setSelectorOpen(true)} + > +
- {capitalize(currentNetwork?.name || 'Mainnet')} + + {capitalize(currentNetwork?.name || 'Mainnet')} +
-
- reload -
+ reload + {selectorOpen && ( - setSelectorOpen(false)} refreshWallet={refreshWallet} /> + setSelectorOpen(false)} + refreshWallet={refreshWallet} + /> )}
) diff --git a/source/components/ConnectionStatus/components/ConnectionControls/styles.js b/source/components/ConnectionStatus/components/ConnectionControls/styles.js index 403a16e9..e97b5593 100644 --- a/source/components/ConnectionStatus/components/ConnectionControls/styles.js +++ b/source/components/ConnectionStatus/components/ConnectionControls/styles.js @@ -6,6 +6,14 @@ const flex = { }; export default makeStyles(() => ({ + '@keyframes spin': { + '0%': { + transform: 'rotate(0deg)', + }, + '100%': { + transform: 'rotate(360deg)', + }, + }, root: { height: 40, width: '100%', @@ -41,6 +49,9 @@ export default makeStyles(() => ({ width: 14, height: 20, }, + reloadIconLoading: { + animation: '$spin 1s linear infinite', + }, network: { maxWidth: 70, whiteSpace: 'nowrap', @@ -49,6 +60,7 @@ export default makeStyles(() => ({ cursor: 'pointer', }, reloadIconContainer: { + all: 'unset', ...flex, borderRadius: '50%', justifyContent: 'center', @@ -56,6 +68,10 @@ export default makeStyles(() => ({ height: 30, background: 'white', cursor: 'pointer', + '&:disabled': { + opacity: 0.5, + cursor: 'not-allowed', + }, }, statusDot: { width: 8, @@ -68,14 +84,7 @@ export default makeStyles(() => ({ opacity: 0.5, pointer: 'arrow', }, - '@keyframes rotate': { - '0%': { - transform: 'rotate(0deg)', - }, - '100%': { - transform: 'rotate(360deg)', - }, - }, + loading: { animation: '$rotate 1s infinite linear', }, diff --git a/source/components/ConnectionStatus/components/NetworkSelector/index.jsx b/source/components/ConnectionStatus/components/NetworkSelector/index.jsx index 0e1e977b..edfcc1a5 100644 --- a/source/components/ConnectionStatus/components/NetworkSelector/index.jsx +++ b/source/components/ConnectionStatus/components/NetworkSelector/index.jsx @@ -4,8 +4,8 @@ import { useSelector } from 'react-redux'; import { useTranslation } from 'react-i18next'; import { Typography } from '@material-ui/core'; -import { Button } from '@ui'; import { useRouter } from '@components/Router'; +import Button from '../../../Button'; import NetworkCard from '../NetworkCard'; import useStyles from './styles'; diff --git a/source/components/ConnectionStatus/index.jsx b/source/components/ConnectionStatus/index.jsx index aec77e73..209c2ffd 100644 --- a/source/components/ConnectionStatus/index.jsx +++ b/source/components/ConnectionStatus/index.jsx @@ -67,7 +67,8 @@ const ConnectionStatus = ({ incStatus = null, disableNavigation, hideNetwork }) {icon} + className={clsx(hideNetwork && classes.fullWidth, classes.bannerText)} + > {t(label, { version: browser.runtime.getManifest().version })} { diff --git a/source/components/ConnectionStatus/styles.js b/source/components/ConnectionStatus/styles.js index e0a94711..384acb8a 100644 --- a/source/components/ConnectionStatus/styles.js +++ b/source/components/ConnectionStatus/styles.js @@ -19,6 +19,9 @@ export default makeStyles((theme) => ({ textAlign: 'center', }, fullWidth, + bannerText: { + fontWeight: 'bold', + }, active: { background: theme.palette.success.main, }, diff --git a/source/components/ContactItem/index.jsx b/source/components/ContactItem/index.jsx index d705a69d..1c5f5038 100644 --- a/source/components/ContactItem/index.jsx +++ b/source/components/ContactItem/index.jsx @@ -50,7 +50,7 @@ const ContactItem = ({ }; ContactItem.propTypes = { - contact: PropTypes.object.isRequired, + contact: PropTypes.objectOf(PropTypes.string).isRequired, handleClick: PropTypes.func, handleDelete: PropTypes.func, handleCancel: PropTypes.func, diff --git a/source/ui/Container/index.jsx b/source/components/Container/index.jsx similarity index 100% rename from source/ui/Container/index.jsx rename to source/components/Container/index.jsx diff --git a/source/ui/Container/styles.js b/source/components/Container/styles.js similarity index 100% rename from source/ui/Container/styles.js rename to source/components/Container/styles.js diff --git a/source/ui/DataDisplay/index.jsx b/source/components/DataDisplay/index.jsx similarity index 100% rename from source/ui/DataDisplay/index.jsx rename to source/components/DataDisplay/index.jsx diff --git a/source/ui/DataDisplay/styles.js b/source/components/DataDisplay/styles.js similarity index 100% rename from source/ui/DataDisplay/styles.js rename to source/components/DataDisplay/styles.js diff --git a/source/ui/Dialog/index.jsx b/source/components/Dialog/index.jsx similarity index 100% rename from source/ui/Dialog/index.jsx rename to source/components/Dialog/index.jsx diff --git a/source/ui/Dialog/styles.js b/source/components/Dialog/styles.js similarity index 100% rename from source/ui/Dialog/styles.js rename to source/components/Dialog/styles.js diff --git a/source/components/DisplayBox/index.jsx b/source/components/DisplayBox/index.jsx index d5751037..2e40ca6c 100644 --- a/source/components/DisplayBox/index.jsx +++ b/source/components/DisplayBox/index.jsx @@ -30,8 +30,8 @@ const DisplayBox = ({ DisplayBox.propTypes = { title: PropTypes.string.isRequired, subtitle: PropTypes.string.isRequired, - img: PropTypes.string | PropTypes.node, -} + img: PropTypes.string || PropTypes.node, +}; DisplayBox.defaultProps = { img: '', diff --git a/source/ui/FormInput/form-input.stories.jsx b/source/components/FormInput/form-input.stories.jsx similarity index 100% rename from source/ui/FormInput/form-input.stories.jsx rename to source/components/FormInput/form-input.stories.jsx diff --git a/source/ui/FormInput/index.jsx b/source/components/FormInput/index.jsx similarity index 100% rename from source/ui/FormInput/index.jsx rename to source/components/FormInput/index.jsx diff --git a/source/ui/FormInput/styles.js b/source/components/FormInput/styles.js similarity index 100% rename from source/ui/FormInput/styles.js rename to source/components/FormInput/styles.js diff --git a/source/ui/FormItem/index.jsx b/source/components/FormItem/index.jsx similarity index 100% rename from source/ui/FormItem/index.jsx rename to source/components/FormItem/index.jsx diff --git a/source/ui/FormItem/styles.js b/source/components/FormItem/styles.js similarity index 100% rename from source/ui/FormItem/styles.js rename to source/components/FormItem/styles.js diff --git a/source/ui/FullscreenContainer/fullscreen-container.stories.jsx b/source/components/FullscreenContainer/fullscreen-container.stories.jsx similarity index 100% rename from source/ui/FullscreenContainer/fullscreen-container.stories.jsx rename to source/components/FullscreenContainer/fullscreen-container.stories.jsx diff --git a/source/ui/FullscreenContainer/index.jsx b/source/components/FullscreenContainer/index.jsx similarity index 94% rename from source/ui/FullscreenContainer/index.jsx rename to source/components/FullscreenContainer/index.jsx index 96617d11..f50994de 100644 --- a/source/ui/FullscreenContainer/index.jsx +++ b/source/components/FullscreenContainer/index.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Container from '@material-ui/core/Container'; -import { MadeBy } from '@components'; +import MadeBy from '../MadeBy'; import useStyles from './styles'; const FullscreenContainer = ({ children, maxWidth }) => { diff --git a/source/ui/FullscreenContainer/styles.js b/source/components/FullscreenContainer/styles.js similarity index 100% rename from source/ui/FullscreenContainer/styles.js rename to source/components/FullscreenContainer/styles.js diff --git a/source/ui/GenericIcon/generic-icon.stories.jsx b/source/components/GenericIcon/generic-icon.stories.jsx similarity index 100% rename from source/ui/GenericIcon/generic-icon.stories.jsx rename to source/components/GenericIcon/generic-icon.stories.jsx diff --git a/source/ui/GenericIcon/index.jsx b/source/components/GenericIcon/index.jsx similarity index 95% rename from source/ui/GenericIcon/index.jsx rename to source/components/GenericIcon/index.jsx index 24bf43ec..168cd99d 100644 --- a/source/ui/GenericIcon/index.jsx +++ b/source/components/GenericIcon/index.jsx @@ -40,5 +40,5 @@ GenericIcon.defaultProps = { GenericIcon.propTypes = { image: PropTypes.string.isRequired, type: PropTypes.string, - style: PropTypes.object, + style: PropTypes.objectOf(PropTypes.string), }; diff --git a/source/ui/GenericIcon/styles.js b/source/components/GenericIcon/styles.js similarity index 100% rename from source/ui/GenericIcon/styles.js rename to source/components/GenericIcon/styles.js diff --git a/source/components/GroupedDisplay/index.jsx b/source/components/GroupedDisplay/index.jsx deleted file mode 100644 index 3883ba8f..00000000 --- a/source/components/GroupedDisplay/index.jsx +++ /dev/null @@ -1,65 +0,0 @@ -import React, { useState } from 'react'; -import PropTypes from 'prop-types'; -import { Typography } from '@material-ui/core'; -import { useTranslation } from 'react-i18next'; -import ActionDialog from '../ActionDialog'; -import ContactItem from '../ContactItem'; -import useStyles from './styles'; - -const GroupedDisplay = ({ data, ItemComponent, itemProps }) => { - const { t } = useTranslation(); - - const [open, setOpen] = useState(false); - const classes = useStyles(); - - return ( -
- { - [...data].sort((a, b) => a.letter.localeCompare(b.letter)).map((group) => ( - <> -
- {group.letter} -
- { - [...item.contacts].sort((a, b) => a.name.localeCompare(b.name)).map((item) => ( - - )) - } - - )) - } -
- { - open - && ( - {t('contacts.deleteText')} {selectedContact.name}?} - confirmText={t('contacts.deleteButton')} - buttonVariant="danger" - onClick={() => { handleRemoveContact(selectedContact); setOpen(false); }} - onClose={() => setOpen(false)} - submitButtonProps={{ - 'data-testid': 'confirm-deleting-button', - }} - /> - ) - } -
- ); -}; - -export default GroupedDisplay; - -GroupedDisplay.propTypes = { - data: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.string)).isRequired, - handleRemoveContact: PropTypes.func.isRequired, - onClick: PropTypes.func, - selectable: PropTypes.bool, -}; - -GroupedDisplay.defaultProps = { - onClick: null, - selectable: false, -}; diff --git a/source/components/GroupedDisplay/styles.js b/source/components/GroupedDisplay/styles.js deleted file mode 100644 index e69de29b..00000000 diff --git a/source/ui/Header/index.jsx b/source/components/Header/index.jsx similarity index 100% rename from source/ui/Header/index.jsx rename to source/components/Header/index.jsx diff --git a/source/ui/Header/styles.js b/source/components/Header/styles.js similarity index 100% rename from source/ui/Header/styles.js rename to source/components/Header/styles.js diff --git a/source/ui/HoverAnimation/hover-animation.stories.jsx b/source/components/HoverAnimation/hover-animation.stories.jsx similarity index 100% rename from source/ui/HoverAnimation/hover-animation.stories.jsx rename to source/components/HoverAnimation/hover-animation.stories.jsx diff --git a/source/ui/HoverAnimation/index.jsx b/source/components/HoverAnimation/index.jsx similarity index 100% rename from source/ui/HoverAnimation/index.jsx rename to source/components/HoverAnimation/index.jsx diff --git a/source/ui/HoverAnimation/styles.js b/source/components/HoverAnimation/styles.js similarity index 100% rename from source/ui/HoverAnimation/styles.js rename to source/components/HoverAnimation/styles.js diff --git a/source/ui/ICNSDisplay/index.jsx b/source/components/ICNSDisplay/index.jsx similarity index 100% rename from source/ui/ICNSDisplay/index.jsx rename to source/components/ICNSDisplay/index.jsx diff --git a/source/ui/ICNSDisplay/styles.js b/source/components/ICNSDisplay/styles.js similarity index 100% rename from source/ui/ICNSDisplay/styles.js rename to source/components/ICNSDisplay/styles.js diff --git a/source/components/IDInput/index.jsx b/source/components/IDInput/index.jsx index f37621ef..f33d7246 100644 --- a/source/components/IDInput/index.jsx +++ b/source/components/IDInput/index.jsx @@ -5,9 +5,7 @@ import MInputBase from '@material-ui/core/InputBase'; import BookIcon from '@assets/icons/notebook.svg'; import clsx from 'clsx'; import { useTranslation } from 'react-i18next'; -import { - Button, Dialog, FormItem, InputBase, TextInput, -} from '@ui'; + import { CircularProgress, Grid } from '@material-ui/core'; import { getRandomEmoji } from '@shared/constants/emojis'; import { addContact as addContactAction } from '@redux/contacts'; @@ -16,6 +14,11 @@ import { useContacts } from '@hooks'; import ActionDialog from '../ActionDialog'; import ContactItem from '../ContactItem'; import ContactList from '../ContactList'; +import Button from '../Button'; +import Dialog from '../Dialog'; +import FormItem from '../FormItem'; +import InputBase from '../InputBase'; +import TextInput from '../TextInput'; import useStyles from './styles'; const IDInput = ({ diff --git a/source/ui/IncomingAction/index.jsx b/source/components/IncomingAction/index.jsx similarity index 100% rename from source/ui/IncomingAction/index.jsx rename to source/components/IncomingAction/index.jsx diff --git a/source/ui/IncomingAction/styles.js b/source/components/IncomingAction/styles.js similarity index 100% rename from source/ui/IncomingAction/styles.js rename to source/components/IncomingAction/styles.js diff --git a/source/ui/InfoRow/index.jsx b/source/components/InfoRow/index.jsx similarity index 100% rename from source/ui/InfoRow/index.jsx rename to source/components/InfoRow/index.jsx diff --git a/source/ui/InfoRow/info-row.stories.jsx b/source/components/InfoRow/info-row.stories.jsx similarity index 100% rename from source/ui/InfoRow/info-row.stories.jsx rename to source/components/InfoRow/info-row.stories.jsx diff --git a/source/ui/InfoRow/styles.js b/source/components/InfoRow/styles.js similarity index 100% rename from source/ui/InfoRow/styles.js rename to source/components/InfoRow/styles.js diff --git a/source/ui/InputBase/index.jsx b/source/components/InputBase/index.jsx similarity index 100% rename from source/ui/InputBase/index.jsx rename to source/components/InputBase/index.jsx diff --git a/source/ui/InputBase/styles.js b/source/components/InputBase/styles.js similarity index 100% rename from source/ui/InputBase/styles.js rename to source/components/InputBase/styles.js diff --git a/source/ui/LinkButton/index.jsx b/source/components/LinkButton/index.jsx similarity index 100% rename from source/ui/LinkButton/index.jsx rename to source/components/LinkButton/index.jsx diff --git a/source/ui/LinkButton/link-button.stories.jsx b/source/components/LinkButton/link-button.stories.jsx similarity index 100% rename from source/ui/LinkButton/link-button.stories.jsx rename to source/components/LinkButton/link-button.stories.jsx diff --git a/source/ui/LinkButton/styles.js b/source/components/LinkButton/styles.js similarity index 100% rename from source/ui/LinkButton/styles.js rename to source/components/LinkButton/styles.js diff --git a/source/ui/ListItem/index.jsx b/source/components/ListItem/index.jsx similarity index 100% rename from source/ui/ListItem/index.jsx rename to source/components/ListItem/index.jsx diff --git a/source/ui/ListItem/styles.js b/source/components/ListItem/styles.js similarity index 100% rename from source/ui/ListItem/styles.js rename to source/components/ListItem/styles.js diff --git a/source/ui/MenuItem/index.jsx b/source/components/MenuItem/index.jsx similarity index 97% rename from source/ui/MenuItem/index.jsx rename to source/components/MenuItem/index.jsx index 4282ec12..e1c0aaa5 100644 --- a/source/ui/MenuItem/index.jsx +++ b/source/components/MenuItem/index.jsx @@ -4,7 +4,7 @@ import clsx from 'clsx'; import MuiMenuItem from '@material-ui/core/MenuItem'; import ListItemIcon from '@material-ui/core/ListItemIcon'; import Typography from '@material-ui/core/Typography'; -import { TokenIcon } from '@components'; +import TokenIcon from '../TokenIcon'; import useStyles from './styles'; const MenuItem = ({ @@ -109,4 +109,5 @@ MenuItem.propTypes = { symbol: PropTypes.string, accountNameTestId: PropTypes.string, itemNameTestId: PropTypes.string, + image: PropTypes.string.isRequired, }; diff --git a/source/ui/MenuItem/menu-item.stories.jsx b/source/components/MenuItem/menu-item.stories.jsx similarity index 100% rename from source/ui/MenuItem/menu-item.stories.jsx rename to source/components/MenuItem/menu-item.stories.jsx diff --git a/source/ui/MenuItem/styles.js b/source/components/MenuItem/styles.js similarity index 100% rename from source/ui/MenuItem/styles.js rename to source/components/MenuItem/styles.js diff --git a/source/ui/MenuItemDetailed/index.jsx b/source/components/MenuItemDetailed/index.jsx similarity index 100% rename from source/ui/MenuItemDetailed/index.jsx rename to source/components/MenuItemDetailed/index.jsx diff --git a/source/ui/MenuItemDetailed/menu-item-detailed.stories.jsx b/source/components/MenuItemDetailed/menu-item-detailed.stories.jsx similarity index 100% rename from source/ui/MenuItemDetailed/menu-item-detailed.stories.jsx rename to source/components/MenuItemDetailed/menu-item-detailed.stories.jsx diff --git a/source/ui/MenuItemDetailed/styles.js b/source/components/MenuItemDetailed/styles.js similarity index 100% rename from source/ui/MenuItemDetailed/styles.js rename to source/components/MenuItemDetailed/styles.js diff --git a/source/ui/MultiInput/index.jsx b/source/components/MultiInput/index.jsx similarity index 94% rename from source/ui/MultiInput/index.jsx rename to source/components/MultiInput/index.jsx index 7c5acb2f..a4d8cff7 100644 --- a/source/ui/MultiInput/index.jsx +++ b/source/components/MultiInput/index.jsx @@ -6,7 +6,7 @@ import Typography from '@material-ui/core/Typography'; import TextField from '@material-ui/core/TextField'; import IconButton from '@material-ui/core/IconButton'; import ExchangeIcon from '@assets/icons/exchange-arrows.svg'; -import { TokenIcon } from '@components'; +import TokenIcon from '../TokenIcon'; import InputBase from '../InputBase'; import useStyles from './styles'; @@ -128,8 +128,8 @@ MultiInput.propTypes = { onClick: PropTypes.func.isRequired, value: PropTypes.number.isRequired, onChange: PropTypes.func.isRequired, - primaryValue: PropTypes.object.isRequired, - secondaryValue: PropTypes.object.isRequired, + primaryValue: PropTypes.objectOf(PropTypes.string).isRequired, + secondaryValue: PropTypes.objectOf(PropTypes.string).isRequired, conversionPrice: PropTypes.number.isRequired, handleSwapValues: PropTypes.func.isRequired, availableAmount: PropTypes.number.isRequired, @@ -140,7 +140,7 @@ MultiInput.propTypes = { }; NumberFormatCustom.propTypes = { - inputRef: PropTypes.object.isRequired, + inputRef: PropTypes.objectOf(PropTypes.string).isRequired, onChange: PropTypes.func.isRequired, prefix: PropTypes.string.isRequired, suffix: PropTypes.string.isRequired, diff --git a/source/ui/MultiInput/multi-input.stories.jsx b/source/components/MultiInput/multi-input.stories.jsx similarity index 100% rename from source/ui/MultiInput/multi-input.stories.jsx rename to source/components/MultiInput/multi-input.stories.jsx diff --git a/source/ui/MultiInput/styles.js b/source/components/MultiInput/styles.js similarity index 100% rename from source/ui/MultiInput/styles.js rename to source/components/MultiInput/styles.js diff --git a/source/ui/NFTDisplayer/index.jsx b/source/components/NFTDisplayer/index.jsx similarity index 97% rename from source/ui/NFTDisplayer/index.jsx rename to source/components/NFTDisplayer/index.jsx index de74a0b1..6043ffbe 100644 --- a/source/ui/NFTDisplayer/index.jsx +++ b/source/components/NFTDisplayer/index.jsx @@ -30,7 +30,7 @@ const TAG_PROPS = { }; const NFTDisplayer = ({ - url, className, onClick, interactive, defaultTag, nftTestId, + url, className, onClick, interactive, defaultTag, }) => { const classes = useStyles(); const [loading, setLoading] = useState(true); diff --git a/source/ui/NFTDisplayer/styles.js b/source/components/NFTDisplayer/styles.js similarity index 100% rename from source/ui/NFTDisplayer/styles.js rename to source/components/NFTDisplayer/styles.js diff --git a/source/components/NFTs/components/NFTCollection/index.jsx b/source/components/NFTs/components/NFTCollection/index.jsx index bb56c4af..af503542 100644 --- a/source/components/NFTs/components/NFTCollection/index.jsx +++ b/source/components/NFTs/components/NFTCollection/index.jsx @@ -9,8 +9,9 @@ import { ChevronDown } from 'react-feather'; import { shortICNSName } from '@shared/services/ICNS'; import { useRouter } from '@components/Router'; import { setSelectedNft } from '@redux/nfts'; -import { NFTDisplayer, ICNSDisplay } from '@ui'; import { NFT_COLLECTION_DEFAULT_TYPES } from '@shared/constants/nft'; +import NFTDisplayer from '../../../NFTDisplayer'; +import ICNSDisplay from '../../../ICNSDisplay'; import useStyles from './styles'; diff --git a/source/components/NavBar/index.jsx b/source/components/NavBar/index.jsx index bd9951ed..c53aebcb 100644 --- a/source/components/NavBar/index.jsx +++ b/source/components/NavBar/index.jsx @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Button from '@material-ui/core/Button'; +import clsx from 'clsx'; import { useRouter } from '../Router'; import Plug from '../Plug'; import Profile from '../Profile'; @@ -14,7 +15,7 @@ const NavBar = ({ disableProfile, disableNavigation }) => { const navigateHome = () => navigator?.navigate('home'); return (
-
diff --git a/source/components/NavBar/styles.js b/source/components/NavBar/styles.js index c179ba50..418702a8 100644 --- a/source/components/NavBar/styles.js +++ b/source/components/NavBar/styles.js @@ -14,6 +14,10 @@ export default makeStyles({ background: '#FFFFFF', boxShadow: SHADOW_1, }, + logoButton: { + height: 68, + borderRadius: 0, + }, walletContainer: { flex: 3, display: 'flex', diff --git a/source/components/Profile/index.jsx b/source/components/Profile/index.jsx index b9e30840..be759d8e 100644 --- a/source/components/Profile/index.jsx +++ b/source/components/Profile/index.jsx @@ -1,9 +1,6 @@ import React, { useState, useEffect } from 'react'; import MenuList from '@material-ui/core/MenuList'; import Button from '@material-ui/core/Button'; -import { - HoverAnimation, MenuItem, FormItem, TextInput, LinkButton, -} from '@ui'; import PropTypes from 'prop-types'; import Drawer from '@material-ui/core/Drawer'; import Divider from '@material-ui/core/Divider'; @@ -31,9 +28,13 @@ import { getWalletsConnectedToUrl, getApp } from '@modules/storageManager'; import { toggleAccountHidden, useHiddenAccounts } from '@redux/profile'; import { setICNSData } from '@redux/icns'; import { useICPPrice } from '@redux/icp'; -import { ConnectAccountsModal } from '@components'; import { useMenuItems, useContacts } from '@hooks'; - +import ConnectAccountsModal from '../ConnectAccountsModal'; +import HoverAnimation from '../HoverAnimation'; +import MenuItem from '../MenuItem'; +import FormItem from '../FormItem'; +import TextInput from '../TextInput'; +import LinkButton from '../LinkButton'; import { TABS, useRouter } from '../Router'; import ActionDialog from '../ActionDialog'; import UserIcon from '../UserIcon'; diff --git a/source/components/SeedPhrase/index.jsx b/source/components/SeedPhrase/index.jsx index e9f49f9e..7140d98c 100644 --- a/source/components/SeedPhrase/index.jsx +++ b/source/components/SeedPhrase/index.jsx @@ -1,8 +1,8 @@ import React, { useState } from 'react'; -import { ListItem } from '@ui'; import { useTranslation } from 'react-i18next'; import PropTypes from 'prop-types'; import Tooltip from '@material-ui/core/Tooltip'; +import ListItem from '../ListItem'; import useStyles from './styles'; const SeedPhrase = ({ words, seedPhraseBoxTestId }) => { diff --git a/source/ui/Select/index.jsx b/source/components/Select/index.jsx similarity index 94% rename from source/ui/Select/index.jsx rename to source/components/Select/index.jsx index 8ddd3611..cc35f29a 100644 --- a/source/ui/Select/index.jsx +++ b/source/components/Select/index.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { Typography } from '@material-ui/core'; import clsx from 'clsx'; import ChevronDown from '@assets/icons/chevron-down.svg'; -import { TokenIcon } from '@components'; +import TokenIcon from '../TokenIcon'; import InputBase from '../InputBase'; import useStyles from './styles'; @@ -83,7 +83,7 @@ Select.propTypes = { icon: PropTypes.node, readonly: PropTypes.bool, imageClassName: PropTypes.string, - nft: PropTypes.oneOf([PropTypes.bool, PropTypes.object]), + nft: PropTypes.oneOf([PropTypes.bool, PropTypes.objectOf(PropTypes.string)]), className: PropTypes.string, accountNameTestId: PropTypes.string, }; diff --git a/source/ui/Select/select.stories.jsx b/source/components/Select/select.stories.jsx similarity index 100% rename from source/ui/Select/select.stories.jsx rename to source/components/Select/select.stories.jsx diff --git a/source/ui/Select/styles.js b/source/components/Select/styles.js similarity index 100% rename from source/ui/Select/styles.js rename to source/components/Select/styles.js diff --git a/source/ui/SelectButton/index.jsx b/source/components/SelectButton/index.jsx similarity index 100% rename from source/ui/SelectButton/index.jsx rename to source/components/SelectButton/index.jsx diff --git a/source/ui/SelectButton/select-button.stories.jsx b/source/components/SelectButton/select-button.stories.jsx similarity index 100% rename from source/ui/SelectButton/select-button.stories.jsx rename to source/components/SelectButton/select-button.stories.jsx diff --git a/source/ui/SelectButton/styles.js b/source/components/SelectButton/styles.js similarity index 100% rename from source/ui/SelectButton/styles.js rename to source/components/SelectButton/styles.js diff --git a/source/components/SwapInfo/components/AssetInfo/index.jsx b/source/components/SwapInfo/components/AssetInfo/index.jsx index 633a66d1..86d53192 100644 --- a/source/components/SwapInfo/components/AssetInfo/index.jsx +++ b/source/components/SwapInfo/components/AssetInfo/index.jsx @@ -4,7 +4,7 @@ import NumberFormat from 'react-number-format'; import { Typography } from '@material-ui/core'; import { currencyPropTypes } from '@shared/constants/currencies'; -import TokenIcon from '@components/TokenIcon'; +import TokenIcon from '../../../TokenIcon'; const AssetInfo = ({ asset, amount, classes }) => (
diff --git a/source/ui/Tab/index.jsx b/source/components/Tab/index.jsx similarity index 100% rename from source/ui/Tab/index.jsx rename to source/components/Tab/index.jsx diff --git a/source/ui/Tab/styles.js b/source/components/Tab/styles.js similarity index 100% rename from source/ui/Tab/styles.js rename to source/components/Tab/styles.js diff --git a/source/ui/Tab/tab.stories.jsx b/source/components/Tab/tab.stories.jsx similarity index 100% rename from source/ui/Tab/tab.stories.jsx rename to source/components/Tab/tab.stories.jsx diff --git a/source/ui/Tabs/index.jsx b/source/components/Tabs/index.jsx similarity index 100% rename from source/ui/Tabs/index.jsx rename to source/components/Tabs/index.jsx diff --git a/source/ui/Tabs/styles.js b/source/components/Tabs/styles.js similarity index 100% rename from source/ui/Tabs/styles.js rename to source/components/Tabs/styles.js diff --git a/source/ui/Tabs/tabs.stories.jsx b/source/components/Tabs/tabs.stories.jsx similarity index 100% rename from source/ui/Tabs/tabs.stories.jsx rename to source/components/Tabs/tabs.stories.jsx diff --git a/source/ui/TextInput/index.jsx b/source/components/TextInput/index.jsx similarity index 100% rename from source/ui/TextInput/index.jsx rename to source/components/TextInput/index.jsx diff --git a/source/ui/TextInput/styles.js b/source/components/TextInput/styles.js similarity index 100% rename from source/ui/TextInput/styles.js rename to source/components/TextInput/styles.js diff --git a/source/ui/TextInput/text-input.stories.jsx b/source/components/TextInput/text-input.stories.jsx similarity index 100% rename from source/ui/TextInput/text-input.stories.jsx rename to source/components/TextInput/text-input.stories.jsx diff --git a/source/ui/Title/index.jsx b/source/components/Title/index.jsx similarity index 100% rename from source/ui/Title/index.jsx rename to source/components/Title/index.jsx diff --git a/source/ui/Title/styles.js b/source/components/Title/styles.js similarity index 100% rename from source/ui/Title/styles.js rename to source/components/Title/styles.js diff --git a/source/components/TokenIcon/index.js b/source/components/TokenIcon/index.js index d50962fb..6a20ddf1 100644 --- a/source/components/TokenIcon/index.js +++ b/source/components/TokenIcon/index.js @@ -1,12 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import { makeStyles } from '@material-ui/core'; -import { NFTDisplayer } from '@ui'; import randomColor from 'random-color'; import clsx from 'clsx'; import { NFT_COLLECTION_DEFAULT_TYPES } from '@shared/constants/nft'; import SHADOW_1 from '@shared/styles/shadows'; +import NFTDisplayer from '../NFTDisplayer'; const useStyles = makeStyles((theme) => ({ genericToken: { diff --git a/source/components/Tokens/index.jsx b/source/components/Tokens/index.jsx index 00b23f47..d1f9b109 100644 --- a/source/components/Tokens/index.jsx +++ b/source/components/Tokens/index.jsx @@ -1,7 +1,6 @@ import React, { useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Plus } from 'react-feather'; -import { AssetItem } from '@ui'; import { setAssets, setAssetsLoading } from '@redux/wallet'; import clsx from 'clsx'; @@ -11,7 +10,7 @@ import { useRouter } from '@components/Router'; import { useICPPrice } from '@redux/icp'; import { setICNSData } from '@redux/icns'; import { useScroll } from '@hooks'; - +import AssetItem from '../AssetItem'; import useStyles from './styles'; const Tokens = () => { @@ -24,19 +23,31 @@ const Tokens = () => { const { navigator } = useRouter(); const { onScroll, fullScroll } = useScroll(); - const fetchAssets = () => { + const fetchAssets = (cb = () => {}) => { sendMessage({ type: HANDLER_TYPES.GET_ASSETS, params: {}, }, (keyringAssets) => { + cb(keyringAssets); dispatch(setAssets({ keyringAssets, icpPrice })); dispatch(setAssetsLoading(false)); setLoading(false); }); }; + const handleFetchAssets = () => { + dispatch(setAssetsLoading(true)); + setLoading(true); + + return new Promise((resolve) => { + fetchAssets(resolve); + }); + }; + useEffect(() => { - const id = setInterval(fetchAssets, 15000); + const id = setInterval(() => { + !assetsLoading && fetchAssets(); + }, 15000); fetchAssets(); return () => clearInterval(id); }, [icpPrice]); @@ -67,7 +78,7 @@ const Tokens = () => { { return { getContacts, - } + }; }; export default useContacts; diff --git a/source/locales/en/translation.json b/source/locales/en/translation.json index c2eb67e9..c2312647 100644 --- a/source/locales/en/translation.json +++ b/source/locales/en/translation.json @@ -332,6 +332,29 @@ "returnHome": "Return Home", "notificationError": "We’re sorry, something weird happened. Please close the pop up and try again" }, + "sendError": { + "errorCode": "Error code #", + "600": { + "title": "Something went wrong", + "description": "We’re sorry, something weird happened. Return home and retry the action.", + "button": "Return Home" + }, + "100": { + "title": "Insufficient Balance", + "description": "This transaction couldn’t be completed because there are insufficient funds available.", + "button": "Deposit Tokens" + }, + "300": { + "title": "Register token don’t respect the interface", + "description": "We’re sorry, something weird happened. Return home and retry the action.", + "button": "Return Home" + }, + "301": { + "title": "Canister out of cycles", + "description": "We’re sorry, something weird happened. Return home and retry the action.", + "button": "Return Home" + } + }, "whitelist": { "title": "wants permission to use these canisters:" }, diff --git a/source/redux/icp.js b/source/redux/icp.js index e5cf4c73..79021adb 100644 --- a/source/redux/icp.js +++ b/source/redux/icp.js @@ -5,21 +5,25 @@ import getICPPrice from '@shared/services/ICPPrice'; import { createSlice } from '@reduxjs/toolkit'; /* eslint-disable no-param-reassign */ -export const walletSlice = createSlice({ - name: 'wallet', +export const icpDataSlice = createSlice({ + name: 'icpData', initialState: { - icpPrice: null, + price: null, + isLoading: false, }, reducers: { setICPPrice: (state, action) => { - state.icpPrice = action.payload; + state.price = action.payload; + }, + setICPPriceLoading: (state, action) => { + state.isLoading = action.payload; }, }, }); -export const { setICPPrice } = walletSlice.actions; +export const { setICPPrice, setICPPriceLoading } = icpDataSlice.actions; -export const selectICPPrice = (store) => store.icp.icpPrice; +export const selectICPData = (store) => store.icp; /** * @description Hook that takes the ICP price from the coingecko API and sets it to the store. @@ -28,27 +32,29 @@ export const selectICPPrice = (store) => store.icp.icpPrice; */ export const useICPPrice = (refetch = false, dependencies = []) => { const dispatch = useDispatch(); - const icpPrice = useSelector(selectICPPrice); + const { price, isLoading } = useSelector(selectICPData); const fetchICPPrice = async () => { try { + dispatch(setICPPriceLoading(true)); const { data } = await getICPPrice(); dispatch(setICPPrice(data?.['internet-computer']?.usd ?? 1)); } catch (error) { - // TODO: Handle error /* eslint-disable-next-line */ - console.warn(error); + console.error(error); + } finally { + dispatch(setICPPriceLoading(false)); } }; useEffect(() => { - if (!icpPrice || refetch) { + if (!isLoading && (!price || refetch)) { fetchICPPrice(); } }, dependencies); - return icpPrice; + return price; }; -export default walletSlice.reducer; +export default icpDataSlice.reducer; diff --git a/source/redux/send.js b/source/redux/send.js index 75c5dc4f..750195ed 100644 --- a/source/redux/send.js +++ b/source/redux/send.js @@ -35,9 +35,38 @@ const DEFAULT_STATE = { secondaryValue: DEFAULT_SECONDARY, }; +const ERRORS_INFO = [ + { + errorNames: ['InsufficientBalance', 'InsufficientFunds'], + errorCode: 100, + }, + { + errorNames: ['DestinationInvalid'], + errorCode: 300, + }, + { + errorNames: ['is out of cycles'], + errorCode: 301, + }, +]; + +const matchErrors = (err) => { + for (const errorInfo of ERRORS_INFO) { + const currentError = errorInfo?.errorNames?.some( + (errorKeyword) => err.includes(errorKeyword), + ); + + if (currentError) { + return errorInfo?.errorCode; + } + } + + return 600; +}; + export const sendToken = createAsyncThunk( 'sendToken/regularSend', - async (arg, { getState }) => { + async (arg, { getState, rejectWithValue }) => { const { send: state } = getState(); const { addressInfo, @@ -48,26 +77,35 @@ export const sendToken = createAsyncThunk( const to = addressInfo.resolvedAddress || address; const amount = rawAmount.toString(); - const { canisterId, decimals, standard } = selectedAsset || {}; - const res = await callSendToken({ - to, amount, canisterId, decimals, standard, - }); - return res; + const { canisterId, standard, decimals } = selectedAsset || {}; + + try { + const res = await callSendToken({ + to, amount, canisterId, standard, decimals, + }); + return res; + } catch ({ error }) { + return rejectWithValue(error); + } }, ); export const burnXTC = createAsyncThunk( 'sendToken/burnXTC', - async (arg, { getState }) => { + async (arg, { getState, rejectWithValue }) => { const { send: state } = getState(); const { addressInfo, address, amount: rawAmount } = state; const to = addressInfo.resolvedAddress || address; const amount = rawAmount.toString(); - const res = await callBurnXTC({ to, amount }); - return res; + try { + const res = await callBurnXTC({ to, amount }); + return res; + } catch ({ error }) { + return rejectWithValue(error); + } }, ); @@ -141,10 +179,9 @@ export const sendSlice = createSlice({ state.fulfilled = true; state.pending = false; }) - .addCase(sendToken.rejected, (state) => { - // TODO: handle errors + .addCase(sendToken.rejected, (state, action) => { state.pending = false; - state.error = true; + state.error = matchErrors(action.payload); }) .addCase(burnXTC.pending, (state) => { state.pending = true; diff --git a/source/ContentScript/index.js b/source/scripts/ContentScript/index.js similarity index 100% rename from source/ContentScript/index.js rename to source/scripts/ContentScript/index.js diff --git a/source/ContentScript/utils/index.js b/source/scripts/ContentScript/utils/index.js similarity index 100% rename from source/ContentScript/utils/index.js rename to source/scripts/ContentScript/utils/index.js diff --git a/source/ContentScript/utils/inject-script.js b/source/scripts/ContentScript/utils/inject-script.js similarity index 100% rename from source/ContentScript/utils/inject-script.js rename to source/scripts/ContentScript/utils/inject-script.js diff --git a/source/Inpage/index.js b/source/scripts/Inpage/index.js similarity index 100% rename from source/Inpage/index.js rename to source/scripts/Inpage/index.js diff --git a/source/shared/ProviderWrapper.js b/source/shared/ProviderWrapper.js index 05703b35..973effd3 100644 --- a/source/shared/ProviderWrapper.js +++ b/source/shared/ProviderWrapper.js @@ -19,9 +19,9 @@ ProviderWrapper.propTypes = { PropTypes.node, ]).isRequired, // eslint-disable-next-line react/forbid-prop-types - store: PropTypes.object.isRequired, + store: PropTypes.objectOf(PropTypes.string).isRequired, // eslint-disable-next-line react/forbid-prop-types - theme: PropTypes.object.isRequired, + theme: PropTypes.objectOf(PropTypes.string).isRequired, }; export default ProviderWrapper; diff --git a/source/shared/constants/currencies.js b/source/shared/constants/currencies.js index f67c6e5c..eef8d501 100644 --- a/source/shared/constants/currencies.js +++ b/source/shared/constants/currencies.js @@ -121,14 +121,16 @@ export const parseToBigIntString = (amount, decimalPlaces) => { export const parseAssetsAmount = (assets = []) => ( assets.map((currentAsset) => { const { amount, token, error } = currentAsset; + const hasError = error || amount === 'Error'; const { decimals } = token; - const parsedAmount = error + const parsedAmount = hasError ? 0 : parseToFloatAmount(amount, parseInt(decimals?.toString(), 10)); return { ...currentAsset, amount: parsedAmount, + error: hasError, }; }) ); @@ -154,6 +156,7 @@ export const TOKENS = { amount: 0, value: 0, logo: TOKEN_IMAGES.ICP, + standard: 'ROSETTA', }, XTC: { symbol: 'XTC', @@ -163,6 +166,7 @@ export const TOKENS = { amount: 0, value: 0, logo: TOKEN_IMAGES.XTC, + standard: 'DIP20', }, WICP: { symbol: 'WICP', @@ -172,5 +176,6 @@ export const TOKENS = { amount: 0, value: 0, logo: TOKEN_IMAGES.WICP, + standard: 'DIP20', }, }; diff --git a/source/shared/constants/nft.js b/source/shared/constants/nft.js index 7a04841e..f6ed8a8d 100644 --- a/source/shared/constants/nft.js +++ b/source/shared/constants/nft.js @@ -35,5 +35,5 @@ export const NFT_DESCRIPTIONS = { }; export const NFT_COLLECTION_DEFAULT_TYPES = { - "pk6rk-6aaaa-aaaae-qaazq-cai": "iframe", + 'pk6rk-6aaaa-aaaae-qaazq-cai': 'iframe', }; diff --git a/source/shared/services/ICNS.js b/source/shared/services/ICNS.js index 81262fe0..722e949b 100644 --- a/source/shared/services/ICNS.js +++ b/source/shared/services/ICNS.js @@ -1,12 +1,13 @@ +/* eslint-disable no-console */ import { Actor, HttpAgent } from '@dfinity/agent'; import crossFetch from 'cross-fetch'; import shortAddress from '@shared/utils/short-address'; +import { Principal } from '@dfinity/principal'; import resolverIDL from '../utils/ic/icns/resolver.did'; import registryIDL from '../utils/ic/icns/registry.did'; import ReverseRegistrarIDL from '../utils/ic/icns/reverse_registrar.did'; -import { Principal } from '@dfinity/principal'; const ICNS_REGISTRY_ID = 'e5kvl-zyaaa-aaaan-qabaq-cai'; const ICNS_RESOLVER_ID = 'euj6x-pqaaa-aaaan-qabba-cai'; @@ -57,7 +58,7 @@ export const resolveName = async (name, isICP) => { } return Array.isArray(principal) ? principal?.[0]?.toString() : principal?.toString?.(); } catch (e) { - console.log('Error resolving the ICNS', e); + console.warn('Error resolving the ICNS', e); return null; } }; diff --git a/source/shared/utils/contacts.js b/source/shared/utils/contacts.js index 91dfb983..2412d003 100644 --- a/source/shared/utils/contacts.js +++ b/source/shared/utils/contacts.js @@ -1,3 +1,4 @@ +/* eslint-disable no-underscore-dangle */ import { Principal } from '@dfinity/principal'; import { getContacts, setContacts } from '@modules/storageManager'; import { addContact } from '@background/Keyring'; @@ -47,11 +48,10 @@ export const parseContactFromDab = (contact) => { if (id._isPrincipal) { // Converts principal from arr to string parsedId = Principal.fromUint8Array( - new Uint8Array(Object.values(id._arr)) + new Uint8Array(Object.values(id._arr)), ).toString(); } - return { id: parsedId, image, diff --git a/source/shared/utils/send.js b/source/shared/utils/send.js index 38f7d161..1308ed42 100644 --- a/source/shared/utils/send.js +++ b/source/shared/utils/send.js @@ -1,3 +1,5 @@ export const truncateFloatForDisplay = (value, maxDecimals, displayDecimals) => Number( value.toFixed(maxDecimals).slice(0, -(maxDecimals - displayDecimals)), ); + +export default { truncateFloatForDisplay }; diff --git a/source/ui/index.js b/source/ui/index.js deleted file mode 100644 index eb126962..00000000 --- a/source/ui/index.js +++ /dev/null @@ -1,43 +0,0 @@ -export { default as theme } from './theme'; -export { default as HoverAnimation } from './HoverAnimation'; -export { default as MenuItem } from './MenuItem'; -export { default as ActionButton } from './ActionButton'; -export { default as Tabs } from './Tabs'; -export { default as Tab } from './Tab'; -export { default as AssetItem } from './AssetItem'; -export { default as ActivityItem } from './ActivityItem'; -export { default as GenericIcon } from './GenericIcon'; -export { default as AppItem } from './AppItem'; -export { default as LinkButton } from './LinkButton'; -export { default as Button } from './Button'; -export { default as TextInput } from './TextInput'; -export { default as FormInput } from './FormInput'; -export { default as Header } from './Header'; -export { default as MenuItemDetailed } from './MenuItemDetailed'; -export { default as Container } from './Container'; -export { default as ListItem } from './ListItem'; -export { default as Checkbox } from './Checkbox'; -export { default as Dialog } from './Dialog'; -export { default as FormItem } from './FormItem'; -export { default as Select } from './Select'; -export { default as CodeBox } from './CodeBox'; -export { default as MultiInput } from './MultiInput'; -export { default as InputBase } from './InputBase'; -export { default as SelectButton } from './SelectButton'; -export { default as InfoRow } from './InfoRow'; -export { default as Card } from './Card'; -export { default as AssetFormat } from './AssetFormat'; -export { default as USDFormat } from './USDFormat'; -export { default as IncomingAction } from './IncomingAction'; -export { default as DataDisplay } from './DataDisplay'; -export { default as FullscreenContainer } from './FullscreenContainer'; -export { default as ActionCard } from './ActionCard'; -export { default as Alert } from './Alert'; - -export { default as CanisterInfoContainer } from './CanisterInfo/components/Container'; -export { default as CanisterInfoItem } from './CanisterInfo/components/Item'; - -export { default as Badge } from './Badge'; -export { default as Title } from './Title'; -export { default as NFTDisplayer } from './NFTDisplayer'; -export { default as ICNSDisplay } from './ICNSDisplay'; diff --git a/source/Popup/Popup.jsx b/source/views/Extension/Popup.jsx similarity index 93% rename from source/Popup/Popup.jsx rename to source/views/Extension/Popup.jsx index 8296392f..73793676 100644 --- a/source/Popup/Popup.jsx +++ b/source/views/Extension/Popup.jsx @@ -17,6 +17,7 @@ import AddToken from './Views/AddToken'; import ExportIdentity from './Views/ExportIdentity'; import Login from './Views/Login'; import ErrorScreen from './Views/Error'; +import SendErrorScreen from './Views/SendError'; import NFTDetails from './Views/NFTDetails'; import SendNFT from './Views/SendNFT'; import ClockError from './Views/ClockError'; @@ -37,6 +38,7 @@ const Popup = ({ initialRoute }) => ( + @@ -50,4 +52,4 @@ Popup.propTypes = { initialRoute: PropTypes.string.isRequired, }; -export default Popup; +export default Popup; \ No newline at end of file diff --git a/source/Popup/Views/AddToken/Steps/Step1.jsx b/source/views/Extension/Views/AddToken/Steps/Step1.jsx similarity index 97% rename from source/Popup/Views/AddToken/Steps/Step1.jsx rename to source/views/Extension/Views/AddToken/Steps/Step1.jsx index 6dbd71ea..b6278c4d 100644 --- a/source/Popup/Views/AddToken/Steps/Step1.jsx +++ b/source/views/Extension/Views/AddToken/Steps/Step1.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { useSelector } from 'react-redux'; import { useTranslation } from 'react-i18next'; -import { Tabs } from '@ui'; +import { Tabs } from '@components'; import { useTabs } from '@hooks'; import SearchToken from '../components/SearchToken'; diff --git a/source/Popup/Views/AddToken/Steps/Step2.jsx b/source/views/Extension/Views/AddToken/Steps/Step2.jsx similarity index 98% rename from source/Popup/Views/AddToken/Steps/Step2.jsx rename to source/views/Extension/Views/AddToken/Steps/Step2.jsx index 1fe8c22b..55ff295f 100644 --- a/source/Popup/Views/AddToken/Steps/Step2.jsx +++ b/source/views/Extension/Views/AddToken/Steps/Step2.jsx @@ -6,9 +6,9 @@ import Grid from '@material-ui/core/Grid'; import XTCIcon from '@assets/icons/XTC.svg'; import { Button, Container, USDFormat, AssetFormat, -} from '@ui'; + TokenIcon, +} from '@components'; import { USD_PER_TC, CYCLES_PER_TC } from '@shared/constants/currencies'; -import { TokenIcon } from '@components'; import { useICPPrice } from '@redux/icp'; import { HANDLER_TYPES, sendMessage } from '@background/Keyring'; import { setAssets, setAssetsLoading } from '@redux/wallet'; diff --git a/source/Popup/Views/AddToken/components/CustomToken.jsx b/source/views/Extension/Views/AddToken/components/CustomToken.jsx similarity index 99% rename from source/Popup/Views/AddToken/components/CustomToken.jsx rename to source/views/Extension/Views/AddToken/components/CustomToken.jsx index 6908d653..8c36a51d 100644 --- a/source/Popup/Views/AddToken/components/CustomToken.jsx +++ b/source/views/Extension/Views/AddToken/components/CustomToken.jsx @@ -10,7 +10,7 @@ import { Alert, Dialog, Select, -} from '@ui'; +} from '@components'; import { validateCanisterId } from '@shared/utils/ids'; import { HANDLER_TYPES, sendMessage } from '@background/Keyring'; import extension from 'extensionizer'; diff --git a/source/Popup/Views/AddToken/components/DabInfo.jsx b/source/views/Extension/Views/AddToken/components/DabInfo.jsx similarity index 95% rename from source/Popup/Views/AddToken/components/DabInfo.jsx rename to source/views/Extension/Views/AddToken/components/DabInfo.jsx index 5c844650..51d5cf18 100644 --- a/source/Popup/Views/AddToken/components/DabInfo.jsx +++ b/source/views/Extension/Views/AddToken/components/DabInfo.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { LinkButton } from '@ui'; +import { LinkButton } from '@components'; import { Typography } from '@material-ui/core'; import { useTranslation } from 'react-i18next'; import DabIcon from '@assets/icons/dab.svg'; diff --git a/source/Popup/Views/AddToken/components/SearchToken.jsx b/source/views/Extension/Views/AddToken/components/SearchToken.jsx similarity index 98% rename from source/Popup/Views/AddToken/components/SearchToken.jsx rename to source/views/Extension/Views/AddToken/components/SearchToken.jsx index 7a1a739b..13cb910a 100644 --- a/source/Popup/Views/AddToken/components/SearchToken.jsx +++ b/source/views/Extension/Views/AddToken/components/SearchToken.jsx @@ -1,8 +1,8 @@ import React, { useEffect, useState } from 'react'; import { Container, LinkButton, TextInput, -} from '@ui'; -import { TokenIcon, PoweredByDab } from '@components'; + TokenIcon, PoweredByDab, +} from '@components'; import Grid from '@material-ui/core/Grid'; import { useTranslation } from 'react-i18next'; import { Typography } from '@material-ui/core'; diff --git a/source/Popup/Views/AddToken/hooks/useSteps.jsx b/source/views/Extension/Views/AddToken/hooks/useSteps.jsx similarity index 97% rename from source/Popup/Views/AddToken/hooks/useSteps.jsx rename to source/views/Extension/Views/AddToken/hooks/useSteps.jsx index 2afdf9fb..894f964c 100644 --- a/source/Popup/Views/AddToken/hooks/useSteps.jsx +++ b/source/views/Extension/Views/AddToken/hooks/useSteps.jsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { LinkButton } from '@ui'; +import { LinkButton } from '@components'; import { useTranslation } from 'react-i18next'; import { useRouter } from '@components/Router'; import BackIcon from '@assets/icons/back.svg'; diff --git a/source/Popup/Views/AddToken/index.jsx b/source/views/Extension/Views/AddToken/index.jsx similarity index 82% rename from source/Popup/Views/AddToken/index.jsx rename to source/views/Extension/Views/AddToken/index.jsx index 5a65471f..e2eadc64 100644 --- a/source/Popup/Views/AddToken/index.jsx +++ b/source/views/Extension/Views/AddToken/index.jsx @@ -1,6 +1,5 @@ import React from 'react'; -import { Layout } from '@components'; -import { Header } from '@ui'; +import { Layout, Header } from '@components'; import useSteps from './hooks/useSteps'; const AddToken = () => { diff --git a/source/Popup/Views/AddToken/styles.js b/source/views/Extension/Views/AddToken/styles.js similarity index 100% rename from source/Popup/Views/AddToken/styles.js rename to source/views/Extension/Views/AddToken/styles.js diff --git a/source/Popup/Views/ClockError/index.js b/source/views/Extension/Views/ClockError/index.js similarity index 100% rename from source/Popup/Views/ClockError/index.js rename to source/views/Extension/Views/ClockError/index.js diff --git a/source/Popup/Views/ClockError/styles.js b/source/views/Extension/Views/ClockError/styles.js similarity index 100% rename from source/Popup/Views/ClockError/styles.js rename to source/views/Extension/Views/ClockError/styles.js diff --git a/source/Popup/Views/Contacts/components/AddContact.jsx b/source/views/Extension/Views/Contacts/components/AddContact.jsx similarity index 99% rename from source/Popup/Views/Contacts/components/AddContact.jsx rename to source/views/Extension/Views/Contacts/components/AddContact.jsx index 95a35ad0..fe4e4270 100644 --- a/source/Popup/Views/Contacts/components/AddContact.jsx +++ b/source/views/Extension/Views/Contacts/components/AddContact.jsx @@ -3,7 +3,7 @@ import { useSelector } from 'react-redux'; import Grid from '@material-ui/core/Grid'; import { FormItem, Container, Button, TextInput, -} from '@ui'; +} from '@components'; import { useTranslation } from 'react-i18next'; import PropTypes from 'prop-types'; import { getRandomEmoji } from '@shared/constants/emojis'; diff --git a/source/Popup/Views/Contacts/components/Home.jsx b/source/views/Extension/Views/Contacts/components/Home.jsx similarity index 96% rename from source/Popup/Views/Contacts/components/Home.jsx rename to source/views/Extension/Views/Contacts/components/Home.jsx index 36de5130..51bf626c 100644 --- a/source/Popup/Views/Contacts/components/Home.jsx +++ b/source/views/Extension/Views/Contacts/components/Home.jsx @@ -1,5 +1,5 @@ import { Typography } from '@material-ui/core'; -import { Button, Container } from '@ui'; +import { Button, Container } from '@components'; import React from 'react'; import { useTranslation } from 'react-i18next'; import ContactIcon from '@assets/icons/contacts.svg'; diff --git a/source/Popup/Views/Contacts/contacts.stories.jsx b/source/views/Extension/Views/Contacts/contacts.stories.jsx similarity index 100% rename from source/Popup/Views/Contacts/contacts.stories.jsx rename to source/views/Extension/Views/Contacts/contacts.stories.jsx diff --git a/source/Popup/Views/Contacts/hooks/useSteps.jsx b/source/views/Extension/Views/Contacts/hooks/useSteps.jsx similarity index 96% rename from source/Popup/Views/Contacts/hooks/useSteps.jsx rename to source/views/Extension/Views/Contacts/hooks/useSteps.jsx index 8af2e9d1..0d36f8b2 100644 --- a/source/Popup/Views/Contacts/hooks/useSteps.jsx +++ b/source/views/Extension/Views/Contacts/hooks/useSteps.jsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { LinkButton, Button } from '@ui'; +import { LinkButton, Button, ContactList } from '@components'; import { addContact, removeContact, @@ -8,7 +8,6 @@ import { import BackIcon from '@assets/icons/back.svg'; import { useTranslation } from 'react-i18next'; import { useRouter } from '@components/Router'; -import { ContactList } from '@components'; import AddContact from '../components/AddContact'; import Home from '../components/Home'; diff --git a/source/Popup/Views/Contacts/index.jsx b/source/views/Extension/Views/Contacts/index.jsx similarity index 86% rename from source/Popup/Views/Contacts/index.jsx rename to source/views/Extension/Views/Contacts/index.jsx index 0c6e5431..0d0bfc87 100644 --- a/source/Popup/Views/Contacts/index.jsx +++ b/source/views/Extension/Views/Contacts/index.jsx @@ -1,8 +1,7 @@ import React, { useEffect } from 'react'; -import { Layout } from '@components'; -import { Header } from '@ui'; -import useSteps from './hooks/useSteps'; +import { Layout, Header } from '@components'; import { useContacts } from '@hooks'; +import useSteps from './hooks/useSteps'; const Contacts = () => { const { diff --git a/source/Popup/Views/Contacts/styles.js b/source/views/Extension/Views/Contacts/styles.js similarity index 100% rename from source/Popup/Views/Contacts/styles.js rename to source/views/Extension/Views/Contacts/styles.js diff --git a/source/Popup/Views/Deposit/index.jsx b/source/views/Extension/Views/Deposit/index.jsx similarity index 99% rename from source/Popup/Views/Deposit/index.jsx rename to source/views/Extension/Views/Deposit/index.jsx index 21845943..8e1f16ea 100644 --- a/source/Popup/Views/Deposit/index.jsx +++ b/source/views/Extension/Views/Deposit/index.jsx @@ -8,11 +8,10 @@ import { useSelector } from 'react-redux'; import { useRouter } from '@components/Router'; import { QRCode, CopyButton, IconQrCode, Layout, + + Header, LinkButton, InputBase, Dialog, Container, } from '@components'; import shortAddress from '@shared/utils/short-address'; -import { - Header, LinkButton, InputBase, Dialog, Container, -} from '@ui'; import useStyles from './styles'; const Deposit = () => { diff --git a/source/Popup/Views/Deposit/styles.js b/source/views/Extension/Views/Deposit/styles.js similarity index 100% rename from source/Popup/Views/Deposit/styles.js rename to source/views/Extension/Views/Deposit/styles.js diff --git a/source/Popup/Views/Error/index.jsx b/source/views/Extension/Views/Error/index.jsx similarity index 93% rename from source/Popup/Views/Error/index.jsx rename to source/views/Extension/Views/Error/index.jsx index bc0acb11..65989d3f 100644 --- a/source/Popup/Views/Error/index.jsx +++ b/source/views/Extension/Views/Error/index.jsx @@ -1,8 +1,7 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import { Typography } from '@material-ui/core'; -import { Button } from '@ui'; -import { Layout } from '@components'; +import { Button, Layout } from '@components'; import { useRouter } from '@components/Router'; import SighEmoji from '@assets/icons/sigh-face.svg'; diff --git a/source/Popup/Views/Error/styles.js b/source/views/Extension/Views/Error/styles.js similarity index 100% rename from source/Popup/Views/Error/styles.js rename to source/views/Extension/Views/Error/styles.js diff --git a/source/Popup/Views/ExportIdentity/hooks/useSteps.jsx b/source/views/Extension/Views/ExportIdentity/hooks/useSteps.jsx similarity index 96% rename from source/Popup/Views/ExportIdentity/hooks/useSteps.jsx rename to source/views/Extension/Views/ExportIdentity/hooks/useSteps.jsx index e705e06a..5ff23d00 100644 --- a/source/Popup/Views/ExportIdentity/hooks/useSteps.jsx +++ b/source/views/Extension/Views/ExportIdentity/hooks/useSteps.jsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { LinkButton } from '@ui'; +import { LinkButton } from '@components'; import { useTranslation } from 'react-i18next'; import { useRouter } from '@components/Router'; import BackIcon from '@assets/icons/back.svg'; diff --git a/source/Popup/Views/ExportIdentity/index.jsx b/source/views/Extension/Views/ExportIdentity/index.jsx similarity index 86% rename from source/Popup/Views/ExportIdentity/index.jsx rename to source/views/Extension/Views/ExportIdentity/index.jsx index 1204a3e6..5185ac3c 100644 --- a/source/Popup/Views/ExportIdentity/index.jsx +++ b/source/views/Extension/Views/ExportIdentity/index.jsx @@ -1,6 +1,5 @@ import React from 'react'; -import { Layout } from '@components'; -import { Header } from '@ui'; +import { Layout, Header } from '@components'; import { useTranslation } from 'react-i18next'; import useSteps from './hooks/useSteps'; diff --git a/source/Popup/Views/ExportIdentity/steps/Step1.jsx b/source/views/Extension/Views/ExportIdentity/steps/Step1.jsx similarity index 98% rename from source/Popup/Views/ExportIdentity/steps/Step1.jsx rename to source/views/Extension/Views/ExportIdentity/steps/Step1.jsx index 490460da..7d72da07 100644 --- a/source/Popup/Views/ExportIdentity/steps/Step1.jsx +++ b/source/views/Extension/Views/ExportIdentity/steps/Step1.jsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { Container, FormInput, Button, Checkbox, -} from '@ui'; +} from '@components'; import { useTranslation } from 'react-i18next'; import Grid from '@material-ui/core/Grid'; import { HANDLER_TYPES, sendMessage } from '@background/Keyring'; diff --git a/source/Popup/Views/ExportIdentity/steps/Step2.jsx b/source/views/Extension/Views/ExportIdentity/steps/Step2.jsx similarity index 98% rename from source/Popup/Views/ExportIdentity/steps/Step2.jsx rename to source/views/Extension/Views/ExportIdentity/steps/Step2.jsx index 57687f3d..52490fa7 100644 --- a/source/Popup/Views/ExportIdentity/steps/Step2.jsx +++ b/source/views/Extension/Views/ExportIdentity/steps/Step2.jsx @@ -1,13 +1,13 @@ import React, { useState, useEffect } from 'react'; import { Container, Button, CodeBox, Dialog, FormItem, Select, -} from '@ui'; + UserIcon, +} from '@components'; import Grid from '@material-ui/core/Grid'; import { Typography } from '@material-ui/core'; import shortAddress from '@shared/utils/short-address'; import { useTranslation } from 'react-i18next'; import { HANDLER_TYPES, sendMessage } from '@background/Keyring'; -import { UserIcon } from '@components'; import download from '@shared/utils/download-text'; const Step2 = () => { diff --git a/source/Popup/Views/Help/index.jsx b/source/views/Extension/Views/Help/index.jsx similarity index 85% rename from source/Popup/Views/Help/index.jsx rename to source/views/Extension/Views/Help/index.jsx index 72587ea1..1a6300f0 100644 --- a/source/Popup/Views/Help/index.jsx +++ b/source/views/Extension/Views/Help/index.jsx @@ -1,9 +1,10 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; -import { Layout } from '@components'; -import { Header, LinkButton, MenuItem } from '@ui'; +import { + Layout, Header, LinkButton, MenuItem, +} from '@components'; import { useRouter } from '@components/Router'; -import useHelpItems from '../../../hooks/useHelpItems'; +import useHelpItems from '@hooks/useHelpItems'; import useStyles from './styles'; const Help = () => { diff --git a/source/Popup/Views/Help/styles.js b/source/views/Extension/Views/Help/styles.js similarity index 100% rename from source/Popup/Views/Help/styles.js rename to source/views/Extension/Views/Help/styles.js diff --git a/source/Popup/Views/Home/index.jsx b/source/views/Extension/Views/Home/index.jsx similarity index 99% rename from source/Popup/Views/Home/index.jsx rename to source/views/Extension/Views/Home/index.jsx index 916a007c..feecffd2 100644 --- a/source/Popup/Views/Home/index.jsx +++ b/source/views/Extension/Views/Home/index.jsx @@ -10,8 +10,8 @@ import { useRouter, NFTs, ConnectAccountsModal, + Tabs, } from '@components'; -import { Tabs } from '@ui'; import { HANDLER_TYPES, sendMessage } from '@background/Keyring'; import { setAccountInfo } from '@redux/wallet'; import { useICPPrice } from '@redux/icp'; diff --git a/source/Popup/Views/Login/index.jsx b/source/views/Extension/Views/Login/index.jsx similarity index 97% rename from source/Popup/Views/Login/index.jsx rename to source/views/Extension/Views/Login/index.jsx index fcfd95bf..33ca75f1 100644 --- a/source/Popup/Views/Login/index.jsx +++ b/source/views/Extension/Views/Login/index.jsx @@ -4,8 +4,9 @@ import extension from 'extensionizer'; import { useTranslation } from 'react-i18next'; import clsx from 'clsx'; import Typography from '@material-ui/core/Typography'; -import { Plug } from '@components'; -import { LinkButton, Button, FormInput } from '@ui'; +import { + Plug, LinkButton, Button, FormInput, +} from '@components'; import { useRouter } from '@components/Router'; import { HANDLER_TYPES, sendMessage } from '@background/Keyring'; import { setAccountInfo } from '@redux/wallet'; diff --git a/source/Popup/Views/Login/login.stories.jsx b/source/views/Extension/Views/Login/login.stories.jsx similarity index 100% rename from source/Popup/Views/Login/login.stories.jsx rename to source/views/Extension/Views/Login/login.stories.jsx diff --git a/source/Popup/Views/Login/styles.js b/source/views/Extension/Views/Login/styles.js similarity index 100% rename from source/Popup/Views/Login/styles.js rename to source/views/Extension/Views/Login/styles.js diff --git a/source/Popup/Views/NFTDetails/components/section.jsx b/source/views/Extension/Views/NFTDetails/components/section.jsx similarity index 96% rename from source/Popup/Views/NFTDetails/components/section.jsx rename to source/views/Extension/Views/NFTDetails/components/section.jsx index 99c7acee..f4e26799 100644 --- a/source/Popup/Views/NFTDetails/components/section.jsx +++ b/source/views/Extension/Views/NFTDetails/components/section.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { Title, -} from '@ui'; +} from '@components'; import PropTypes from 'prop-types'; import useStyles from '../styles'; diff --git a/source/Popup/Views/NFTDetails/index.jsx b/source/views/Extension/Views/NFTDetails/index.jsx similarity index 98% rename from source/Popup/Views/NFTDetails/index.jsx rename to source/views/Extension/Views/NFTDetails/index.jsx index e1aaf12a..414388a5 100644 --- a/source/Popup/Views/NFTDetails/index.jsx +++ b/source/views/Extension/Views/NFTDetails/index.jsx @@ -1,8 +1,8 @@ import React, { useEffect, useMemo } from 'react'; -import { Layout } from '@components'; import { + Layout, Header, Button, Badge, LinkButton, NFTDisplayer, ICNSDisplay, -} from '@ui'; +} from '@components'; import { useTranslation } from 'react-i18next'; import BackIcon from '@assets/icons/back.svg'; import ExpandIcon from '@assets/icons/expand.svg'; diff --git a/source/Popup/Views/NFTDetails/styles.js b/source/views/Extension/Views/NFTDetails/styles.js similarity index 100% rename from source/Popup/Views/NFTDetails/styles.js rename to source/views/Extension/Views/NFTDetails/styles.js diff --git a/source/Popup/Views/Network/components/NetworkCard/index.jsx b/source/views/Extension/Views/Network/components/NetworkCard/index.jsx similarity index 100% rename from source/Popup/Views/Network/components/NetworkCard/index.jsx rename to source/views/Extension/Views/Network/components/NetworkCard/index.jsx diff --git a/source/Popup/Views/Network/components/NetworkCard/styles.js b/source/views/Extension/Views/Network/components/NetworkCard/styles.js similarity index 100% rename from source/Popup/Views/Network/components/NetworkCard/styles.js rename to source/views/Extension/Views/Network/components/NetworkCard/styles.js diff --git a/source/Popup/Views/Network/components/NoNetworks/index.jsx b/source/views/Extension/Views/Network/components/NoNetworks/index.jsx similarity index 96% rename from source/Popup/Views/Network/components/NoNetworks/index.jsx rename to source/views/Extension/Views/Network/components/NoNetworks/index.jsx index 73fe330f..1ff59a9f 100644 --- a/source/Popup/Views/Network/components/NoNetworks/index.jsx +++ b/source/views/Extension/Views/Network/components/NoNetworks/index.jsx @@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'; import AntennaIcon from '@assets/icons/antenna.svg'; import { Typography } from '@material-ui/core'; import { useRouter } from '@components/Router'; -import { Button } from '@ui'; +import { Button } from '@components'; import useStyles from './styles'; diff --git a/source/Popup/Views/Network/components/NoNetworks/styles.js b/source/views/Extension/Views/Network/components/NoNetworks/styles.js similarity index 100% rename from source/Popup/Views/Network/components/NoNetworks/styles.js rename to source/views/Extension/Views/Network/components/NoNetworks/styles.js diff --git a/source/Popup/Views/Network/index.jsx b/source/views/Extension/Views/Network/index.jsx similarity index 96% rename from source/Popup/Views/Network/index.jsx rename to source/views/Extension/Views/Network/index.jsx index 8469faf8..13ce5690 100644 --- a/source/Popup/Views/Network/index.jsx +++ b/source/views/Extension/Views/Network/index.jsx @@ -6,8 +6,9 @@ import { useRouter } from '@components/Router'; import { Typography } from '@material-ui/core'; import { getNetworks } from '@redux/network'; import BackIcon from '@assets/icons/back.svg'; -import { Button, Header, LinkButton } from '@ui'; -import { Layout } from '@components'; +import { + Button, Header, LinkButton, Layout, +} from '@components'; import useStyles from './styles'; import NoNetworks from './components/NoNetworks'; diff --git a/source/Popup/Views/Network/styles.js b/source/views/Extension/Views/Network/styles.js similarity index 100% rename from source/Popup/Views/Network/styles.js rename to source/views/Extension/Views/Network/styles.js diff --git a/source/Popup/Views/NetworkCreation/constants.js b/source/views/Extension/Views/NetworkCreation/constants.js similarity index 100% rename from source/Popup/Views/NetworkCreation/constants.js rename to source/views/Extension/Views/NetworkCreation/constants.js diff --git a/source/Popup/Views/NetworkCreation/index.jsx b/source/views/Extension/Views/NetworkCreation/index.jsx similarity index 98% rename from source/Popup/Views/NetworkCreation/index.jsx rename to source/views/Extension/Views/NetworkCreation/index.jsx index 49b2b881..1e5af9d1 100644 --- a/source/Popup/Views/NetworkCreation/index.jsx +++ b/source/views/Extension/Views/NetworkCreation/index.jsx @@ -4,10 +4,10 @@ import { useRouter } from '@components/Router'; import { Typography } from '@material-ui/core'; import { useDispatch, useSelector } from 'react-redux'; -import { Layout } from '@components'; import { + Layout, Header, LinkButton, TextInput, Button, -} from '@ui'; +} from '@components'; import BackIcon from '@assets/icons/back.svg'; import { addNetwork } from '@redux/network'; diff --git a/source/Popup/Views/NetworkCreation/styles.js b/source/views/Extension/Views/NetworkCreation/styles.js similarity index 100% rename from source/Popup/Views/NetworkCreation/styles.js rename to source/views/Extension/Views/NetworkCreation/styles.js diff --git a/source/Popup/Views/SeedPhrase/Steps/Step1.jsx b/source/views/Extension/Views/SeedPhrase/Steps/Step1.jsx similarity index 98% rename from source/Popup/Views/SeedPhrase/Steps/Step1.jsx rename to source/views/Extension/Views/SeedPhrase/Steps/Step1.jsx index 3bdd634d..c54ae171 100644 --- a/source/Popup/Views/SeedPhrase/Steps/Step1.jsx +++ b/source/views/Extension/Views/SeedPhrase/Steps/Step1.jsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { Container, FormInput, Button, Checkbox, -} from '@ui'; +} from '@components'; import { useTranslation } from 'react-i18next'; import Grid from '@material-ui/core/Grid'; import { HANDLER_TYPES, sendMessage } from '@background/Keyring'; diff --git a/source/Popup/Views/SeedPhrase/Steps/Step2.jsx b/source/views/Extension/Views/SeedPhrase/Steps/Step2.jsx similarity index 90% rename from source/Popup/Views/SeedPhrase/Steps/Step2.jsx rename to source/views/Extension/Views/SeedPhrase/Steps/Step2.jsx index 1e1414f6..79222b4a 100644 --- a/source/Popup/Views/SeedPhrase/Steps/Step2.jsx +++ b/source/views/Extension/Views/SeedPhrase/Steps/Step2.jsx @@ -1,7 +1,6 @@ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; -import { SeedPhrase } from '@components'; -import { Container } from '@ui'; +import { SeedPhrase, Container } from '@components'; import { HANDLER_TYPES, sendMessage } from '@background/Keyring'; const Step2 = ({ password }) => { diff --git a/source/Popup/Views/SeedPhrase/hooks/useSteps.jsx b/source/views/Extension/Views/SeedPhrase/hooks/useSteps.jsx similarity index 96% rename from source/Popup/Views/SeedPhrase/hooks/useSteps.jsx rename to source/views/Extension/Views/SeedPhrase/hooks/useSteps.jsx index d5178341..9c545809 100644 --- a/source/Popup/Views/SeedPhrase/hooks/useSteps.jsx +++ b/source/views/Extension/Views/SeedPhrase/hooks/useSteps.jsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { LinkButton } from '@ui'; +import { LinkButton } from '@components'; import { useTranslation } from 'react-i18next'; import { useRouter } from '@components/Router'; import BackIcon from '@assets/icons/back.svg'; diff --git a/source/Popup/Views/SeedPhrase/index.jsx b/source/views/Extension/Views/SeedPhrase/index.jsx similarity index 85% rename from source/Popup/Views/SeedPhrase/index.jsx rename to source/views/Extension/Views/SeedPhrase/index.jsx index a594c57b..e650e62a 100644 --- a/source/Popup/Views/SeedPhrase/index.jsx +++ b/source/views/Extension/Views/SeedPhrase/index.jsx @@ -1,6 +1,5 @@ import React from 'react'; -import { Layout } from '@components'; -import { Header } from '@ui'; +import { Layout, Header } from '@components'; import { useTranslation } from 'react-i18next'; import useSteps from './hooks/useSteps'; diff --git a/source/views/Extension/Views/SendError/index.jsx b/source/views/Extension/Views/SendError/index.jsx new file mode 100644 index 00000000..d191cef7 --- /dev/null +++ b/source/views/Extension/Views/SendError/index.jsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { Typography } from '@material-ui/core'; +import { Button, Layout } from '@components'; +import { useRouter } from '@components/Router'; +import NoMouthFace from '@assets/icons/nomouth-face.svg'; +import RedFlag from '@assets/icons/red-flag.svg'; +import FlyBill from '@assets/icons/fly-bill.svg'; + +import { useSelector } from 'react-redux'; +import useStyles from './styles'; + +const ERROR_EMOJI = { + 100: FlyBill, + 300: NoMouthFace, + 301: RedFlag, +}; + +const SendErrorScreen = () => { + const { t } = useTranslation(); + const { navigator } = useRouter(); + const navigateHome = () => navigator?.navigate?.('home'); + const styles = useStyles(); + + const { + error: errorCode, + } = useSelector((state) => state.send); + + return ( + +
+ + {t(`sendError.${errorCode}.title`) || t('sendError.default.title') } + {t(`sendError.${errorCode}.description`) || t('sendError.default.title')} + {`${t('sendError.errorCode')}${errorCode}`} +
+ + ); +}; + +export default SendErrorScreen; diff --git a/source/views/Extension/Views/SendError/styles.js b/source/views/Extension/Views/SendError/styles.js new file mode 100644 index 00000000..792fb6ef --- /dev/null +++ b/source/views/Extension/Views/SendError/styles.js @@ -0,0 +1,29 @@ +import { makeStyles } from '@material-ui/core/styles'; + +export default makeStyles((theme) => ({ + container: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + padding: `${theme.spacing(1)}px ${theme.spacing(4)}px`, + height: 350, + textAlign: 'center', + whiteSpace: 'pre-line', + }, + image: { + width: 46, + height: 46, + marginBottom: 20, + }, + text: { + marginBottom: 15, + }, + errorCode: { + fontWeight: 400, + marginBottom: 20, + }, + button: { + width: 165, + }, +})); diff --git a/source/Popup/Views/SendFlow/components/cancelButton.jsx b/source/views/Extension/Views/SendFlow/components/cancelButton.jsx similarity index 90% rename from source/Popup/Views/SendFlow/components/cancelButton.jsx rename to source/views/Extension/Views/SendFlow/components/cancelButton.jsx index da4f3fdb..5949f084 100644 --- a/source/Popup/Views/SendFlow/components/cancelButton.jsx +++ b/source/views/Extension/Views/SendFlow/components/cancelButton.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; -import { LinkButton } from '@ui'; +import { LinkButton } from '@components'; import { useRouter } from '@components/Router'; const CancelButton = () => { diff --git a/source/Popup/Views/SendFlow/components/index.js b/source/views/Extension/Views/SendFlow/components/index.js similarity index 100% rename from source/Popup/Views/SendFlow/components/index.js rename to source/views/Extension/Views/SendFlow/components/index.js diff --git a/source/views/Extension/Views/SendFlow/hooks/useSteps.jsx b/source/views/Extension/Views/SendFlow/hooks/useSteps.jsx new file mode 100644 index 00000000..cd001fbe --- /dev/null +++ b/source/views/Extension/Views/SendFlow/hooks/useSteps.jsx @@ -0,0 +1,288 @@ +import React, { useEffect, useMemo, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { useDispatch, useSelector } from "react-redux"; +import { LinkButton } from "@components"; +import BackIcon from "@assets/icons/back.svg"; +import { setAssets } from "@redux/wallet"; +import { HANDLER_TYPES, sendMessage } from "@background/Keyring"; +import { + isICNSName, + validateAddress, + validateCanisterId, + validatePrincipalId, +} from "@shared/utils/ids"; +import { ADDRESS_TYPES, getAssetFee } from "@shared/constants/addresses"; +import { useICPPrice } from "@redux/icp"; +import { + setSendTokenAmount, + setSendTokenSelectedAsset, + setSendTokenAddressInfo, + swapSendTokenValues, + sendToken, + burnXTC, + resetState, +} from "@redux/send"; +import { useICNS } from "@hooks"; +import { + MAX_DECIMALS, + DISPLAY_DECIMALS, + XTC_OPTIONS, +} from "@shared/constants/send"; +import { truncateFloatForDisplay } from "@shared/utils/send"; + +import { SelectAssetStep, XtcToCanisterStep, ConfirmStep } from "../steps"; + +import { CancelButton } from "../components"; + +const getAddressType = (address) => { + const type = validatePrincipalId(address) + ? ADDRESS_TYPES.PRINCIPAL + : ADDRESS_TYPES.ACCOUNT; + return isICNSName(address) ? ADDRESS_TYPES.ICNS : type; +}; + +const useSteps = () => { + const { t } = useTranslation(); + const dispatch = useDispatch(); + + const { assets } = useSelector((state) => state.wallet); + const { amount, address, selectedAsset, primaryValue, fulfilled } = + useSelector((state) => state.send); + + const icpPrice = useICPPrice(true); + + const [step, setStep] = useState(0); + const [destination, setDestination] = useState(XTC_OPTIONS.SEND); + const [sendingXTCtoCanister, setSendingXTCtoCanister] = useState(false); + + const { + loading, + resolvedAddress, + isValid: isValidICNS, + } = useICNS(address, selectedAsset?.symbol); + + const handleChangeAsset = (value) => { + dispatch( + setSendTokenAddressInfo({ + isValid: null, + resolvedAddress: null, + type: null, + }) + ); + dispatch(setSendTokenSelectedAsset({ icpPrice, value })); + }; + const handleChangeDestination = (value) => setDestination(value); + + const handleSendClick = () => { + if (sendingXTCtoCanister && destination === XTC_OPTIONS.BURN) { + dispatch(burnXTC()); + } else { + dispatch(sendToken()); + } + }; + + const availableAmount = useMemo(() => { + const fee = getAssetFee(selectedAsset); + + return truncateFloatForDisplay( + selectedAsset?.amount - fee, + MAX_DECIMALS, + DISPLAY_DECIMALS + ); + }, [selectedAsset?.amount]); + const convertedAvailableAmount = Math.max( + availableAmount * primaryValue.conversionRate, + 0 + ); + const availableAmountData = useMemo( + () => ({ + amount: convertedAvailableAmount, + prefix: primaryValue.prefix, + suffix: primaryValue.suffix, + }), + [convertedAvailableAmount, primaryValue] + ); + + // TODO: Refactor cleaner way + // when seeing asset as USD, + // we need to convert back the amount to the correct rate when going to review + const convertToPrimaryAsset = () => { + const parsedAmount = truncateFloatForDisplay( + amount / primaryValue.conversionRate, + MAX_DECIMALS, + DISPLAY_DECIMALS + ); + + dispatch(setSendTokenAmount(parsedAmount)); + }; + + // TODO: Refactor cleaner way + // when coming back from review we need to view amount with the correct rate + const convertToSecondaryAsset = () => { + const parsedAmount = truncateFloatForDisplay( + amount * primaryValue.conversionRate, + MAX_DECIMALS, + DISPLAY_DECIMALS + ); + + dispatch(setSendTokenAmount(parsedAmount)); + }; + + const handleSwapValues = () => dispatch(swapSendTokenValues()); + + const handleNextStep = () => { + const newStep = sendingXTCtoCanister ? 1 : 2; + + convertToPrimaryAsset(); + setStep(newStep); + }; + + const handlePreviousStep = () => { + const newStep = sendingXTCtoCanister ? 1 : 0; + + setStep(newStep); + if (!sendingXTCtoCanister) convertToSecondaryAsset(); + }; + + useEffect(() => { + if (amount > convertedAvailableAmount) { + const parsedAmount = truncateFloatForDisplay( + convertedAvailableAmount, + MAX_DECIMALS, + DISPLAY_DECIMALS + ); + + dispatch(setSendTokenAmount(parsedAmount)); + } + }, [amount, convertedAvailableAmount]); + + useEffect(() => { + if (!assets?.length) { + sendMessage( + { + type: HANDLER_TYPES.GET_ASSETS, + params: {}, + }, + (keyringAssets) => { + dispatch(setAssets({ keyringAssets, icpPrice })); + } + ); + } + }, []); + + useEffect(() => { + if (address !== null) { + let isValid = validateAddress(address) || isValidICNS; + const type = getAddressType(address); + // TODO: Serialize token standard in asset and check for 'icp' standard tokens here + if ( + type === ADDRESS_TYPES.ACCOUNT && + !["ICP", "OGY"].includes(selectedAsset?.symbol) + ) { + isValid = false; + } + dispatch(setSendTokenAddressInfo({ isValid, type, resolvedAddress })); + + setSendingXTCtoCanister( + selectedAsset?.symbol === "XTC" && validateCanisterId(address) + ); + } + }, [address, selectedAsset, isValidICNS, resolvedAddress]); + + useEffect(() => { + if (fulfilled) { + dispatch(resetState()); + setStep(0); + } + }, [fulfilled]); + + useEffect(() => { + if (assets?.length > 0) { + const hasAmount = Boolean(selectedAsset?.amount) + const hasPrice = Boolean(selectedAsset?.price); + + if (hasAmount || hasPrice) { + const foundAsset = assets?.find( + (asset) => asset.canisterId === selectedAsset.canisterId + ); + + if ( + foundAsset?.amount !== selectedAsset?.amount || + foundAsset?.price !== selectedAsset?.price + ) { + dispatch(setSendTokenSelectedAsset({ icpPrice, value: foundAsset })); + } + } + + if (!hasAmount && !hasPrice) { + console.log(444) + dispatch(setSendTokenSelectedAsset({ icpPrice, value: assets[0] })); + } + } + }, [assets]); + + const step2c = { + component: ( + setStep(2)} + destination={destination} + handleChangeDestination={handleChangeDestination} + /> + ), + left: ( + { + convertToSecondaryAsset(); + setStep(0); + }} + startIcon={BackIcon} + /> + ), + right: , + center: `${t("send.choose")}`, + }; + + let step2; + + if (sendingXTCtoCanister) { + step2 = step2c; + } + + const steps = [ + { + component: ( + + ), + left: null, + right: , + center: t("send.title"), + }, + { + ...step2, + }, + { + component: , + left: ( + handlePreviousStep()} + startIcon={BackIcon} + /> + ), + right: , + center: `${t("send.review")}`, + }, + ]; + + return steps[step]; +}; + +export default useSteps; diff --git a/source/Popup/Views/SendFlow/index.jsx b/source/views/Extension/Views/SendFlow/index.jsx similarity index 86% rename from source/Popup/Views/SendFlow/index.jsx rename to source/views/Extension/Views/SendFlow/index.jsx index baf4973b..8a3664a1 100644 --- a/source/Popup/Views/SendFlow/index.jsx +++ b/source/views/Extension/Views/SendFlow/index.jsx @@ -1,6 +1,5 @@ import React, { useEffect } from 'react'; -import { Layout } from '@components'; -import { Header } from '@ui'; +import { Layout, Header } from '@components'; import { useContacts } from '@hooks'; import useSteps from './hooks/useSteps'; diff --git a/source/Popup/Views/SendFlow/steps/confirm/index.jsx b/source/views/Extension/Views/SendFlow/steps/confirm/index.jsx similarity index 98% rename from source/Popup/Views/SendFlow/steps/confirm/index.jsx rename to source/views/Extension/Views/SendFlow/steps/confirm/index.jsx index efdcf58a..dacc2cfc 100644 --- a/source/Popup/Views/SendFlow/steps/confirm/index.jsx +++ b/source/views/Extension/Views/SendFlow/steps/confirm/index.jsx @@ -4,20 +4,21 @@ import extension from 'extensionizer'; import { useTranslation } from 'react-i18next'; import { useDispatch, useSelector } from 'react-redux'; import Grid from '@material-ui/core/Grid'; -import { - Container, - InfoRow, - Button, - AssetFormat, - USDFormat, -} from '@ui'; import { setAssets, setAssetsLoading } from '@redux/wallet'; import { Typography } from '@material-ui/core'; import PlugController from '@psychedelic/plug-controller'; import { Principal } from '@dfinity/principal'; import { - useRouter, TokenIcon, TABS, AddressTranslation, + Container, + InfoRow, + Button, + AssetFormat, + USDFormat, + useRouter, + TokenIcon, + TABS, + AddressTranslation, } from '@components'; import { ADDRESS_TYPES, getAssetFee } from '@shared/constants/addresses'; import { HANDLER_TYPES, sendMessage } from '@background/Keyring'; @@ -81,7 +82,7 @@ const Confirm = ({ handleSendClick }) => { useEffect(() => { if (error) { - navigator.navigate('error'); + navigator.navigate('send-error'); } }, [error]); diff --git a/source/Popup/Views/SendFlow/steps/index.js b/source/views/Extension/Views/SendFlow/steps/index.js similarity index 100% rename from source/Popup/Views/SendFlow/steps/index.js rename to source/views/Extension/Views/SendFlow/steps/index.js diff --git a/source/Popup/Views/SendFlow/steps/selectAsset/components/cyclesToAccountWarning.jsx b/source/views/Extension/Views/SendFlow/steps/selectAsset/components/cyclesToAccountWarning.jsx similarity index 93% rename from source/Popup/Views/SendFlow/steps/selectAsset/components/cyclesToAccountWarning.jsx rename to source/views/Extension/Views/SendFlow/steps/selectAsset/components/cyclesToAccountWarning.jsx index a14883c4..34d3afb6 100644 --- a/source/Popup/Views/SendFlow/steps/selectAsset/components/cyclesToAccountWarning.jsx +++ b/source/views/Extension/Views/SendFlow/steps/selectAsset/components/cyclesToAccountWarning.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import Grid from '@material-ui/core/Grid'; -import { Alert } from '@ui'; +import { Alert } from '@components'; import useStyles from '../../../styles'; const CyclesToAccountWarning = () => { diff --git a/source/Popup/Views/SendFlow/steps/selectAsset/components/index.jsx b/source/views/Extension/Views/SendFlow/steps/selectAsset/components/index.jsx similarity index 100% rename from source/Popup/Views/SendFlow/steps/selectAsset/components/index.jsx rename to source/views/Extension/Views/SendFlow/steps/selectAsset/components/index.jsx diff --git a/source/Popup/Views/SendFlow/steps/selectAsset/index.jsx b/source/views/Extension/Views/SendFlow/steps/selectAsset/index.jsx similarity index 56% rename from source/Popup/Views/SendFlow/steps/selectAsset/index.jsx rename to source/views/Extension/Views/SendFlow/steps/selectAsset/index.jsx index aaf65b5a..4aa06b13 100644 --- a/source/Popup/Views/SendFlow/steps/selectAsset/index.jsx +++ b/source/views/Extension/Views/SendFlow/steps/selectAsset/index.jsx @@ -1,21 +1,30 @@ -import React, { useState, useEffect } from 'react'; -import Grid from '@material-ui/core/Grid'; -import PropTypes from 'prop-types'; -import { useDispatch, useSelector } from 'react-redux'; +import React, { useState, useEffect } from "react"; +import Grid from "@material-ui/core/Grid"; +import PropTypes from "prop-types"; +import { useDispatch, useSelector } from "react-redux"; -import { IDInput } from '@components'; import { - FormItem, MultiInput, Container, Button, Dialog, -} from '@ui'; -import { useTranslation } from 'react-i18next'; -import { Typography } from '@material-ui/core'; -import NumberFormat from 'react-number-format'; -import { ADDRESS_TYPES } from '@shared/constants/addresses'; -import { isICNSName } from '@shared/utils/ids'; -import { setSendTokenAmount, setSendTokenAddress, resetState } from '@redux/send'; + IDInput, + FormItem, + MultiInput, + Container, + Button, + Dialog, +} from "@components"; +import { useTranslation } from "react-i18next"; +import { Typography } from "@material-ui/core"; +import NumberFormat from "react-number-format"; +import { ADDRESS_TYPES } from "@shared/constants/addresses"; +import { isICNSName } from "@shared/utils/ids"; +import { + setSendTokenAmount, + setSendTokenAddress, + resetState, +} from "@redux/send"; -import useStyles from '../../styles'; -import { CyclesToAccountWarning } from './components'; +import useStyles from "../../styles"; +import { CyclesToAccountWarning } from "./components"; +import Skeleton from "react-loading-skeleton"; const SelectAsset = ({ resolvedAddress, @@ -29,7 +38,7 @@ const SelectAsset = ({ const dispatch = useDispatch(); const classes = useStyles(); - const { assets } = useSelector((state) => state.wallet); + const { assets, assetsLoading } = useSelector((state) => state.wallet); const { amount: rawAmount, address, @@ -41,8 +50,9 @@ const SelectAsset = ({ const amount = Number(rawAmount); const { principalId, accountId } = useSelector((state) => state.wallet); - const isUserAddress = [principalId, accountId].includes(address) - || [principalId, accountId].includes(resolvedAddress); + const isUserAddress = + [principalId, accountId].includes(address) || + [principalId, accountId].includes(resolvedAddress); const conversionPrice = amount / secondaryValue.price; const [openAssets, setOpenAssets] = useState(false); @@ -52,12 +62,13 @@ const SelectAsset = ({ handleChangeAsset(value); }; - const isContinueDisabled = !(parseFloat(amount) > 0) - || !addressInfo.isValid - || loadingAddress - || address === null - || address === '' - || isUserAddress; + const isContinueDisabled = + !(parseFloat(amount) > 0) || + !addressInfo.isValid || + loadingAddress || + address === null || + address === "" || + isUserAddress; const handleChangeAmount = (newAmount) => { dispatch(setSendTokenAmount(newAmount)); @@ -69,7 +80,6 @@ const SelectAsset = ({ useEffect(() => { dispatch(resetState()); - handleChangeAsset(assets[0]); }, []); return ( @@ -77,8 +87,8 @@ const SelectAsset = ({ - )} - subtitle={( + } + subtitle={
- -   - {t('send.available')} + {assetsLoading ? ( + + ) : ( + + )} +   + {t("send.available")} +
- )} + } /> - )} + } /> - { - addressInfo.type === ADDRESS_TYPES.ACCOUNT && selectedAsset.id === 'CYCLES' - && ( - - ) - } + {addressInfo.type === ADDRESS_TYPES.ACCOUNT && + selectedAsset.id === "CYCLES" && } {!!address && !addressInfo?.isValid && !loadingAddress && ( - {isICNSName(address) ? t('send.invalidICNS') : t('send.invalidAddress')} + {isICNSName(address) + ? t("send.invalidICNS") + : t("send.invalidAddress")} + + )} + {isUserAddress && ( + + {t("deposit.sameAddressFromTo")} )} - {isUserAddress && {t('deposit.sameAddressFromTo')}} - +