feat: frontend ui for polkadot payout (#84)

HugoByte · Nov 14, 2023 · 1f09715 · 1f09715
1 parent f254b61
commit 1f09715
Show file tree

Hide file tree

Showing 42 changed files with 2,753 additions and 0 deletions.
diff --git a/examples/payout-notification/package.json b/examples/payout-notification/package.json
@@ -0,0 +1,55 @@
+{
+  "name": "react-login-form",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "src/index.js",
+  "dependencies": {
+    "firebase": "^9.20.0",
+    "icon-sdk-js": "^1.4.3",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-icons": "^4.11.0",
+    "react-modal": "^3.16.1",
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "5.0.1",
+    "semantic-ui-react": "^2.1.4",
+    "styled-components": "^6.0.7",
+    "web-vitals": "^2.1.4",
+    "@polkadot/api": "^7.10.1",
+    "@polkadot/extension-dapp": "^0.42.7",
+    "@polkadot/keyring": "^8.4.1",
+    "@polkadot/networks": "^8.4.1",
+    "@polkadot/types": "^7.10.1",
+    "@polkadot/ui-keyring": "^1.1.1",
+    "@polkadot/ui-settings": "^1.1.1",
+    "@polkadot/util": "^8.4.1",
+    "@polkadot/util-crypto": "^8.4.1",
+    "node-polyfill-webpack-plugin": "^1.1.4",
+    "prop-types": "^15.8.1",
+    "react-copy-to-clipboard": "^5.0.4",
+    "semantic-ui-css": "Semantic-Org/Semantic-UI-CSS#master",
+    "stream-browserify": "^3.0.0"
+  },
+  "devDependencies": {
+    "typescript": "3.8.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/examples/payout-notification/public/assets/favicon.ico b/examples/payout-notification/public/assets/favicon.ico
diff --git a/examples/payout-notification/public/assets/main.css b/examples/payout-notification/public/assets/main.css
@@ -0,0 +1,14 @@
+.github-fork-ribbon.right-bottom:before {
+  background-color: #222
+}
+
+.w-full {
+    width: 100%;
+}
+
+.pt{
+  margin-top: 0.5rem;
+}
+.pb{
+  margin-bottom: 0.725rem;
+}
diff --git a/examples/payout-notification/public/assets/substrate-logo.png b/examples/payout-notification/public/assets/substrate-logo.png
diff --git a/examples/payout-notification/public/favicon.ico b/examples/payout-notification/public/favicon.ico
diff --git a/examples/payout-notification/public/firebase-messaging-sw.js b/examples/payout-notification/public/firebase-messaging-sw.js
@@ -0,0 +1,31 @@
+importScripts("https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js");
+importScripts(
+  "https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js"
+);
+
+const firebaseConfig = {
+    apiKey: "AIzaSyBQ6bxRG-BHLIF9W-20Imad4VnMvWEQdPE",
+    authDomain: "aurras-15d80.firebaseapp.com",
+    projectId: "aurras-15d80",
+    storageBucket: "aurras-15d80.appspot.com",
+    messagingSenderId: "625844804761",
+    appId: "1:625844804761:web:b5c14238120c1873796c08",
+    measurementId: "G-1QJ2WE25BE",};
+
+firebase.initializeApp(firebaseConfig);
+const messaging = firebase.messaging();
+
+messaging.onBackgroundMessage((payload) => {
+  console.log(
+    "[firebase-messaging-sw.js] Received background message ",
+    payload
+  );
+  const notificationTitle = payload.notification.title;
+  const notificationOptions = {
+    body: payload.notification.body,
+    icon: icon || '/icons/firebase-logo.png',
+    data: restPayload,
+  };
+
+  self.registration.showNotification(notificationTitle, notificationOptions);
+});
diff --git a/examples/payout-notification/public/index.html b/examples/payout-notification/public/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <link rel=stylesheet type=text/css
+    href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css
+    />
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Polkadot Payout App</title>
+  </head>
+
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/examples/payout-notification/public/logo192.png b/examples/payout-notification/public/logo192.png
diff --git a/examples/payout-notification/public/logo512.png b/examples/payout-notification/public/logo512.png
diff --git a/examples/payout-notification/public/manifest.json b/examples/payout-notification/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/examples/payout-notification/public/robots.txt b/examples/payout-notification/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/examples/payout-notification/src/AccountSelector.js b/examples/payout-notification/src/AccountSelector.js
@@ -0,0 +1,144 @@
+import React, { useState, useEffect } from 'react'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
+
+import {
+  Menu,
+  Button,
+  Dropdown,
+  Container,
+  Icon,
+  Image,
+  Label,
+} from 'semantic-ui-react'
+import ModalApp from './Modal';
+
+import { useSubstrate, useSubstrateState } from './substrate-lib'
+
+const CHROME_EXT_URL =
+  'https://chrome.google.com/webstore/detail/polkadot%7Bjs%7D-extension/mopnmbcafieddcagagdcbnhejhlodfdd'
+const FIREFOX_ADDON_URL =
+  'https://addons.mozilla.org/en-US/firefox/addon/polkadot-js-extension/'
+
+const acctAddr = acct => (acct ? acct.address : '')
+
+function Main(props) {
+  const {
+    setCurrentAccount,
+    state: { keyring, currentAccount },
+  } = useSubstrate()
+
+  // Get the list of accounts we possess the private key for
+  const keyringOptions = keyring.getPairs().map(account => ({
+    key: account.address,
+    value: account.address,
+    text: account.meta.name.toUpperCase(),
+    icon: 'user',
+  }))
+
+  const initialAddress =
+    keyringOptions.length > 0 ? keyringOptions[0].value : ''
+
+  // Set the initial address
+  useEffect(() => {
+    // `setCurrentAccount()` is called only when currentAccount is null (uninitialized)
+    !currentAccount &&
+      initialAddress.length > 0 &&
+      setCurrentAccount(keyring.getPair(initialAddress))
+  }, [currentAccount, setCurrentAccount, keyring, initialAddress])
+
+  const onChange = addr => {
+    setCurrentAccount(keyring.getPair(addr))
+  }
+
+  return (
+    <Menu
+      attached="top"
+      tabular
+      style={{
+        backgroundColor: '#fff',
+        borderColor: '#fff',
+        paddingTop: '1em',
+        paddingBottom: '1em',
+      }}
+    >
+      <Container>
+        <Menu.Menu>
+          <Image
+            src={`${process.env.PUBLIC_URL}/assets/substrate-logo.png`}
+            size="mini"
+          />
+        </Menu.Menu>
+        <Menu.Menu position="right" style={{ alignItems: 'center' }}>
+          {currentAccount ? <ModalApp address={currentAccount.address}></ModalApp> : null}
+          {!currentAccount ? (
+            <span>
+              Create an account with Polkadot-JS Extension (
+              <a target="_blank" rel="noreferrer" href={CHROME_EXT_URL}>
+                Chrome
+              </a>
+              ,&nbsp;
+              <a target="_blank" rel="noreferrer" href={FIREFOX_ADDON_URL}>
+                Firefox
+              </a>
+              )&nbsp;
+            </span>
+          ) : null}
+          <CopyToClipboard text={acctAddr(currentAccount)}>
+            <Button
+              basic
+              circular
+              size="large"
+              icon="user"
+              color={currentAccount ? 'green' : 'red'}
+            />
+          </CopyToClipboard>
+          <Dropdown
+            search
+            selection
+            clearable
+            placeholder="Select an account"
+            options={keyringOptions}
+            onChange={(_, dropdown) => {
+              onChange(dropdown.value)
+            }}
+            value={acctAddr(currentAccount)}
+          />
+          <BalanceAnnotation />
+        </Menu.Menu>
+      </Container>
+    </Menu>
+  )
+}
+
+function BalanceAnnotation(props) {
+  const { api, currentAccount } = useSubstrateState()
+  const [accountBalance, setAccountBalance] = useState(0)
+
+  // When account address changes, update subscriptions
+  useEffect(() => {
+    let unsubscribe
+
+    // If the user has selected an address, create a new subscription
+    currentAccount &&
+      api.query.system
+        .account(acctAddr(currentAccount), balance =>
+          setAccountBalance(balance.data.free.toHuman())
+        )
+        .then(unsub => (unsubscribe = unsub))
+        .catch(console.error)
+
+    return () => unsubscribe && unsubscribe()
+  }, [api, currentAccount])
+
+  return currentAccount ? (
+    <Label pointing="left">
+      <Icon name="money" color="green" />
+      {accountBalance}
+    </Label>
+  ) : null
+}
+
+export default function AccountSelector(props) {
+  const { api, keyring } = useSubstrateState()
+  return keyring.getPairs && api.query ? <Main {...props} /> : null
+}