Merge branch 'hirosystems:main' into fix/receipt-time

hirosystems · Jul 26, 2023 · 59dbfca · 59dbfca
2 parents bbd19a3 + 79efb8d
commit 59dbfca
Show file tree

Hide file tree

Showing 16 changed files with 93 additions and 40 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,10 @@
+## [1.110.4](https://github.com/hirosystems/explorer/compare/v1.110.3...v1.110.4) (2023-07-13)
+
+
+### Bug Fixes
+
+* search bar crash ([57defa1](https://github.com/hirosystems/explorer/commit/57defa1e42230c28f80b67c3382c6342b4579354))
+
 ## [1.110.3](https://github.com/hirosystems/explorer/compare/v1.110.2...v1.110.3) (2023-07-06)
 
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/components/BlockList/MicroblockListItem.tsx b/src/app/components/BlockList/MicroblockListItem.tsx
@@ -1,5 +1,5 @@
 import { toRelativeTime } from '@/common/utils';
-import { MicroblockLink } from '@/components/links';
+import { MicroBlockLink } from '@/components/links';
 import { Circle, Flex, Icon, Stack } from '@/ui/components';
 import { Caption, Text, Title } from '@/ui/typography';
 import { useColorMode } from '@chakra-ui/react';
@@ -28,7 +28,7 @@ export const MicroblockListItem: React.FC<{
         </Circle>
         <Stack spacing="8px" as="span" minWidth={0}>
           <Flex alignItems="center" minWidth={0}>
-            <MicroblockLink hash={hash}>
+            <MicroBlockLink hash={hash}>
               <Title
                 display="block"
                 fontSize={'14px'}
@@ -45,7 +45,7 @@ export const MicroblockListItem: React.FC<{
               >
                 {hash}
               </Title>
-            </MicroblockLink>
+            </MicroBlockLink>
           </Flex>
           <Caption display="block">Microblock</Caption>
         </Stack>

diff --git a/src/app/microblock/[hash]/tx-lists/MicroblockTxsList.tsx b/src/app/microblock/[hash]/tx-lists/MicroblockTxsList.tsx
@@ -36,7 +36,7 @@ export const MicroblockTxsList: FC<MicroblockTxsListProps> = memo(({ microblockH
               leftContent={{
                 title: (
                   <Title fontWeight="500" display="block" fontSize="15px">
-                    <TxLink txid={txId}>{truncateMiddle(txId)}</TxLink>
+                    <TxLink txId={txId}>{truncateMiddle(txId)}</TxLink>
                   </Title>
                 ),
                 subtitle: null,

diff --git a/src/app/sandbox/components/ContractCall/SelectedContractView.tsx b/src/app/sandbox/components/ContractCall/SelectedContractView.tsx
@@ -46,7 +46,7 @@ const ContractInfo: FC<ContractInfoProps> = ({ contract: { contract_id, abi } })
   return (
     <Section
       topRight={() => (
-        <TxLink txid={contract_id}>
+        <TxLink txId={contract_id}>
           <Flex
             as="a"
             target="_blank"

diff --git a/src/app/txid/[txid]/Cards/ContractDetailsCard.tsx b/src/app/txid/[txid]/Cards/ContractDetailsCard.tsx
@@ -85,7 +85,7 @@ export const ContractDetailsCard: React.FC<{ contractId: string }> = ({ contract
           </Flex>
         </Stack>
         <Grid borderTopWidth="1px" placeItems="center" py="16px">
-          <TxLink txid={contractId}>
+          <TxLink txId={contractId}>
             <Flex
               as="a"
               target="_blank"

diff --git a/src/app/txid/[txid]/TxDetails/ContractName.tsx b/src/app/txid/[txid]/TxDetails/ContractName.tsx
@@ -25,7 +25,7 @@ export const ContractName: FC<{
       <KeyValueHorizontal
         label={'Contract'}
         value={
-          <TxLink txid={tx.contract_call.contract_id}>
+          <TxLink txId={tx.contract_call.contract_id}>
             <TextLink as="a">
               <Value>{tx.contract_call.contract_id}</Value>
             </TextLink>
@@ -40,7 +40,7 @@ export const ContractName: FC<{
       <KeyValueHorizontal
         label={'Contract'}
         value={
-          <TxLink txid={tx.smart_contract.contract_id}>
+          <TxLink txId={tx.smart_contract.contract_id}>
             <TextLink as="a">
               <Value>{tx.smart_contract.contract_id}</Value>
             </TextLink>

diff --git a/src/components/balances/token-asset-list-item.tsx b/src/components/balances/token-asset-list-item.tsx
@@ -71,7 +71,7 @@ export const TokenAssetListItem: React.FC<TokenAssetListItemProps> = ({
                   ? ftMetadata?.symbol || getTicker(asset).toUpperCase()
                   : getTicker(asset).toUpperCase()}
               </Caption>
-              <TxLink txid={`${address}.${contract}`}>
+              <TxLink txId={`${address}.${contract}`}>
                 <Caption
                   target="_blank"
                   _hover={{

diff --git a/src/components/contract-source.tsx b/src/components/contract-source.tsx
@@ -26,7 +26,7 @@ export const ContractSource: React.FC<
       topRight={
         sourceTx
           ? () => (
-              <TxLink txid={sourceTx}>
+              <TxLink txId={sourceTx}>
                 <Badge
                   as="a"
                   _hover={{ bg: '#eee', cursor: 'pointer' }}

diff --git a/src/components/function-summary/value.tsx b/src/components/function-summary/value.tsx
@@ -111,7 +111,7 @@ export const FunctionSummaryClarityValue = ({
     if (isContract) {
       return (
         <Flex width="100%" flexGrow={1} justifyContent="space-between" {...rest}>
-          <TxLink txid={principal}>
+          <TxLink txId={principal}>
             <TextLink as="a">{principal}</TextLink>
           </TxLink>
           <Caption>{getPrettyClarityValueType(arg.type)}</Caption>

diff --git a/src/components/links.tsx b/src/components/links.tsx
@@ -10,22 +10,30 @@ export const ExplorerLink = forwardRef<LinkProps, 'a'>(({ href, ...rest }, ref)
   return <Link ref={ref} legacyBehavior href={buildUrl(href, network)} passHref {...rest} />;
 });
 
-export const TxLink: React.FC<{ txid: string }> = React.memo(({ txid, ...rest }) => {
-  return <ExplorerLink href={`/txid/${encodeURIComponent(txid)}`} {...rest} />;
-});
+export const TxLink = forwardRef<Partial<LinkProps> & { txId: string }, 'a'>(
+  ({ txId, ...rest }, ref) => {
+    return <ExplorerLink ref={ref} href={`/txid/${encodeURIComponent(txId)}`} {...rest} />;
+  }
+);
 
-export const MicroblockLink: React.FC<{ hash: string }> = React.memo(({ hash, ...rest }) => {
-  return <ExplorerLink href={`/microblock/${encodeURIComponent(hash)}`} {...rest} />;
-});
+export const MicroBlockLink = forwardRef<Partial<LinkProps> & { hash: string }, 'a'>(
+  ({ hash, ...rest }, ref) => {
+    return <ExplorerLink ref={ref} href={`/microblock/${encodeURIComponent(hash)}`} {...rest} />;
+  }
+);
 
-export const BlockLink: React.FC<{ hash: string }> = React.memo(({ hash, ...rest }) => {
-  return <ExplorerLink href={`/block/${encodeURIComponent(hash)}`} {...rest} />;
-});
+export const BlockLink = forwardRef<Partial<LinkProps> & { hash: string }, 'a'>(
+  ({ hash, ...rest }, ref) => {
+    return <ExplorerLink ref={ref} href={`/block/${encodeURIComponent(hash)}`} {...rest} />;
+  }
+);
 
-export const AddressLink: React.FC<{ principal: string }> = React.memo(({ principal, ...rest }) => {
-  return principal.includes('.') ? (
-    <TxLink txid={principal} {...rest} />
-  ) : (
-    <ExplorerLink href={`/address/${encodeURIComponent(principal)}`} {...rest} />
-  );
-});
+export const AddressLink = forwardRef<Partial<LinkProps> & { principal: string }, 'a'>(
+  ({ principal, ...rest }, ref) => {
+    return principal.includes('.') ? (
+      <TxLink ref={ref} txId={principal} {...rest} />
+    ) : (
+      <ExplorerLink ref={ref} href={`/address/${encodeURIComponent(principal)}`} {...rest} />
+    );
+  }
+);
diff --git a/src/components/stacking.tsx b/src/components/stacking.tsx
@@ -71,7 +71,7 @@ export const StackingPercentage = ({ balances, address }: any) => {
                   ~{blocksUntilUnlocked.toLocaleString(undefined, { maximumFractionDigits: 2 })}{' '}
                   blocks remaining
                 </Caption>
-                <TxLink txid={balances?.stx?.lock_tx_id}>
+                <TxLink txId={balances?.stx?.lock_tx_id}>
                   <TextLink target="_blank" color={'brand'} fontSize={0}>
                     View Stacking transaction
                   </TextLink>
@@ -83,7 +83,7 @@ export const StackingPercentage = ({ balances, address }: any) => {
               <Title mb="12px" fontSize={2} fontWeight={500} color={'textTitle'}>
                 Completed at #{unlockBlock}
               </Title>
-              <TxLink txid={balances?.stx?.lock_tx_id}>
+              <TxLink txId={balances?.stx?.lock_tx_id}>
                 <TextLink target="_blank" color={'brand'} fontSize={0}>
                   View Stacking transaction
                 </TextLink>

diff --git a/src/components/transaction-list.tsx b/src/components/transaction-list.tsx
@@ -19,8 +19,8 @@ const Item: React.FC<
   { tx: MempoolTransaction | Transaction; isLast?: boolean; principal?: string } & BoxProps
 > = React.memo(({ tx, principal, ...rest }) => {
   return (
-    <Flex>
-      <TxLink txid={tx.tx_id} {...rest}>
+    <Flex {...rest}>
+      <TxLink txId={tx.tx_id}>
         <Box as="a" position="absolute" size="100%" />
       </TxLink>
       <TxItem as="span" tx={tx} principal={principal} key={tx.tx_id} />

diff --git a/src/features/search/items/address-result-item.tsx b/src/features/search/items/address-result-item.tsx
@@ -25,7 +25,7 @@ export const AddressResultItem: React.FC<AddressResultItemProps> = ({ result })
   const { data: stxBalance } = useQuery(
     ['stx-balance', principal],
     () => accountsApi.getAccountStxBalance({ principal }) as Promise<AddressStxBalanceResponse>,
-    { staleTime: 3 * 60 * 1000 }
+    { staleTime: 3 * 60 * 1000, suspense: false }
   );
   const colorMode = useColorMode().colorMode;
   return (

diff --git a/src/features/search/items/result-item-wrapper.tsx b/src/features/search/items/result-item-wrapper.tsx
@@ -1,8 +1,12 @@
 import { Flex, FlexProps } from '@/ui/components';
 import React, { FC } from 'react';
+import { forwardRef } from '@chakra-ui/react';
+import Link, { LinkProps } from 'next/link';
+import { useGlobalContext } from '@/common/context/useAppContext';
+import { buildUrl } from '@/app/common/utils/buildUrl';
 
-export const ResultItemWrapper: FC<FlexProps> = ({ children, ...rest }) => (
-  <Flex>
+export const ResultItemWrapper = forwardRef<FlexProps, 'div'>(({ children, ...rest }, ref) => (
+  <Flex ref={ref}>
     <Flex
       as={'a'}
       p="24px"
@@ -17,4 +21,4 @@ export const ResultItemWrapper: FC<FlexProps> = ({ children, ...rest }) => (
       </Flex>
     </Flex>
   </Flex>
-);
+));
diff --git a/src/features/search/use-search.ts b/src/features/search/use-search.ts
@@ -75,6 +75,7 @@ export const useSearchQuery = (id: string) => {
       retry: false,
       refetchOnWindowFocus: false,
       staleTime: 1 * 60 * 1000,
+      suspense: false,
     }
   );
 };