feat: Add tx link

linkpoolio · May 25, 2023 · ebd20c7 · ebd20c7
1 parent 50c1757
commit ebd20c7
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 9 deletions.
diff --git a/client/packages/ui/src/features/raffleCreate/components/create.tsx b/client/packages/ui/src/features/raffleCreate/components/create.tsx
@@ -133,7 +133,11 @@ export const RaffleCreate = () => {
         <Text fontSize="lg" color="brand.gray_70" fontWeight="600">
           Create dynamic or static raffle
         </Text>
-        <Link as={RouterLink} to={Routes.FAQ} color="brand.blue">
+        <Link
+          as={RouterLink}
+          to={Routes.FAQ}
+          color="brand.blue"
+          textDecoration="underline">
           Need help? Check out our FAQ page.
         </Link>
       </Center>

diff --git a/client/packages/ui/src/features/raffleDetail/components/detail.tsx b/client/packages/ui/src/features/raffleDetail/components/detail.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import { useAccount } from 'wagmi'
 import {
   Container,

diff --git a/client/packages/ui/src/features/raffleDetail/components/pickWinners.tsx b/client/packages/ui/src/features/raffleDetail/components/pickWinners.tsx
@@ -1,20 +1,22 @@
 import React, { useState, useEffect } from 'react'
-import { Button, Text, Flex, Heading } from '@chakra-ui/react'
+import { Button, Text, Flex, Heading, Link } from '@chakra-ui/react'
+import { useNetwork } from 'wagmi'
 
 import { pickWinners } from '@ui/features/raffleDetail'
 
 export const PickWinners = ({ id, reset, asyncManager, store }) => {
   const [success, setSuccess] = useState(false)
+  const [txHash, setTxHash] = useState(null)
+  const { chain } = useNetwork()
 
-  const componentDidMount = () => {
+  useEffect(() => {
     pickWinners({
       id,
       asyncManager,
       success: setSuccess,
-      update: store.update
+      txHash: setTxHash
     })
-  }
-  useEffect(componentDidMount, [])
+  }, [])
 
   return (
     success && (
@@ -23,6 +25,17 @@ export const PickWinners = ({ id, reset, asyncManager, store }) => {
           Pick Winners
         </Heading>
         <Text>Successfully picked winners for raffle id `{id}`.</Text>
+        {txHash && (
+          <Text>
+            <Link
+              href={`${chain.blockExplorers.default}${txHash}#eventlog`}
+              color="brand.blue"
+              textDecoration="underline"
+              isExternal>
+              View VRF transaction
+            </Link>
+          </Text>
+        )}
         <Flex mt="2" justify="end">
           <Button variant="default" onClick={() => reset(store)}>
             Close

diff --git a/client/packages/ui/src/features/raffleDetail/methods/contract.ts b/client/packages/ui/src/features/raffleDetail/methods/contract.ts
@@ -77,7 +77,7 @@ export const joinRaffle = async ({
   }
 }
 
-export const pickWinners = async ({ id, asyncManager, success, update }) => {
+export const pickWinners = async ({ id, asyncManager, success, txHash }) => {
   try {
     /*
      * @FeatureEnhancement
@@ -90,7 +90,7 @@ export const pickWinners = async ({ id, asyncManager, success, update }) => {
 
     const value = BigNumber.from('100000000000000000') // 0.1 LINK
     const payload: contracts.ResolveRaffleParams = { id, value }
-    const { wait } = await contracts.resolveRaffle(payload)
+    const { wait, hash } = await contracts.resolveRaffle(payload)
 
     asyncManager.waiting()
 
@@ -100,6 +100,8 @@ export const pickWinners = async ({ id, asyncManager, success, update }) => {
 
     asyncManager.success()
 
+    txHash(hash)
+
     success(true)
     return true
   } catch (error) {