text change

. quick and simple, subject to obviously change.

testnet-faucet/.env.sample

@@ -0,0 +1,4 @@
+validatorAddress=
+mnemonic=
+testnetURL1=
+accountAddress=

testnet-faucet/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.DS_Store
+.parcel-cache

testnet-faucet/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2
+}

testnet-faucet/README.md

@@ -0,0 +1,19 @@
+## Testnet Faucet Page
+
+### Install dependencies
+
+Run `yarn install`
+
+### Add environment variables
+
+Create a `.env` file in the root of the project. Copy the keys from the `.env.sample` file (found in the project root) into the `.env` file and add in the required values`
+
+### Run development mode
+
+Run `yarn dev`
+
+### Build app
+
+Run `yarn build`
+
+The output can be found in the `dist` folder

testnet-faucet/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "testnet-faucet",
+  "version": "0.1.0",
+  "description": "nym testnet token faucet",
+  "license": "MIT",
+  "scripts": {
+    "dev": "yarn parcel src/index.html",
+    "build": "yarn parcel build src/index.html"
+  },
+  "dependencies": {
+    "@nymproject/nym-validator-client": "^0.18.0",
+    "puppeteer": "^11.0.0"
+  },
+  "devDependencies": {
+    "@parcel/transformer-sass": "^2.0.1",
+    "jest-puppeteer": "^6.0.0",
+    "parcel": "^2.0.1"
+  }
+}

testnet-faucet/src/images/logo-white.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 3920.6 930.9" style="enable-background:new 0 0 3920.6 930.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M1223.9,930.9H944.3L218.5,215.6v715.3H0V0h286.2L1012,715.1V0h211.9V930.9z M3644.3,0l-335.7,330.9L2972.9,0
+	h-276.2v930.9h218.4V225.6l345.4,340.6c26.7,26.3,69.6,26.3,96.3,0l345.4-340.6v705.3h218.4V0H3644.3z M1854.5,505.9v425h218.4v-425
+	L2575.6,0h-276.2l-335.9,330.9L1627.8,0h-276.2L1854.5,505.9z"/>
+</svg>

testnet-faucet/src/images/mixnet.svg

@@ -0,0 +1,20 @@
+<svg width="114" height="115" viewBox="0 0 114 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M108.376 6.39685H6.021" stroke="white" stroke-miterlimit="10"/>
+<path d="M6.021 108.751H108.376" stroke="white" stroke-miterlimit="10"/>
+<path d="M108.376 57.5746H6.021" stroke="white" stroke-miterlimit="10"/>
+<path d="M57.1984 108.817L31.6097 83.1956L6.021 57.5737L31.6097 31.9519L57.1984 6.33008" stroke="white" stroke-miterlimit="10"/>
+<path d="M108.377 108.817L82.7879 83.1956L57.1992 57.5737L82.7879 31.9519L108.377 6.33008" stroke="white" stroke-miterlimit="10"/>
+<path d="M57.1992 6.33008L82.7879 31.9519L108.377 57.5737L82.7879 83.1956L57.1992 108.817" stroke="white" stroke-miterlimit="10"/>
+<path d="M6.021 6.33008L31.6097 31.9519L57.1984 57.5737L31.6097 83.1956L6.021 108.817" stroke="white" stroke-miterlimit="10"/>
+<path d="M108.442 6.33008L82.8206 57.5406L57.1987 108.751L31.5769 57.5406L5.95508 6.33008" stroke="white" stroke-miterlimit="10"/>
+<path d="M5.95508 108.751L31.5769 57.5406L57.1987 6.33008L82.8206 57.5406L108.442 108.751" stroke="white" stroke-miterlimit="10"/>
+<path d="M108.177 63.5962C111.393 63.5962 114 60.9894 114 57.7737C114 54.558 111.393 51.9512 108.177 51.9512C104.962 51.9512 102.355 54.558 102.355 57.7737C102.355 60.9894 104.962 63.5962 108.177 63.5962Z" fill="white"/>
+<path d="M108.177 12.4182C111.393 12.4182 114 9.81131 114 6.59561C114 3.37991 111.393 0.773071 108.177 0.773071C104.962 0.773071 102.355 3.37991 102.355 6.59561C102.355 9.81131 104.962 12.4182 108.177 12.4182Z" fill="white"/>
+<path d="M108.177 114.773C111.393 114.773 114 112.166 114 108.95C114 105.735 111.393 103.128 108.177 103.128C104.962 103.128 102.355 105.735 102.355 108.95C102.355 112.166 104.962 114.773 108.177 114.773Z" fill="white"/>
+<path d="M57 63.5962C60.2157 63.5962 62.8226 60.9894 62.8226 57.7737C62.8226 54.558 60.2157 51.9512 57 51.9512C53.7843 51.9512 51.1775 54.558 51.1775 57.7737C51.1775 60.9894 53.7843 63.5962 57 63.5962Z" fill="white"/>
+<path d="M57 12.4182C60.2157 12.4182 62.8226 9.81131 62.8226 6.59561C62.8226 3.37991 60.2157 0.773071 57 0.773071C53.7843 0.773071 51.1775 3.37991 51.1775 6.59561C51.1775 9.81131 53.7843 12.4182 57 12.4182Z" fill="white"/>
+<path d="M57 114.773C60.2157 114.773 62.8226 112.166 62.8226 108.95C62.8226 105.735 60.2157 103.128 57 103.128C53.7843 103.128 51.1775 105.735 51.1775 108.95C51.1775 112.166 53.7843 114.773 57 114.773Z" fill="white"/>
+<path d="M5.82254 63.5962C9.03824 63.5962 11.6451 60.9894 11.6451 57.7737C11.6451 54.558 9.03824 51.9512 5.82254 51.9512C2.60684 51.9512 0 54.558 0 57.7737C0 60.9894 2.60684 63.5962 5.82254 63.5962Z" fill="white"/>
+<path d="M5.82254 12.4182C9.03824 12.4182 11.6451 9.81131 11.6451 6.59561C11.6451 3.37991 9.03824 0.773071 5.82254 0.773071C2.60684 0.773071 0 3.37991 0 6.59561C0 9.81131 2.60684 12.4182 5.82254 12.4182Z" fill="white"/>
+<path d="M5.82254 114.773C9.03824 114.773 11.6451 112.166 11.6451 108.95C11.6451 105.735 9.03824 103.128 5.82254 103.128C2.60684 103.128 0 105.735 0 108.95C0 112.166 2.60684 114.773 5.82254 114.773Z" fill="white"/>
+</svg>

testnet-faucet/src/index.html

@@ -0,0 +1,67 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" href="./images/favicon.png" />
+    <link rel="stylesheet" href="./normalize.scss" />
+    <link rel="stylesheet" href="./style.scss" />
+    <title>Nym Testnet faucet</title>
+  </head>
+  <body>
+    <div class="layout">
+      <div class="overlay"></div>
+      <nav>
+        <div class="container">
+          <img src="./images/logo-white.svg" width="100px" />
+        </div>
+      </nav>
+      <main class="container">
+        <div>
+          <h2>Nym Testnet Faucet</h2>
+          <h3>Nym tokens to your address</h3>
+          <form>
+            <div class="inputs">
+              <label for="address-input">Address</label>
+
+              <input
+                type="text"
+                placeholder="0x000000"
+                id="address-input"
+                name="address-input"
+              />
+
+              <label for="amount-input">Amount (UPunks)</label>
+
+              <input
+                type="number"
+                placeholder="0"
+                id="amount-input"
+                name="amount-input"
+              />
+            </div>
+            <div class="actions">
+              <button id="check-balance" class="outlined">Check balance</button>
+              <button id="request-tokens" class="primary">
+                Request tokens
+              </button>
+            </div>
+          </form>
+          <div class="error-text hide">
+            Please fill in the Address and Amount fields
+          </div>
+          <div class="balance">
+            Transfer failed - Error: Broadcasting transaction failed with code 7
+            (codespace: sdk). Log: Invalid recipient address (decoding bech32
+            failed: checksum failed. Expected ve5zcd, got yjw2le.): invalid
+            address
+          </div>
+          <div class="loading hide">
+            <span>Processing...</span>
+          </div>
+        </div>
+      </main>
+    </div>
+    <script src="./index.ts" type="module"></script>
+  </body>
+</html>

testnet-faucet/src/index.ts

@@ -0,0 +1,135 @@
+import Validator from '@nymproject/nym-validator-client';
+
+(async () => {
+  // Environment variables
+  const {
+    validatorAddress = '',
+    mnemonic = '',
+    testnetURL1 = '',
+    accountAddress = '',
+  } = process.env;
+
+  // Connect to the validator client
+  const validator = await Validator.connect(
+    validatorAddress,
+    mnemonic,
+    [testnetURL1],
+    'punk',
+  );
+
+  // DOM elements
+  const addressInput = document.getElementById(
+    'address-input',
+  ) as HTMLInputElement;
+  const amountInput = document.getElementById(
+    'amount-input',
+  ) as HTMLInputElement;
+  const requestTokensBtn = document.getElementById('request-tokens');
+  const checkBalanceBtn = document.getElementById('check-balance');
+  const balanceElem = document.querySelector('.balance');
+  const loadingElem = document.querySelector('.loading');
+  const errorText = document.querySelector('.error-text');
+
+  // Add event listeners and handlers to button elements
+  checkBalanceBtn?.addEventListener('click', async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    showBalance(false);
+    showErrorText(false);
+    const balance = await getBalance();
+    setTimeout(() => {
+      setLoading(false);
+      displayBalance(balance?.amount);
+    }, 1000);
+  });
+
+  requestTokensBtn?.addEventListener('click', async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    showBalance(false);
+    showErrorText(false);
+    if (addressInput.value.length === 0 || accountAddress.length === 0) {
+      showErrorText(true);
+    }
+    try {
+      await validator.send(accountAddress, addressInput.value, [
+        {
+          amount: amountInput.value,
+          denom: 'upunk',
+        },
+      ]);
+      displayTransferResult({
+        success: true,
+        amount: amountInput.value,
+        accountAddress,
+      });
+    } catch (e) {
+      displayTransferResult({ success: false, error: e });
+    } finally {
+      resetInputs();
+    }
+  });
+
+  // Functions
+  const getBalance = async () => {
+    return await validator.getBalance(accountAddress);
+  };
+
+  const setLoading = (isLoading: boolean) => {
+    if (isLoading) {
+      loadingElem?.classList.remove('hide');
+      checkBalanceBtn?.setAttribute('disabled', 'true');
+      requestTokensBtn?.setAttribute('disabled', 'true');
+    } else {
+      loadingElem?.classList.add('hide');
+      checkBalanceBtn?.removeAttribute('disabled');
+      requestTokensBtn?.removeAttribute('disabled');
+    }
+  };
+
+  const showBalance = (show: boolean) =>
+    show
+      ? balanceElem?.classList.remove('hide')
+      : balanceElem?.classList.add('hide');
+
+  const showErrorText = (show: boolean) => {
+    show
+      ? errorText?.classList.remove('hide')
+      : errorText?.classList.add('hide');
+  };
+
+  const displayBalance = (balance?: string) => {
+    if (!balance && balanceElem) {
+      balanceElem.innerHTML = 'Unable to obtain current balance';
+    }
+    if (balance && balanceElem) {
+      balanceElem.innerHTML = `Current balance on the faucet account it <strong>${balance}</strong> upunks`;
+    }
+    showBalance(true);
+  };
+
+  const displayTransferResult = ({
+    success,
+    amount,
+    accountAddress,
+    error,
+  }: {
+    success: boolean;
+    amount?: string;
+    accountAddress?: string;
+    error?: any;
+  }) => {
+    if (success && balanceElem) {
+      balanceElem.innerHTML = `Successfully transfered ${amount!} upunk to address ${accountAddress!}`;
+    } else if (!success && balanceElem) {
+      balanceElem.innerHTML = `Transfer failed - ${error}`;
+    }
+    setLoading(false);
+    showBalance(true);
+  };
+
+  const resetInputs = () => {
+    addressInput.value = '';
+    amountInput.value = '';
+  };
+})();

testnet-faucet/src/normalize.scss

@@ -0,0 +1,351 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+     ========================================================================== */
+
+/**
+   * Remove the margin in all browsers.
+   */
+
+body {
+  margin: 0;
+}
+
+/**
+   * Render the `main` element consistently in IE.
+   */
+
+main {
+  display: block;
+}
+
+/**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+     ========================================================================== */
+
+/**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+     ========================================================================== */
+
+/**
+   * Remove the gray background on active links in IE 10.
+   */
+
+a {
+  background-color: transparent;
+}
+
+/**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+   * Add the correct font size in all browsers.
+   */
+
+small {
+  font-size: 80%;
+}
+
+/**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+     ========================================================================== */
+
+/**
+   * Remove the border on images inside links in IE 10.
+   */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+     ========================================================================== */
+
+/**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+}
+
+/**
+   * Remove the inner border and padding in Firefox.
+   */
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+   * Restore the focus styles unset by the previous rule.
+   */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+   * Correct the padding in Firefox.
+   */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+
+[type='checkbox'],
+[type='radio'] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+
+[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+     ========================================================================== */
+
+/*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+
+details {
+  display: block;
+}
+
+/*
+   * Add the correct display in all browsers.
+   */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+     ========================================================================== */
+
+/**
+   * Add the correct display in IE 10+.
+   */
+
+template {
+  display: none;
+}
+
+/**
+   * Add the correct display in IE 10.
+   */
+
+[hidden] {
+  display: none;
+}

testnet-faucet/src/style.scss

@@ -0,0 +1,158 @@
+$primary-light: #f4731b;
+$primary-dark: #f12d50;
+
+* {
+  font-family: sans-serif;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #070b15;
+  height: 100vh;
+  width: 100vw;
+}
+
+.layout {
+  position: relative;
+}
+
+.container {
+  margin: auto;
+}
+
+nav {
+  padding: 2rem;
+}
+
+main {
+  padding: 3rem 2rem;
+}
+
+h2 {
+  color: white;
+  margin: 0;
+  font-size: 2rem;
+  margin-bottom: 0.3rem;
+  font-weight: lighter;
+}
+
+h3 {
+  color: $primary-light;
+  font-weight: normal;
+  margin: 0;
+  font-size: 2.25rem;
+  margin-bottom: 1rem;
+}
+
+form {
+  .inputs {
+    margin-bottom: 1.5rem;
+  }
+  label {
+    color: white;
+    font-size: 0.75rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+  }
+
+  input {
+    width: 100%;
+    padding: 15px 20px;
+    border-radius: 25px;
+    border: none;
+    margin: 0.75rem 0;
+  }
+}
+
+.balance {
+  margin-top: 2rem;
+  color: white;
+  font-size: 1.75rem;
+
+  strong {
+    text-decoration: underline;
+  }
+}
+
+.loading {
+  margin-top: 2rem;
+  display: flex;
+  align-items: center;
+
+  span {
+    font-size: 1.5rem;
+    color: white;
+  }
+}
+
+.loading.hide,
+.balance.hide,
+.error-text.hide {
+  display: none;
+}
+
+.error-text {
+  color: red;
+  margin: 2rem 0;
+}
+
+button {
+  border: none;
+  padding: 1rem 2rem;
+  border-radius: 25px;
+  font-weight: 600;
+  text-transform: uppercase;
+  min-width: 200px;
+  cursor: pointer;
+  margin-bottom: 0.5rem;
+}
+
+button.primary {
+  background: linear-gradient(90deg, $primary-light 1.05%, $primary-dark 100%);
+  color: white;
+  &:hover {
+    background: linear-gradient(
+      90deg,
+      darken($primary-light, 5%) 1.05%,
+      darken($primary-dark, 5%) 100%
+    );
+  }
+  &:disabled {
+    background: rgb(175, 175, 175);
+  }
+}
+
+button.outlined {
+  border: 2px solid $primary-light;
+  color: white;
+  background: transparent;
+  margin-right: 0.5rem;
+  &:hover {
+    border: 2px solid $primary-dark;
+  }
+  &:disabled {
+    background: rgb(175, 175, 175);
+    border-color: rgb(175, 175, 175);
+  }
+}
+
+@media screen and (min-width: 1088px) {
+  .container {
+    max-width: 960px;
+    width: 960px;
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  .container {
+    max-width: 1152px;
+    width: 1152px;
+  }
+}
+
+@media screen and (min-width: 1472px) {
+  .container {
+    max-width: 1344px;
+    width: 1344px;
+  }
+}

testnet-faucet/src/tests/config/environments.js

@@ -0,0 +1,3 @@
+module.exports = {
+    localhost: "http://localhost:1234"
+}

testnet-faucet/src/tests/config/test-data.json

@@ -0,0 +1 @@
+{ "sendaddress": "" }

testnet-faucet/src/tests/faucet-test.js

@@ -0,0 +1,35 @@
+const puppeteer = require('puppeteer');
+const data = require('./config/test-data.json');
+const faucet = require('./pageobjects/elements');
+const environments = require('./config/environments');
+
+const WALLET_ADDRESS = data.sendaddress;
+
+const homepageTest = async () => {
+  const browser = await puppeteer.launch();
+  const page = await browser.newPage();
+
+  await page.goto(environments.localhost);
+
+  await page.waitForSelector(faucet.inputAddress);
+  await page.type(faucet.inputAddress, WALLET_ADDRESS);
+  await page.type(faucet.inputAmount, '5');
+  await page.click(faucet.requestTokens);
+
+  //wait the longest period of time for the transaction to finish
+  await page.waitForTimeout(8000);
+
+  await page.waitForSelector('.balance:not(:empty)');
+
+  const element = await page.$(faucet.transaction);
+  const text = await page.evaluate((element) => element.textContent, element);
+
+  //Successfully transfered 5 upunk to address `punkaddress`
+  //input test framework to assert expected response
+  console.log(text);
+
+  await page.screenshot({ path: 'successful_transaction.png' });
+
+  await browser.close();
+};
+homepageTest();

testnet-faucet/src/tests/pageobjects/elements.js

@@ -0,0 +1,6 @@
+module.exports = {
+  inputAddress: '#address-input',
+  requestTokens: '#request-tokens',
+  inputAmount: '#amount-input',
+  transaction: '.balance'
+};

testnet-faucet/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "strict": true,
+    "noImplicitAny": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  }
+}