[eth] Fix oracle-swap example frontend bugs (#813)

* [eth] Fix oracle-swap example frontend bugs

* [eth] Fix build warnings

* remove test

* add passWithNoTests to amm example

---------

Co-authored-by: Daniel Chew <cctdaniel@outlook.com>

package.json

@@ -14,6 +14,7 @@
     "target_chains/ethereum/contracts",
     "target_chains/ethereum/sdk/js",
     "target_chains/ethereum/sdk/solidity",
+    "target_chains/ethereum/examples/oracle_swap/app",
     "third_party/pyth/p2w-relay",
     "wormhole_attester/sdk/js"
   ],

target_chains/ethereum/examples/oracle_swap/README.md

@@ -17,7 +17,7 @@ All of the commands in this section expect to be run from the `contract` directo
 ### Building
 
 You need to have [Foundry](https://getfoundry.sh/) and `node` installed to run this example.
-Once you have installed these tools, run the following commands from this directory:
+Once you have installed these tools, run the following commands from the [`contract`](./contract) directory:
 
 ```
 forge install foundry-rs/forge-std@2c7cbfc6fbede6d7c9e6b17afe997e3fdfe22fef --no-git --no-commit

target_chains/ethereum/examples/oracle_swap/app/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "transfer-usd-in-eth",
+  "name": "@pythnetwork/eth-oracle-swap-example-frontend",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -26,7 +26,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --passWithNoTests",
     "eject": "react-scripts eject",
     "format": "prettier --write src/"
   },

target_chains/ethereum/examples/oracle_swap/app/src/App.test.tsx

@@ -1,9 +0,0 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import App from "./App";
-
-test("renders learn react link", () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

target_chains/ethereum/examples/oracle_swap/app/src/App.tsx

@@ -99,24 +99,26 @@ function App() {
     // The Pyth price service client is used to retrieve the current Pyth prices and the price update data that
     // needs to be posted on-chain with each transaction.
     const pythPriceService = new EvmPriceServiceConnection(
-      CONFIG.priceServiceUrl
+      CONFIG.priceServiceUrl,
+      {
+        logger: {
+          error: console.error,
+          warn: console.warn,
+          info: () => undefined,
+          debug: () => undefined,
+          trace: () => undefined,
+        },
+      }
     );
 
     pythPriceService.subscribePriceFeedUpdates(
       [CONFIG.baseToken.pythPriceFeedId, CONFIG.quoteToken.pythPriceFeedId],
       (priceFeed: PriceFeed) => {
         const price = priceFeed.getPriceUnchecked(); // Fine to use unchecked (not checking for staleness) because this must be a recent price given that it comes from a websocket subscription.
-        setPythOffChainPrice({
+        setPythOffChainPrice((prev) => ({ ...prev, [priceFeed.id]: price }));
-          ...pythOffChainPrice,
-          [priceFeed.id]: price,
-        });
       }
     );
-
+  }, []);
-    return () => {
-      pythPriceService.closeWebSocket();
-    };
-  }, [pythOffChainPrice]);
 
   const [exchangeRateMeta, setExchangeRateMeta] = useState<
     ExchangeRateMeta | undefined

target_chains/ethereum/examples/oracle_swap/app/src/OrderEntry.tsx

@@ -43,7 +43,7 @@ export function OrderEntry(props: {
     } else {
       setSpentToken(props.baseToken);
     }
-  }, [props.isBuy]);
+  }, [props.isBuy, props.baseToken, props.quoteToken]);
 
   useEffect(() => {
     async function helper() {
@@ -67,7 +67,7 @@ export function OrderEntry(props: {
     return () => {
       clearInterval(interval);
     };
-  }, [props.web3, props.account, spentToken]);
+  }, [props.web3, props.account, props.swapContractAddress, spentToken]);
 
   useEffect(() => {
     try {
@@ -76,7 +76,7 @@ export function OrderEntry(props: {
     } catch (error) {
       setQtyBn(undefined);
     }
-  }, [qty]);
+  }, [props.baseToken.decimals, qty]);
 
   useEffect(() => {
     if (qtyBn !== undefined) {
@@ -94,7 +94,7 @@ export function OrderEntry(props: {
     } else {
       setApproxQuoteSize(undefined);
     }
-  }, [props.approxPrice, qtyBn]);
+  }, [props.approxPrice, props.baseToken.decimals, qtyBn]);
 
   return (
     <div>

target_chains/ethereum/examples/oracle_swap/app/src/erc20.tsx

@@ -1,18 +1,7 @@
-import React, { useState, useEffect } from "react";
 import "./App.css";
-import {
-  Price,
-  PriceFeed,
-  EvmPriceServiceConnection,
-  HexString,
-} from "@pythnetwork/pyth-evm-js";
-import IPythAbi from "@pythnetwork/pyth-sdk-solidity/abis/IPyth.json";
-import OracleSwapAbi from "./abi/OracleSwapAbi.json";
 import ERC20Abi from "./abi/ERC20MockAbi.json";
-import { useMetaMask } from "metamask-react";
 import Web3 from "web3";
 import { BigNumber } from "ethers";
-import { TokenConfig } from "./utils";
 
 /**
  * Allow `approvedSpender` to spend your