Testnet deployed fixes

packages/hardhat/contracts/PGDeployer.sol

@@ -19,7 +19,8 @@ contract PGDeployer is Ownable {
         address indexed token,
         address indexed creator,
         pgType indexed pgtype,
-        uint256 supply
+        uint256 supply,
+        uint256 timestamp
     );
     event pgerc20Deployed(address indexed token);
     event pgerc721Deployed(address indexed token, uint256 totalSupply);
@@ -38,7 +39,13 @@ contract PGDeployer is Ownable {
         token.transferOwnership(tokenOwner);
 
         // emit event
-        emit pgDeployed(address(token), msg.sender, pgType.erc20, supply);
+        emit pgDeployed(
+            address(token),
+            msg.sender,
+            pgType.erc20,
+            supply,
+            block.timestamp
+        );
     }
 
     function deployERC721(
@@ -62,6 +69,12 @@ contract PGDeployer is Ownable {
         token.transferOwnership(tokenOwner);
 
         // emit event
-        emit pgDeployed(address(token), msg.sender, pgType.erc721, supply);
+        emit pgDeployed(
+            address(token),
+            msg.sender,
+            pgType.erc721,
+            supply,
+            block.timestamp
+        );
     }
 }

packages/react-app/src/App.jsx

@@ -60,7 +60,7 @@ const providers = [
 function App(props) {
   // specify all the chains your app is available on. Eg: ['localhost', 'mainnet', ...otherNetworks ]
   // reference './constants.js' for other networks
-  const networkOptions = ["localhost", "mainnet", "rinkeby"];
+  const networkOptions = ["rinkeby", "localhost"];
 
   const [injectedProvider, setInjectedProvider] = useState();
   const [address, setAddress] = useState();
@@ -200,6 +200,7 @@ function App(props) {
             address={address}
             localProvider={localProvider}
             readContracts={readContracts}
+            blockExplorer={blockExplorer}
             writeContracts={writeContracts}
             mainnetProvider={mainnetProvider}
             yourLocalBalance={yourLocalBalance}

packages/react-app/src/components/Address.jsx

@@ -31,7 +31,7 @@ import { useLookupAddress } from "eth-hooks/dapps/ens";
 
 const { Text } = Typography;
 
-const blockExplorerLink = (address, blockExplorer) => blockExplorer || `https://etherscan.io/address/${address}`;
+const blockExplorerLink = (address, blockExplorer) => `${blockExplorer || "https://etherscan.io/"}address/${address}`;
 
 export default function Address(props) {
   const { currentTheme } = useThemeSwitcher();

packages/react-app/src/components/PGCard.jsx

@@ -6,7 +6,7 @@ import { Address } from ".";
 
 const abi = ["function name() view returns (string memory)", "function symbol() view returns (string)"];
 
-export default function PGCard({ creator, token, supply, pgType, mainnetProvider, localProvider, ...props }) {
+export default function PGCard({ creator, token, supply, pgType, mainnetProvider, localProvider, blockExplorer }) {
   const [tokenDetails, setTokenDetails] = useState({});
 
   const fetchTokenData = async () => {
@@ -24,21 +24,33 @@ export default function PGCard({ creator, token, supply, pgType, mainnetProvider
   }, [token]);
 
   return (
-    <Card title={`${pgType === "0" ? "ERC20" : "ERC271"}: ${tokenDetails.name} (${tokenDetails.symbol})`}>
+    <Card title={`${pgType === "0" ? "ERC20" : "ERC721"}: ${tokenDetails.name} (${tokenDetails.symbol})`}>
       <div className="flex flex-row items-center mb-2">
         <span className="mr-3">Supply: </span>
         <span>{supply}</span>
       </div>
       <div className="flex flex-row items-center mb-2">
         <span className="mr-3">Token Address: </span>
         <span>
-          <Address address={token} size={"short"} fontSize={16} ensProvider={mainnetProvider} />
+          <Address
+            address={token}
+            size={"short"}
+            blockExplorer={blockExplorer}
+            fontSize={16}
+            ensProvider={mainnetProvider}
+          />
         </span>
       </div>
       <div className="flex flex-row items-center">
         <span className="mr-3">Created By: </span>
         <span>
-          <Address address={creator} size={"short"} fontSize={16} ensProvider={mainnetProvider} />
+          <Address
+            address={creator}
+            size={"short"}
+            blockExplorer={blockExplorer}
+            fontSize={16}
+            ensProvider={mainnetProvider}
+          />
         </span>
       </div>
     </Card>

packages/react-app/src/pgcomponents/Deployer.jsx

@@ -24,7 +24,6 @@ function Details({ tx, reset, pgType, pgData, address, isDeploying, writeContrac
       const result = tx(writeContracts.PGDeployer[method](...calldata), update => {
         console.log("📡 Transaction Update:", update);
         if (update && (update.status === "confirmed" || update.status === 1)) {
-          reset();
           console.log(" 🍾 Transaction " + update.hash + " finished!");
           console.log(
             " ⛽️ " +
@@ -38,7 +37,12 @@ function Details({ tx, reset, pgType, pgData, address, isDeploying, writeContrac
         }
       });
       console.log("awaiting metamask/web3 confirm result...", result);
-      console.log(await result);
+      const txResult = await result;
+
+      // wait for given number of confirmations
+      txResult.wait(1);
+
+      reset();
     } catch (error) {
       console.log(error);
       setIsDeploying(false);

packages/react-app/src/views/DeployModal.jsx

@@ -24,6 +24,7 @@ function DeployModal({ tx, writeContracts, address, show, onCancel }) {
     setActiveStep(0);
     setPgType(0);
     setPgData({});
+    setIsDeploying(false);
   };
 
   const onNextStep = () => {

packages/react-app/src/views/Home.jsx

@@ -4,12 +4,12 @@ import DeployModal from "./DeployModal";
 import { useEventListener } from "eth-hooks/events/useEventListener";
 import { PGCard } from "../components";
 
-function Home({ tx, writeContracts, address, readContracts, localProvider }) {
+function Home({ tx, writeContracts, address, readContracts, blockExplorer, localProvider }) {
   const [show, setShow] = useState(false);
 
-  const pgs = (useEventListener(readContracts, "PGDeployer", "pgDeployed", localProvider, 1) || []).reverse();
-
-  console.log(pgs);
+  const pgs = (useEventListener(readContracts, "PGDeployer", "pgDeployed", localProvider, 1) || []).sort((a, b) =>
+    a.args.timestamp > b.args.timestamp ? 1 : -1,
+  );
 
   return (
     <div className="mt-20 pb-20 container mx-auto">
@@ -22,18 +22,19 @@ function Home({ tx, writeContracts, address, readContracts, localProvider }) {
       />
 
       <div className="flex flex-1 justify-end">
-        <Button onClick={() => setShow(true)}>Create Public Good</Button>
+        <Button onClick={() => setShow(true)}>Create Public Good Token</Button>
       </div>
 
       <div className="flex flex-1 mt-20 w-full">
         <List
           className="w-full"
           grid={{ gutter: 16, column: 3 }}
-          dataSource={pgs}
+          dataSource={pgs.reverse()}
           renderItem={item => (
-            <List.Item>
+            <List.Item key={item.args.token}>
               <PGCard
                 token={item.args.token}
+                blockExplorer={blockExplorer}
                 supply={item.args.supply.toString()}
                 pgType={item.args.pgtype.toString()}
                 creator={item.args.creator}