add a CLI retrieval UI with more accurate commands

this UI fixes the lotus retrieval command when CIDs are
aggregated (but requires lotus 1.13.2+) by using the
new `selector` provided in estuary's `by-cid/:cid` API
endpoint

fixes application-research#17

components/RetrievalCommands.module.scss

@@ -0,0 +1,7 @@
+.selectedTab {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.command {
+  white-space: pre-line;
+}

components/RetrievalCommands.tsx

@@ -0,0 +1,45 @@
+import styles from '@components/RetrievalCommands.module.scss';
+import 'react-tabs/style/react-tabs.css';
+
+import * as React from 'react';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+
+function RetrievalCommands(props: {
+  miner: string,
+  dealId: string,
+  cid: string,
+  aggregatedIn?: string | null,
+  selector?: string | null,
+}) {
+  const { miner, dealId, cid, aggregatedIn, selector } = props;
+  return (
+    <Tabs selectedTabClassName={styles.selectedTab}>
+      <TabList>
+        {aggregatedIn && (
+          <Tab>lotus 1.13.2+</Tab>
+        )}
+        <Tab>lotus</Tab>
+        <Tab>filc</Tab>
+      </TabList>
+      {aggregatedIn && selector && (
+        <TabPanel>
+          <pre className={styles.command}>
+            lotus client retrieve --miner {miner} --datamodel-path-selector {selector} {aggregatedIn} data-{dealId}
+          </pre>
+        </TabPanel>
+      )}
+      <TabPanel>
+        <pre className={styles.command}>
+          lotus client retrieve --miner {miner} {cid} data-{dealId}
+        </pre>
+      </TabPanel>
+      <TabPanel>
+        <pre className={styles.command}>
+          filc retrieve {cid}
+        </pre>
+      </TabPanel>
+    </Tabs>
+  )
+}
+
+export default RetrievalCommands;

package.json

@@ -20,6 +20,7 @@
     "next": "^11.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-tabs": "^3.2.3",
     "sass": "1.43.3",
     "uuid": "^8.3.2",
     "webnative": "0.28.1",

pages/verify-cid.tsx

@@ -14,6 +14,7 @@ import SingleColumnLayout from '@components/SingleColumnLayout';
 import Input from '@components/Input';
 import StatRow from '@components/StatRow';
 import LoaderSpinner from '@components/LoaderSpinner';
+import RetrievalCommands from '@components/RetrievalCommands';
 
 import { H1, H2, H3, H4, P } from '@components/Typography';
 
@@ -245,8 +246,13 @@ function VerifyCIDPage(props: any) {
                         (view receipt)
                       </a>
                     </StatRow>
-                    <StatRow title="Lotus retrieval">
-                      lotus client retrieve --miner {d.miner} {state.data.content.cid} data-{d.dealId}
+                    <StatRow title="CLI retrieval">
+                      <RetrievalCommands
+                        miner={d.miner}
+                        dealId={d.dealId}
+                        cid={state.data.content.cid}
+                        aggregatedIn={state.data.aggregatedIn?.cid}
+                        selector={state.data.selector} />
                     </StatRow>
                   </div>
                 );