diff --git a/packages/core/src/components/CopyToClipboard/CopyToClipboard.tsx b/packages/core/src/components/CopyToClipboard/CopyToClipboard.tsx
index 688380ed2f..d424c32096 100644
--- a/packages/core/src/components/CopyToClipboard/CopyToClipboard.tsx
+++ b/packages/core/src/components/CopyToClipboard/CopyToClipboard.tsx
@@ -1,5 +1,5 @@
+import { Copy as AssignmentIcon } from '@chia-network/icons';
import { Trans } from '@lingui/macro';
-import { Assignment as AssignmentIcon } from '@mui/icons-material';
import { Tooltip, IconButton } from '@mui/material';
import { styled } from '@mui/material/styles';
import React, { useState } from 'react';
diff --git a/packages/core/src/components/LayoutDashboard/LayoutDashboard.tsx b/packages/core/src/components/LayoutDashboard/LayoutDashboard.tsx
index a5e265345b..922881fdfe 100644
--- a/packages/core/src/components/LayoutDashboard/LayoutDashboard.tsx
+++ b/packages/core/src/components/LayoutDashboard/LayoutDashboard.tsx
@@ -1,4 +1,5 @@
import { useLogout, useGetLoggedInFingerprintQuery, useGetKeyQuery } from '@chia-network/api-react';
+import { Exit as ExitIcon } from '@chia-network/icons';
import { t, Trans } from '@lingui/macro';
import { ExitToApp as ExitToAppIcon } from '@mui/icons-material';
import { Box, AppBar, Toolbar, Drawer, Container, IconButton, Typography, CircularProgress } from '@mui/material';
@@ -50,6 +51,13 @@ const StyledInlineTypography = styled(Typography)`
display: inline-block;
`;
+const ExitIconStyled = styled(ExitIcon)`
+ fill: none !important;
+ position: relative;
+ top: 2px;
+ left: 4px;
+`;
+
export type LayoutDashboardProps = {
children?: ReactNode;
sidebar?: ReactNode;
@@ -143,7 +151,7 @@ export default function LayoutDashboard(props: LayoutDashboardProps) {
*/}
Log Out}>
-
+
diff --git a/packages/core/src/components/StateIndicator/StateIndicator.tsx b/packages/core/src/components/StateIndicator/StateIndicator.tsx
index 49c4d5411d..7b9fcc647f 100644
--- a/packages/core/src/components/StateIndicator/StateIndicator.tsx
+++ b/packages/core/src/components/StateIndicator/StateIndicator.tsx
@@ -13,6 +13,8 @@ const Color = {
};
const StyledFlexContainer = styled(({ color, ...rest }) => )`
+ position: relative;
+ top: -1px;
color: ${({ color }) => color};
`;
@@ -41,7 +43,7 @@ export default function StateComponent(props: StateComponentProps) {
return (
{!hideTitle && {children}}
- {indicator && }
+ {indicator && }
);
}
diff --git a/packages/core/src/components/StateIndicator/StateIndicatorDot.tsx b/packages/core/src/components/StateIndicator/StateIndicatorDot.tsx
index fdff8e93d0..3e0dee8ad2 100644
--- a/packages/core/src/components/StateIndicator/StateIndicatorDot.tsx
+++ b/packages/core/src/components/StateIndicator/StateIndicatorDot.tsx
@@ -1,7 +1,36 @@
-import { FiberManualRecord as FiberManualRecordIcon } from '@mui/icons-material';
+import { ConnectCheckmark, ConnectCancel, ConnectReload } from '@chia-network/icons';
+import React from 'react';
import styled from 'styled-components';
-export default styled(FiberManualRecordIcon)`
+import State from '../../constants/State';
+
+const WrapperStyled = styled.div`
+ display: inline-block;
+ width: 18px;
+ height: 18px;
font-size: 1rem;
- color: ${({ color }) => color};
+ border: 2px solid ${({ color }) => color};
+ border-radius: 50%;
`;
+
+type StateIndicatorDotTypes = {
+ color: string;
+ state: string;
+};
+
+export default function StateIndicatorDot(props: StateIndicatorDotTypes) {
+ const { color, state } = props;
+ function renderIcon() {
+ if (state === State.SUCCESS) {
+ return ;
+ }
+ if (state === State.WARNING) {
+ return ;
+ }
+ if (state === State.ERROR) {
+ return ;
+ }
+ return null;
+ }
+ return {renderIcon()};
+}
diff --git a/packages/gui/src/components/app/AppStatusHeader.tsx b/packages/gui/src/components/app/AppStatusHeader.tsx
index 2764174106..4448ba1f1c 100644
--- a/packages/gui/src/components/app/AppStatusHeader.tsx
+++ b/packages/gui/src/components/app/AppStatusHeader.tsx
@@ -1,18 +1,29 @@
-import { Flex, useMode, Mode } from '@chia-network/core';
-import { WalletConnections, WalletStatus } from '@chia-network/wallets';
+import { Flex, useMode, Mode, useDarkMode } from '@chia-network/core';
+import { WalletConnections, WalletStatus, WalletReceiveAddressField } from '@chia-network/wallets';
import { Trans } from '@lingui/macro';
import { Box, ButtonGroup, Button, Popover } from '@mui/material';
import React, { useState } from 'react';
+import styled from 'styled-components';
import Connections from '../fullNode/FullNodeConnections';
import FullNodeStateIndicator from '../fullNode/FullNodeStateIndicator';
import WalletConnectDropdown from '../walletConnect/WalletConnectDropdown';
export default function AppStatusHeader() {
+ const ButtonStyled = styled(Button)`
+ padding-top: 3px;
+ padding-bottom: 0;
+ border: 1px solid ${(props: any) => props.theme.palette.border.main};
+ &:hover {
+ border: 1px solid ${(props: any) => props.theme.palette.border.main};
+ }
+ white-space: nowrap;
+ `;
const [mode] = useMode();
const [anchorElFN, setAnchorElFN] = useState(null);
const [anchorElW, setAnchorElW] = useState(null);
+ const { isDarkMode } = useDarkMode();
const handleClickFN = (event: React.MouseEvent) => {
setAnchorElFN(event.currentTarget);
@@ -32,16 +43,17 @@ export default function AppStatusHeader() {
return (
+
{mode === Mode.FARMING && (
<>
-
+
>
)}
-
+
-
toggleMultipleSelection(!inMultipleSelectionMode)}
diff --git a/packages/gui/src/components/walletConnect/WalletConnectDropdown.tsx b/packages/gui/src/components/walletConnect/WalletConnectDropdown.tsx
index 0ded529c9b..5ae5bbbcea 100644
--- a/packages/gui/src/components/walletConnect/WalletConnectDropdown.tsx
+++ b/packages/gui/src/components/walletConnect/WalletConnectDropdown.tsx
@@ -2,6 +2,7 @@ import { DropdownBase } from '@chia-network/core';
import { WalletConnect } from '@chia-network/icons';
import { Box, Button } from '@mui/material';
import React from 'react';
+import styled from 'styled-components';
import useWalletConnectContext from '../../hooks/useWalletConnectContext';
import WalletConnectConnections from './WalletConnectConnections';
@@ -9,12 +10,20 @@ import WalletConnectConnections from './WalletConnectConnections';
export default function WalletConnectDropdown() {
const { enabled, pairs, isLoading } = useWalletConnectContext();
+ const ButtonStyled = styled(Button)`
+ height: 40px;
+ border: 1px solid ${(props) => props.theme.palette.border.main};
+ &:hover {
+ border: 1px solid ${(props) => props.theme.palette.border.main};
+ }
+ `;
+
const color = enabled && !isLoading && pairs.get().length > 0 ? 'primary' : 'secondary';
return (
{({ onClose, onToggle }) => [
- ,
+ ,
,
diff --git a/packages/icons/src/NFTs.tsx b/packages/icons/src/NFTs.tsx
index 44be021eb5..9970b3ceff 100644
--- a/packages/icons/src/NFTs.tsx
+++ b/packages/icons/src/NFTs.tsx
@@ -3,6 +3,7 @@ import React from 'react';
import NFTsIcon from './images/NFTs.svg';
import NFTsSmallIcon from './images/NFTsSmall.svg';
+import CopyIcon from './images/copy.svg';
import ReloadIcon from './images/reload.svg';
export function NFTsSmall(props: SvgIconProps) {
@@ -16,3 +17,7 @@ export default function NFTs(props: SvgIconProps) {
export function Reload(props: SvgIconProps) {
return ;
}
+
+export function Copy(props: SvgIconProps) {
+ return ;
+}
diff --git a/packages/icons/src/WalletConnect.tsx b/packages/icons/src/WalletConnect.tsx
index 28eecfba37..d497bce2d8 100644
--- a/packages/icons/src/WalletConnect.tsx
+++ b/packages/icons/src/WalletConnect.tsx
@@ -1,8 +1,25 @@
import { SvgIcon, SvgIconProps } from '@mui/material';
import React from 'react';
+import ConnectCancelIcon from './images/cancelConnect.svg';
+import ConnectCheckmarkIcon from './images/checkmarkConnect.svg';
+import ExitIcon from './images/exit.svg';
+import ConnectReloadIcon from './images/reloadConnect.svg';
import WalletConnectIcon from './images/walletConnect.svg';
export default function WalletConnect(props: SvgIconProps) {
return ;
}
+
+export function ConnectCheckmark(props: SvgIconProps) {
+ return ;
+}
+export function ConnectCancel(props: SvgIconProps) {
+ return ;
+}
+export function ConnectReload(props: SvgIconProps) {
+ return ;
+}
+export function Exit(props: SvgIconProps) {
+ return ;
+}
diff --git a/packages/icons/src/images/cancelConnect.svg b/packages/icons/src/images/cancelConnect.svg
new file mode 100644
index 0000000000..5818688b30
--- /dev/null
+++ b/packages/icons/src/images/cancelConnect.svg
@@ -0,0 +1,4 @@
+
diff --git a/packages/icons/src/images/checkmarkConnect.svg b/packages/icons/src/images/checkmarkConnect.svg
new file mode 100644
index 0000000000..c8bd70b601
--- /dev/null
+++ b/packages/icons/src/images/checkmarkConnect.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/icons/src/images/copy.svg b/packages/icons/src/images/copy.svg
new file mode 100644
index 0000000000..b86b237b41
--- /dev/null
+++ b/packages/icons/src/images/copy.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/icons/src/images/exit.svg b/packages/icons/src/images/exit.svg
new file mode 100644
index 0000000000..30f3293672
--- /dev/null
+++ b/packages/icons/src/images/exit.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/icons/src/images/reload.svg b/packages/icons/src/images/reload.svg
index c2c091d739..dfe4bdc233 100644
--- a/packages/icons/src/images/reload.svg
+++ b/packages/icons/src/images/reload.svg
@@ -1,10 +1,3 @@
-