refactor: local copyToClipboard hook

src/app/common/hooks/use-copy-to-clipboard.ts

@@ -0,0 +1,42 @@
+import { useEffect, useRef, useState } from 'react';
+
+interface UiClipboard {
+  value: string;
+  onCopy: () => void;
+  hasCopied: boolean;
+}
+
+function copyToClipboard(value: string) {
+  const el = document.createElement('textarea');
+  el.value = value;
+  el.setAttribute('readonly', '');
+  el.style.position = 'absolute';
+  el.style.left = '-9999px';
+  document.body.appendChild(el);
+
+  const curSelection = document.getSelection();
+  const selected = curSelection && curSelection.rangeCount > 0 ? curSelection.getRangeAt(0) : false;
+  el.select();
+
+  document.execCommand('copy');
+  document.body.removeChild(el);
+  if (selected) {
+    document.getSelection()?.removeAllRanges();
+    document.getSelection()?.addRange(selected);
+  }
+}
+
+export function useClipboard(value: string): UiClipboard {
+  const [hasCopied, setHasCopied] = useState(false);
+  const timers = useRef<number[]>([]);
+
+  function onCopy() {
+    copyToClipboard(value);
+    setHasCopied(true);
+    timers.current.push(window.setTimeout(() => setHasCopied(false), 1250));
+  }
+
+  useEffect(() => () => timers.current.forEach(timer => clearTimeout(timer)), []);
+
+  return { value, onCopy, hasCopied };
+}

src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.tsx

@@ -1,12 +1,13 @@
 import { useState } from 'react';
 import { toast } from 'react-hot-toast';
 
-import { StackProps, useClipboard } from '@stacks/ui';
+import { StackProps } from '@stacks/ui';
 import { forwardRefWithAs } from '@stacks/ui-core';
 
 import type { AllCryptoCurrencyAssetBalances } from '@shared/models/crypto-asset-balance.model';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
+import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
 import { spamFilter } from '@app/common/utils/spam-filter';
 
 import { AssetItemCopyIcon } from './asset-copy-icon';

src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-input-output-item.layout.tsx

@@ -1,6 +1,6 @@
-import { useClipboard } from '@stacks/ui';
 import { Box, Flex, HStack, styled } from 'leather-styles/jsx';
 
+import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
 import { useExplorerLink } from '@app/common/hooks/use-explorer-link';
 import { LeatherButton } from '@app/components/button/button';
 import { CopyIcon } from '@app/components/icons/copy-icon';

src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-total-item.tsx

@@ -1,6 +1,6 @@
-import { useClipboard } from '@stacks/ui';
 import { Box, HStack, styled } from 'leather-styles/jsx';
 
+import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
 import { LeatherButton } from '@app/components/button/button';
 import { BtcIcon } from '@app/components/icons/btc-icon';
 import { CopyIcon } from '@app/components/icons/copy-icon';

src/app/features/secret-key-displayer/secret-key-displayer.tsx

@@ -1,11 +1,10 @@
 import { memo, useMemo } from 'react';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 
-import { useClipboard } from '@stacks/ui';
-
 import { RouteUrls } from '@shared/route-urls';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
+import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
 
 import { SecretKeyDisplayerLayout } from './secret-key-displayer.layout';
 

src/app/features/switch-account-drawer/components/switch-account-list-item.tsx

@@ -1,13 +1,12 @@
 import { memo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { useClipboard } from '@stacks/ui';
-
 import { RouteUrls } from '@shared/route-urls';
 
 import { useAccountDisplayName } from '@app/common/hooks/account/use-account-names';
 import { useSwitchAccount } from '@app/common/hooks/account/use-switch-account';
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
+import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
 import { useDrawers } from '@app/common/hooks/use-drawers';
 import { useLoading } from '@app/common/hooks/use-loading';
 import { AccountTotalBalance } from '@app/components/account-total-balance';

src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-lock-amount.tsx

@@ -1,8 +1,9 @@
 import { FiArrowUpRight, FiCopy } from 'react-icons/fi';
 
-import { Box, Stack, Text, color, useClipboard } from '@stacks/ui';
+import { Box, Stack, Text, color } from '@stacks/ui';
 import { HStack } from 'leather-styles/jsx';
 
+import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
 import { BtcIcon } from '@app/components/icons/btc-icon';
 import { Flag } from '@app/components/layout/flag';
 import { Tooltip } from '@app/components/tooltip';

src/app/pages/receive/receive-btc.tsx

@@ -1,10 +1,10 @@
 import toast from 'react-hot-toast';
 import { useLocation } from 'react-router-dom';
 
-import { useClipboard } from '@stacks/ui';
 import get from 'lodash.get';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
+import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
 import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect';
 import { useCurrentAccountIndex } from '@app/store/accounts/account';
 import { useNativeSegwitAccountIndexAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';

src/app/pages/receive/receive-modal.tsx

@@ -1,14 +1,14 @@
 import toast from 'react-hot-toast';
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import { useClipboard } from '@stacks/ui';
 import { HomePageSelectors } from '@tests/selectors/home.selectors';
 import { Box, styled } from 'leather-styles/jsx';
 import get from 'lodash.get';
 
 import { RouteUrls } from '@shared/route-urls';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
+import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
 import { useLocationState } from '@app/common/hooks/use-location-state';
 import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-avatar';
 import { BaseDrawer } from '@app/components/drawer/base-drawer';

src/app/pages/receive/receive-ordinal.tsx

@@ -1,9 +1,8 @@
 import toast from 'react-hot-toast';
 import { useLocation } from 'react-router-dom';
 
-import { useClipboard } from '@stacks/ui';
-
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
+import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
 import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect';
 
 import { ReceiveBtcModalWarning } from './components/receive-btc-warning';

src/app/pages/receive/receive-stx.tsx

@@ -1,9 +1,8 @@
 import toast from 'react-hot-toast';
 
-import { useClipboard } from '@stacks/ui';
-
 import { useCurrentAccountDisplayName } from '@app/common/hooks/account/use-account-names';
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
+import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
 import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect';
 import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 

src/app/pages/rpc-send-transfer/rpc-send-transfer-summary.tsx

@@ -2,9 +2,10 @@ import toast from 'react-hot-toast';
 import { FiCheck, FiCopy, FiExternalLink } from 'react-icons/fi';
 import { useLocation } from 'react-router-dom';
 
-import { Stack, useClipboard } from '@stacks/ui';
+import { Stack } from '@stacks/ui';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
+import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
 import { useExplorerLink } from '@app/common/hooks/use-explorer-link';
 import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer';
 import {

src/app/pages/rpc-sign-psbt/rpc-sign-psbt-summary.tsx

@@ -2,9 +2,10 @@ import toast from 'react-hot-toast';
 import { FiCheck, FiCopy, FiExternalLink } from 'react-icons/fi';
 import { useLocation } from 'react-router-dom';
 
-import { Flex, Stack, useClipboard } from '@stacks/ui';
+import { Flex, Stack } from '@stacks/ui';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
+import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
 import { useExplorerLink } from '@app/common/hooks/use-explorer-link';
 import {
   InfoCard,

src/app/pages/send/locked-bitcoin-summary/locked-bitcoin-summary.tsx

@@ -2,10 +2,11 @@ import { toast } from 'react-hot-toast';
 import { FiCheck, FiCopy, FiExternalLink } from 'react-icons/fi';
 import { useLocation } from 'react-router-dom';
 
-import { Stack, useClipboard } from '@stacks/ui';
+import { Stack } from '@stacks/ui';
 import { Text } from '@stacks/ui';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
+import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
 import { useExplorerLink } from '@app/common/hooks/use-explorer-link';
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { satToBtc } from '@app/common/money/unit-conversion';

src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx

@@ -2,14 +2,15 @@ import { toast } from 'react-hot-toast';
 import { FiCheck, FiCopy, FiExternalLink } from 'react-icons/fi';
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import { Box, Stack, useClipboard } from '@stacks/ui';
+import { Box, Stack } from '@stacks/ui';
 import get from 'lodash.get';
 
 import { Blockchains } from '@shared/models/blockchain.model';
 import { SupportedInscription } from '@shared/models/inscription.model';
 import { RouteUrls } from '@shared/route-urls';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
+import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
 import { useExplorerLink } from '@app/common/hooks/use-explorer-link';
 import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer';
 import { BaseDrawer } from '@app/components/drawer/base-drawer';

src/app/pages/send/send-crypto-asset-form/components/recipient-fields/components/recipient-address-displayer.tsx

@@ -1,11 +1,12 @@
 import { useCallback } from 'react';
 import { FiCopy } from 'react-icons/fi';
 
-import { Box, Text, color, useClipboard } from '@stacks/ui';
+import { Box, Text, color } from '@stacks/ui';
 import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
 import { HStack } from 'leather-styles/jsx';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
+import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
 import { Tooltip } from '@app/components/tooltip';
 
 interface RecipientAddressDisplayerProps {

src/app/pages/send/sent-summary/btc-sent-summary.tsx

@@ -2,9 +2,10 @@ import { toast } from 'react-hot-toast';
 import { FiCopy, FiExternalLink } from 'react-icons/fi';
 import { useLocation } from 'react-router-dom';
 
-import { Stack, useClipboard } from '@stacks/ui';
+import { Stack } from '@stacks/ui';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
+import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
 import { useExplorerLink } from '@app/common/hooks/use-explorer-link';
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer';

src/app/pages/send/sent-summary/stx-sent-summary.tsx

@@ -2,9 +2,10 @@ import { toast } from 'react-hot-toast';
 import { FiCopy, FiExternalLink } from 'react-icons/fi';
 import { useLocation } from 'react-router-dom';
 
-import { Stack, useClipboard } from '@stacks/ui';
+import { Stack } from '@stacks/ui';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
+import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
 import { useExplorerLink } from '@app/common/hooks/use-explorer-link';
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer';

src/app/pages/swap/swap-summary/swap-summary.tsx

@@ -2,14 +2,14 @@ import toast from 'react-hot-toast';
 import { Outlet } from 'react-router-dom';
 
 import WaxSeal from '@assets/illustrations/wax-seal.png';
-import { useClipboard } from '@stacks/ui';
 import { useFormikContext } from 'formik';
 import { HStack, styled } from 'leather-styles/jsx';
 
 import { logger } from '@shared/logger';
 import { isUndefined } from '@shared/utils';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
+import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
 // import { useExplorerLink } from '@app/common/hooks/use-explorer-link';
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { CopyIcon } from '@app/components/icons/copy-icon';

yarn.lock

@@ -629,13 +629,20 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
-"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.7", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.6", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.10", "@babel/runtime@^7.22.11", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.7", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.6", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.10", "@babel/runtime@^7.22.11", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.23.1"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.1.tgz#72741dc4d413338a91dcb044a86f3c0bc402646d"
   integrity sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.13.10":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
+  integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.15":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
@@ -1650,9 +1657,9 @@
     "@floating-ui/dom" "^1.5.1"
 
 "@floating-ui/utils@^0.1.3":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.4.tgz#19654d1026cc410975d46445180e70a5089b3e7d"
-  integrity sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA==
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
+  integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
 
 "@fluent/[email protected]":
   version "0.19.0"