ready

usecannon · Nov 5, 2024 · 8769cd0 · 8769cd0
1 parent f504a14
commit 8769cd0
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 81 deletions.
diff --git a/packages/website/src/components/CommandPreview.tsx b/packages/website/src/components/CommandPreview.tsx
@@ -11,7 +11,7 @@ interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
   expandButtonTitle?: string;
 }
 
-export const CommandPreview2 = React.forwardRef<HTMLDivElement, CodeBlockProps>(
+export const CommandPreview = React.forwardRef<HTMLDivElement, CodeBlockProps>(
   ({ command = '', className, ...props }, ref) => {
     const [hasCopied, setHasCopied] = React.useState(false);
     const [html, setHtml] = React.useState('');
@@ -50,7 +50,7 @@ export const CommandPreview2 = React.forwardRef<HTMLDivElement, CodeBlockProps>(
       <div
         ref={ref}
         className={cn(
-          'relative rounded-md bg-muted/30 py-2.5 pl-4 font-mono text-sm flex items-center',
+          'relative rounded-md bg-muted/30 py-2.5 pl-4 font-mono text-sm flex items-center border border-border',
           className
         )}
         {...props}
@@ -79,4 +79,4 @@ export const CommandPreview2 = React.forwardRef<HTMLDivElement, CodeBlockProps>(
   }
 );
 
-CommandPreview2.displayName = 'CommandPreview2';
+CommandPreview.displayName = 'CommandPreview';
diff --git a/packages/website/src/features/Docs/DocsCannonfilesPage.tsx b/packages/website/src/features/Docs/DocsCannonfilesPage.tsx
@@ -304,18 +304,15 @@ const DocsCannonfilesPage: FC = () => {
                       href="https://lodash.com/docs/4.17.15#template"
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="text-blue-400 hover:text-blue-300"
                     >
                       templates
-                    </a>
-                    like
-                    <code>name=&lt;%= settings.name %&gt;</code>). The templates
-                    can also use{' '}
+                    </a>{' '}
+                    like <code>name=&lt;%= settings.name %&gt;</code>). The
+                    templates can also use{' '}
                     <a
                       href="https://github.com/wevm/viem/tree/main/src/utils"
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="text-blue-400 hover:text-blue-300"
                     >
                       utilities
                     </a>
@@ -350,14 +347,8 @@ const DocsCannonfilesPage: FC = () => {
                   <p className="mb-4">
                     Packages that result from <code>build</code>s consist of
                     three JSON files, which are compressed and uploaded using
-                    IPFS:{' '}
-                    <a
-                      href="#deployment-data"
-                      className="text-blue-400 hover:text-blue-300"
-                    >
-                      deployment data
-                    </a>
-                    , <a href="#package-code">code</a>, and{' '}
+                    IPFS: <a href="#deployment-data">deployment data</a>,{' '}
+                    <a href="#package-code">code</a>, and{' '}
                     <a href="#metadata">metadata</a>.
                   </p>
                 </div>

diff --git a/packages/website/src/features/Docs/DocsCliPage.tsx b/packages/website/src/features/Docs/DocsCliPage.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { CommandPreview2 } from '@/components/CommandPreview';
+import { CommandPreview } from '@/components/CommandPreview';
 import { CustomSpinner } from '@/components/CustomSpinner';
 import { useCommandsConfig } from '@/hooks/useCommandsConfig';
 import {
@@ -100,7 +100,7 @@ const DocumentationSection: React.FC<{
     </div>
     <p className="mb-2 text-lg">{description}</p>
     <div className="mb-5">
-      <CommandPreview2>cannon {command}</CommandPreview2>
+      <CommandPreview>cannon {command}</CommandPreview>
     </div>
     {argumentsData && <CustomTable title="Argument" data={argumentsData} />}
     {optionsData && <CustomTable title="Option" data={optionsData} />}
@@ -355,17 +355,17 @@ const DocsCliPage: FC = () => {
                       </TabsTrigger>
                     </TabsList>
                     <TabsContent value="npm" className="p-0">
-                      <CommandPreview2>npm i -g @usecannon/cli</CommandPreview2>
+                      <CommandPreview>npm i -g @usecannon/cli</CommandPreview>
                     </TabsContent>
                     <TabsContent value="yarn" className="p-0">
-                      <CommandPreview2>
+                      <CommandPreview>
                         yarn global add @usecannon/cli
-                      </CommandPreview2>
+                      </CommandPreview>
                     </TabsContent>
                     <TabsContent value="pnpm" className="p-0">
-                      <CommandPreview2>
+                      <CommandPreview>
                         pnpm add -g @usecannon/cli
-                      </CommandPreview2>
+                      </CommandPreview>
                     </TabsContent>
                   </Tabs>
 

diff --git a/packages/website/src/features/Packages/PackageAccordionHelper/IntegrateWithPackage.tsx b/packages/website/src/features/Packages/PackageAccordionHelper/IntegrateWithPackage.tsx
@@ -1,14 +1,9 @@
 import CodePreview from '@/components/CodePreview';
-import { InfoCircledIcon } from '@radix-ui/react-icons';
 import camelCase from 'lodash/camelCase';
 import { ChainDefinition, getArtifacts } from '@usecannon/builder';
 import { DeploymentState } from '@usecannon/builder';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-  TooltipProvider,
-} from '@/components/ui/tooltip';
+import Link from 'next/link';
+import { badgeVariants } from '@/components/ui/badge';
 
 function generateSettingsText(settings?: Record<string, unknown>) {
   let text = '';
@@ -53,26 +48,38 @@ target = "PACKAGE_NAME@${camelCase(
 ${generateSettingsText(contextDataCode.settings)}
 `.trim();
 
-  const interactCode = chainId == 13370 ? cloneCode : pullCode;
+  const displayCode = chainId == 13370 ? cloneCode : pullCode;
 
   return (
-    <TooltipProvider>
+    <div className="space-y-6">
       <div>
-        <div className="flex items-center mb-2">
-          <p className="mr-1.5 text-sm text-gray-200">Add to Cannonfile</p>
-          <Tooltip>
-            <TooltipTrigger>
-              <InfoCircledIcon className="h-3 w-3" />
-            </TooltipTrigger>
-            <TooltipContent>
-              Options listed below show their default values. You can override
-              them or omit them from your cannonfiles.
-            </TooltipContent>
-          </Tooltip>
-        </div>
+        <p className="mb-2 flex items-center">
+          Add the following to your Cannonfile to{' '}
+          {chainId == 13370 ? (
+            <>
+              deploy your own instance of this package.{' '}
+              <Link
+                href="/learn/cannonfile#clone"
+                className={badgeVariants({ variant: 'secondary' }) + ' ml-2'}
+              >
+                Learn more
+              </Link>
+            </>
+          ) : (
+            <>
+              import data from this package.{' '}
+              <Link
+                href="/learn/cannonfile#pull"
+                className={badgeVariants({ variant: 'secondary' }) + ' ml-2'}
+              >
+                Learn more
+              </Link>
+            </>
+          )}
+        </p>
 
         <CodePreview
-          code={interactCode}
+          code={displayCode}
           height="150px"
           language="ini"
           editorProps={{
@@ -83,23 +90,16 @@ ${generateSettingsText(contextDataCode.settings)}
             },
           }}
         />
-
-        <div className="flex items-center mt-4 mb-2">
-          <p className="mr-1.5 text-sm text-gray-200">
-            Cannonfile Context Data
-          </p>
-          <Tooltip>
-            <TooltipTrigger>
-              <InfoCircledIcon className="h-3 w-3" />
-            </TooltipTrigger>
-            <TooltipContent>
-              {`After adding the ${
-                chainId == 13370 ? 'clone' : 'pull'
-              } operation to your cannonfile, you can reference the following data in other operations using EJS syntax.`}
-            </TooltipContent>
-          </Tooltip>
-        </div>
-
+        <p className="text-sm text-foreground/60 mt-1">
+          The options listed above show the default values. You can override or
+          omit them.
+        </p>
+      </div>
+      <div>
+        <p className="mb-2">
+          Then reference the following data in other Cannonfile operations using
+          EJS syntax, like <code>{'<%= settings.example %>'}</code>
+        </p>
         <CodePreview
           code={JSON.stringify(contextDataCode, null, 2)}
           height="250px"
@@ -113,6 +113,6 @@ ${generateSettingsText(contextDataCode.settings)}
           }}
         />
       </div>
-    </TooltipProvider>
+    </div>
   );
 }
diff --git a/packages/website/src/features/Packages/PackageAccordionHelper/index.tsx b/packages/website/src/features/Packages/PackageAccordionHelper/index.tsx
@@ -14,8 +14,9 @@ import { usePackageByRef } from '@/hooks/api/usePackage';
 import { IpfsSpinner } from '@/components/IpfsSpinner';
 import { useState, useEffect } from 'react';
 import { getChainDefinitionFromWorker } from '@/helpers/chain-definition';
-import { CommandPreview2 } from '@/components/CommandPreview';
-import { CodeIcon, DownloadIcon } from '@radix-ui/react-icons';
+import { CommandPreview } from '@/components/CommandPreview';
+import { DownloadIcon } from '@radix-ui/react-icons';
+import { Braces } from 'lucide-react';
 import Link from 'next/link';
 
 type Props = {
@@ -117,11 +118,7 @@ export default function PackageAccordionHelper({
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <CommandPreview2
-              command={`cannon ${packageRef} ${
-                chainId != 13370 ? `--chain-id ${chainId}` : ''
-              }`}
-            />
+            <CommandPreview command={`cannon ${packageRef}`} />
           </CardContent>
           <CardFooter>
             <div className="text-sm text-muted-foreground">
@@ -145,19 +142,17 @@ export default function PackageAccordionHelper({
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <CommandPreview2>
-              cannon inspect {packageRef}{' '}
-              {chainId != 13370 ? `--chain-id ${chainId}` : ''}{' '}
-              --write-deployments ./deployment
-            </CommandPreview2>
+            <CommandPreview
+              command={`cannon inspect ${packageRef} --write-deployments ./deployment`}
+            />
           </CardContent>
           <CardFooter>
             <div className="text-sm text-muted-foreground">
               <button
                 onClick={() => handleDownload(addressesAbis)}
                 className="inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground"
               >
-                <CodeIcon className="h-4 w-4" />
+                <Braces className="h-4 w-4" />
                 Download JSON
               </button>
             </div>
@@ -176,9 +171,7 @@ export default function PackageAccordionHelper({
               </CardDescription>
             </CardHeader>
             <CardContent>
-              <CommandPreview2>
-                cannon interact {packageRef} --chain-id {chainId}
-              </CommandPreview2>
+              <CommandPreview command={`cannon interact ${packageRef}`} />
             </CardContent>
           </Card>
         )}
@@ -193,7 +186,6 @@ export default function PackageAccordionHelper({
           </CardDescription>
         </CardHeader>
         <CardContent>
-          t.c. improve description here
           {state && deploymentInfo && chainDefinition ? (
             <IntegrateWithPackage
               name={name}