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