-
Notifications
You must be signed in to change notification settings - Fork 208
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(react-wallet): Integrate wallet connection component (#3922)
* feat(react-wallet): Integrate wallet-connection component * feat(react-wallet): Get tests working with jest * feat(react-wallet): DRY up some tests * feat(react-wallet): Remove autodux dependency and refactor * chore(react-wallet): clean up obselete comment
- Loading branch information
1 parent
724d629
commit 01a9118
Showing
15 changed files
with
719 additions
and
93 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,22 @@ | ||
| /* eslint-disable react/display-name */ | ||
| import React from 'react'; | ||
|
|
||
| import logo from './logo.svg'; | ||
| import WalletConnection from './components/WalletConnection'; | ||
|
|
||
| import './App.css'; | ||
| import { withApplicationContext } from './contexts/Application'; | ||
|
|
||
| function App() { | ||
| const App = ({ connectionState }) => { | ||
| return ( | ||
| <div className="App"> | ||
| <header className="App-header"> | ||
| <img src={logo} className="App-logo" alt="logo" /> | ||
| <p> | ||
| Edit <code>src/App.js</code> and save to reload. | ||
| </p> | ||
| <a | ||
| className="App-link" | ||
| href="https://reactjs.org" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| Learn React | ||
| </a> | ||
| Connection Status: {connectionState} | ||
| </header> | ||
| <WalletConnection></WalletConnection> | ||
| </div> | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| export default App; | ||
| export default withApplicationContext(App, (context) => ({ | ||
| connectionState: context.connectionState, | ||
| })); |
This file was deleted.
Oops, something went wrong.
89 changes: 89 additions & 0 deletions
89
packages/dapp-svelte-wallet/react-ui/src/components/WalletConnection.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| /* eslint-disable import/no-extraneous-dependencies */ | ||
| /* eslint-disable react/display-name */ | ||
| import { makeReactAgoricWalletConnection } from '@agoric/wallet-connection/react.js'; | ||
|
|
||
| import React, { useCallback } from 'react'; | ||
| import { E } from '@agoric/eventual-send'; | ||
| import { withApplicationContext } from '../contexts/Application'; | ||
|
|
||
| // Create a wrapper for agoric-wallet-connection that is specific to | ||
| // the app's instance of React. | ||
| const AgoricWalletConnection = makeReactAgoricWalletConnection(React); | ||
|
|
||
| const getAccessToken = () => { | ||
| // Fetch the access token from the window's URL. | ||
| let accessTokenParams = `?${window.location.hash.slice(1)}`; | ||
| let accessToken = new URLSearchParams(accessTokenParams).get('accessToken'); | ||
|
|
||
| try { | ||
| if (accessToken) { | ||
| // Store the access token for later use. | ||
| window.localStorage.setItem('accessTokenParams', accessTokenParams); | ||
| } else { | ||
| // Try reviving it from localStorage. | ||
| accessTokenParams = | ||
| window.localStorage.getItem('accessTokenParams') || '?'; | ||
| accessToken = new URLSearchParams(accessTokenParams).get('accessToken'); | ||
| } | ||
| } catch (e) { | ||
| console.log('Error fetching accessTokenParams', e); | ||
| } | ||
|
|
||
| // Now that we've captured it, clear out the access token from the URL bar. | ||
| window.location.hash = ''; | ||
|
|
||
| window.addEventListener('hashchange', (_ev) => { | ||
| // See if we should update the access token params. | ||
| const atp = `?${window.location.hash.slice(1)}`; | ||
| const at = new URLSearchParams(atp).get('accessToken'); | ||
|
|
||
| if (at) { | ||
| // We have new params, so replace them. | ||
| accessTokenParams = atp; | ||
| accessToken = at; | ||
| localStorage.setItem('accessTokenParams', accessTokenParams); | ||
| } | ||
|
|
||
| // Keep it clear. | ||
| window.location.hash = ''; | ||
| }); | ||
|
|
||
| return accessToken; | ||
| }; | ||
|
|
||
| const WalletConnection = ({ setConnectionState }) => { | ||
| const onWalletState = useCallback((ev) => { | ||
| const { walletConnection, state } = ev.detail; | ||
| console.log('onWalletState', state); | ||
| setConnectionState(state); | ||
| switch (state) { | ||
| case 'idle': { | ||
| // This is one of the only methods that the wallet connection facet allows. | ||
| // It connects asynchronously, but you can use promise pipelining immediately. | ||
| /** @type {ERef<WalletBridge>} */ | ||
| const bridge = E(walletConnection).getAdminBootstrap(getAccessToken()); | ||
| // You should reconstruct all state here. | ||
| console.log('Got bridge', bridge); | ||
| break; | ||
| } | ||
| case 'error': { | ||
| console.log('error', ev.detail); | ||
| // In case of an error, reset to 'idle'. | ||
| // Backoff or other retry strategies would go here instead of immediate reset. | ||
| E(walletConnection).reset(); | ||
| break; | ||
| } | ||
| default: | ||
| } | ||
| }, []); | ||
|
|
||
| return ( | ||
| <span className="hidden"> | ||
| <AgoricWalletConnection onState={onWalletState} /> | ||
| </span> | ||
| ); | ||
| }; | ||
|
|
||
| export default withApplicationContext(WalletConnection, (context) => ({ | ||
| setConnectionState: context.setConnectionState, | ||
| })); |
Oops, something went wrong.