collections: use unified scroller

pkg/interface/src/views/apps/links/components/LinkBlocks.tsx

@@ -8,7 +8,7 @@ import { LinkBlockInput } from './LinkBlockInput';
 import useLocalState from '~/logic/state/local';
 import BigIntOrderedMap from '@urbit/api/lib/BigIntOrderedMap';
 import bigInt from 'big-integer';
-import VirtualScroller from '~/views/components/VirtualScroller';
+import { BlockScroller } from '~/views/components/BlockScroller';
 
 export interface LinkBlocksProps {
   graph: Graph;
@@ -102,7 +102,7 @@ export function LinkBlocks(props: LinkBlocksProps) {
 
   return (
     <Col overflowX="hidden" overflowY="auto" height="calc(100% - 48px)" {...bind}>
-      <VirtualScroller
+      <BlockScroller
         origin="top"
         offset={0}
         style={style}

pkg/interface/src/views/components/BlockScroller.tsx

@@ -0,0 +1,27 @@
+import { GraphNode } from '@urbit/api';
+import bigInt, { BigInteger } from 'big-integer';
+import React from 'react';
+import VirtualScroller, { VirtualScrollerProps } from './VirtualScroller';
+
+type BlockScrollerProps = Omit<
+  VirtualScrollerProps<BigInteger, [BigInteger, GraphNode][]>,
+  'keyEq' | 'keyToString' | 'keyBunt'
+>;
+
+const keyEq = (a: BigInteger, b: BigInteger) => a.eq(b);
+const keyToString = (a: BigInteger) => a.toString();
+
+export const BlockScroller = React.forwardRef<
+  VirtualScroller<BigInteger, [BigInteger, GraphNode][]>,
+  BlockScrollerProps
+>((props, ref) => {
+  return (
+    <VirtualScroller<BigInteger, [BigInteger, GraphNode][]>
+      ref={ref}
+      {...props}
+      keyEq={keyEq}
+      keyToString={keyToString}
+      keyBunt={bigInt.zero}
+    />
+  );
+});