parent
660bcc1338
commit
05207d05a2
@ -1,42 +0,0 @@ |
|||||||
.App { |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
.App-logo { |
|
||||||
height: 40vmin; |
|
||||||
pointer-events: none; |
|
||||||
} |
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) { |
|
||||||
.App-logo { |
|
||||||
animation: App-logo-spin infinite 20s linear; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.App-header { |
|
||||||
background-color: #282c34; |
|
||||||
min-height: 100vh; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
font-size: calc(10px + 2vmin); |
|
||||||
color: white; |
|
||||||
} |
|
||||||
|
|
||||||
.App-link { |
|
||||||
color: #61dafb; |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes App-logo-spin { |
|
||||||
from { |
|
||||||
transform: rotate(0deg); |
|
||||||
} |
|
||||||
to { |
|
||||||
transform: rotate(360deg); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
#disconnectbtn, #accounts-container { |
|
||||||
display: none; |
|
||||||
} |
|
@ -1,56 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import './App.css'; |
|
||||||
import '@fortawesome/fontawesome-free/css/all.css' |
|
||||||
import { RemixClient, INFURA_ID_KEY } from './RemixClient' |
|
||||||
const p = new RemixClient() |
|
||||||
function App() { |
|
||||||
|
|
||||||
const openModal = () => { |
|
||||||
p.onConnect() |
|
||||||
} |
|
||||||
|
|
||||||
const disconnect = () => { |
|
||||||
p.onDisconnect() |
|
||||||
} |
|
||||||
|
|
||||||
const showButtons = (connected = true) =>{ |
|
||||||
document.getElementById("disconnectbtn").style.display = document.getElementById("accounts-container").style.display = connected? 'block':'none'; |
|
||||||
document.getElementById("connectbtn").style.display = connected? 'none':'block'; |
|
||||||
} |
|
||||||
|
|
||||||
p.internalEvents.on('accountsChanged', (accounts) => { |
|
||||||
document.getElementById('accounts').innerHTML = "" |
|
||||||
for(const account of accounts){ |
|
||||||
document.getElementById('accounts').innerHTML += `<li className="list-group-item">${account}</li>` |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
p.internalEvents.on('chainChanged', (chain) => { |
|
||||||
document.getElementById('chain').innerHTML = chain |
|
||||||
showButtons(true) |
|
||||||
}) |
|
||||||
|
|
||||||
p.internalEvents.on('disconnect', (chain) => { |
|
||||||
document.getElementById('accounts').innerHTML = '' |
|
||||||
document.getElementById('chain').innerHTML = '' |
|
||||||
showButtons(false) |
|
||||||
}) |
|
||||||
return ( |
|
||||||
<div className="App"> |
|
||||||
<div className="btn-group-vertical mt-5 w-25" role="group"> |
|
||||||
<div class="text-center w-100"> |
|
||||||
<i class="fas fa-info-circle mr-2 bg-light" title="Wallet connect reuire an infura id in order to make request to the network."/><a target="_blank" href="https://infura.io/dashboard/ethereum">infura settings</a> |
|
||||||
<input onChange={(e) => { localStorage.setItem(INFURA_ID_KEY, e.target.value)}} id="input-infura-id" placeholder="Infura Id" className="mt-2 mb-2 ml-2"></input> |
|
||||||
</div> |
|
||||||
<button id="connectbtn" type="button" onClick={openModal} className="btn btn-primary">Connect to a wallet</button> |
|
||||||
<button id="disconnectbtn" type="button" onClick={disconnect} className="btn btn-primary mt-2">Disconnect</button> |
|
||||||
</div> |
|
||||||
<div id='accounts-container'> |
|
||||||
<div><label><b>Accounts: </b></label><br></br><ul className="list-group list-group-flush" id="accounts"></ul></div> |
|
||||||
<div><label><b>Network: </b></label><label className="ml-1" id="chain"> - </label></div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
export default App; |
|
@ -1,9 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import { render } from '@testing-library/react'; |
|
||||||
import App from './App'; |
|
||||||
|
|
||||||
test('renders learn react link', () => { |
|
||||||
const { getByText } = render(<App />); |
|
||||||
const linkElement = getByText(/learn react/i); |
|
||||||
expect(linkElement).toBeInTheDocument(); |
|
||||||
}); |
|
@ -1,13 +0,0 @@ |
|||||||
body { |
|
||||||
margin: 0; |
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', |
|
||||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', |
|
||||||
sans-serif; |
|
||||||
-webkit-font-smoothing: antialiased; |
|
||||||
-moz-osx-font-smoothing: grayscale; |
|
||||||
} |
|
||||||
|
|
||||||
code { |
|
||||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', |
|
||||||
monospace; |
|
||||||
} |
|
@ -1,17 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import ReactDOM from 'react-dom'; |
|
||||||
import './index.css'; |
|
||||||
import App from './App'; |
|
||||||
import * as serviceWorker from './serviceWorker'; |
|
||||||
|
|
||||||
ReactDOM.render( |
|
||||||
<React.StrictMode> |
|
||||||
<App /> |
|
||||||
</React.StrictMode>, |
|
||||||
document.getElementById('root') |
|
||||||
); |
|
||||||
|
|
||||||
// If you want your app to work offline and load faster, you can change
|
|
||||||
// unregister() to register() below. Note this comes with some pitfalls.
|
|
||||||
// Learn more about service workers: https://bit.ly/CRA-PWA
|
|
||||||
serviceWorker.unregister(); |
|
@ -1,5 +0,0 @@ |
|||||||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
|
||||||
// allows you to do things like:
|
|
||||||
// expect(element).toHaveTextContent(/react/i)
|
|
||||||
// learn more: https://github.com/testing-library/jest-dom
|
|
||||||
import '@testing-library/jest-dom/extend-expect'; |
|
Loading…
Reference in new issue