Merge pull request #1319 from Chia-Network/rifeljm/#200-move-receive-…

…address-component-into-top-header

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';

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) {
                         */}
                     <Tooltip title={<Trans>Log Out</Trans>}>
                       <IconButton onClick={handleLogout} data-testid="LayoutDashboard-log-out">
-                        <ExitToAppIcon />
+                        <ExitIconStyled />
                       </IconButton>
                     </Tooltip>
                   </Box>

packages/core/src/components/StateIndicator/StateIndicator.tsx

@@ -13,6 +13,8 @@ const Color = {
 };
 
 const StyledFlexContainer = styled(({ color, ...rest }) => <Flex {...rest} />)`
+  position: relative;
+  top: -1px;
   color: ${({ color }) => color};
 `;
 
@@ -41,7 +43,7 @@ export default function StateComponent(props: StateComponentProps) {
   return (
     <StyledFlexContainer color={color} alignItems="center" gap={gap} flexDirection={reversed ? 'row-reverse' : 'row'}>
       {!hideTitle && <span>{children}</span>}
-      {indicator && <StateIndicatorDot color={iconColor} />}
+      {indicator && <StateIndicatorDot color={iconColor} state={state} />}
     </StyledFlexContainer>
   );
 }

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 <ConnectCheckmark />;
+    }
+    if (state === State.WARNING) {
+      return <ConnectReload />;
+    }
+    if (state === State.ERROR) {
+      return <ConnectCancel />;
+    }
+    return null;
+  }
+  return <WrapperStyled color={color}>{renderIcon()}</WrapperStyled>;
+}

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<HTMLButtonElement | null>(null);
   const [anchorElW, setAnchorElW] = useState<HTMLButtonElement | null>(null);
+  const { isDarkMode } = useDarkMode();
 
   const handleClickFN = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorElFN(event.currentTarget);
@@ -32,16 +43,17 @@ export default function AppStatusHeader() {
 
   return (
     <Flex gap={1}>
+      <WalletReceiveAddressField variant="outlined" size="small" fullWidth isDarkMode={isDarkMode} />
       <WalletConnectDropdown />
       <ButtonGroup variant="outlined" color="secondary" size="small">
         {mode === Mode.FARMING && (
           <>
-            <Button onClick={handleClickFN} aria-describedby="fullnode-connections">
+            <ButtonStyled onClick={handleClickFN} aria-describedby="fullnode-connections">
               <Flex gap={1} alignItems="center">
                 <FullNodeStateIndicator />
                 <Trans>Full Node</Trans>
               </Flex>
-            </Button>
+            </ButtonStyled>
             <Popover
               open={!!anchorElFN}
               anchorEl={anchorElFN}
@@ -61,12 +73,12 @@ export default function AppStatusHeader() {
             </Popover>
           </>
         )}
-        <Button onClick={handleClickW}>
+        <ButtonStyled onClick={handleClickW}>
           <Flex gap={1} alignItems="center">
             <WalletStatus indicator hideTitle />
             <Trans>Wallet</Trans>
           </Flex>
-        </Button>
+        </ButtonStyled>
         <Popover
           open={!!anchorElW}
           anchorEl={anchorElW}

packages/gui/src/components/nfts/gallery/NFTGallery.tsx

@@ -1,7 +1,6 @@
 import type { NFTInfo } from '@chia-network/api';
 import { useLocalStorage } from '@chia-network/api-react';
 import { Flex, LayoutDashboardSub, Loading, /* useTrans, */ useDarkMode } from '@chia-network/core';
-import { WalletReceiveAddressField } from '@chia-network/wallets';
 import { t, Trans } from '@lingui/macro';
 import { FormControlLabel, RadioGroup, FormControl, Checkbox, Grid, Button } from '@mui/material';
 import React, { useEffect, useState, useCallback, useContext } from 'react';
@@ -519,7 +518,6 @@ export default function NFTGallery() {
           <Flex gap={2} alignItems="stretch" flexWrap="wrap" justifyContent="space-between">
             <NFTProfileDropdown onChange={setWalletId} walletId={walletId} />
             <Search onUpdate={setSearch} placeholder={t`Search...`} defaultValue={search || undefined} />
-            <WalletReceiveAddressField variant="outlined" size="small" fullWidth isDarkMode={isDarkMode} />
             <MultiSelectAndFilterWrapper className={inMultipleSelectionMode ? 'active' : ''} isDarkMode={isDarkMode}>
               <MultiSelectIconStyled
                 onClick={() => toggleMultipleSelection(!inMultipleSelectionMode)}

packages/gui/src/components/walletConnect/WalletConnectDropdown.tsx

@@ -2,19 +2,28 @@ 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';
 
 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 (
     <DropdownBase>
       {({ onClose, onToggle }) => [
-        <Button
+        <ButtonStyled
           key="button"
           onClick={onToggle}
           variant="outlined"
@@ -23,7 +32,7 @@ export default function WalletConnectDropdown() {
           sx={{ px: 1, minWidth: 0 }}
         >
           <WalletConnect color={color} />
-        </Button>,
+        </ButtonStyled>,
         <Box sx={{ minWidth: 360 }}>
           <WalletConnectConnections onClose={onClose} />
         </Box>,

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 <SvgIcon component={ReloadIcon} viewBox="-3 -3 26 26" {...props} />;
 }
+
+export function Copy(props: SvgIconProps) {
+  return <CopyIcon component={ReloadIcon} viewBox="0 0 22 22" {...props} />;
+}

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 <SvgIcon component={WalletConnectIcon} viewBox="0 0 24 24" {...props} />;
 }
+
+export function ConnectCheckmark(props: SvgIconProps) {
+  return <SvgIcon component={ConnectCheckmarkIcon} {...props} viewBox="-2 -3 20 20" />;
+}
+export function ConnectCancel(props: SvgIconProps) {
+  return <SvgIcon component={ConnectCancelIcon} {...props} viewBox="-3 -3 20 20" />;
+}
+export function ConnectReload(props: SvgIconProps) {
+  return <SvgIcon component={ConnectReloadIcon} viewBox="-1 0 21 21" {...props} />;
+}
+export function Exit(props: SvgIconProps) {
+  return <SvgIcon component={ExitIcon} {...props} />;
+}