Update goerli

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "type": "module",
   "dependencies": {
+    "@floating-ui/react": "^0.26.9",
     "@sentry/react": "^6.19.7",
     "@sentry/tracing": "^6.19.7",
     "@testing-library/jest-dom": "^5.16.1",

src/App.tsx

@@ -43,7 +43,7 @@ function App() {
   )
 
   useEffect(() => {
-    if (!connectedAddress || (profile && !addressIsAllowed(connectedAddress))) {
+    if (profile && connectedAddress && !addressIsAllowed(connectedAddress)) {
       signOut()
     }
   }, [connectedAddress, addressIsAllowed, signOut, profile])

src/AppAdmin.tsx

@@ -11,20 +11,12 @@ import { Box } from "./components/Box"
 import { useAdminSignIn } from "./hooks/api/admin/useAdminSignIn"
 import { ErrorModal } from "./pages/ContestDetails/ErrorModal"
 import { useAccount } from "wagmi"
-import { contests as contestsAPI } from "./hooks/api/axios"
-import { adminSignOut as adminSignOutUrl } from "./hooks/api/urls"
 
 const AppInternal = () => {
   const { data: adminAddress } = useAdminProfile()
-  const { address: connectedAddress, isDisconnected } = useAccount()
+  const { address: connectedAddress } = useAccount()
   const { signIn, error, reset } = useAdminSignIn()
 
-  useEffect(() => {
-    if (adminAddress && !connectedAddress && isDisconnected) {
-      contestsAPI.get(adminSignOutUrl())
-    }
-  }, [connectedAddress, adminAddress, isDisconnected])
-
   const handleSignInAsAdmin = useCallback(() => {
     signIn()
   }, [signIn])
@@ -33,10 +25,7 @@ const AppInternal = () => {
     reset()
   }, [reset])
 
-  const validAdmin = useMemo(
-    () => adminAddress && connectedAddress && adminAddress === connectedAddress,
-    [adminAddress, connectedAddress]
-  )
+  const validAdmin = useMemo(() => !!adminAddress, [adminAddress])
 
   const navigationLinks: NavigationLink[] = validAdmin
     ? [
@@ -48,17 +37,13 @@ const AppInternal = () => {
           title: "CONTESTS",
           route: adminRoutes.Contests,
         },
-        {
-          title: "SCOPE",
-          route: adminRoutes.Scope,
-        },
       ]
     : []
 
   return (
     <div className={styles.app}>
       <div className={styles.noise} />
-      <Header navigationLinks={navigationLinks} />
+      <Header navigationLinks={navigationLinks} includePayouts />
       <div className={styles.contentContainer}>
         <div className={styles.content}>
           {validAdmin ? (

src/AppProtocolDashboard.tsx

@@ -96,17 +96,23 @@ const AppProtocolDashboard = () => {
                           <Text strong>Contest Prize Pool</Text>
                         </Td>
                         <Td>
-                          <Text alignment="right">{`${commify(protocolDashboard.contest.prizePool)} USDC`}</Text>
+                          <Text alignment="right">
+                            {protocolDashboard.contest.prizePool
+                              ? ` ${commify(protocolDashboard.contest.prizePool)} USDC`
+                              : "TBD"}
+                          </Text>
                         </Td>
                       </Tr>
                       <Tr>
                         <Td>
                           <Text strong>Lead Senior Watson Fixed Pay</Text>
                         </Td>
                         <Td>
-                          <Text alignment="right">{`${commify(
-                            protocolDashboard.contest.leadSeniorAuditorFixedPay
-                          )} USDC`}</Text>
+                          <Text alignment="right">
+                            {protocolDashboard.contest.leadSeniorAuditorFixedPay
+                              ? `${commify(protocolDashboard.contest.leadSeniorAuditorFixedPay)} USDC`
+                              : "TBD"}
+                          </Text>
                         </Td>
                       </Tr>
                       <Tr>

src/components/Checkbox/Checkbox.module.scss

@@ -0,0 +1,25 @@
+@import "../../styles/variables";
+
+.container {
+  height: 2rem;
+  width: 2rem;
+  border-radius: 4px;
+  border: 1px solid $primary-purple;
+  color: $primary-purple;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    border-color: lighten($primary-purple, 20%);
+    color: lighten($primary-purple, 20%);
+  }
+
+  &:active {
+    border-color: darken($primary-purple, 20%);
+    color: darken($primary-purple, 20%);
+  }
+}

src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,17 @@
+import { FaCheck } from "react-icons/fa"
+import styles from "./Checkbox.module.scss"
+
+type Props = {
+  checked?: boolean
+  onChange?: (checked: boolean) => void
+}
+
+const Checkbox: React.FC<Props> = ({ checked = false, onChange }) => {
+  return (
+    <div className={styles.container} onClick={() => onChange?.(!checked)}>
+      {checked && <FaCheck size={20} />}
+    </div>
+  )
+}
+
+export default Checkbox

src/components/ClaimsList/ClaimsList.tsx

@@ -7,7 +7,18 @@ import { formatAmount } from "../../utils/format"
 import styles from "./ClaimsList.module.scss"
 import cx from "classnames"
 
-const CLAIMS = [
+type Claim = {
+  id: number
+  protocol: string
+  date: string
+  coverageAgreementUrl: string
+  evidenceUrl?: string
+  amount: number
+  txHashUrl: string
+  status: "paid" | "denied"
+}
+
+const CLAIMS: Claim[] = [
   {
     id: 1,
     protocol: "Euler",
@@ -18,6 +29,7 @@ const CLAIMS = [
       "https://sherlock-files.ams3.digitaloceanspaces.com/claims/Euler_0x3019e52a670390f24e4b9b58af62a7367658e457bbb07f86b19b213ec74b5be7_16817996.pdf?hash=d6c8e864a5312384143a21f542e998f6e83357f5b8e3e34ccdcb551404d25c09",
     amount: 4_529_285,
     txHashUrl: "https://etherscan.io/tx/0x234cd8e369fdcd0387ada4214e563a6a72aad4abd0b464a2873f3eb9dac2579b",
+    status: "paid",
   },
   {
     id: 2,
@@ -29,9 +41,29 @@ const CLAIMS = [
       "https://sherlock-files.ams3.digitaloceanspaces.com/claims/Sentiment_0x5af5b22283e35ef9d9d4a32753014cdc40fd7a5a5d920d83d2c1e901c10a0a7c_16977102.pdf?hash=f513422f0d98aaac6f669142caf9148172ca7f2a17559f3c1cb26177df11e8ef",
     amount: 65_701,
     txHashUrl: "https://etherscan.io/tx/0xe67bbb7a9085f1a603fcea1eefe08c7674a2f504e81f6d69df41c8b077c2765e",
+    status: "paid",
+  },
+  {
+    id: 3,
+    protocol: "Ajna",
+    date: "Sept 26, 2023",
+    coverageAgreementUrl:
+      "https://github.com/sherlock-protocol/sherlock-reports/blob/main/coverage-agreements/Ajna%20Coverage%20Agreement%202023.07.15.pdf",
+    amount: 49_500,
+    txHashUrl: "https://etherscan.io/tx/0xa4a8fbea2c24662ea46e25ab3ab69456a8327463803c4851948c2ba2234fed5f",
+    status: "paid",
   },
 ]
 
+function getStatusLabel(status: "paid" | "denied") {
+  switch (status) {
+    case "paid":
+      return "Paid"
+    case "denied":
+      return "Denied"
+  }
+}
+
 /**
  * List of past claims
  */
@@ -64,7 +96,7 @@ const ClaimsList: React.FC = () => {
                 <Text strong>Evidence</Text>
               </Column>
               <Column alignment="center" className={cx(styles.listColumn, styles.link)}>
-                <Text strong>Transaction</Text>
+                <Text strong>Status</Text>
               </Column>
             </Row>
             <Column grow={1} spacing="xs" className={styles.listContainer}>
@@ -89,16 +121,20 @@ const ClaimsList: React.FC = () => {
                     </Text>
                   </Column>
                   <Column alignment="center" className={cx(styles.listColumn, styles.entry, styles.link)}>
-                    <Text>
-                      <a href={item.evidenceUrl} target="_blank" rel="noopener noreferrer">
-                        Link
-                      </a>
-                    </Text>
+                    {item.evidenceUrl ? (
+                      <Text>
+                        <a href={item.evidenceUrl} target="_blank" rel="noopener noreferrer">
+                          Link
+                        </a>
+                      </Text>
+                    ) : (
+                      <Text variant="secondary">-</Text>
+                    )}
                   </Column>
                   <Column alignment="center" className={cx(styles.listColumn, styles.entry, styles.link)}>
                     <Text>
                       <a href={item.txHashUrl} target="_blank" rel="noopener noreferrer">
-                        Link
+                        {getStatusLabel(item.status)}
                       </a>
                     </Text>
                   </Column>