From a4fa7dfb9ae90e050c3cb047d6429e153e28cbbd Mon Sep 17 00:00:00 2001
From: moikapy <moikapy@devmoi.com>
Date: Thu, 19 Jan 2023 16:33:10 -0500
Subject: [PATCH] clean home page

---
 pages/_app.tsx                              |   5 +-
 pages/index.tsx                             | 132 ++++----------------
 src/components/blocks/TwitchEmbed/index.tsx |  33 +++++
 src/components/ui/Navbar/index.tsx          |  27 ----
 4 files changed, 61 insertions(+), 136 deletions(-)
 create mode 100644 src/components/blocks/TwitchEmbed/index.tsx

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 9d942da..7c1931d 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -13,6 +13,7 @@ import metrics from '../src/metrics';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import WalletProvider from '../dabu/WalletProvider';
 import {ChainId} from '@thirdweb-dev/react';
+import TwitchEmbed from '@/src/components/blocks/TwitchEmbed';
 function MyApp({Component, pageProps}: AppProps) {
   return (
     <WalletProvider
@@ -149,7 +150,9 @@ function MyApp({Component, pageProps}: AppProps) {
                     connect,
                   }}
                 />
-                <Footer />
+                <div className='position-absolute bottom-0 end-0'>
+                  <TwitchEmbed />
+                </div>
               </div>
             </Provider>
           </ApolloProvider>
diff --git a/pages/index.tsx b/pages/index.tsx
index 688f679..60652f0 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -7,87 +7,32 @@ import DABU from '../dabu';
 import H from '../src/components/common/H';
 import {runTime} from '../dabu/helpers';
 import Web3 from 'web3';
+import TwitchEmbed from '@/src/components/blocks/TwitchEmbed';
 var BN: any = Web3.utils.hexToNumberString;
-export async function getStaticProps(context: any, dabu: any) {
-  const getLatestListed = async () => {
-    // INIT Dabu
-    var dabu = new DABU(process.env.AKKORO_ENV);
-    console.log('dabu', dabu, await dabu.get_latest_nft_listing());
-    //Get Active Listings
-    const latestListing: any = await dabu.get_latest_nft_listing();
+// export async function getStaticProps(context: any, dabu: any) {
+//   const getLatestListed = async () => {
+//     // INIT Dabu
+//     var dabu = new DABU(process.env.AKKORO_ENV);
+//     console.log('dabu', dabu, await dabu.get_latest_nft_listing());
+//     //Get Active Listings
+//     const latestListing: any = await dabu.get_latest_nft_listing();
 
-    return latestListing;
-  };
-  const {scriptDuration: duration, res: latestListing} = await runTime(
-    getLatestListed
-  );
-  return {
-    props: {
-      latestListing: JSON.stringify(latestListing),
-      scriptDuration: duration,
-    },
-    // - At most once every 10 seconds
-    revalidate: 15, // In seconds
-  };
-}
+//     return latestListing;
+//   };
+//   const {scriptDuration: duration, res: latestListing} = await runTime(
+//     getLatestListed
+//   );
+//   return {
+//     props: {
+//       latestListing: JSON.stringify(latestListing),
+//       scriptDuration: duration,
+//     },
+//     // - At most once every 10 seconds
+//     revalidate: 15, // In seconds
+//   };
+// }
 
 export default function Dragon({latestListing}: any): JSX.Element {
-  const [
-    {
-      id,
-      tokenId,
-      currencySymbol,
-      asset,
-      buyOutPrice,
-      currencyContractAddress,
-      decimals,
-      network,
-      sellerAddress,
-      quantity,
-    },
-    setState,
-  ] = useState({
-    id: '',
-    tokenId: '',
-    currencySymbol: '',
-    asset: '',
-    buyOutPrice: '',
-    currencyContractAddress: '',
-    decimals: '',
-    network: '',
-    sellerAddress: '',
-    quantity: '',
-  } as any);
-  useEffect(() => {
-    latestListing = JSON.parse(latestListing);
-    if (typeof latestListing === 'object' && latestListing !== null) {
-      const nft = latestListing;
-
-      const _tokenId = BN(nft.tokenId._hex);
-      const _quantity = BN(nft.quantity._hex);
-      const _price = BN(nft.buyoutPrice._hex);
-      setState({
-        ...nft,
-        id: nft.id,
-        tokenId: _tokenId,
-        quantity: _quantity,
-        contractAddress: nft.assetContractAddress,
-        buyOutPrice:
-          typeof _price !== 'undefined'
-            ? _price.substr(
-                0,
-                _price.length - nft.buyoutCurrencyValuePerToken.decimals
-              )
-            : null,
-        currencySymbol: nft.buyoutCurrencyValuePerToken.symbol,
-        sellerAddress: nft.sellerAddress,
-        asset: {
-          ...nft.asset,
-          id: BN(nft.asset.id._hex),
-        },
-      });
-    }
-  }, [latestListing]);
   return (
     <>
       <style jsx global>
@@ -134,37 +79,8 @@ export default function Dragon({latestListing}: any): JSX.Element {
         twitter='moikaslookout'
         keywords='gaming, nfts, web3'
       />
-      <div className='wrapper d-flex flex-column flex-lg-row justify-content-lg-center align-items-center position-relative'>
-        <div
-          className='d-flex flex-column flex-md-row justify-content-start 
-        justify-content-md-around align-items-center align-items-md-start text-start mt-3 px-0 px-sm-3'>
-          <div className='d-flex flex-column mx-2 justify-content-start justify-content-md-center order-1 order-md-0 col'>
-            <div className='d-flex flex-column mx-auto'>
-              <H headerSize='2' className='mb-2 text-wrap mx-auto'>
-                Lets make Web3 {'&'} NFTs Fun!
-              </H>
-              <p className=''>Closed Alpha</p>
-
-              <p className=''>Building on Ethereum {'&'} Polygon</p>
-            </div>
-          </div>
-          <div className='d-flex flex-column justify-content-center align-items-center mt-lg-0 px-3 p-sm-0 order-0 order-md-1 col'>
-            <NFTCARD
-              tradeId={id}
-              tokenId={tokenId}
-              currencySymbol={currencySymbol}
-              name={asset?.name}
-              description={asset?.description}
-              image={asset?.image}
-              buyOutPrice={buyOutPrice}
-              currencyContractAddress={currencyContractAddress}
-              decimals={decimals}
-              network={network}
-              seller_address={sellerAddress}
-              quantity={quantity}
-            />
-          </div>
-        </div>
+      <div className='wrapper d-flex flex-column flex-lg-row position-relative'>
+        <h1 className='mt-5'>Welcome To My Domain!</h1>
       </div>
     </>
   );
diff --git a/src/components/blocks/TwitchEmbed/index.tsx b/src/components/blocks/TwitchEmbed/index.tsx
new file mode 100644
index 0000000..d19d07a
--- /dev/null
+++ b/src/components/blocks/TwitchEmbed/index.tsx
@@ -0,0 +1,33 @@
+import React, {useEffect} from 'react';
+
+const EMBED_URL = 'https://embed.twitch.tv/embed/v1.js';
+
+export default function TwitchEmbed(props: any): React.ReactElement | null {
+  useEffect(() => {
+    let embed:any;
+    if (window) {
+      const script = document.createElement('script');
+      script.setAttribute('src', EMBED_URL);
+      script.addEventListener('load', () => {
+        embed = new window.Twitch.Embed(props.targetID, {...props});
+      });
+      document.body.appendChild(script);
+    }
+    return () => {
+      embed.destroy();
+    }
+  }, []);
+  return (
+    <div>
+
+      <div id={props.targetID}></div>
+    </div>
+  );
+}
+TwitchEmbed.defaultProps = {
+  targetID: 'twitch-embed',
+  width: '325',
+  height: '250',
+  channel: 'moikapy',
+  layout: 'video',
+};
diff --git a/src/components/ui/Navbar/index.tsx b/src/components/ui/Navbar/index.tsx
index 8bddbe0..2dfc8cf 100644
--- a/src/components/ui/Navbar/index.tsx
+++ b/src/components/ui/Navbar/index.tsx
@@ -41,33 +41,6 @@ function Navbar({wrapperCss = '', ...props}: any): React.ReactElement {
             />
           </div>
         </div>
-        <div className='d-flex flex-row justify-content-center align-items-center border-start border-end border-bottom border-dark bg-white px-4 py-2'>
-          <NavItem
-            onClick={() => {
-              router.push('/trade');
-            }}>
-            Trade
-          </NavItem>
-
-          <NavItem
-            onClick={() => {
-              router.push('/auction-house');
-            }}>
-            Auction House
-          </NavItem>
-          {/* Temporarily rm */}
-          {false && (
-            <>
-              -
-              <NavItem
-                onClick={() => {
-                  router.push('/profile');
-                }}>
-                My NFT
-              </NavItem>
-            </>
-          )}
-        </div>
       </div>
     </>
   );