From a8c51f1a192b8bed024d864cc63b477e70895a3a Mon Sep 17 00:00:00 2001 From: German Urrustarazu Date: Thu, 1 Sep 2022 13:45:32 -0300 Subject: [PATCH 01/13] install react copy to clipboard --- frontend/packages/client/package.json | 1 + frontend/yarn.lock | 20 ++++++++++++++++++++ 2 files changed, 21 insertions(+) diff --git a/frontend/packages/client/package.json b/frontend/packages/client/package.json index 92b76bed1..1b7ab5cf1 100644 --- a/frontend/packages/client/package.json +++ b/frontend/packages/client/package.json @@ -29,6 +29,7 @@ "prettier": "^2.7.1", "react": "^17.0.2", "react-blockies": "^1.4.1", + "react-copy-to-clipboard": "^5.1.0", "react-datepicker": "^4.6.0", "react-dom": "^17.0.2", "react-draft-wysiwyg": "^1.14.7", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 99698a69c..b31e1fcf7 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -3883,6 +3883,13 @@ copy-descriptor@^0.1.0: resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d" integrity sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw== +copy-to-clipboard@^3.3.1: + version "3.3.2" + resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.2.tgz#5b263ec2366224b100181dded7ce0579b340c107" + integrity sha512-Vme1Z6RUDzrb6xAI7EZlVZ5uvOk2F//GaxKUxajDqm9LhOVM1inxNAD2vy+UZDYsd0uyA9s7b3/FVZPSxqrCfg== + dependencies: + toggle-selection "^1.0.6" + core-js-compat@^3.21.0, core-js-compat@^3.22.1: version "3.24.1" resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.24.1.tgz#d1af84a17e18dfdd401ee39da9996f9a7ba887de" @@ -9694,6 +9701,14 @@ react-blockies@^1.4.1: dependencies: prop-types "^15.5.10" +react-copy-to-clipboard@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz#09aae5ec4c62750ccb2e6421a58725eabc41255c" + integrity sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A== + dependencies: + copy-to-clipboard "^3.3.1" + prop-types "^15.8.1" + react-datepicker@^4.6.0: version "4.8.0" resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.8.0.tgz#11b8918d085a1ce4781eee4c8e4641b3cd592010" @@ -11430,6 +11445,11 @@ to-regex@^3.0.1, to-regex@^3.0.2: regex-not "^1.0.2" safe-regex "^1.1.0" +toggle-selection@^1.0.6: + version "1.0.6" + resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32" + integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ== + toidentifier@1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35" From 80a433109f8708e6134f76b92823b8168b113eff Mon Sep 17 00:00:00 2001 From: German Urrustarazu Date: Thu, 1 Sep 2022 13:45:37 -0300 Subject: [PATCH 02/13] add icon --- .../packages/client/src/components/Svg.js | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/frontend/packages/client/src/components/Svg.js b/frontend/packages/client/src/components/Svg.js index 78e846ed3..327b7491b 100644 --- a/frontend/packages/client/src/components/Svg.js +++ b/frontend/packages/client/src/components/Svg.js @@ -734,3 +734,26 @@ export const InfoOutLine = () => ( /> ); + +export const Copy = () => ( + + + + +); From 3954459591d8449643c6da6f84383958cd08e9c6 Mon Sep 17 00:00:00 2001 From: German Urrustarazu Date: Thu, 1 Sep 2022 13:45:42 -0300 Subject: [PATCH 03/13] update componetn --- .../client/src/components/WalletConnect.js | 110 ++++++++++++++---- 1 file changed, 86 insertions(+), 24 deletions(-) diff --git a/frontend/packages/client/src/components/WalletConnect.js b/frontend/packages/client/src/components/WalletConnect.js index f55aed085..306532731 100644 --- a/frontend/packages/client/src/components/WalletConnect.js +++ b/frontend/packages/client/src/components/WalletConnect.js @@ -1,5 +1,7 @@ -import React from 'react'; +import React, { useState } from 'react'; +import { CopyToClipboard } from 'react-copy-to-clipboard'; import { Web3Consumer } from '../contexts/Web3'; +import { Copy } from 'components/Svg'; const SignInOutButton = ({ user: { loggedIn, addr }, @@ -7,36 +9,96 @@ const SignInOutButton = ({ injectedProvider, closeModal, }) => { - const signInOrOut = async (event) => { + const [dropDownClass, setDropDownClass] = useState(''); + + const signOut = (event) => { + event.preventDefault(); + event.stopPropagation(); + injectedProvider.unauthenticate(); + // setDropDownClass(''); + }; + + const connectWallet = (event) => { event.preventDefault(); + event.stopPropagation(); if (closeModal) { closeModal(); } - if (loggedIn) { - injectedProvider.unauthenticate(); - } else { - openWalletModal(); + openWalletModal(); + }; + + const openDropdown = (event) => { + event.preventDefault(); + event.stopPropagation(); + setDropDownClass('is-active'); + }; + + const closeOnBlur = (e) => { + console.log(e); + if (e.type === 'blur') { + setDropDownClass(''); } }; + return ( - +
+
+
+ +
+ +
+
); }; From 76680be2e3685e92d8abbd36cb5e0837af72a2f1 Mon Sep 17 00:00:00 2001 From: German Urrustarazu Date: Mon, 5 Sep 2022 12:32:31 -0300 Subject: [PATCH 04/13] add hook --- frontend/packages/client/src/hooks/index.js | 1 + .../client/src/hooks/useOnOutsideClick.js | 28 +++++++++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 frontend/packages/client/src/hooks/useOnOutsideClick.js diff --git a/frontend/packages/client/src/hooks/index.js b/frontend/packages/client/src/hooks/index.js index 0444b563a..5710ad70c 100644 --- a/frontend/packages/client/src/hooks/index.js +++ b/frontend/packages/client/src/hooks/index.js @@ -24,3 +24,4 @@ export { default as useStarAnimation } from './useStarAnimation'; export { default as useAddFungibleToken } from './useAddFungibleToken'; export { default as useBrowserName } from './useBrowserName'; export { default as useLocalStorage } from './useLocalStorage'; +export { default as useOnClickOutside } from './useOnOutsideClick'; diff --git a/frontend/packages/client/src/hooks/useOnOutsideClick.js b/frontend/packages/client/src/hooks/useOnOutsideClick.js new file mode 100644 index 000000000..805a11593 --- /dev/null +++ b/frontend/packages/client/src/hooks/useOnOutsideClick.js @@ -0,0 +1,28 @@ +import { useEffect } from 'react'; + +export default function useOnClickOutside(ref, handler) { + useEffect( + () => { + const listener = (event) => { + // Do nothing if clicking ref's element or descendent elements + if (!ref.current || ref.current.contains(event.target)) { + return; + } + handler(event); + }; + document.addEventListener('mousedown', listener); + document.addEventListener('touchstart', listener); + return () => { + document.removeEventListener('mousedown', listener); + document.removeEventListener('touchstart', listener); + }; + }, + // Add ref and handler to effect dependencies + // It's worth noting that because passed in handler is a new + // function on every render that will cause this effect + // callback/cleanup to run every render. It's not a big deal + // but to optimize you can wrap handler in useCallback before + // passing it into this hook. + [ref, handler] + ); +} From dc556ccfb7e2212d876553d74d110c8c6186605d Mon Sep 17 00:00:00 2001 From: German Urrustarazu Date: Mon, 5 Sep 2022 12:32:37 -0300 Subject: [PATCH 05/13] add icon --- frontend/packages/client/src/components/Svg.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/packages/client/src/components/Svg.js b/frontend/packages/client/src/components/Svg.js index 327b7491b..203e2f94c 100644 --- a/frontend/packages/client/src/components/Svg.js +++ b/frontend/packages/client/src/components/Svg.js @@ -746,14 +746,14 @@ export const Copy = () => ( ); From 341343f938443438b92a6dbebe81104b355029a2 Mon Sep 17 00:00:00 2001 From: German Urrustarazu Date: Mon, 5 Sep 2022 19:13:41 -0300 Subject: [PATCH 06/13] add background --- frontend/packages/client/src/App.sass | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/frontend/packages/client/src/App.sass b/frontend/packages/client/src/App.sass index d580b45d9..16a342edb 100644 --- a/frontend/packages/client/src/App.sass +++ b/frontend/packages/client/src/App.sass @@ -703,4 +703,15 @@ span[data-tooltip] transform: scale(1) .rdw-editor-toolbar - border-radius: 8px !important \ No newline at end of file + border-radius: 8px !important + +.wallet-connect-background + z-index: 31 + background: rgba(0, 0, 0, 0.55) + position: fixed + width: 100vw + height: 100vh + top: 0 + right: 0 +.wallet-connect-content + z-index: 32 \ No newline at end of file From 1749fa6547655008bbaf510aa93b28d9a8b6e7c9 Mon Sep 17 00:00:00 2001 From: German Urrustarazu Date: Mon, 5 Sep 2022 19:14:16 -0300 Subject: [PATCH 07/13] add fn --- frontend/packages/client/src/utils.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/frontend/packages/client/src/utils.js b/frontend/packages/client/src/utils.js index 8ec619fab..a22d57123 100644 --- a/frontend/packages/client/src/utils.js +++ b/frontend/packages/client/src/utils.js @@ -248,3 +248,11 @@ export const formatTime = (date) => { minutes = minutes < 10 ? '0' + minutes : minutes; return hours + ':' + minutes + ' ' + ampm; }; + +export function truncateAddress(str, initial = 3, tail = 10) { + return ( + str.substr(0, initial) + + '...' + + str.substr((tail - str.length) * -1, str.length) + ); +} From b1895b9fb32f01522ab6a0aeee33c40802bd4b93 Mon Sep 17 00:00:00 2001 From: German Urrustarazu Date: Mon, 5 Sep 2022 19:14:26 -0300 Subject: [PATCH 08/13] import fc --- .../packages/client/src/components/ProposalInformation.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/frontend/packages/client/src/components/ProposalInformation.js b/frontend/packages/client/src/components/ProposalInformation.js index 5494d16a8..b72550a24 100644 --- a/frontend/packages/client/src/components/ProposalInformation.js +++ b/frontend/packages/client/src/components/ProposalInformation.js @@ -3,13 +3,10 @@ import Blockies from 'react-blockies'; import { useVotingResults, useWindowDimensions } from 'hooks'; import useMediaQuery, { mediaMatchers } from 'hooks/useMediaQuery'; import { parseDateFromServer } from 'utils'; +import { truncateAddress as truncate } from 'utils'; import { LinkOut } from './Svg'; import Tooltip from './Tooltip'; -function truncate(str) { - return str.substr(0, 3) + '...' + str.substr(10, str.length); -} - const BlockieWithAddress = React.forwardRef( ({ creatorAddr, isCoreCreator }, ref) => { const [addr, setAdd] = useState(creatorAddr); From 868f019a7f2e8a41f7fe558abd7d3d537a392f70 Mon Sep 17 00:00:00 2001 From: German Urrustarazu Date: Mon, 5 Sep 2022 19:14:47 -0300 Subject: [PATCH 09/13] update component --- .../packages/client/src/components/Tooltip.js | 21 +++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/frontend/packages/client/src/components/Tooltip.js b/frontend/packages/client/src/components/Tooltip.js index 50961d0fd..cd4595c9d 100644 --- a/frontend/packages/client/src/components/Tooltip.js +++ b/frontend/packages/client/src/components/Tooltip.js @@ -1,18 +1,27 @@ import React from 'react'; -export default function Tooltip({ position, text, children, classNames = '' }) { +export default function Tooltip({ + enabled = true, + position, + text, + children, + classNames = '', + alwaysVisible = false, +}) { const positionConfig = { left: 'has-tooltip-left', right: 'has-tooltip-right', top: 'has-tooltip-top', bottom: 'has-tooltip-bottom', }; - const className = positionConfig[position] ?? ''; + const className = `${positionConfig[position] ?? ''}${ + alwaysVisible ? ' has-tooltip-active' : '' + }`; + + const props = enabled ? { 'data-tooltip': text } : {}; + return ( - + {children} ); From c56be1e76f5502d5a268d241626b211dbaf47193 Mon Sep 17 00:00:00 2001 From: German Urrustarazu Date: Mon, 5 Sep 2022 19:20:16 -0300 Subject: [PATCH 10/13] update component --- .../client/src/components/WalletConnect.js | 162 +++++++++++++----- 1 file changed, 122 insertions(+), 40 deletions(-) diff --git a/frontend/packages/client/src/components/WalletConnect.js b/frontend/packages/client/src/components/WalletConnect.js index 306532731..8b892410f 100644 --- a/frontend/packages/client/src/components/WalletConnect.js +++ b/frontend/packages/client/src/components/WalletConnect.js @@ -1,21 +1,38 @@ -import React, { useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; +import Blockies from 'react-blockies'; import { CopyToClipboard } from 'react-copy-to-clipboard'; import { Web3Consumer } from '../contexts/Web3'; import { Copy } from 'components/Svg'; +import { useMediaQuery, useOnClickOutside } from 'hooks'; +import { truncateAddress } from 'utils'; +import classnames from 'classnames'; +import Tooltip from './Tooltip'; const SignInOutButton = ({ user: { loggedIn, addr }, openWalletModal, injectedProvider, closeModal, + expandContainer = false, }) => { + const notMobile = useMediaQuery(); + const [dropDownClass, setDropDownClass] = useState(''); + const [addressCopied, setAddressCopied] = useState(false); + + const dropdownRef = useRef(); + + const closeDropdown = (e) => { + setDropDownClass(''); + }; + + useOnClickOutside(dropdownRef, closeDropdown); const signOut = (event) => { event.preventDefault(); event.stopPropagation(); injectedProvider.unauthenticate(); - // setDropDownClass(''); + setDropDownClass(''); }; const connectWallet = (event) => { @@ -33,31 +50,69 @@ const SignInOutButton = ({ setDropDownClass('is-active'); }; - const closeOnBlur = (e) => { - console.log(e); - if (e.type === 'blur') { - setDropDownClass(''); + const markAddressCopied = () => setAddressCopied(true); + + useEffect(() => { + let timeout; + if (addressCopied) { + timeout = setTimeout(() => { + setAddressCopied(false); + }, 500); } - }; + return () => clearTimeout(timeout); + }, [addressCopied]); + + const dropdownBackground = classnames('', { + 'wallet-connect-background': dropDownClass && !notMobile, + }); + const buttonClass = classnames( + 'wallet-connect button is-uppercase transition-all small-text rounded-sm', + { 'is-primary': !loggedIn }, + { 'px-2': !notMobile } + ); + const addressStyle = classnames('', { 'smaller-text': !notMobile }); + const containerAddressStyle = classnames('is-flex', { 'pl-2': !notMobile }); + + const containerButtonStyle = classnames('is-flex is-align-items-center', { + 'flex-1 is-justify-content-space-between': notMobile, + }); return ( -
+ <> +
-
+
-