Merge pull request #10 from hackbg/main

Migrate to OP Sepolia testnet

app/README.md

@@ -15,7 +15,7 @@ npm install
 Set environment variables by copying `.env.example` to `.env` and filling in the values:
 
 - _NEXT_PUBLIC_ALCHEMY_API_KEY_ for the network you want to use. You can get one from [Alchemy](https://www.alchemy.com/).
-- _NEXT_PUBLIC_WALLET_CONNECT_ID_ for the wallet connector. You can get one from [WalletConnect](https://walletconnect.org/).
+- _NEXT_PUBLIC_WALLET_CONNECT_ID_ for the wallet connector. You can get one from [WalletConnect](https://walletconnect.org/) by going to [WalletConnect Cloud](https://cloud.walletconnect.com/sign-in).
 - _NEXT_PUBLIC_CONTRACT_ADDRESS_ for the deployed game contract address.
 - _API_KEY_ for the sports data API. Obtain one [here](https://dashboard.api-football.com/register).
 

app/package.json

@@ -15,7 +15,7 @@
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.3",
-    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-dialog": "1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-scroll-area": "^1.0.4",
@@ -39,8 +39,8 @@
     "server-only": "^0.0.1",
     "tailwind-merge": "^1.12.0",
     "tailwindcss-animate": "^1.0.5",
-    "viem": "~0.3.24",
-    "wagmi": "^1.4.12",
+    "viem": "~1.21.4",
+    "wagmi": "^1.4.13",
     "zod": "^3.22.1"
   },
   "devDependencies": {

app/src/components/bet-card.tsx

@@ -93,7 +93,7 @@ export default function BetCard({
                     <div className="flex items-center">
                       <p>{`${formatEther(
                         prediction.amount ?? BigInt(0),
-                      )} MATIC`}</p>
+                      )} ETH`}</p>
                     </div>
                   ) : gameData.resolved && isPredictionCorrect ? (
                     <div className="flex items-center">
@@ -105,7 +105,7 @@ export default function BetCard({
                       />
                       <p>{`+${formatEther(
                         calculatedWinnings ?? BigInt(0),
-                      )} MATIC`}</p>
+                      )} ETH`}</p>
                     </div>
                   ) : gameData.resolved && !isPredictionCorrect ? (
                     <div className="flex items-center">
@@ -117,7 +117,7 @@ export default function BetCard({
                       />
                       <p>{`-${formatEther(
                         prediction.amount ?? BigInt(0),
-                      )} MATIC`}</p>
+                      )} ETH`}</p>
                     </div>
                   ) : (
                     <div className="flex items-center">
@@ -129,7 +129,7 @@ export default function BetCard({
                       />
                       <p>{`+${formatEther(
                         calculatedWinnings ?? BigInt(0),
-                      )} MATIC`}</p>
+                      )} ETH`}</p>
                     </div>
                   )}
                 </div>
@@ -164,12 +164,12 @@ export default function BetCard({
           )}
           {txHash && (
             <a
-              href={`https://mumbai.polygonscan.com/tx/${txHash}`}
+              href={`https://sepolia-optimism.etherscan.io/tx/${txHash}`}
               target="_blank"
               rel="noreferrer"
             >
               <Button className="w-full border-2 border-border bg-background text-base font-medium leading-4 text-foreground hover:bg-background/90 hover:text-muted-foreground">
-                View Polygonscan
+                View Etherscan
               </Button>
             </a>
           )}

app/src/components/bet-slip-card.tsx

@@ -125,10 +125,10 @@ export default function BetslipCard({
                     <FormControl>
                       <div className="flex space-x-[8px] rounded-[8px] bg-secondary px-4 py-3">
                         <Image
-                          src="/matic.svg"
+                          src="/optimism.svg"
                           width={16}
                           height={16}
-                          alt="matic"
+                          alt="optimism"
                         />
                         <Input
                           disabled={isLoading}
@@ -158,10 +158,10 @@ export default function BetslipCard({
                     <FormControl>
                       <div className="flex space-x-[8px] rounded-[8px] bg-secondary px-4 py-3">
                         <Image
-                          src="/matic.svg"
+                          src="/optimism.svg"
                           width={16}
                           height={16}
-                          alt="matic"
+                          alt="optimism"
                         />
                         <Input
                           disabled

app/src/components/claim-button.tsx

@@ -144,22 +144,22 @@ const ClaimButton = ({
                 <DialogDescription className="font-[450] text-muted-foreground">
                   {`You are transferring ${formatEther(
                     calculatedWinnings,
-                  )} MATIC from Polygon Mumbai to Avalanche Fuji.`}
+                  )} ETH from Optimism Sepolia to Avalanche Fuji.`}
                 </DialogDescription>
               </DialogHeader>
               <div className="flex w-full items-end space-x-4">
                 <div>
                   <span className="mb-4 text-[14px] leading-4">From</span>
                   <div className="flex items-center space-x-[8px] rounded-[8px] bg-primary px-4 py-3">
                     <Image
-                      src="/matic.svg"
+                      src="/optimism.svg"
                       width={24}
                       height={24}
-                      alt="matic"
+                      alt="optimism"
                     />
                     <div className="text-sm font-[450] leading-4">{`${formatEther(
                       calculatedWinnings,
-                    )} MATIC`}</div>
+                    )} ETH`}</div>
                   </div>
                 </div>
                 <Image

app/src/components/main-nav.tsx

@@ -53,7 +53,7 @@ export default function MainNav() {
               </AccordionTrigger>
               <AccordionContent>
                 <p className="text-secondary-foreground">
-                  Built on top of Polygon testnet and Chainlink, this dApp
+                  Built on top of Optimism Sepolia testnet and Chainlink, this dApp
                   enables users to interact with real time sport data, receive
                   automatic payouts, and transfer tokens across chains.
                 </p>
@@ -62,13 +62,13 @@ export default function MainNav() {
           </Accordion>
 
           <a
-            href="https://faucet.polygon.technology"
+            href="https://faucets.chain.link/optimism-sepolia"
             target="_blank"
             rel="noreferrer"
             className="mt-4 flex items-center space-x-[8px] text-base font-bold leading-4 hover:underline hover:brightness-125"
           >
-            <Image src="/polygon.svg" width={16} height={16} alt="polygon" />
-            <span>Get testnet MATIC</span>
+            <Image src="/optimism.svg" width={16} height={16} alt="optimism" />
+            <span>Get testnet ETH</span>
             <Image
               src="/external-link.svg"
               width={12}

app/src/components/place-bet-button.tsx

@@ -40,12 +40,12 @@ export default function PlaceBetButton({
       return
     }
     if (predictions.some((p) => p.wager! < minWager)) {
-      setError(`Minimum bet amount is ${minWager} MATIC`)
+      setError(`Minimum bet amount is ${minWager} ETH`)
       setTimeout(() => setError(null), 3000)
       return
     }
     if (predictions.some((p) => p.wager! > maxWager)) {
-      setError(`Maximum bet amount is ${maxWager} MATIC`)
+      setError(`Maximum bet amount is ${maxWager} ETH`)
       setTimeout(() => setError(null), 3000)
       return
     }

app/src/components/user-balance.tsx

@@ -11,7 +11,7 @@ const UserBalance = () => {
     <div className="font-bold">
       {address ? (
         <div className="flex items-center space-x-[4px]">
-          <Image src="/matic.svg" width={16} height={16} alt="matic" />
+          <Image src="/optimism.svg" width={16} height={16} alt="optimism" />
           <span className="text-xs">{`${data?.formatted.slice(0, 4)} ${
             data?.symbol
           }`}</span>

app/src/wagmi.ts

@@ -1,11 +1,11 @@
 import { getDefaultWallets } from '@rainbow-me/rainbowkit'
 import { configureChains, createConfig } from 'wagmi'
-import { polygonMumbai } from 'wagmi/chains'
+import { optimismSepolia } from 'wagmi/chains'
 import { alchemyProvider } from 'wagmi/providers/alchemy'
 import { publicProvider } from 'wagmi/providers/public'
 
 const { chains, publicClient, webSocketPublicClient } = configureChains(
-  [polygonMumbai],
+  [optimismSepolia],
   [
     alchemyProvider({ apiKey: process.env.NEXT_PUBLIC_ALCHEMY_API_KEY! }),
     publicProvider(),

contracts/README.md

@@ -13,7 +13,7 @@ Additionally, it contains the Chainlink Functions [script](./sports-api.js) exec
 
 ## Supported Networks
 
-- Polygon Mumbai
+- Optimism Sepolia
 - Avalanche Fuji
 
 All required configuration for supported networks is located in the [`networks.js`](./networks.js) file in the root of this repository.
@@ -30,26 +30,33 @@ All required configuration for supported networks is located in the [`networks.j
     2. Use the command `npx env-enc set` to set the required environment variables (see [Environment Variable Management](#environment-variable-management)):
        - _GITHUB_API_TOKEN_ for your Github token obtained from step 3
        - _PRIVATE_KEY_ for your development wallet
-       - _POLYGON_MUMBAI_RPC_URL_, _ETHEREUM_SEPOLIA_RPC_URL_, _AVALANCHE_FUJI_RPC_URL_ for the network that you intend to use
+       - _OPTIMISM_SEPOLIA_RPC_URL_, _AVALANCHE_FUJI_RPC_URL_ for the network that you intend to use
        - _API_KEY_ for the sports results API. Obtain one [here](https://dashboard.api-football.com/register).
     3. If desired, the `<explorer>_API_KEY` can be set in order to verify contracts, along with any values used in the _secrets_ object in _Functions-request-config.js_ such as `COINMARKETCAP_API_KEY`.<br><br>
 4.  Test an end-to-end request and fulfillment locally by simulating it using:<br>`npx hardhat functions-simulate`<br><br>
 5.  Run the unit tests by running:<br>`npx hardhat test`<br><br>
 6.  Before deploying the contract a new Functions billing subscription must be created and funded to be able to request sports results. You can do it from the Functions web interface at [https://functions.chain.link](https://functions.chain.link).<br><br>
 7.  Deploy and configure the game contract to an actual blockchain network by running:<br>`npx hardhat deploy-game --network network_name_here --destination network_name_here --subid your_sub_id --verify true`
-    - `network` is the network where the game contract will be deployed
+    - `network` is the network where the game contract will be deployed. It must match the names given in the `networks` object in `./networks.js`.
     - `destination` is the network where the winnings receiver contract will be deployed
-    - `subid` is the subscription ID used to pay for the request
+    - `subid` is the subscription ID used to pay for the request, created by you at functions.chain.link. Create this before you run the above command.
     - `verify` is an optional flag which can be set to `true` to verify the deployed contract code<br>
       **Note**: Before running the command, make sure that:
       - Your wallet has a sufficient native token balance on both networks for the deployment and transaction fees.
       - Yoyr wallet LINK balance is sufficient to fund the contract so it can pay the CCIP transfer fees. The amount is specified in the `networks.js` file under each network `fundAmount` property.
       - `<explorer>_API_KEY` is set if using `--verify true`, depending on which network is used.<br><br>
-8.  In order for the registered games in the contract to be updated with results from the sports API automatically, the game contract must be registered as an upkeep. Follow the steps at [https://automation.chain.link](https://automation.chain.link).<br>**Note**: Make sure the gas limit is set to 1,000,000.<br><br>
+8.  In order for the registered games in the contract to be updated with results from the sports API automatically, the game contract must be registered as an upkeep with a custom logic trigger. Follow the steps at [https://automation.chain.link](https://automation.chain.link).<br>**Note**: Make sure the gas limit is set to 3,000,000.<br><br>
 
 ## Deployments
 
-Polygon Mumbai
+Optimism Sepolia
+
+- Game contract: [`0x31015944A2719Da19531Ced7ed72e9DD6761A478`](https://sepolia-optimism.etherscan.io/address/0x31015944A2719Da19531Ced7ed72e9DD6761A478)
+- Functions subscription: [`177`](https://functions.chain.link/optimism-sepolia/177)
+- Automation upkeep: [`112557321685295299629771618321084972343709241235617405730580214266603599595202`](https://automation.chain.link/optimism-sepolia/112557321685295299629771618321084972343709241235617405730580214266603599595202)
+- CCIP Token Receiver contract on Avalanche Fuji: [`0xB9bb8BfD3540E44b8eAaC9d5Dfc31B9D8E898C03`](https://testnet.snowtrace.io/address/0xB9bb8BfD3540E44b8eAaC9d5Dfc31B9D8E898C03)
+
+Polygon Mumbai (Deprecated)
 
 - Game contract: [`0x837acF842c9D99004A4b4fa1C250Fe3ca0c3ce63`](https://mumbai.polygonscan.com/address/0x837acF842c9D99004A4b4fa1C250Fe3ca0c3ce63)
 - Functions subscription: [`1328`](https://functions.chain.link/mumbai/1328)
@@ -58,15 +65,18 @@ Polygon Mumbai
 
 ---
 
-Content below is general knowkedge from [function-hardhat-starter-kit](https://github.com/smartcontractkit/functions-hardhat-starter-kit).
+Content below is general knowledge from [function-hardhat-starter-kit](https://github.com/smartcontractkit/functions-hardhat-starter-kit).
 
+- [Sports Prediction Game: Contracts](#sports-prediction-game-contracts)
+  - [Supported Networks](#supported-networks)
+  - [Steps](#steps)
+  - [Deployments](#deployments)
 - [Environment Variable Management](#environment-variable-management)
   - [Environment Variable Management Commands](#environment-variable-management-commands)
 - [Request Configuration](#request-configuration)
   - [JavaScript Code](#javascript-code)
     - [Functions Library](#functions-library)
   - [Off-chain Secrets](#off-chain-secrets)
-- [Automation Integration](#automation-integration)
 - [Gas Spikes](#gas-spikes)
 
 # Environment Variable Management