Merge main into prod

Author: alex-grover

src/app/client.tsx

@@ -112,7 +112,7 @@ export function HomeClientPage({ color: initialColor }: HomeClientPageProps) {
 
   useEffect(() => {
     if (!(mintPending || mintRandomPending || allowlistMintPending)) return
-    toast('Please confirm in your wallet', { position: 'bottom-right' })
+    toast('Please confirm in your wallet')
   }, [mintPending, mintRandomPending, allowlistMintPending])
 
   useEffect(() => {
@@ -177,6 +177,13 @@ export function HomeClientPage({ color: initialColor }: HomeClientPageProps) {
                 if (r > 255) return
                 setColor({ ...color, r })
               }}
+              onKeyUp={(e) => {
+                if (e.code === 'ArrowUp' && color.r !== 255) {
+                  setColor({ ...color, r: color.r + 1 })
+                } else if (e.code === 'ArrowDown' && color.r !== 0) {
+                  setColor({ ...color, r: color.r - 1 })
+                }
+              }}
             >
               <TextField.Slot>R</TextField.Slot>
             </TextField.Root>
@@ -189,6 +196,13 @@ export function HomeClientPage({ color: initialColor }: HomeClientPageProps) {
                 if (g > 255) return
                 setColor({ ...color, g })
               }}
+              onKeyUp={(e) => {
+                if (e.code === 'ArrowUp' && color.g !== 255) {
+                  setColor({ ...color, g: color.g + 1 })
+                } else if (e.code === 'ArrowDown' && color.g !== 0) {
+                  setColor({ ...color, g: color.g - 1 })
+                }
+              }}
             >
               <TextField.Slot>G</TextField.Slot>
             </TextField.Root>
@@ -201,6 +215,13 @@ export function HomeClientPage({ color: initialColor }: HomeClientPageProps) {
                 if (b > 255) return
                 setColor({ ...color, b })
               }}
+              onKeyUp={(e) => {
+                if (e.code === 'ArrowUp' && color.b !== 255) {
+                  setColor({ ...color, b: color.b + 1 })
+                } else if (e.code === 'ArrowDown' && color.b !== 0) {
+                  setColor({ ...color, b: color.b - 1 })
+                }
+              }}
             >
               <TextField.Slot>B</TextField.Slot>
             </TextField.Root>

src/app/transactions/[hash]/client.module.css

@@ -0,0 +1,3 @@
+.primary {
+  background-color: black;
+}

src/app/transactions/[hash]/client.tsx

@@ -6,9 +6,12 @@ import { idToColor } from '@/lib/color'
 import { getUrl } from '@/lib/next'
 import { Box, Button, Flex, Grid, Spinner, Text } from '@radix-ui/themes'
 import Link from 'next/link'
-import type { PropsWithChildren } from 'react'
+import { type PropsWithChildren, useCallback } from 'react'
+import { toast } from 'sonner'
+import { useCopyToClipboard } from 'usehooks-ts'
 import { type Hash, parseEventLogs } from 'viem'
 import { useAccount, useWaitForTransactionReceipt } from 'wagmi'
+import styles from './client.module.css'
 
 type TransactionClientPageProps = {
   hash: Hash
@@ -32,6 +35,20 @@ export function TransactionClientPage({
     isSuccess: isConfirmed,
   } = useWaitForTransactionReceipt({ hash })
 
+  const [, copy] = useCopyToClipboard()
+  const handleCopyClicked = useCallback(
+    (text: string) => () => {
+      async function handle() {
+        const success = await copy(text)
+        if (success) toast('Copied to clipboard!')
+        else toast('Failed to copy to clipboard')
+      }
+
+      void handle()
+    },
+    [copy],
+  )
+
   const isRandom = 'amount' in props
 
   if (isConfirming)
@@ -78,9 +95,16 @@ export function TransactionClientPage({
               Welcome to RGB
             </Text>
           </Flex>
+          <Box width="100%" maxWidth="300px" asChild>
+            <Button size="3" asChild>
+              <Link href={`/accounts/${address}`} className={styles.primary}>
+                View your Signatures
+              </Link>
+            </Button>
+          </Box>
           <Box width="100%" maxWidth="300px" asChild>
             <Button variant="outline" size="3" asChild>
-              <Link href={`/accounts/${address}`}>View your Signatures</Link>
+              <Link href="/">Mint more</Link>
             </Button>
           </Box>
         </Wrapper>
@@ -105,9 +129,16 @@ export function TransactionClientPage({
           </Text>
         </Flex>
         <Grid width="100%" maxWidth="300px" columns="2" rows="2" gap="3">
+          <Box gridColumn="1 / span 2" asChild>
+            <Button size="3" asChild>
+              <Link href={`/signatures/${id}`} className={styles.primary}>
+                View Signature
+              </Link>
+            </Button>
+          </Box>
           <Box gridColumn="1 / span 2" asChild>
             <Button variant="outline" size="3" asChild>
-              <Link href={`/signatures/${id}`}>View Signature</Link>
+              <Link href="/">Mint another</Link>
             </Button>
           </Box>
           <Button variant="outline" size="3" asChild>
@@ -126,6 +157,11 @@ export function TransactionClientPage({
               Share on FC
             </Link>
           </Button>
+          <Box gridColumn="1 / span 2" asChild>
+            <Button variant="outline" size="3" onClick={handleCopyClicked(url)}>
+              Copy link
+            </Button>
+          </Box>
         </Grid>
       </Wrapper>
     )

src/components/MintFeed.tsx

@@ -45,21 +45,19 @@ export function MintFeed() {
               </Text>
               <Signature color={color} size={16} bordered />
             </Flex>,
+            { position: 'top-center' },
           )
           return
         }
 
-        debouncedToast(`${name} minted x${logs.length} random`)
+        debouncedToast(`${name} minted x${logs.length} random`, {
+          position: 'top-center',
+        })
       }
 
       void handle()
     },
   })
 
-  return (
-    <Toaster
-      position="top-center"
-      toastOptions={{ style: { borderRadius: 0 } }}
-    />
-  )
+  return <Toaster toastOptions={{ style: { borderRadius: 0 } }} />
 }