unstyled version of a button that accepts dollar input and pays in Moneyherotokens

public/index.html

     data-fa2-contract="KT1BB1uMwVvJ1M3vVHXWALs1RWdgTp1rnXTR"
     data-swap-contract="KT1Ed11bNukFdYSc3qQFZ2HGYdF13XU6WZ4A"
     data-receiver="tz1hJncvXvL2VyctPE685GJPXDaRJ7dtiwjm"
-    data-amount="100"></div>
+    data-amount="32"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

src/App.tsx

-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { TezosToolkit } from "@taquito/taquito";
 import "./App.css";
 import ConnectButton from "./components/ConnectWallet";
   PERMISSION_REQUEST_SUCCESS = "Wallet is connected"
 }
 
-interface AppProps {
-    fa2Contract: string,
+type AppProps = {
     swapContract: string,
+    fa2Contract: string,
     receiver: string,
     amount: number
 }
 
 const App = ({
-    fa2Contract,
     swapContract,
+    fa2Contract,
     receiver,
     amount
 }: AppProps) => {
   const [storage, setStorage] = useState<number>(0);
   const [copiedPublicToken, setCopiedPublicToken] = useState<boolean>(false);
   const [beaconConnection, setBeaconConnection] = useState<boolean>(false);
-  const [activeTab, setActiveTab] = useState<string>("transfer");
+  
 
   // Granadanet Increment/Decrement contract
   const contractAddress: string = "KT1K3XVNzsmur7VRgY8CAHPUENaErzzEpe4e";
-
+  
+//   useEffect(() => {
+//       console.log(swapContract)
+// }, [swapContract])
+  
   const generateQrCode = (): { __html: string } => {
     const qr = qrcode(0, "L");
     qr.addData(publicToken || "");
 
     return { __html: qr.createImgTag(4) };
   };
-
+    
   if (publicToken && (!userAddress || isNaN(userBalance))) {
     return (
       <div className="main-box">
-        <h1>Taquito Boilerplate</h1>
-
         <div id="dialog">
-          <header>Try the Taquito Boilerplate App!</header>
           <div id="content">
-            <p className="text-align-center">
-              <i className="fas fa-broadcast-tower"></i>&nbsp; Connecting to
-              your wallet
-            </p>
             <div
               dangerouslySetInnerHTML={generateQrCode()}
               className="text-align-center"
             </p>
           </div>
         </div>
-        <div id="footer">
-          <img src="built-with-taquito.png" alt="Built with Taquito" />
-        </div>
       </div>
     );
   } else if (userAddress && !isNaN(userBalance)) {
     return (
       <div className="main-box">
 
-        <div id="tabs">
-          <div
-            id="transfer"
-            className={activeTab === "transfer" ? "active" : ""}
-            onClick={() => setActiveTab("transfer")}
-          >
-            Make a transfer
-          </div>
-          <div
-            id="contract"
-            className={activeTab === "contract" ? "active" : ""}
-            onClick={() => setActiveTab("contract")}
-          >
-            Interact with a contract
-          </div>
-        </div>
-        <div id="dialog">
 
-          <BuyButton 
+        <div id="dialog">
+          <BuyButton
             Tezos={Tezos}
             sender={userAddress}
             FA2address={fa2Contract}
             receiver={receiver}
-            amount={amount}
+            amountUsd={amount}
           />
           <DisconnectButton
             wallet={wallet}
             setBeaconConnection={setBeaconConnection}
           />
         </div>
-        <div id="footer">
-          <img src="built-with-taquito.png" alt="Built with Taquito" />
-        </div>
       </div>
     );
   } else if (!publicToken && !userAddress && !userBalance) {
     return (
       <div className="main-box">
-
         <div id="dialog">
-
           <ConnectButton
             Tezos={Tezos}
             setContract={setContract}
             wallet={wallet}
           />
         </div>
-        <div id="footer">
-          <img src="built-with-taquito.png" alt="Built with Taquito" />
-        </div>
       </div>
     );
   } else {

src/components/BuyButton.tsx

 import React, { Dispatch, SetStateAction, useState, useEffect } from "react";
 import { TezosToolkit } from "@taquito/taquito";
 import { BeaconWallet } from "@taquito/beacon-wallet";
+import config from "./../config";
 
 
+interface BuyButtonProps {
+    Tezos: TezosToolkit,
+    FA2address: string,
+    sender: string,
+    receiver: string,
+    amountUsd: number
+}
+
+interface CoinGeckoPrice {
+    last_updated_at: number;
+    usd: number;
+    usd_24h_change: number;
+    usd_24h_vol: number;
+    usd_market_cap: number;
+}
+
 const BuyButton = ({
     Tezos,
     FA2address,
     sender,
     receiver,
-    amount
-}: {
-    Tezos: TezosToolkit,
-    FA2address: string,
-    sender: string,
-    receiver: string,
-    amount: number
-}): JSX.Element => {
+    amountUsd
+}: BuyButtonProps ): JSX.Element => {
     
-    const getTokenPrice = async (): Promise<void> => {
-        const currency = "USD";
-        if (currency == "USD") {
-            
-            const timestamp = new Date();
-      timestamp.setDate(timestamp.getDate() - 1);
-      const timestampString = timestamp.toISOString();
-            fetch(`https://api.tzkt.io/v1/contracts/KT1F3BqwEAoa2koYX4Hz7zJ8xfGSxxAGVT8t/storage/history?limit=700`)
-        .then(res => res.json())
-        .then(data => data.find((item: any) => item.timestamp < timestampString))
-        .then(item => {
-          if (item && item.value) {
-            console.log(item)  ;
-            //const tez_pool = parseFloat(item.value.storage.tez_pool) / tezMultiplyer;
-            //const token_pool = parseFloat(item.value.storage.token_pool) / tokenMultiplyer;
-            //const price_yesterday = tez_pool / token_pool;
-            //setTokenTezPriceYesterday(price_yesterday);
-          }
-        })
+     const [tezUsd, setTezUsd] = useState<CoinGeckoPrice>(config.defaultTezPrice);
+     const [tezPool, setTezPool] = useState<number>(0);
+     const [tokenPool, setTokenPool] = useState<number>(0);
+     const [fiat2Token, setFiat2Token] = useState<number>(0);
+     
+    useEffect(() => {
+        getTezosPrice();
+        getPoolSizes();
+    }, [])
+    
+    // calculate Price in Token
+    useEffect(() => {
+        if( tezUsd.usd > 0 &&
+            tezPool > 0 &&
+            tokenPool > 0 ) {
+            setFiat2Token( tokenPool / tezPool / tezUsd.usd)
         }
+    }, [tezUsd,tezPool,tokenPool])
+    
+    const getTezosPrice = async (): Promise<void> => {
+        // https://www.coingecko.com/en/api#explore-api
+        fetch("https://api.coingecko.com/api/v3/simple/price?ids=tezos&vs_currencies=usd&include_market_cap=true&include_24hr_vol=true&include_24hr_change=true&include_last_updated_at=true")
+            .then(res => res.json())
+            .then(res => setTezUsd(res.tezos))
+    }
+    
+    const getPoolSizes = async (): Promise<void> => {
+        fetch(`https://api.tzkt.io/v1/contracts/KT1F3BqwEAoa2koYX4Hz7zJ8xfGSxxAGVT8t/storage`)
+            .then(res => res.json())
+            .then(item => {
+                setTezPool( parseFloat(item.storage.tez_pool) );// / tezMultiplyer;
+                setTokenPool( (item.storage.token_pool) );// / tokenMultiplyer;
+            }
+        )
+    }
+    
+    const buyMethod = async (): Promise<void> => {
+        makePayment();
     }
     
     const makePayment = async (): Promise<void> => {
                 txs: [{
                     to_: receiver,
                     token_id:0,
-                    amount: amount
+                    amount: amountUsd * fiat2Token
                 }]
             }
         ];
         await op.confirmation();
     }
     
-    return (
+    return (<div><div className="sd">1 Us Dollar if worth{fiat2Token} Moneyheros</div>
         <div className="buttons">
+        
+        
             <button
-	className="myButton"
-	onClick={getTokenPrice}
-	    >Transfer {amount}&nbsp;
-	    µ-tokens from: &nbsp;
-	    {sender}
-	    &nbsp;to:&nbsp;
-	    {receiver}
-            </button>
-        </div>
+	className="button"
+	onClick={buyMethod}
+	    >Pay {amountUsd * fiat2Token} Moneyherocoins
+        </button>
+        </div></div>
     );
 };
 

src/config.ts

+import { NetworkType } from "@airgap/beacon-sdk";
+
+const config = {
+  network: NetworkType.MAINNET,
+  rpcUrl: "",
+  defaultTezPrice: {
+    last_updated_at: 1621264908,
+    usd: 5.24,
+    usd_24h_change: -10.701803732742505,
+    usd_24h_vol: 410319278.74019855,
+    usd_market_cap: 4367588701.058423,
+  },
+  defaultTokenPrice: {
+    last_updated_at: 1621264908,
+    usd: 0.0,
+    usd_24h_change: 0,
+    usd_24h_vol: 0,
+    usd_market_cap: 0,
+  },
+  storageLimitSurcharge: 1.2, // multiplier
+  lpTokenDecimals: 1000000
+};
+
+switch (config.network) {
+  case NetworkType.MAINNET:
+    config.rpcUrl = "https://mainnet.api.tez.ie";
+    break;
+  case NetworkType.FLORENCENET:
+    config.rpcUrl = "https://rpc.florence.tzstats.com/";
+    break;
+  case NetworkType.CUSTOM:
+    config.rpcUrl = "http://localhost:8732/";
+    break;
+}
+
+export default config;

src/index.js

 import App from "./App.tsx";
 import * as serviceWorker from "./serviceWorker";
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById("root")
-);
+const appNode = document.getElementById("root");
+if (appNode) {
+    
+    ReactDOM.render(
+        <React.StrictMode>
+            <App 
+                swapContract={appNode.dataset.swapContract}
+                fa2Contract={appNode.dataset.fa2Contract}
+                receiver={appNode.dataset.receiver}
+                amount={appNode.dataset.amount}
+            />
+        </React.StrictMode>,
+        document.getElementById("root")
+    );
+}
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.