Add /faucet page

.gitignore

@@ -121,6 +121,7 @@ dist
 .pnp.*
 
 .idea
+.vscode
 
 # SQL
 *.sqlite

docs/testnet/Faucet.tsx

@@ -6,8 +6,8 @@ const FAUCET_URL = "https://ink-docs-rococo-faucet.parity-testnet.parity.io/drip
 
 export const Faucet = () => {
   const [captcha, setCaptcha] = useState<string | null>(null)
-  const [address, setAddress] = useState<string>("")
-  const [result, setResult] = useState<string>("")
+  const [address, setAddress] = useState("")
+  const [result, setResult] = useState("")
   const [inProgress, setInProgress] = useState(false)
 
   const handleRequest = async () => {
@@ -40,27 +40,42 @@ export const Faucet = () => {
     }
   }
 
-  return (<>
-    <ReCAPTCHA
-      sitekey={RECAPTCHA_SITE_KEY}
-      onChange={setCaptcha}
-    />
-    <label htmlFor="address-input">Address: </label>
-    <input
-      id="address-input"
-      style={{margin: 5, width: 400}}
-      type="text"
-      value={address}
-      placeholder="Address"
-      onChange={(e) => setAddress(e.target.value)}
-    />
-    <button
-      style={{margin: 5, padding: '5px 10px'}}
-      disabled={inProgress || !captcha || !address}
-      onClick={handleRequest}
-    >Request</button>
-    <p>{result}</p>
-  </>)
+  return (
+    <div className="faucetContainer">
+      <h3 className="faucetTitle">Get Testnet Tokens</h3>
+      <div className="faucetPlantContainer">
+        <img src="/img/plantOne.svg" alt="illustration of a sea grass plant" className="faucetPlantOne" />
+        <img src="/img/plantTwo.svg" alt="illustration of a sea plant" className="faucetPlantTwo" />
+      </div>
+      <div className="faucetHeroContainer">
+        <img src="/img/chest.svg" alt="image of a treasure chest" className="faucetHeroImage" />
+      </div>
+      <form className="withHero">
+        <fieldset>
+          <label htmlFor="address-input">Your SS58 Address</label>
+          <input
+            className="addressInput"
+            id="address-input"
+            type="text"
+            value={address}
+            placeholder="e.g. 5HprbfKUFdN4qfweVbgRtqDPHfNtoi8NoWPE45e5bD5AEKiR"
+            onChange={(e) => setAddress(e.target.value)}
+          />
+        </fieldset>
+        <ReCAPTCHA
+          sitekey={RECAPTCHA_SITE_KEY}
+          onChange={setCaptcha}
+        />
+        <button
+          disabled={inProgress || !captcha || !address}
+          onClick={handleRequest}
+        >
+          Request
+        </button>
+        {result && <p className="faucetResult">{result}</p>}
+      </form>
+    </div>
+  )
 }
 
 export default Faucet;

docs/testnet/faucet.md

@@ -0,0 +1,9 @@
+---
+title: Faucet
+hide_title: true
+slug: /faucet
+---
+
+import Faucet from "./Faucet";
+
+<Faucet/>

docs/testnet/overview.md

@@ -34,8 +34,12 @@ See [here](https://wiki.polkadot.network/docs/learn-account-generation) for a de
 
 ### (2) Get Testnet Tokens
 
-As a second step, you have to get `ROC` testnet tokens through the [Rococo Faucet](https://wiki.polkadot.network/docs/learn-DOT#getting-tokens-on-the-rococo-testnet).
-This is a chat room in which you need to write:
+<img src="/img/chest.svg" alt="image of a treasure chest" className="faucetHeroImage" />
+
+As a second step, you have to get `ROC` testnet tokens through the [Rococo Faucet](/faucet).
+
+Alternatively, you can use the [Element chat room](https://wiki.polkadot.network/docs/learn-DOT#getting-tokens-on-the-rococo-testnet).
+You must send a message like this (Note the `:1002` after the wallet address):
 
 ```
 !drip YOUR_SS_58_ADDRESS:1002
@@ -51,12 +55,6 @@ In case you are using the `polkadot-js` frontend, you can see them under
 
 <img src="/img/roc-in-wallet.png" alt="Rococo testnet tokens in wallet" />
 
-Alternatively, you can try it this faucet here:
-
-import Faucet from "./Faucet";
-
-<Faucet/>
-
 
 ### (3) Deploy Your Contract
 

docusaurus.config.js

@@ -73,7 +73,7 @@ module.exports = {
         editUrl: 'https://github.com/paritytech/ink-docs/edit/master/',
       },
       theme: {
-        customCss: [require.resolve('./src/css/custom.css')],
+        customCss: [require.resolve('./src/css/custom.css'), require.resolve('./src/css/faucet.css')],
       },
     }],
   ],

sidebars.js

@@ -68,7 +68,8 @@ module.exports = {
       "examples/dapps"
     ],
     "Testnet": [
-      "testnet/overview"
+      "testnet/overview",
+      "testnet/faucet"
     ],
     "Third Party Tools & Libraries": [
       "third-party-tools/openbrush"

src/css/custom.css

@@ -11,26 +11,122 @@
   --ifm-color-primary-dark: #5a007e;
   --ifm-color-primary-darker: #5a007e;
   --ifm-color-primary-darkest: #5a007e;
+  --ifm-color-primary-medium: #975cd6;
   --ifm-color-primary-light: #bd83fb;
-  --ifm-color-primary-lighter: #bd83fb;
   --ifm-color-primary-lightest: #d7b5ff;
   --ifm-code-font-size: 90%;
   --ifm-font-family-base: 'Nunito Sans', sans-serif;
   --ifm-heading-font-weight: 400;
   --ifm-global-shadow-lw: transparent;
   --ifm-toc-border-color: transparent;
-}
+  --primary-deep-500: #281f70
+ }
 
 h1 {
   font-size: var(--ifm-h1-font-size) !important;
 }
 
+label {
+  font-weight: 500;
+  color: #fafafa;
+}
+
+input {
+  background-color: var(--ifm-color-primary-medium);
+  color: #fafafa;
+  border-radius: 1rem;
+  padding: 1rem 2rem;
+  margin: 0.5rem 0 0;
+  border: none;
+  width: 100%;
+}
+
+input:focus-visible {
+  border: none;
+  outline: solid 4px var(--primary-deep-500);
+}
+
+input::-webkit-input-placeholder { /* Edge */
+  color: var(--ifm-color-primary-lightest);
+}
+
+input:-ms-input-placeholder { /* Internet Explorer 10-11 */
+  color: var(--ifm-color-primary-lightest);
+}
+
+input::placeholder {
+  color: red;
+  color: var(--ifm-color-primary-lightest);
+}
+
+fieldset {
+  border: none;
+  margin: 0 0 1.5rem 0;
+  padding: 0;
+  width: 100%;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--ifm-color-primary-light);
+  color: #fafafa;
+  padding: 2rem;
+  border-radius: 2.5rem;
+}
+
+@media screen and (max-width: 600px) {
+  form {
+    padding: 1.5rem 1.5rem 2.5rem;
+  }
+}
+
+form, .withHero {
+  border-top: solid 4px var(--ifm-color-primary-medium);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+form > button {
+  background-color: #fafafa;
+  color: var(--ifm-color-primary-medium);
+  font-size: 18px;
+  font-weight: bold;
+  border: none;
+  border-radius: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  margin-top: 1rem;
+  transition: 0.3s;
+}
+
+form > button:hover {
+  cursor: pointer;
+  opacity: 0.8;
+}
+
+form > button:disabled {
+  opacity: 0.8;
+  color: var(--ifm-color-primary-light);
+}
+
+form > button:disabled, button:hover {
+  cursor: not-allowed;
+  opacity: 0.8;
+}
+
+@media screen and (max-width: 600px) {
+  form > button {
+    width: 100%;
+  }
+}
+
 .pagination-nav__label {
   color: #fff;
 }
 
 .docusaurus-highlight-code-line {
-  background-color: #bd83fb;
+  background-color: var(--ifm-color-primary-light);
   display: block;
   margin: 0 calc(-1 * var(--ifm-pre-padding));
   padding: 0 var(--ifm-pre-padding);
@@ -71,7 +167,7 @@ h1 {
 
 .schema {
   padding: 25px;
-  border: 1px solid  #bd83fb;
+  border: 1px solid var(--ifm-color-primary-light);
   background-color: #242526;
   margin-bottom: 25px;
 }

src/css/faucet.css

@@ -0,0 +1,86 @@
+.faucetContainer {
+  width: 100%;
+  max-width: 600px;
+  margin: 3rem auto;
+  padding: 0 0.5rem;
+  font-family: 'Montserrat';
+}
+
+.faucetHeroImage {
+  width: 100%;
+}
+
+.faucetTitle {
+  font-family: 'Montserrat';
+  font-size: 42px;
+  margin-bottom: -32px;
+  font-weight: bold;
+  text-align: center;
+  color: var(--ifm-color-primary-light);
+}
+
+.faucetHeroContainer {
+  width: 100%;
+  display: flex;
+  align-items: flex-end;
+  z-index: 2;
+  position: relative;
+}
+
+.faucetPlantContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  width: 100%;
+  margin-bottom: -22px;
+  z-index: 1;
+}
+
+.faucetPlantOne {
+  position: relative;
+  left: -22px;
+}
+
+.faucetPlantTwo {
+  position: relative;
+  right: -22px;
+}
+
+.faucetResult {
+  padding: 0.5rem;
+  margin: 0;
+}
+
+.addressInput::placeholder {
+  text-overflow: ellipsis;
+}
+
+@media screen and (max-width: 800px) {
+  .faucetContainer {
+    padding: 0 0;
+  }
+
+  .faucetTitle {
+    font-size: 36px;
+    margin-bottom: -28px;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .faucetTitle {
+    font-size: 32px;
+    margin-bottom: 1rem;
+  }
+
+  .faucetPlantOne {
+    display: none;
+  }
+
+  .faucetPlantTwo {
+    display: none;
+  }
+
+.faucetPlantContainer {
+  margin-bottom: 0;
+}
+}

static/fonts/fonts.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Montserrat:wght@400;500;700&display=swap');
+
 @font-face {
   font-family: 'Nunito Sans';
   font-style: normal;
@@ -10,4 +12,4 @@
     url('NunitoSans/nunito-sans-v6-vietnamese_latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
     url('NunitoSans/nunito-sans-v6-vietnamese_latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
     url('NunitoSans/nunito-sans-v6-vietnamese_latin-ext_latin-regular.svg#NunitoSans') format('svg'); /* Legacy iOS */
-}
+}