diff --git a/packages/ui/package.json b/packages/ui/package.json index 1a39f514..6f6e2c6b 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -5,7 +5,6 @@ "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@fontsource/jost": "^5.0.3", - "@mui/icons-material": "^5.11.16", "@mui/material": "^5.13.6", "@mui/styled-engine": "^5.13.2", "@polkadot/api": "^10.9.1", diff --git a/packages/ui/src/components/CallInfo.tsx b/packages/ui/src/components/CallInfo.tsx index 00311843..98bef947 100644 --- a/packages/ui/src/components/CallInfo.tsx +++ b/packages/ui/src/components/CallInfo.tsx @@ -7,7 +7,7 @@ import { useApi } from '../contexts/ApiContext' import { getExtrinsicName, isProxyCall } from '../utils' import { formatBnBalance } from '../utils/formatBnBalance' import MultisigCompactDisplay from './MultisigCompactDisplay' -import { Launch as LaunchIcon } from '@mui/icons-material' +import { HiOutlineArrowTopRightOnSquare as LaunchIcon } from 'react-icons/hi2' import { Link } from './library' import { usePjsLinks } from '../hooks/usePjsLinks' import { Alert } from '@mui/material' @@ -126,10 +126,7 @@ const CallInfo = ({ href={link} target="_blank" > - + )} diff --git a/packages/ui/src/components/Drawer/DrawerMenu.tsx b/packages/ui/src/components/Drawer/DrawerMenu.tsx index c7484a6f..9dc0f46d 100644 --- a/packages/ui/src/components/Drawer/DrawerMenu.tsx +++ b/packages/ui/src/components/Drawer/DrawerMenu.tsx @@ -1,5 +1,5 @@ import IconButton from '@mui/material/IconButton' -import { ChevronRight as ChevronRightIcon } from '@mui/icons-material' +import { HiOutlineChevronRight as ChevronRightIcon } from 'react-icons/hi2' import Divider from '@mui/material/Divider' import List from '@mui/material/List' import ListItem from '@mui/material/ListItem' @@ -30,7 +30,7 @@ function DrawerMenu({ handleDrawerClose }: DrawerMenuProps) { <> - + diff --git a/packages/ui/src/components/Expander.tsx b/packages/ui/src/components/Expander.tsx index 388156ac..dd28bbf9 100644 --- a/packages/ui/src/components/Expander.tsx +++ b/packages/ui/src/components/Expander.tsx @@ -1,7 +1,7 @@ import { Box, Collapse } from '@mui/material' import { ReactNode, useState } from 'react' import { styled } from '@mui/material/styles' -import { KeyboardArrowRight as KeyboardArrowRightIcon } from '@mui/icons-material' +import { HiChevronRight as ChevronRightIcon } from 'react-icons/hi2' interface Props { className?: string @@ -19,7 +19,7 @@ const Expander = ({ className = '', title, content, expanded = false }: Props) = onClick={() => setOpen(!open)} className="titleWrapper" > - + {title} {content} diff --git a/packages/ui/src/components/Header/index.tsx b/packages/ui/src/components/Header/index.tsx index f55a5c36..654feb73 100644 --- a/packages/ui/src/components/Header/index.tsx +++ b/packages/ui/src/components/Header/index.tsx @@ -5,7 +5,7 @@ import { useMemo } from 'react' import MuiAppBar from '@mui/material/AppBar' import MultiProxySelection from '../select/MultiProxySelection' import { useAccounts } from '../../contexts/AccountsContext' -import { Menu as MenuIcon } from '@mui/icons-material' +import { HiOutlineBars3 as MenuIcon } from 'react-icons/hi2' import { useMultiProxy } from '../../contexts/MultiProxyContext' import { ROUTES } from '../../pages/routes' import { isEmptyArray } from '../../utils' @@ -91,17 +91,15 @@ const RouterLinkStyled = styled(RouterLink)` } ` -const BoxStyled = styled(Box)( - ({ theme }) => ` - display: none; - - @media (min-width: ${theme.breakpoints.values.sm}px) { - flex-grow: 1; - display: flex; - align-items: center; - } +const BoxStyled = styled(Box)` + display: none; + + @media (min-width: ${({ theme }) => theme.breakpoints.values.sm}px) { + flex-grow: 1; + display: flex; + align-items: center; + } ` -) const LogoWrapperStyled = styled(Box)` display: flex; @@ -116,13 +114,12 @@ const LogoStyled = styled('img')` height: 3rem; ` -const IconButtonStyled = styled(IconButton)( - ({ theme }) => ` - display: block; - @media (min-width: ${theme.breakpoints.values.sm}px) { - display: none; - } +const IconButtonStyled = styled(IconButton)` + display: block; + + @media (min-width: ${({ theme }) => theme.breakpoints.values.sm}px) { + display: none; + } ` -) export default Header diff --git a/packages/ui/src/components/IdentityIcon.tsx b/packages/ui/src/components/IdentityIcon.tsx index 73857c7d..3cd37918 100644 --- a/packages/ui/src/components/IdentityIcon.tsx +++ b/packages/ui/src/components/IdentityIcon.tsx @@ -1,9 +1,10 @@ import { Tooltip } from '@mui/material' import { DeriveAccountRegistration } from '@polkadot/api-derive/types' import { - CheckCircleRounded as CheckCircleRoundedIcon, - RemoveCircleOutlineRounded as RemoveCircleOutlineRoundedIcon -} from '@mui/icons-material' + HiOutlineCheckCircle as CheckCircleRoundedIcon, + HiOutlineMinusCircle as RemoveCircleOutlineRoundedIcon +} from 'react-icons/hi2' + import { useMemo } from 'react' import { styled } from '@mui/material/styles' diff --git a/packages/ui/src/components/NewMulisigAlert.tsx b/packages/ui/src/components/NewMulisigAlert.tsx index 9188fdcf..bd4253af 100644 --- a/packages/ui/src/components/NewMulisigAlert.tsx +++ b/packages/ui/src/components/NewMulisigAlert.tsx @@ -1,6 +1,6 @@ import { Alert, IconButton } from '@mui/material' import { styled } from '@mui/material/styles' -import { Close as CloseIcon } from '@mui/icons-material' +import { HiOutlineXMark as CloseIcon } from 'react-icons/hi2' interface Props { className?: string @@ -24,7 +24,7 @@ const NewMulisigAlert = ({ className = '', onClose }: Props) => { color="inherit" onClick={onClose} > - + ) diff --git a/packages/ui/src/components/OptionsMenu.tsx b/packages/ui/src/components/OptionsMenu.tsx index 62c20e94..5d495e67 100644 --- a/packages/ui/src/components/OptionsMenu.tsx +++ b/packages/ui/src/components/OptionsMenu.tsx @@ -3,7 +3,7 @@ import MenuItem from '@mui/material/MenuItem' import { IconButton, ListItemIcon, ListItemText } from '@mui/material' import { MouseEvent, ReactNode, useCallback, useState } from 'react' import { styled } from '@mui/material/styles' -import { MoreVert as MoreVertIcon } from '@mui/icons-material' +import { HiEllipsisVertical as MoreVertIcon } from 'react-icons/hi2' export interface MenuOption { text: string diff --git a/packages/ui/src/components/Settings/index.tsx b/packages/ui/src/components/Settings/index.tsx deleted file mode 100644 index c484dd18..00000000 --- a/packages/ui/src/components/Settings/index.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Box, Fab, Tooltip } from '@mui/material' -import { Settings as SettingsIcon } from '@mui/icons-material' - -export const Settings = () => { - return ( - - - - - - - - ) -} diff --git a/packages/ui/src/components/SuccessCreation.tsx b/packages/ui/src/components/SuccessCreation.tsx index 7cf065e0..8e67eb83 100644 --- a/packages/ui/src/components/SuccessCreation.tsx +++ b/packages/ui/src/components/SuccessCreation.tsx @@ -1,6 +1,6 @@ import { Box, Grid } from '@mui/material' import { styled } from '@mui/material/styles' -import { AccessTime as AccessTimeIcon } from '@mui/icons-material' +import { HiOutlineClock as AccessTimeIcon } from 'react-icons/hi2' interface Props { className?: string diff --git a/packages/ui/src/components/Toasts/ToastBar.tsx b/packages/ui/src/components/Toasts/ToastBar.tsx index 7777b721..aed7ea67 100644 --- a/packages/ui/src/components/Toasts/ToastBar.tsx +++ b/packages/ui/src/components/Toasts/ToastBar.tsx @@ -1,6 +1,6 @@ import { IconButton, Snackbar } from '@mui/material' import { Toast, useToasts } from '../../contexts/ToastContext' -import { Close as CloseIcon } from '@mui/icons-material' +import { HiOutlineXMark as CloseIcon } from 'react-icons/hi2' import ToastContent from './ToastContent' import React, { useCallback } from 'react' import { styled } from '@mui/material/styles' @@ -44,7 +44,7 @@ const ToastBar = ({ toast, className }: Props) => { color="inherit" onClick={handleClose} > - + } message={} diff --git a/packages/ui/src/components/Toasts/ToastContent.tsx b/packages/ui/src/components/Toasts/ToastContent.tsx index 1c7fa161..5cf715a4 100644 --- a/packages/ui/src/components/Toasts/ToastContent.tsx +++ b/packages/ui/src/components/Toasts/ToastContent.tsx @@ -1,9 +1,6 @@ import { Box, CircularProgress } from '@mui/material' -import { - Launch as LaunchIcon, - ErrorOutline as ErrorOutlineIcon, - CheckCircleOutline as CheckCircleOutlineIcon -} from '@mui/icons-material' +import { MdErrorOutline as ErrorOutlineIcon } from 'react-icons/md' +import { HiOutlineArrowTopRightOnSquare as LaunchIcon, HiOutlineCheckCircle } from 'react-icons/hi2' import { styled } from '@mui/material/styles' import { useCallback } from 'react' import { Toast } from '../../contexts/ToastContext' @@ -26,11 +23,11 @@ const ToastContent = ({ className, toast }: ToastContentProps) => {
{type === 'success' ? ( - + ) : type === 'loading' ? ( - + ) : ( - + )}
{ className="linkIcon" onClick={onOpenLink} > - + )}
) } -export default styled(ToastContent)( - ({ theme }) => ` - display: flex; - flex-direction: row; - align-items: center; - - .linkIcon { - display: flex; - cursor: pointer; - padding-left: 1rem; - } +const ErrorOutlineIconStyled = styled(ErrorOutlineIcon)` + color: ${({ theme }) => theme.custom.error}; +` - .iconContainer { - margin-right: 1rem; - } +export default styled(ToastContent)` + display: flex; + flex-direction: row; + align-items: center; - .toastIcon { - font-size: 2.5rem; - } + .linkIcon { + display: flex; + cursor: pointer; + padding-left: 1rem; + } - .errorIcon { - color: ${theme.custom.error} - } + .iconContainer { + margin-right: 1rem; + display: flex; + } ` -) diff --git a/packages/ui/src/components/Transactions/Transaction.tsx b/packages/ui/src/components/Transactions/Transaction.tsx index 661da8f8..0a38fc55 100644 --- a/packages/ui/src/components/Transactions/Transaction.tsx +++ b/packages/ui/src/components/Transactions/Transaction.tsx @@ -2,7 +2,8 @@ import { Badge, Box, Paper } from '@mui/material' import { Button } from '../library' import { styled } from '@mui/material/styles' import CallInfo from '../CallInfo' -import { Gesture as GestureIcon, QuestionMark as QuestionMarkIcon } from '@mui/icons-material' +import { MdOutlineGesture as GestureIcon } from 'react-icons/md' +import { HiOutlineQuestionMarkCircle as QuestionMarkIcon } from 'react-icons/hi2' import { AggregatedData } from './TransactionList' import { useCallback, useMemo, useState } from 'react' import ProposalSigningModal from '../modals/ProposalSigning' @@ -51,9 +52,15 @@ const Transaction = ({ anchorOrigin={{ horizontal: 'left', vertical: 'top' }} > {!aggregatedData.callData ? ( - + ) : ( - + )} @@ -98,25 +105,21 @@ const TransactionFooterStyled = styled('div')` display: flex; ` -const TransactionCallInfoBoxStyled = styled(Box)( - ({ theme }) => ` +const TransactionCallInfoBoxStyled = styled(Box)` flex: 1 1 0; width: 100%; - @media (min-width: ${theme.breakpoints.values.sm}px) { + @media (min-width: ${({ theme }) => theme.breakpoints.values.sm}px) { overflow: hidden; } ` -) -export default styled(Transaction)( - ({ theme }) => ` +export default styled(Transaction)` display: flex; flex-direction: column; margin-bottom: 1rem; - - @media (min-width: ${theme.breakpoints.values.sm}px) { + @media (min-width: ${({ theme }) => theme.breakpoints.values.sm}px) { flex-direction: row; margin-left: 0.5rem; } @@ -129,8 +132,7 @@ export default styled(Transaction)( } .callIcon { - font-size: 7rem; - background-color: ${theme.custom.background.primary}; + background-color: ${({ theme }) => theme.custom.background.primary}; margin: 0.5rem; padding: 1rem; height: auto; @@ -141,17 +143,16 @@ export default styled(Transaction)( max-height: 1.3125rem; left: 29px; top: 19px; - border-radius: ${theme.custom.borderRadius}; + border-radius: ${({ theme }) => theme.custom.borderRadius}; padding: 0.25rem 0.5rem; max-width: 2.625rem; font-size: 0.625rem; font-weight: 500; - border: 1px solid ${theme.custom.gray[400]}; + border: 1px solid ${({ theme }) => theme.custom.gray[400]}; } .badge.red > .MuiBadge-badge { - background-color: ${theme.custom.proxyBadge.multi}; - color: ${theme.custom.text.black}; + background-color: ${({ theme }) => theme.custom.proxyBadge.multi}; + color: ${({ theme }) => theme.custom.text.black}; } ` -) diff --git a/packages/ui/src/components/Transactions/TransactionList.tsx b/packages/ui/src/components/Transactions/TransactionList.tsx index d4fef670..bde8bacb 100644 --- a/packages/ui/src/components/Transactions/TransactionList.tsx +++ b/packages/ui/src/components/Transactions/TransactionList.tsx @@ -10,7 +10,7 @@ import { useAccounts } from '../../contexts/AccountsContext' import { ISanitizedCall, parseGenericCall } from '../../utils' import { GenericCall } from '@polkadot/types' import { AnyJson, AnyTuple } from '@polkadot/types/types' -import { Flare as FlareIcon } from '@mui/icons-material' +import { MdOutlineFlare as FlareIcon } from 'react-icons/md' import Transaction from './Transaction' import { HexString } from '../../types' import dayjs from 'dayjs' @@ -188,7 +188,10 @@ const TransactionList = ({ className }: Props) => { )} {!pendingTxData.length && !isLoadingPendingTxs && ( - +
You're all set!
 )} diff --git a/packages/ui/src/components/Transactions/TransactionProgress.tsx b/packages/ui/src/components/Transactions/TransactionProgress.tsx index e0008de9..07c65654 100644 --- a/packages/ui/src/components/Transactions/TransactionProgress.tsx +++ b/packages/ui/src/components/Transactions/TransactionProgress.tsx @@ -12,10 +12,11 @@ import { ListItemIcon } from '@mui/material' import { - ExpandMore as ExpandMoreIcon, - HourglassBottom as HourglassBottomIcon, - Check as CheckIcon -} from '@mui/icons-material' + HiOutlineChevronDown as ExpandMoreIcon, + HiOutlineCheck as CheckIcon +} from 'react-icons/hi2' +import { MdOutlineHourglassBottom } from 'react-icons/md' + import AccountDisplay from '../AccountDisplay' interface TransactionProgressProps { @@ -30,7 +31,11 @@ const ListItemToSign = ({ approvals, signer }: { approvals: string[]; signer: st - {approvals.includes(signer) ? : } + {approvals.includes(signer) ? ( + + ) : ( + + )} @@ -56,7 +61,7 @@ const TransactionProgress = ({ return ( - }> + }> { color="inherit" onClick={removeItem} > - + ) diff --git a/packages/ui/src/components/library/ModalCloseButton.tsx b/packages/ui/src/components/library/ModalCloseButton.tsx index 6f1627e1..55d24601 100644 --- a/packages/ui/src/components/library/ModalCloseButton.tsx +++ b/packages/ui/src/components/library/ModalCloseButton.tsx @@ -1,5 +1,5 @@ import { IconButton, styled } from '@mui/material' -import { Close as CloseIcon } from '@mui/icons-material' +import { HiOutlineXMark as CloseIcon } from 'react-icons/hi2' interface Props { onClose: () => void @@ -14,7 +14,7 @@ const CloseButton = ({ onClose, className }: Props) => ( onClick={onClose} className={className} > - + ) diff --git a/packages/ui/src/components/modals/ChangeMultisig.tsx b/packages/ui/src/components/modals/ChangeMultisig.tsx index f9945a3a..76d928bd 100644 --- a/packages/ui/src/components/modals/ChangeMultisig.tsx +++ b/packages/ui/src/components/modals/ChangeMultisig.tsx @@ -19,7 +19,7 @@ import { useCheckBalance } from '../../hooks/useCheckBalance' import Warning from '../Warning' import { formatBnBalance } from '../../utils/formatBnBalance' import { useMultisigProposalNeededFunds } from '../../hooks/useMultisigProposalNeededFunds' -import { ErrorOutline as ErrorOutlineIcon } from '@mui/icons-material' +import { MdErrorOutline as ErrorOutlineIcon } from 'react-icons/md' import { useGetSubscanLinks } from '../../hooks/useSubscanLink' import { Button } from '../library' import { ModalCloseButton } from '../library/ModalCloseButton' @@ -437,7 +437,7 @@ const ChangeMultisig = ({ onClose, className }: Props) => { spacing={2} > - {callError ? : } + {callError ? : } {!!callError && (
{callError.includes('multisig.NoTimepoint') @@ -521,10 +521,6 @@ export default styled(ChangeMultisig)` padding: 1rem; } - .errorIcon { - font-size: 4rem; - } - .callErrorMessage { text-align: center; margin-top: 1rem; diff --git a/packages/ui/src/pages/Home.tsx b/packages/ui/src/pages/Home.tsx index dc24e716..37d92b48 100644 --- a/packages/ui/src/pages/Home.tsx +++ b/packages/ui/src/pages/Home.tsx @@ -5,12 +5,11 @@ import TransactionList from '../components/Transactions/TransactionList' import { useSearchParams, useNavigate } from 'react-router-dom' import { Button, ButtonWithIcon, Link } from '../components/library' import AccountDisplay from '../components/AccountDisplay' +import { HiOutlinePaperAirplane, HiOutlinePencil } from 'react-icons/hi2' import { - Edit as EditIcon, - LockReset as LockResetIcon, - ErrorOutline as ErrorOutlineIcon -} from '@mui/icons-material' -import { HiOutlinePaperAirplane } from 'react-icons/hi2' + MdOutlineLockReset as LockResetIcon, + MdErrorOutline as ErrorOutlineIcon +} from 'react-icons/md' import Send from '../components/modals/Send' import { usePendingTx } from '../hooks/usePendingTx' import OptionsMenu, { MenuOption } from '../components/OptionsMenu' @@ -116,7 +115,7 @@ const Home = ({ className }: Props) => { const opts = [ { text: 'Edit names', - icon: , + icon: , onClick: () => setIsEditModalOpen(true) } ] @@ -126,7 +125,7 @@ const Home = ({ className }: Props) => { !selectedIsWatched && opts.push({ text: 'Change multisig', - icon: , + icon: , onClick: () => setIsChangeMultiModalOpen(true) }) @@ -208,7 +207,7 @@ const Home = ({ className }: Props) => { >
- +
An error occurred.
 diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts index 79e6eaa1..a67e1215 100644 --- a/packages/ui/vite.config.ts +++ b/packages/ui/vite.config.ts @@ -20,8 +20,5 @@ export default defineConfig({ ], resolve: { preserveSymlinks: true // this is the fix! - }, - optimizeDeps: { - include: ['@mui/icons-material'] } }) diff --git a/yarn.lock b/yarn.lock index 15f7fdbf..0202b9a1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3173,22 +3173,6 @@ __metadata: languageName: node linkType: hard -"@mui/icons-material@npm:^5.11.16": - version: 5.13.7 - resolution: "@mui/icons-material@npm:5.13.7" - dependencies: - "@babel/runtime": ^7.22.5 - peerDependencies: - "@mui/material": ^5.0.0 - "@types/react": ^17.0.0 || ^18.0.0 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - "@types/react": - optional: true - checksum: 37003114fc345d747406231cbe5d7257992912484923f3a56c9968754b3bfd94c6cc7314b2dea023a9f7aec0d449cb682201f455e42e9b587bd3e806d8f89ce7 - languageName: node - linkType: hard - "@mui/material@npm:^5.13.6": version: 5.13.7 resolution: "@mui/material@npm:5.13.7" @@ -8718,7 +8702,6 @@ __metadata: "@graphql-codegen/client-preset": 4.0.1 "@graphql-codegen/typescript-react-query": ^4.1.0 "@graphql-eslint/eslint-plugin": ^3.19.3 - "@mui/icons-material": ^5.11.16 "@mui/material": ^5.13.6 "@mui/styled-engine": ^5.13.2 "@polkadot/api": ^10.9.1