Merge pull request #261 from 1Hive/details-on-click

Details on click
1Hive · May 6, 2022 · 214cfc6 · 214cfc6 · vercel · May 6, 2022
2 parents e6f417f + ac2e1c7
commit 214cfc6
Show file tree

Hide file tree

Showing 7 changed files with 245 additions and 149 deletions.
diff --git a/packages/react-app/src/components/field-input/address-field-input.tsx b/packages/react-app/src/components/field-input/address-field-input.tsx
@@ -1,4 +1,4 @@
-import { TextInput, EthIdenticon, AddressField } from '@1hive/1hive-ui';
+import { TextInput, EthIdenticon, TextCopy } from '@1hive/1hive-ui';
 import { noop } from 'lodash-es';
 import React from 'react';
 import styled from 'styled-components';
@@ -8,20 +8,25 @@ import { FieldInput } from './field-input';
 
 const TextInputStyled = styled(TextInput)`
   border-radius: 12px;
+  width: 100%;
+  text-overflow: ellipsis;
   padding-right: 42px;
 `;
+const TextCopyStyled = styled(TextCopy)`
+  margin-left: 1px;
+`;
 
-const EthIdenticonStyled = styled(EthIdenticon)`
-  border-radius: 0 12px 12px 0;
+const EthIdenticonStyled = styled(EthIdenticon)<{ isEdit: boolean }>`
+  border-radius: ${({ isEdit }) => (isEdit ? '0 12px 12px 0' : '4px 0 0 4px')};
   padding: 0;
 `;
 
 const AddressWrapperStyled = styled.div<{
   wide: boolean;
   isEdit: boolean;
 }>`
+  align-items: center;
   display: flex;
-  flex-wrap: nowrap;
   max-width: 400px;
   width: 100%;
 
@@ -59,20 +64,34 @@ export function AddressFieldInput({
   error,
 }: Props) {
   const loadableContent = (
-    <AddressWrapperStyled isEdit={isEdit} wide={wide}>
+    <AddressWrapperStyled isEdit={isEdit} wide={wide} onClick={(e) => e.stopPropagation()}>
       {isEdit ? (
         <TextInputStyled
+          isEdit={isEdit}
           wide={wide}
           id={id}
           value={value}
+          disabled={!isEdit}
           onChange={onChange}
           onBlur={onBlur}
-          adornment={<EthIdenticonStyled address={value} scale={1.66} />}
-          adornmentPosition="end"
+          adornment={<EthIdenticonStyled isEdit={isEdit} address={value} scale={1.66} />}
+          adornmentPosition={isEdit ? 'end' : 'start'}
           adornmentSettings={{ padding: 0, width: 36 }}
         />
       ) : (
-        <AddressField address={value} wide={wide} autofocus={false} />
+        <TextCopyStyled
+          isEdit={isEdit}
+          wide={wide}
+          message="Address copied to clipboard"
+          id={id}
+          value={value}
+          disabled={!isEdit}
+          onChange={onChange}
+          onBlur={onBlur}
+          adornment={<EthIdenticonStyled isEdit={isEdit} address={value} scale={1.66} />}
+          adornmentPosition={isEdit ? 'end' : 'start'}
+          adornmentSettings={{ padding: 0, width: 36 }}
+        />
       )}
     </AddressWrapperStyled>
   );

diff --git a/packages/react-app/src/components/field-input/amount-field-input.tsx b/packages/react-app/src/components/field-input/amount-field-input.tsx
@@ -119,6 +119,11 @@ const TokenAmountBadge = React.memo(
       return temp;
     }, [token, amount, usdValue]);
 
+    const onBadgeClick = (event: Event) => {
+      copyCode(token.token, `${token.symbol} address copied to clipboard`);
+      event.stopPropagation();
+    };
+
     return (
       <TokenAmountButtonStyled
         className={className}
@@ -127,7 +132,7 @@ const TokenAmountBadge = React.memo(
         size="mini"
         label={label}
         title={`Copy : ${token.token}`}
-        onClick={() => copyCode(token.token, `${token.symbol} address copied to clipboard`)}
+        onClick={onBadgeClick}
       />
     );
   },

diff --git a/packages/react-app/src/components/field-input/help-tooltip.tsx b/packages/react-app/src/components/field-input/help-tooltip.tsx
@@ -1,26 +1,42 @@
-import { Help, useTheme } from '@1hive/1hive-ui';
-import { ReactNode, useRef } from 'react';
+import { useTheme, Button, IconQuestion, Popover } from '@1hive/1hive-ui';
+import { ReactNode, useRef, useState } from 'react';
 import { ThemeInterface } from 'src/styles/theme';
 import { GUpx } from 'src/utils/style.util';
 import styled from 'styled-components';
 
 // #region Styled
 
-const TooltipWrapperStyled = styled.div`
-  color: #637381;
+const HelpWrapperStyled = styled.div`
+  margin: 0 ${GUpx(1)};
 `;
 
-const HelpWrapperStyled = styled.div<{ theme: ThemeInterface }>`
-  margin-left: ${GUpx(1)};
-  margin-right: ${GUpx(0.5)};
-  svg {
-    color: ${({ theme }) => theme.hint}!important;
-  }
-  button:focus::after {
-    border: none;
+const HelpButtonStyled = styled(Button)<{ theme: ThemeInterface }>`
+  border: none;
+  background: ${({ theme }) => theme.help};
+  box-shadow: 0px 0px 7px 1px rgb(0 0 0 / 25%);
+  width: 16px;
+  height: 16px;
+
+  & > span {
+    color: ${({ theme }) => theme.helpContent};
+    width: 14px;
   }
 `;
 
+const PopoverStyled = styled(Popover)<{ theme: ThemeInterface }>`
+  box-shadow: 0px 0px 8px 6px rgb(0 0 0 / 25%);
+  border: none;
+`;
+
+const TooltipWrapperStyled = styled.div<{ theme: ThemeInterface }>`
+  position: relative;
+  max-width: 400px;
+  min-width: 160px;
+  padding: ${GUpx(3)};
+  background: ${({ theme }) => theme.accent};
+  color: ${({ theme }) => theme.helpContent};
+`;
+
 // #endregion
 
 type Props = {
@@ -30,32 +46,37 @@ type Props = {
 
 export const HelpTooltip = ({ tooltip, children }: Props) => {
   const theme = useTheme();
-  const wrapperRef = useRef<HTMLDivElement>(null);
+  const buttonElement = useRef();
+  const [visible, setVisible] = useState(false);
 
-  const handleEnter = () => {
-    // Simulate help button click
-    const btn = wrapperRef.current?.getElementsByTagName('button')[0];
-    btn?.click();
-  };
-  const handleLeave = () => {
-    // Simulate ESC key press
-    document.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 27 }));
+  const handleClick = (e: Event) => {
+    e.stopPropagation();
+    setVisible(true);
   };
 
   return (
-    <>
-      <HelpWrapperStyled
+    <HelpWrapperStyled>
+      <HelpButtonStyled
+        onMouseEnter={() => setVisible(true)}
+        ref={buttonElement}
+        icon={<IconQuestion />}
+        mode="normal"
+        size="mini"
+        display="icon"
+        label="Open tooltip"
+        onClick={handleClick}
+        theme={theme}
+      />
+      <PopoverStyled
+        visible={visible}
+        opener={buttonElement.current}
+        onClose={() => setVisible(false)}
         theme={theme}
-        onMouseEnter={handleEnter}
-        onMouseLeave={handleLeave}
-        ref={wrapperRef}
       >
-        <Help hint="">
-          <TooltipWrapperStyled color={theme.accentContent}>
-            {children ?? tooltip}
-          </TooltipWrapperStyled>
-        </Help>
-      </HelpWrapperStyled>
-    </>
+        <TooltipWrapperStyled theme={theme} onMouseLeave={() => setVisible(false)}>
+          {children ?? tooltip}
+        </TooltipWrapperStyled>
+      </PopoverStyled>
+    </HelpWrapperStyled>
   );
 };