diff --git a/.dependency-cruiser.js b/.dependency-cruiser.js index 345cfdee961..1896e0bfbd8 100644 --- a/.dependency-cruiser.js +++ b/.dependency-cruiser.js @@ -94,13 +94,14 @@ module.exports = { from: { path: '^src/app/features/.*' }, to: { path: '^src/app/pages/.*' }, }, - { - name: 'only-allow-react-icons-fi', - comment: 'Ensure only icons from `fi` group are allowed', - severity: 'error', - from: { path: '^src' }, - to: { path: 'react-icons.*', pathNot: 'react-icons/fi' }, - }, + // TODO: Replace in future with new icon library + // { + // name: 'only-allow-react-icons-fi', + // comment: 'Ensure only icons from `fi` group are allowed', + // severity: 'error', + // from: { path: '^src' }, + // to: { path: 'react-icons.*', pathNot: 'react-icons/fi' }, + // }, { name: 'no-using-pino-directly', comment: 'Enforce use of Pino logging library via @logger wrapper', diff --git a/package.json b/package.json index f8f6716e80d..df8ca7f174f 100644 --- a/package.json +++ b/package.json @@ -193,7 +193,6 @@ "limiter": "2.1.0", "lodash.get": "4.4.2", "lodash.uniqby": "4.7.0", - "mdi-react": "9.2.0", "micro-packed": "0.3.2", "object-hash": "3.0.0", "observable-hooks": "4.2.3", @@ -210,7 +209,6 @@ "react-dom-confetti": "0.2.0", "react-head": "3.4.2", "react-hot-toast": "2.4.1", - "react-icons": "4.10.1", "react-intersection-observer": "9.5.2", "react-lottie": "1.2.3", "react-redux": "8.1.3", diff --git a/src/app/components/crypto-assets/stacks/components/stacks-unanchored-status-icon.tsx b/src/app/components/crypto-assets/stacks/components/stacks-unanchored-status-icon.tsx index 4b0e52336d5..b412c6df1a8 100644 --- a/src/app/components/crypto-assets/stacks/components/stacks-unanchored-status-icon.tsx +++ b/src/app/components/crypto-assets/stacks/components/stacks-unanchored-status-icon.tsx @@ -1,6 +1,6 @@ import { TransactionTypeIconWrapper } from '@app/components/transaction/transaction-type-icon-wrapper'; -import { MicroblockIcon } from '@app/ui/components/icons/microblock-icon'; +import { ZapIcon } from '@app/ui/components/icons/zap-icon'; export function StacksUnanchoredStatusIcon() { - return } />; + return } />; } diff --git a/src/app/components/transaction/token-transfer-icon.tsx b/src/app/components/transaction/token-transfer-icon.tsx index 46456408ddd..7e12e5f7f5c 100644 --- a/src/app/components/transaction/token-transfer-icon.tsx +++ b/src/app/components/transaction/token-transfer-icon.tsx @@ -3,7 +3,7 @@ import { StacksTx } from '@shared/models/transactions/stacks-transaction.model'; import { useCurrentAccountStxAddressState } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; import { ArrowDownIcon } from '@app/ui/components/icons/arrow-down-icon'; import { ArrowUpIcon } from '@app/ui/components/icons/arrow-up-icon'; -import { MicroblockIcon } from '@app/ui/components/icons/microblock-icon'; +import { ZapIcon } from '@app/ui/components/icons/zap-icon'; import { getColorFromTx } from './transaction-type-icon'; @@ -14,10 +14,11 @@ export function TokenTransferIcon(props: { tx: StacksTx }) { if ('is_unanchored' in tx && tx.is_unanchored) return ( - ); diff --git a/src/app/components/transaction/transaction-icon.tsx b/src/app/components/transaction/transaction-icon.tsx index cf79b5d3d3d..38297ead18e 100644 --- a/src/app/components/transaction/transaction-icon.tsx +++ b/src/app/components/transaction/transaction-icon.tsx @@ -1,8 +1,7 @@ -import FunctionIcon from 'mdi-react/FunctionIcon'; - import { StacksTx } from '@shared/models/transactions/stacks-transaction.model'; import { CodeIcon } from '@app/ui/components/icons/code-icon'; +import { FunctionIcon } from '@app/ui/components/icons/function-icon'; import { PlusIcon } from '@app/ui/components/icons/plus-icon'; import { TokenTransferIcon } from './token-transfer-icon'; diff --git a/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.layout.tsx b/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.layout.tsx index 92b6915c0bd..12b1ede8d23 100644 --- a/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.layout.tsx +++ b/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.layout.tsx @@ -1,5 +1,3 @@ -import { FiCircle } from 'react-icons/fi'; - import { Box, Flex, Stack, styled } from 'leather-styles/jsx'; import { capitalize } from '@app/common/utils'; @@ -8,6 +6,7 @@ import { ExternalLink } from '@app/components/external-link'; import { WarningLabel } from '@app/components/warning-label'; import { ConnectLedgerErr } from '@app/features/ledger/illustrations/ledger-illu-connect-ledger-error'; import { LeatherButton } from '@app/ui/components/button'; +import { CircleIcon } from '@app/ui/components/icons/circle-icon'; import { Caption } from '@app/ui/components/typography/caption'; import { LedgerTitle } from '../../components/ledger-title'; @@ -23,7 +22,7 @@ function PossibleReasonUnableToConnect(props: PossibleReasonUnableToConnectProps return ( - + {text} diff --git a/src/app/pages/fund/components/fast-checkout-badge.tsx b/src/app/pages/fund/components/fast-checkout-badge.tsx index f6601929f4b..cbea061d684 100644 --- a/src/app/pages/fund/components/fast-checkout-badge.tsx +++ b/src/app/pages/fund/components/fast-checkout-badge.tsx @@ -1,16 +1,12 @@ -import { FiZap } from 'react-icons/fi'; - import { HStack, styled } from 'leather-styles/jsx'; +import { ZapIcon } from '@app/ui/components/icons/zap-icon'; + export function FastCheckoutBadge() { - { - /* #4476 FIXME update icon and colours */ - } return ( - - + + Fast checkout diff --git a/src/app/pages/fund/components/zero-percent-fees-badge.tsx b/src/app/pages/fund/components/zero-percent-fees-badge.tsx index d7eb6c35daf..70e5f9f4e0e 100644 --- a/src/app/pages/fund/components/zero-percent-fees-badge.tsx +++ b/src/app/pages/fund/components/zero-percent-fees-badge.tsx @@ -1,13 +1,12 @@ -import { FiStar } from 'react-icons/fi'; - import { HStack, styled } from 'leather-styles/jsx'; +import { StarIcon } from '@app/ui/components/icons/star-icon'; + export function ZeroPercentFeesBadge() { return ( - {/* #4476 FIXME update icon and colours */} - - + + 0 % Fees diff --git a/src/app/pages/onboarding/back-up-secret-key/components/back-up-secret-key.content.tsx b/src/app/pages/onboarding/back-up-secret-key/components/back-up-secret-key.content.tsx index 7a6bd74459a..661e79dd3d7 100644 --- a/src/app/pages/onboarding/back-up-secret-key/components/back-up-secret-key.content.tsx +++ b/src/app/pages/onboarding/back-up-secret-key/components/back-up-secret-key.content.tsx @@ -1,9 +1,8 @@ -import { FiRotateCcw } from 'react-icons/fi'; - import { HStack, Stack, styled } from 'leather-styles/jsx'; import { EyeSlashIcon } from '@app/ui/components/icons/eye-slash-icon'; import { LockIcon } from '@app/ui/components/icons/lock-icon'; +import { RotateLeftIcon } from '@app/ui/components/icons/rotate-left-icon'; export function BackUpSecretKeyContent(): React.JSX.Element { return ( @@ -25,7 +24,7 @@ export function BackUpSecretKeyContent(): React.JSX.Element { - + Your Secret Key gives access to your wallet diff --git a/src/app/pages/select-network/components/network-list-item.layout.tsx b/src/app/pages/select-network/components/network-list-item.layout.tsx index 4f6f0f80cf3..92af4e18b47 100644 --- a/src/app/pages/select-network/components/network-list-item.layout.tsx +++ b/src/app/pages/select-network/components/network-list-item.layout.tsx @@ -1,6 +1,3 @@ -// TODO get icons for Trash, Circle, Star, Zap, CloudOff -import { FiTrash2 } from 'react-icons/fi'; - import { SettingsSelectors } from '@tests/selectors/settings.selectors'; import { Box, Flex, Stack } from 'leather-styles/jsx'; import { styled } from 'leather-styles/jsx'; @@ -9,6 +6,7 @@ import { NetworkConfiguration } from '@shared/constants'; import { getUrlHostname } from '@app/common/utils'; import { LeatherButton } from '@app/ui/components/button'; +import { TrashIcon } from '@app/ui/components/icons/trash-icon'; import { NetworkStatusIndicator } from './network-status-indicator'; @@ -75,8 +73,7 @@ export function NetworkListItemLayout({ onRemoveNetwork(network.id); }} > - {/* FIXME #4476 icon */} - + )} diff --git a/src/app/pages/select-network/components/network-status-indicator.tsx b/src/app/pages/select-network/components/network-status-indicator.tsx index 4b505f306b7..7abfd51e8b6 100644 --- a/src/app/pages/select-network/components/network-status-indicator.tsx +++ b/src/app/pages/select-network/components/network-status-indicator.tsx @@ -1,12 +1,10 @@ -// TODO get new icon for this / migrate -import { FiCloudOff as IconCloudOff } from 'react-icons/fi'; - import { CheckmarkIcon } from '@app/ui/components/icons/checkmark-icon'; +import { CloudOffIcon } from '@app/ui/components/icons/cloud-off-icon'; interface NetworkStatusIndicatorProps { isActive: boolean; isOnline: boolean; } export function NetworkStatusIndicator({ isActive, isOnline }: NetworkStatusIndicatorProps) { - return !isOnline ? : isActive ? : null; + return !isOnline ? : isActive ? : null; } diff --git a/src/app/ui/components/icons/circle-icon.tsx b/src/app/ui/components/icons/circle-icon.tsx new file mode 100644 index 00000000000..4d0fb5e6230 --- /dev/null +++ b/src/app/ui/components/icons/circle-icon.tsx @@ -0,0 +1,23 @@ +import { Square, SquareProps } from 'leather-styles/jsx'; + +import { Svg } from '../svg'; + +export function CircleIcon({ size = 'sm', ...props }: SquareProps) { + return ( + + + + + + ); +} diff --git a/src/app/ui/components/icons/cloud-off-icon.tsx b/src/app/ui/components/icons/cloud-off-icon.tsx new file mode 100644 index 00000000000..470a7eefcb9 --- /dev/null +++ b/src/app/ui/components/icons/cloud-off-icon.tsx @@ -0,0 +1,24 @@ +import { Square, SquareProps } from 'leather-styles/jsx'; + +import { Svg } from '../svg'; + +// TODO: This svg was copied from react-icons temporarily +export function CloudOffIcon({ size = 'sm', ...props }: SquareProps) { + return ( + + + + + + + ); +} diff --git a/src/app/ui/components/icons/function-icon.tsx b/src/app/ui/components/icons/function-icon.tsx new file mode 100644 index 00000000000..8d99b24618d --- /dev/null +++ b/src/app/ui/components/icons/function-icon.tsx @@ -0,0 +1,14 @@ +import { Square } from 'leather-styles/jsx'; + +import { Svg } from '../svg'; + +// TODO: This svg was copied from mdi-react temporarily +export function FunctionIcon({ size = 'xs', ...props }) { + return ( + + + + + + ); +} diff --git a/src/app/ui/components/icons/microblock-icon.tsx b/src/app/ui/components/icons/microblock-icon.tsx deleted file mode 100644 index 4b97e3774a2..00000000000 --- a/src/app/ui/components/icons/microblock-icon.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { FiZap } from 'react-icons/fi'; - -import { Square, SquareProps } from 'leather-styles/jsx'; -import { token } from 'leather-styles/tokens'; - -export function MicroblockIcon({ size = 'xs', ...props }: SquareProps) { - return ( - - {/* TODO: Replace Fi icon here */} - - - ); -} diff --git a/src/app/ui/components/icons/rotate-left-icon.tsx b/src/app/ui/components/icons/rotate-left-icon.tsx new file mode 100644 index 00000000000..f3d1a981bb8 --- /dev/null +++ b/src/app/ui/components/icons/rotate-left-icon.tsx @@ -0,0 +1,23 @@ +import { Square, SquareProps } from 'leather-styles/jsx'; + +import { Svg } from '../svg'; + +export function RotateLeftIcon({ size = 'sm', ...props }: SquareProps) { + return ( + + + + + + ); +} diff --git a/src/app/ui/components/icons/star-icon.tsx b/src/app/ui/components/icons/star-icon.tsx new file mode 100644 index 00000000000..73c59bee940 --- /dev/null +++ b/src/app/ui/components/icons/star-icon.tsx @@ -0,0 +1,23 @@ +import { Square, SquareProps } from 'leather-styles/jsx'; + +import { Svg } from '../svg'; + +export function StarIcon({ size = 'sm', ...props }: SquareProps) { + return ( + + + + + + ); +} diff --git a/src/app/ui/components/icons/trash-icon.tsx b/src/app/ui/components/icons/trash-icon.tsx new file mode 100644 index 00000000000..0014efe57ee --- /dev/null +++ b/src/app/ui/components/icons/trash-icon.tsx @@ -0,0 +1,26 @@ +import { Square, SquareProps } from 'leather-styles/jsx'; + +import { Svg } from '../svg'; + +export function TrashIcon({ size = 'sm', ...props }: SquareProps) { + return ( + + + + + + + + + ); +} diff --git a/src/app/ui/components/icons/zap-icon.tsx b/src/app/ui/components/icons/zap-icon.tsx new file mode 100644 index 00000000000..ac9aaf8183a --- /dev/null +++ b/src/app/ui/components/icons/zap-icon.tsx @@ -0,0 +1,23 @@ +import { Square, SquareProps } from 'leather-styles/jsx'; + +import { Svg } from '../svg'; + +// TODO: This svg was copied from react-icons temporarily +export function ZapIcon({ size = 'sm', ...props }: SquareProps) { + return ( + + + + + + ); +} diff --git a/yarn.lock b/yarn.lock index 1bf9c7c7932..1bfc48d132a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13114,11 +13114,6 @@ mdast-util-to-string@^3.0.0, mdast-util-to-string@^3.1.0: dependencies: "@types/mdast" "^3.0.0" -mdi-react@9.2.0: - version "9.2.0" - resolved "https://registry.yarnpkg.com/mdi-react/-/mdi-react-9.2.0.tgz#58fa8654937e5d86c7dfd8be5ba9259940d21115" - integrity sha512-NI1sIvu142SQKkOMe4bjA9KuvMXpT8PfNOkCblSEuUeakFpgciMuKV9rEyJbQkvFBppDLx1f1xmbcIc06oRyAQ== - media-typer@0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" @@ -15443,11 +15438,6 @@ react-hot-toast@2.4.1: dependencies: goober "^2.1.10" -react-icons@4.10.1: - version "4.10.1" - resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.10.1.tgz#3f3b5eec1f63c1796f6a26174a1091ca6437a500" - integrity sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw== - react-icons@^4.11.0, react-icons@^4.3.1: version "4.12.0" resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.12.0.tgz#54806159a966961bfd5cdb26e492f4dafd6a8d78"