Skip to content

Commit

Permalink
feat: moved wallet connection feature from staking to global accessib…
Browse files Browse the repository at this point in the history 
…le component (#498) (#762)

Signed-off-by: Logan Nguyen <[email protected]>
Signed-off-by: Simon Viénot <[email protected]>
Co-authored-by: Simon Viénot <[email protected]>
  • Loading branch information
@quiet-node @svienot
quiet-node and svienot authored Nov 22, 2023
1 parent 11ba930 commit 7c8195a
Show file tree
Hide file tree
Showing 12 changed files with 519 additions and 115 deletions.
14 changes: 6 additions & 8 deletions src/assets/styles/explorer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -265,18 +265,12 @@ body {
//

#drop-down-menu .o-sel {
height: 44.5px;
height: 40px;
font-weight: bold;
color: $h-highlight-color;
border-color: $h-highlight-color;
background-color: $h-page-background-color;
border-width: 0.5px;
border-top-width: 0;
padding-top: 20px;
padding-bottom: 7px;
}
#drop-down-menu .o-sel-arrow {
background-position: calc(100% - 7px) calc(100% - 10px);
}
#mobile-drop-down-menu .o-sel {
height: 44.5px;
Expand All @@ -293,6 +287,10 @@ body {
#mobile-drop-down-menu .o-sel-arrow {
background-position: calc(100% - 13px) calc(100% - 16px);
}
#drop-down-menu .h-is-navbar-item:focus
{
outline: none;
}
.button.h-is-navbar-item {
padding-top: 28px;
padding-bottom: 16px;
Expand Down Expand Up @@ -334,7 +332,7 @@ body {
padding-right: 0.4em;
}
.button.h-is-navbar-item.is-ghost.is-first {
padding-left: 2em;
padding-left: 0;
}
.button.h-is-navbar-item.is-ghost.is-last {
padding-right: 0;
Expand Down
4 changes: 2 additions & 2 deletions src/components/SearchBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,14 @@
<form data-cy="searchBar" id="searchBar" class="control is-flex" action="" v-on:submit.prevent="performSearch">
<input
class="input has-text-white h-is-navbar-item"
style="z-index: 1;"
style="z-index: 1; height: 40px"
type="text"
placeholder="Search accounts, transactions, tokens, contracts and topics"
v-model="searchedId"
v-bind:disabled="searchInputDisabled"
ref="search-input"
/>
<button class="button is-dark" type="submit" value="searchBar" style="border-color: white; border-left: none; height: 35px; z-index: 0; outline: none">
<button class="button is-dark" type="submit" value="searchBar" style="border-color: white; border-left: none; height: 40px; z-index: 0; outline: none">
<i v-bind:class="searchButtonIconStyle"/>
</button>
</form>
Expand Down
260 changes: 224 additions & 36 deletions src/components/TopNavBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,27 +52,29 @@
</div>

<div v-else class="is-flex is-justify-content-space-between is-align-items-flex-end">
<div class="is-inline-flex is-align-items-center is-flex-grow-0 is-flex-shrink-0 mr-3">
<WalletChooser v-model:show-dialog="showWalletChooser" v-on:choose-wallet="handleChooseWallet"/>

<ProgressDialog v-model:show-dialog="showProgressDialog"
:mode="progressDialogMode"
:main-message="progressMainMessage"
:extra-message="progressExtraMessage"
:extra-transaction-id="progressExtraTransactionId"
:show-spinner="showProgressSpinner"
>
<template v-slot:dialogTitle>
<span class="h-is-primary-title">{{ progressDialogTitle }}</span>
</template>
</ProgressDialog>

<div class="is-inline-flex is-align-items-center is-flex-grow-0 is-flex-shrink-0 mr-3">
<router-link :to="routeManager.makeRouteToMainDashboard()">
<img id="product-logo" alt="Product Logo" class="image" src="@/assets/branding/brand-product-logo.png">
</router-link>
<AxiosStatus/>
</div>

<div class="is-flex-grow-0 is-flex-shrink-0 is-flex is-flex-direction-column ml-4">
<div class="is-flex mb-3 is-align-items-baseline">

<div id="drop-down-menu">
<o-field>
<o-select v-model="selectedNetwork" class="h-is-navbar-item" style="outline: none">
<option v-for="network in networkEntries" :key="network.name" :value="network.name">
{{ network.displayName }}
</option>
</o-select>
</o-field>
</div>

<div class="is-flex-grow-1 px-2"/>

<div class="is-flex mb-3 is-align-items-baseline is-justify-content-space-between">
<router-link :to="routeManager.makeRouteToMainDashboard()"
id="dashboard-menu-item"
class="button is-ghost is-first h-is-navbar-item h-is-dense"
Expand Down Expand Up @@ -103,7 +105,55 @@
class="button is-ghost is-last h-is-navbar-item h-is-dense"
:class="{ 'is-rimmed': isBlocksRoute}">Blocks</router-link>
</div>
<SearchBar style="margin-top: 4px"/>

<div id="navbar-grid">
<div id="search-bar">
<SearchBar/>
</div>

<div id="drop-down-menu">
<o-field>
<o-select v-model="selectedNetwork" class="h-is-navbar-item">
<option v-for="network in networkEntries" :key="network.name" :value="network.name">
{{ network.displayName }}
</option>
</o-select>
</o-field>
</div>

<div id="connect-button">
<button v-if="!connected" :disabled="connecting" id="connectWalletButton" class="button is-white is-small" @click="chooseWallet" style="outline: none; height: 40px; width: 100%; font-size: 0.8rem;">
{{ connecting ? "Connecting..." : "CONNECT WALLET..." }}
</button>

<div v-else @click="showWalletInfo = !showWalletInfo" id="walletInfoBanner" class="is-flex is-align-items-center" style="outline: none; height: 40px; width: 100%; font-size: 0.9rem; border: 0.5px solid white; display: flex; justify-content: space-between; cursor: pointer;">
<figure style="width: 50px; height: 100%; display: flex; align-items: center; margin-left: 0.15rem;">
<img :src="walletIconURL ?? undefined" alt="wallet logo" style="object-fit: contain; aspect-ratio: 3/2;display: flex; height: 90%;">
</figure>

<p>
{{ accountId }}
</p>

<div class="is-flex is-align-items-center" style="width: 30px; justify-content: center;">
<i v-if="!showWalletInfo" class="fas fa-solid fa-angle-down is-flex is-align-items-center"/>
<i v-else class="fas fa-solid fa-angle-up is-flex is-align-items-center"/>
</div>

</div>
</div>

<WalletInfo
:connected="connected"
:accountIds="accountIds"
:showWalletInfo="showWalletInfo"
:accountId="accountId || undefined"
:walletIconURL="walletIconURL || undefined"
@wallet-disconnect="disconnectFromWallet"
@change-account="handleChangeAccount"
/>

</div>
</div>

</div>
Expand All @@ -116,15 +166,20 @@

<script lang="ts">

import {defineComponent, inject, ref} from "vue";
import {routeManager} from "@/router";
import {routeManager, walletManager} from "@/router";
import SearchBar from "@/components/SearchBar.vue";
import AxiosStatus from "@/components/AxiosStatus.vue";
import {networkRegistry} from "@/schemas/NetworkRegistry";
import WalletChooser from "@/components/staking/WalletChooser.vue";
import { WalletDriver } from '@/utils/wallet/WalletDriver';
import { WalletDriverError } from '@/utils/wallet/WalletDriverError';
import ProgressDialog, { Mode } from './staking/ProgressDialog.vue';
import {defineComponent, inject, ref} from "vue";
import WalletInfo from '@/components/wallet/WalletInfo.vue'

export default defineComponent({
name: "TopNavBar",
components: {AxiosStatus, SearchBar},
components: {AxiosStatus, SearchBar, WalletChooser, ProgressDialog, WalletInfo},

setup() {
const isSmallScreen = inject('isSmallScreen', true)
Expand All @@ -137,27 +192,109 @@ export default defineComponent({

const isMobileMenuOpen = ref(false)

const showWalletChooser = ref(false)
const chooseWallet = () => {
showWalletChooser.value = true
}

const connecting = ref(false)
const walletIconURL = ref("")
const showWalletInfo = ref(false)
const showProgressDialog = ref(false)
const showProgressSpinner = ref(false)
const progressDialogMode = ref(Mode.Busy)
const progressDialogTitle = ref<string|null>(null)
const progressMainMessage = ref<string|null>(null)
const progressExtraMessage = ref<string|null>(null)
const progressExtraTransactionId = ref<string|null>(null)


//
// handleChooseWallet
//
const handleChooseWallet = (wallet: WalletDriver) => {
walletManager.setActiveDriver(wallet)
connecting.value = true
walletManager
.connect()
.catch((reason) => {
console.warn("Failed to connect wallet - reason:" + reason.toString())
showProgressDialog.value = true
progressDialogMode.value = Mode.Error
progressDialogTitle.value = "Could not connect wallet"
showProgressSpinner.value = false
progressExtraTransactionId.value = null
if (reason instanceof WalletDriverError) {
progressMainMessage.value = reason.message
progressExtraMessage.value = reason.extra
} else {
progressMainMessage.value = "Unexpected error"
progressExtraMessage.value = JSON.stringify(reason)
}
})
.finally(() => connecting.value = false)
walletIconURL.value = walletManager.getActiveDriver().iconURL || ""
}

//
// handleChangeAccount
//
const handleChangeAccount = (chosenAccountId: string) => {
walletManager.changeAccount(chosenAccountId)
}

//
// disconnectFromWallet
//
const disconnectFromWallet = () => {
walletManager
.disconnect()
.finally(() => {
connecting.value = false;
showWalletInfo.value = false;
})
}


return {
isSmallScreen,
isMediumScreen,
isTouchDevice,
buildTime,
connecting,
productName,
routeManager,
chooseWallet,
walletIconURL,
isSmallScreen,
isTouchDevice,
isMediumScreen,
showWalletInfo,
isStakingEnabled,
isMobileMenuOpen,
networkEntries: networkRegistry.entries,
selectedNetwork: routeManager.selectedNetwork,
showWalletChooser,
handleChooseWallet,
showProgressDialog,
progressDialogMode,
progressMainMessage,
showProgressSpinner,
progressDialogTitle,
handleChangeAccount,
progressExtraMessage,
disconnectFromWallet,
progressExtraTransactionId,
name: routeManager.currentRoute,
isDashboardRoute: routeManager.isDashboardRoute,
isTransactionRoute: routeManager.isTransactionRoute,
accountId: walletManager.accountId,
connected: walletManager.connected,
accountIds: walletManager.accountIds,
isNodeRoute: routeManager.isNodeRoute,
isTokenRoute: routeManager.isTokenRoute,
isTopicRoute: routeManager.isTopicRoute,
isContractRoute: routeManager.isContractRoute,
isAccountRoute: routeManager.isAccountRoute,
isNodeRoute: routeManager.isNodeRoute,
isStakingRoute: routeManager.isStakingRoute,
networkEntries: networkRegistry.entries,
isBlocksRoute: routeManager.isBlocksRoute,
routeManager,
isStakingRoute: routeManager.isStakingRoute,
isAccountRoute: routeManager.isAccountRoute,
isContractRoute: routeManager.isContractRoute,
selectedNetwork: routeManager.selectedNetwork,
isDashboardRoute: routeManager.isDashboardRoute,
isTransactionRoute: routeManager.isTransactionRoute,
}
},
})
Expand All @@ -170,16 +307,67 @@ export default defineComponent({

<style>

@media (min-width: 1240px) {
@media (min-width: 1450px) {
#product-logo {
max-width: 242px;
}
#navbar-grid {
position:relative;
display:grid;
column-gap:1.2rem;
grid-template-columns:repeat(20, minmax(0, 35px));
}
#search-bar {
grid-column: span 13;
}
#drop-down-menu {
grid-column: span 3;
}
#connect-button {
grid-column: span 4;
}
}

@media (max-width: 1239px) {
#product-logo {
max-width: 220px;
}
@media (max-width: 1449px) {
#product-logo {
max-width: 220px;
}
#navbar-grid {
position:relative;
display:grid;
column-gap:1.2rem;
grid-template-columns:repeat(20, minmax(0, 25px));
}
#search-bar {
grid-column: span 12;
}
#drop-down-menu {
grid-column: span 4;
}
#connect-button {
grid-column: span 4;
}
}

@media (max-width: 1249px) {
#product-logo {
max-width: 200px;
}
#navbar-grid {
position:relative;
display:grid;
column-gap:1.2rem;
grid-template-columns:repeat(20, minmax(0, 18px));
}
#search-bar {
grid-column: span 10;
}
#drop-down-menu {
grid-column: span 5;
}
#connect-button {
grid-column: span 5;
}
}

</style>
3 changes: 1 addition & 2 deletions src/components/staking/WalletChooser.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
<div v-for="d in drivers" :key="d.name">
<a :id="d.name" @click="chosenWallet=d" @dblclick="handleConnect">
<figure :class="{'selected':isSelected(d)}" class="h-chooser-figure my-4 mr-6">
<img :src="d.iconURL ?? undefined" alt="wallet logo" class="h-chooser-img">
<img :src="d.logoURL ?? undefined" alt="wallet logo" class="h-chooser-img">
</figure>
</a>
</div>
Expand All @@ -51,7 +51,6 @@
<button id="connectButton" :disabled="!chosenWallet" class="button is-info is-small ml-4" @click="handleConnect">CONNECT
</button>
</div>

</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 7c8195a

Please sign in to comment.