add mainnet faucet

4 files changed, 192 insertions, 11 deletions

diff --git a/src/components/LandingPage/Resources.js b/src/components/LandingPage/Resources.js
index 0177b32..af0ac65 100644
--- a/src/components/LandingPage/Resources.js
+++ b/src/components/LandingPage/Resources.js
@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from 'styled-components';
 import { FormattedMessage } from 'react-intl';
 import { MOBILE_WIDTH } from 'src/constants/app';
 // import Slide from 'react-reveal/Fade';
+import app from '../../services/app';
 
 const Wrapper = styled.div`
   display: flex;
@@ -47,15 +48,130 @@ const Padding = styled.div`
 `;
 
 
+const FaucetWrapper = styled.div`
+  @media screen and (max-width: ${MOBILE_WIDTH}px) {
+    width: 90vw;
+    padding: 30px;
+  }
+  @media screen and (min-width: ${MOBILE_WIDTH}px) {
+    min-width: 750px;
+    padding: 40px;
+  }
+`;
+
+const AddressInput = styled.input`
+  padding: 10px 8px;
+  border: 1px solid #979797;
+  margin: 40px 0px;
+  width: 100%;
+`;
+
+const Button = styled.div`
+  padding: 10px 20px;
+  background: #c45b26;
+  color: white;
+  font-weight: bold;
+  border-radius: 5px;
+  cursor: pointer;
+  display: inline-block;
+`;
+
+const requestTan = async (address) => fetch(
+  'https://api.tangerine.garden/v1/network/faucet',
+  {
+    method: 'POST',
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({ address })
+  }
+).then(async (res) => {
+  if (res.status !== 200) {
+    throw new Error('Cannot request TAN');
+  }
+  const result = await res.json();
+  return result;
+})
+
+const CloseRow = styled.div`
+  text-align: right;
+`;
+const CloseButton = styled.span`
+  cursor: pointer;
+`;
+
+const Error = styled.div`
+  color: red;
+`;
+
+const TransactionLink = styled.div`
+  font-weight: bold;
+  cursor: pointer;
+`;
+
+const Faucet = () => {
+  const [addr, setAddr] = useState('');
+  const [loading, setLoading] = useState();
+  const [error, setError] = useState();
+  const [txHash, setTxHash] = useState();
+  return (
+    <FaucetWrapper>
+      <CloseRow>
+        <CloseButton onClick={app.closeModal}>X</CloseButton>
+      </CloseRow>
+      <Title>
+        <FormattedMessage id={'get_mainnet_token'} />
+      </Title>
+      <AddressInput
+        value={addr}
+        onChange={e => setAddr(e.target.value)}
+        placeholder={'0x'}
+      />
+      {txHash && (
+        <div>
+          Successfully requested TAN! <br />
+          <TransactionLink
+            onClick={() => window.open(`https://tangerine.garden/transaction/${txHash}`)}
+          >
+            View Transaction
+          </TransactionLink>
+        </div>
+      )}
+      {!loading && (
+        <Button
+          onClick={async () => {
+            setLoading(true);
+            try {
+              const res = await requestTan(addr);
+              const { result } = res || {};
+              if (result && result.txhash) {
+                setTxHash(result.txhash);
+              } else {
+                throw new Error('txhash not found');
+              }
+              console.log(res);
+            } catch (e) {
+              setError('Try again later');
+            }
+          }}
+        >
+          GET TAN
+        </Button>
+      )}
+      {error && <Error>Try Again Later</Error>}
+    </FaucetWrapper>
+  );
+}
+
 const ResourceItems = [
-  // {
-  //   title: 'Faucet',
-  //   content: 'read_the_paper',
-  //   links: [{
-  //     title: 'get_mainnet_token',
-  //     link: 'https://byzantine-lab.gitlab.io/wiki/#/Dapp-Development-Guide'
-  //   }]
-  // },
+  {
+    title: 'Faucet',
+    customs: [{
+      title: 'get_mainnet_token',
+      onClick: () => app.openModal(<Faucet />)
+    }],
+  },
   {
     title: 'Paper',
     // content: 'read_the_paper',
@@ -76,8 +192,11 @@ const ResourceItems = [
     links: [{
       title: 'Resource_Wiki',
       link: 'https://tangerine-network.github.io/wiki/#/Dapp-Development-Guide?id=dapp-development-guide'
+    }, {
+      title: 'github',
+      link: 'https://https://github.com/tangerine-network'
     }]
-  }
+  },
 ];
 
 const Resources = () => (
@@ -99,6 +218,13 @@ const Resources = () => (
             >
           </ExtLink>
         ))}
+        {(resource.customs || []).map((custom, key) => (
+          <ExtLink onClick={custom.onClick} key={key}>
+            <FormattedMessage id={custom.title} />
+            <Padding />
+            >
+          </ExtLink>
+        ))}
       </Card>
     ))}
     <Padding />
diff --git a/src/components/layout.js b/src/components/layout.js
index a6f12a6..c80ee5b 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -17,6 +17,7 @@ import throttle from 'lodash-es/throttle';
 import messages_zh from "../translations/zh-Hant.json";
 import messages_en from "../translations/en.json";
 import site_logo from 'src/images/site_logo.png';
+import appService from '../services/app';
 import Header from "./header"
 import Footer from './footer';
 
@@ -277,8 +278,40 @@ const InjectedSEO = injectIntl(({ intl }) => {
   );
 });
 
+const ModalBackground = styled.div`
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.4);
+  opacity: ${p => p.show ? 1 : 0};
+  z-index: 1000;
+  transition: 0.3s opacity ease-out;
+  pointer-events: ${p => p.show ? 'auto' : 'none'};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+const ModalArea = styled.div`
+  background: white;
+`;
+
 const Layout = ({ children, locale }) => {
 
+  const [displayModal, setDisplayModal] = useState();
+  const [modal, setModal] = useState();
+
+  useEffect(() => {
+    appService.setOpenModal((content) => {
+      setDisplayModal(true);
+      setModal(content);
+    });
+    appService.setCloseModal(() => {
+      setDisplayModal(false);
+      setTimeout(() => setModal(undefined), 3000);
+    });
+  }, []);
+
   const [showHeader, setShowheader] = useState(true);
 
   const scrollHandler = useCallback(throttle(() => {
@@ -309,6 +342,15 @@ const Layout = ({ children, locale }) => {
       messages={messages[locale] || messages['en']}
     >
       <Wrapper>
+        <ModalBackground
+          show={modal && displayModal}
+        >
+          <ModalArea
+            onClick={e => e.stopPropagation()}
+          >
+            {modal}
+          </ModalArea>
+        </ModalBackground>
         <InjectedSEO />
         <Header showup={showHeader} />
         <Main>
@@ -318,7 +360,7 @@ const Layout = ({ children, locale }) => {
       </Wrapper>
     </IntlProvider>
   )
-}
+};
 
 Layout.propTypes = {
   children: PropTypes.node.isRequired,
diff --git a/src/services/app.js b/src/services/app.js
new file mode 100644
index 0000000..66c3a92
--- /dev/null
+++ b/src/services/app.js
@@ -0,0 +1,12 @@
+
+class App {
+  openModal;
+  closeModal;
+
+  setOpenModal = fn => this.openModal = fn;
+  setCloseModal = fn => this.closeModal = fn;
+}
+
+const t = new App();
+
+export default t;
diff --git a/src/translations/en.json b/src/translations/en.json
index 945eeb6..f218a02 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -26,6 +26,7 @@
   "tangerine-explorer-description": "Empowering Your Mining Experience",
   "build_your_dapps": "Build your Dapps on Tangerine Network",
   "Resource_Wiki": "Wiki",
+  "github": "Github",
   "Manifesto": "Manifesto",
   "Consensus_Algorithm": "Consensus Algorithm",
   "Paper": "Paper",