|
| 1 | +import React, { useCallback, useEffect, useState } from "react"; |
| 2 | +import "error-polyfill"; |
| 3 | +import "bootstrap-icons/font/bootstrap-icons.css"; |
| 4 | +import "bootstrap/dist/js/bootstrap.bundle"; |
| 5 | +import "./App.scss"; |
| 6 | +import { BrowserRouter as Router, Link, Route, Switch } from "react-router-dom"; |
| 7 | +import { NearConfig, TGas, useNearPromise } from "./data/near"; |
| 8 | +import MainPage from "./pages/MainPage"; |
| 9 | +import { OneNear } from "./data/utils"; |
| 10 | +import { useAccount } from "./data/account"; |
| 11 | + |
| 12 | +export const refreshAllowanceObj = {}; |
| 13 | + |
| 14 | +function App(props) { |
| 15 | + const [connected, setConnected] = useState(false); |
| 16 | + const [signedIn, setSignedIn] = useState(false); |
| 17 | + const [signedAccountId, setSignedAccountId] = useState(null); |
| 18 | + |
| 19 | + const _near = useNearPromise(); |
| 20 | + const account = useAccount(); |
| 21 | + |
| 22 | + const requestSignIn = useCallback( |
| 23 | + async (e) => { |
| 24 | + e && e.preventDefault(); |
| 25 | + const appTitle = "viewer"; |
| 26 | + const near = await _near; |
| 27 | + |
| 28 | + await near.walletConnection.requestSignIn( |
| 29 | + NearConfig.contractName, |
| 30 | + appTitle |
| 31 | + ); |
| 32 | + return false; |
| 33 | + }, |
| 34 | + [_near] |
| 35 | + ); |
| 36 | + |
| 37 | + const logOut = useCallback(async () => { |
| 38 | + const near = await _near; |
| 39 | + near.walletConnection.signOut(); |
| 40 | + near.accountId = null; |
| 41 | + setSignedIn(false); |
| 42 | + setSignedAccountId(null); |
| 43 | + }, [_near]); |
| 44 | + |
| 45 | + const donate = async (e) => { |
| 46 | + e.preventDefault(); |
| 47 | + await account.near.contract.donate( |
| 48 | + {}, |
| 49 | + TGas.mul(10).toFixed(), |
| 50 | + OneNear.toFixed() |
| 51 | + ); |
| 52 | + }; |
| 53 | + |
| 54 | + const refreshAllowance = useCallback(async () => { |
| 55 | + alert( |
| 56 | + "You're out of access key allowance. Need sign in again to refresh it" |
| 57 | + ); |
| 58 | + await logOut(); |
| 59 | + await requestSignIn(); |
| 60 | + }, [logOut, requestSignIn]); |
| 61 | + refreshAllowanceObj.refreshAllowance = refreshAllowance; |
| 62 | + |
| 63 | + useEffect(() => { |
| 64 | + _near.then((near) => { |
| 65 | + setSignedIn(!!near.accountId); |
| 66 | + setSignedAccountId(near.accountId); |
| 67 | + setConnected(true); |
| 68 | + }); |
| 69 | + }, [_near]); |
| 70 | + |
| 71 | + const passProps = { |
| 72 | + refreshAllowance: () => refreshAllowance(), |
| 73 | + signedAccountId, |
| 74 | + signedIn, |
| 75 | + connected, |
| 76 | + }; |
| 77 | + |
| 78 | + const header = !connected ? ( |
| 79 | + <div> |
| 80 | + Connecting...{" "} |
| 81 | + <span |
| 82 | + className="spinner-grow spinner-grow-sm" |
| 83 | + role="status" |
| 84 | + aria-hidden="true" |
| 85 | + /> |
| 86 | + </div> |
| 87 | + ) : signedIn ? ( |
| 88 | + <div> |
| 89 | + <button className="btn btn-outline-light me-2" onClick={donate}> |
| 90 | + Donate 1 NEAR for storage |
| 91 | + </button> |
| 92 | + |
| 93 | + <button className="btn btn-outline-light" onClick={() => logOut()}> |
| 94 | + Sign out {signedAccountId} |
| 95 | + </button> |
| 96 | + </div> |
| 97 | + ) : ( |
| 98 | + <div> |
| 99 | + <button |
| 100 | + className="btn btn-outline-light" |
| 101 | + onClick={(e) => requestSignIn(e)} |
| 102 | + > |
| 103 | + Sign in with NEAR Wallet |
| 104 | + </button> |
| 105 | + </div> |
| 106 | + ); |
| 107 | + |
| 108 | + return ( |
| 109 | + <div className="App"> |
| 110 | + <Router basename={process.env.PUBLIC_URL}> |
| 111 | + <nav className="navbar navbar-expand-lg navbar-dark bg-primary mb-3"> |
| 112 | + <div className="container-fluid"> |
| 113 | + <a className="navbar-brand" href="/" title="viewer"> |
| 114 | + <img |
| 115 | + src="/favicon.png" |
| 116 | + alt="viewer logo" |
| 117 | + height="24" |
| 118 | + className="d-inline-block align-text-top me-2" |
| 119 | + /> |
| 120 | + viewer |
| 121 | + </a> |
| 122 | + <button |
| 123 | + className="navbar-toggler" |
| 124 | + type="button" |
| 125 | + data-bs-toggle="collapse" |
| 126 | + data-bs-target="#navbarSupportedContent" |
| 127 | + aria-controls="navbarSupportedContent" |
| 128 | + aria-expanded="false" |
| 129 | + aria-label="Toggle navigation" |
| 130 | + > |
| 131 | + <span className="navbar-toggler-icon" /> |
| 132 | + </button> |
| 133 | + <div |
| 134 | + className="collapse navbar-collapse" |
| 135 | + id="navbarSupportedContent" |
| 136 | + > |
| 137 | + <ul className="navbar-nav me-auto mb-2 mb-lg-0"> |
| 138 | + <li className="nav-item"> |
| 139 | + <Link className="nav-link" aria-current="page" to="/"> |
| 140 | + Main |
| 141 | + </Link> |
| 142 | + </li> |
| 143 | + </ul> |
| 144 | + <form className="d-flex">{header}</form> |
| 145 | + </div> |
| 146 | + </div> |
| 147 | + </nav> |
| 148 | + |
| 149 | + <Switch> |
| 150 | + <Route exact path={"/"}> |
| 151 | + <MainPage {...passProps} /> |
| 152 | + </Route> |
| 153 | + </Switch> |
| 154 | + </Router> |
| 155 | + </div> |
| 156 | + ); |
| 157 | +} |
| 158 | + |
| 159 | +export default App; |
0 commit comments