This repository has been archived by the owner on Mar 26, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6990451
commit f736eae
Showing
18 changed files
with
2,566 additions
and
831 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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,28 +1,152 @@ | ||
| <template> | ||
| <div id="app"> | ||
| <img alt="Vue logo" src="./assets/logo.png"> | ||
| <HelloWorld msg="Welcome to Your Vue.js App"/> | ||
| <WalletLeader | ||
| :registerWalletEventsCallback="this.registerWalletEventsCallback" | ||
| /> | ||
| <div class="App"> | ||
| <div class="App-container"> | ||
| <img class="App-logo" src="./assets/logo.svg" /> | ||
| <p v-if="loading">Loading please wait</p> | ||
| <div class="action-buttons"> | ||
| <div v-if="!loading && !isLoggedIn"> | ||
| <LoggedOutActions /> | ||
| </div> | ||
| <div v-if="!loading && isLoggedIn"> | ||
| <LoggedInActions /> | ||
| </div> | ||
| </div> | ||
| <div class="wallet-follower" v-if="!loading && isLoggedIn"> | ||
| <WalletFollower /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import HelloWorld from './components/HelloWorld.vue' | ||
| import { login, logout } from './services/wallet-service'; | ||
| import WalletLeader from './components/Wallet-Leader.vue'; | ||
| import { registerEventListeners } from './services/wallet-service'; | ||
| import WalletFollower from './components/Wallet-Follower.vue'; | ||
| import LoggedInActions from './components/Logged-In-Actions.vue'; | ||
| import LoggedOutActions from './components/Logged-Out-Actions.vue'; | ||
| import { | ||
| isAuthenticated$, | ||
| restoreAuthenticationTaskCompleted$, | ||
| } from './services/store'; | ||
| export default { | ||
| name: 'App', | ||
| components: { | ||
| HelloWorld | ||
| } | ||
| } | ||
| WalletLeader, | ||
| LoggedInActions, | ||
| LoggedOutActions, | ||
| WalletFollower, | ||
| }, | ||
| data: () => { | ||
| return { isLoggedIn: false, loading: true }; | ||
| }, | ||
| methods: { | ||
| registerWalletEventsCallback: function() { | ||
| registerEventListeners(); | ||
| }, | ||
| login: function() { | ||
| login(); | ||
| }, | ||
| logout: function() { | ||
| logout(); | ||
| }, | ||
| }, | ||
| created: function() { | ||
| const _this = this; | ||
| isAuthenticated$.subscribe((value) => { | ||
| _this.$data.isLoggedIn = value; | ||
| }); | ||
| restoreAuthenticationTaskCompleted$.subscribe((value) => { | ||
| if (value) { | ||
| _this.$data.loading = false; | ||
| } | ||
| }); | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <style> | ||
| #app { | ||
| font-family: Avenir, Helvetica, Arial, sans-serif; | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| body { | ||
| margin: 0px; | ||
| } | ||
| .App { | ||
| text-align: center; | ||
| padding-bottom: 75px; | ||
| background-color: #242424; | ||
| } | ||
| .App-logo { | ||
| pointer-events: none; | ||
| width: 200px; | ||
| height: 100px; | ||
| } | ||
| .App-container { | ||
| min-height: 100vh; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| font-size: calc(10px + 2vmin); | ||
| color: white; | ||
| } | ||
| .wallet-follower { | ||
| margin-top: 10px; | ||
| width: 100%; | ||
| } | ||
| .action-buttons button { | ||
| margin-left: 10px; | ||
| } | ||
| .action-buttons { | ||
| margin-bottom: 20px; | ||
| } | ||
| @media only screen and (max-width: 510px) { | ||
| .action-buttons .logged-in { | ||
| display: grid; | ||
| } | ||
| .action-buttons button { | ||
| margin-bottom: 10px; | ||
| } | ||
| } | ||
| button { | ||
| background: linear-gradient(to bottom, #f7a2c6 0%, #ea166f 2px, #bc1159 100%); | ||
| color: #fff; | ||
| box-sizing: border-box; | ||
| position: relative; | ||
| -webkit-user-select: none; | ||
| -moz-user-select: none; | ||
| -ms-user-select: none; | ||
| user-select: none; | ||
| cursor: pointer; | ||
| outline: none; | ||
| border: none; | ||
| -webkit-tap-highlight-color: transparent; | ||
| display: inline-block; | ||
| white-space: nowrap; | ||
| text-decoration: none; | ||
| vertical-align: baseline; | ||
| text-align: center; | ||
| color: #2c3e50; | ||
| margin-top: 60px; | ||
| margin: 0; | ||
| min-width: 64px; | ||
| line-height: 36px; | ||
| padding: 0 16px; | ||
| border-radius: 4px; | ||
| overflow: visible; | ||
| transform: translate3d(0, 0, 0); | ||
| transition: background 400ms cubic-bezier(0.25, 0.8, 0.25, 1), | ||
| box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); | ||
| } | ||
| </style> |
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file was deleted.
Oops, something went wrong.
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,46 @@ | ||
| <template> | ||
| <div className="logged-in"> | ||
| <button @click="signAMessage">Sign message</button> | ||
| <button @click="sendSignedTransaction"> | ||
| Send signed transaction | ||
| </button> | ||
| <button @click="openKycProcess">Start KYC</button> | ||
| <button @click="logout">Logout</button> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { | ||
| logout, | ||
| openKycProcess, | ||
| sendTransaction, | ||
| signAMessage, | ||
| } from '../services/wallet-service'; | ||
| export default { | ||
| name: 'LoggedInActions', | ||
| methods: { | ||
| async signAMessage() { | ||
| const signature = await signAMessage('TESTME'); | ||
| console.log('Sign message complete. sig -', signature); | ||
| }, | ||
| async sendSignedTransaction() { | ||
| const signature = await sendTransaction({ | ||
| to: '0x45Cd08334aeedd8a06265B2Ae302E3597d8fAA28', | ||
| value: '0x00', // 0x38d7ea4c68000 if you want to add some value 0.002 ETH | ||
| }); | ||
| console.log('Send signed transaction complete. sig -', signature); | ||
| }, | ||
| logout() { | ||
| logout(); | ||
| }, | ||
| async openKycProcess() { | ||
| await openKycProcess(); | ||
| }, | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <!-- Add "scoped" attribute to limit CSS to this component only --> | ||
| <style scoped></style> |
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,21 @@ | ||
| <template> | ||
| <div className="logged-out"> | ||
| <button @click="login">Login</button> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { login } from '../services/wallet-service'; | ||
| export default { | ||
| name: 'LoggedOutActions', | ||
| methods: { | ||
| login() { | ||
| login(); | ||
| }, | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <!-- Add "scoped" attribute to limit CSS to this component only --> | ||
| <style scoped></style> |
Oops, something went wrong.