Skip to content

Commit

Permalink
feat: Wallet account view 4 (#678)
Browse files Browse the repository at this point in the history
Co-authored-by: Michele F. <michele-franchi@users.noreply.github.com>
  • Loading branch information
janmichek and michele-franchi authored Jul 23, 2024
1 parent 36d1f43 commit f211ebc
Show file tree
Hide file tree
Showing 20 changed files with 1,238 additions and 1,803 deletions.
42 changes: 19 additions & 23 deletions nuxt.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,56 +6,51 @@ import {sentryVitePlugin} from '@sentry/vite-plugin'
export default defineNuxtConfig({
srcDir: './src',
css: ['@/assets/styles/main.css'],

devServer: {
port: 8080,
},

nitro: {
routeRules: {
"/proxy/avatar/**": {proxy: 'https://avatars.z52da5wt.xyz/**', cors: true,},
'/proxy/nodes': {proxy: 'http://138.68.22.27:3113/v2/debug/network', cors: true},
'/proxy/gate': {proxy: 'https://api.gateio.ws/api/v4/spot/tickers?currency_pair=AE_USDT', cors: true},
'/proxy/mexc': {proxy: 'https://api.mexc.com/api/v3/ticker/24hr?symbol=AEUSDT', cors: true},
'/proxy/coinw': {proxy: 'https://api.coinw.com/api/v1/public?command=returnTicker', cors: true},
},
},

modules: [
'@pinia/nuxt',
'@nuxtjs/plausible',
'nuxt-monaco-editor',
'nuxt-booster',
],

imports: {
dirs: ['./stores'],
},

plausible: {
apiHost: 'https://plausible.dev.service.aepps.com',
trackLocalhost: false,
},

appConfig: {
APP_VERSION: process.env.APP_VERSION,
},

runtimeConfig: {
public: {
SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,
SENTRY_DSN: process.env.SENTRY_DSN,
APP_DOMAIN: process.env.APP_DOMAIN,
MIDDLEWARE_URL: process.env.MIDDLEWARE_URL,
NODE_URL: process.env.NODE_URL,
WEBSOCKET_URL: process.env.WEBSOCKET_URL,
DEX_BACKEND_URL: process.env.DEX_BACKEND_URL,
NETWORK_NAME: process.env.NETWORK_NAME,
ALTERNATIVE_NETWORK_URL: process.env.ALTERNATIVE_NETWORK_URL,
ALTERNATIVE_NETWORK_NAME: process.env.ALTERNATIVE_NETWORK_NAME,
AE_TOKEN_ID: process.env.AE_TOKEN_ID,
DEBUG_MODE: process.env.DEBUG_MODE,
CONTRACT_VERIFICATION_SERVICE_URL: process.env.CONTRACT_VERIFICATION_SERVICE_URL,
SH_DEX_CONTRACTS: process.env.SH_DEX_CONTRACTS?.split(';'),
SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,
SENTRY_DSN: process.env.SENTRY_DSN,
APP_DOMAIN: process.env.APP_DOMAIN,
MIDDLEWARE_URL: process.env.MIDDLEWARE_URL,
NODE_URL: process.env.NODE_URL,
WEBSOCKET_URL: process.env.WEBSOCKET_URL,
DEX_BACKEND_URL: process.env.DEX_BACKEND_URL,
NETWORK_NAME: process.env.NETWORK_NAME,
NETWORK_ID: process.env.NETWORK_ID,
ALTERNATIVE_NETWORK_URL: process.env.ALTERNATIVE_NETWORK_URL,
ALTERNATIVE_NETWORK_NAME: process.env.ALTERNATIVE_NETWORK_NAME,
AE_TOKEN_ID: process.env.AE_TOKEN_ID,
DEBUG_MODE: process.env.DEBUG_MODE,
CONTRACT_VERIFICATION_SERVICE_URL: process.env.CONTRACT_VERIFICATION_SERVICE_URL,
SH_DEX_CONTRACTS: process.env.SH_DEX_CONTRACTS?.split(';'),
},
},

Expand All @@ -70,9 +65,7 @@ export default defineNuxtConfig({
'postcss-nested': {},
},
},

sourcemap: true,

vite: {
build: {target: 'es2020'},
optimizeDeps: {
Expand All @@ -97,6 +90,7 @@ export default defineNuxtConfig({
transformAssetUrls: false,
})


return `${code}\nexport default { render: render }`
},
},
Expand All @@ -122,5 +116,7 @@ export default defineNuxtConfig({
},
},


compatibilityDate: '2024-07-16',

})
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@
},
"dependencies": {
"@aeternity/aepp-sdk": "^13.3.2",
"@download/blockies": "^1.0.3",
"@sentry/tracing": "^7.114.0",
"@sentry/vite-plugin": "^2.21.1",
"@sentry/vue": "^8.17.0",
Expand Down
2 changes: 1 addition & 1 deletion src/assets/styles/elements/_table.css
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ td {
vertical-align: middle;

@media (--desktop) {
padding: 10px var(--space-0) var(--space-1);
padding: 10px var(--space-0) var(--space-1) 0;
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/AppButton.vue
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ defineProps({
text-decoration: none;
letter-spacing: 0.015em;
padding: var(--space-0) var(--space-1);
padding: var(--space-1);
border-radius: 4px;
Expand Down
6 changes: 4 additions & 2 deletions src/components/AppDropdown.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<template>
<VMenu placement="bottom">
<slot/>
<VMenu placement="bottom">
<span>
<slot/>
</span>

<template #popper>
<slot name="menu"/>
Expand Down
26 changes: 6 additions & 20 deletions src/components/AppIdenticon.vue
Original file line number Diff line number Diff line change
@@ -1,34 +1,20 @@
<template>
<canvas
ref="identicon"
class="app-identicon"/>
<img
:src="`/proxy/avatar/${hash}`"
class="identicon">
</template>

<script setup>
import { renderIcon } from '@download/blockies'
import { ref } from 'vue'
const props = defineProps({
id: {
defineProps({
hash: {
type: String,
required: true,
},
})
onMounted(render)
const identicon = ref()
function render() {
renderIcon(
{ seed: props.id },
identicon.value,
)
}
</script>

<style scoped>
.app-identicon {
.identicon {
display: inline-block;
border-radius: 50%;
}
Expand Down
26 changes: 11 additions & 15 deletions src/components/AppTooltip.vue
Original file line number Diff line number Diff line change
Expand Up @@ -41,23 +41,19 @@ defineProps({
.v-popper {
display: inline-block;
&__popper {
&.v-popper--theme-tooltip {
.v-popper__inner {
margin: 0 var(--space-2);
padding: var(--space-3);
background: var(--color-midnight);
color: var(--color-white);
border: none;
word-break: break-word;
/* stylelint-disable max-nesting-depth */
/* as it is 3rd party component */
@media (--desktop) {
word-break: normal;
}
&__popper.v-popper--theme-tooltip {
.v-popper__inner {
margin: 0 var(--space-2);
padding: var(--space-3);
background: var(--color-midnight);
color: var(--color-white);
border: none;
word-break: break-word;
@media (--desktop) {
word-break: normal;
}
}
}
}
</style>
2 changes: 2 additions & 0 deletions src/components/TheHeader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@
:class="[
'header__network-select',
{ 'header__network-select--open': isMobileMenuOpen }]"/>

<the-wallet-account-controls class="u-hidden-mobile"/>
</div>
<div
v-if="isSyncing"
Expand Down
63 changes: 63 additions & 0 deletions src/components/TheWalletAccountControls.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<template>
<app-dropdown v-if="status === 'connected'">
<div class="wallet-account-controls">
<app-identicon
:hash="aeSdk.address"
class="wallet-account-controls__identicon"/>
<app-link
class="wallet-account-controls__link"
to="/wallet">
{{ formatEllipseHash(aeSdk.address) }}
</app-link>
</div>
<template #menu>
<app-button @click="disconnectWallet">
Disconnect Wallet
</app-button>
</template>
</app-dropdown>

<app-button
v-else
class="wallet-account-controls__button"
to="/wallet">
Connect Wallet
</app-button>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { formatEllipseHash } from '@/utils/format'
import { useWalletStore } from '@/stores/wallet'
const { go } = useRouter()
const walletStore = useWalletStore()
const { aeSdk, status } = storeToRefs(walletStore)
const { disconnect } = walletStore
function disconnectWallet() {
disconnect()
go()
}
</script>

<style scoped>
.wallet-account-controls {
display: flex;
align-items: center;
&__identicon {
margin-right: var(--space-1);
width: 32px;
}
&__link {
font-family: var(--font-monospaced);
font-size: 13px;
}
&__button {
color: var(--color-white) !important;
}
}
</style>
2 changes: 1 addition & 1 deletion src/components/TokenSymbolIcon.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

<app-identicon
v-else
:id="contractId"/>
:hash="contractId"/>
</template>
<script setup>
import { useRuntimeConfig } from 'nuxt/app'
Expand Down
98 changes: 98 additions & 0 deletions src/components/WalletAccountPanel.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<template>
<account-details-panel
v-if="accountDetails"
class="wallet-account-panel__account-details-panel"
:account-details="accountDetails"/>

<client-only>
<app-tabs
v-if="isTabsVisible"
v-model="activeTabIndex">
<app-tab title="Activities">
<account-activities-panel/>
</app-tab>
<app-tab title="Transactions">
<account-transactions-panel/>
</app-tab>
<app-tab title="AENS Names">
<account-names-panel/>
</app-tab>
<app-tab
title="Tokens"
:is-preselected="isTokensTabSelected">
<account-tokens-panel/>
</app-tab>
</app-tabs>
</client-only>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'nuxt/app'
import { useWalletStore } from '@/stores/wallet'
import { useAccountStore } from '@/stores/accountDetails'
import { isDesktop } from '@/utils/screen'
const walletStore = useWalletStore()
const accountStore = useAccountStore()
const { aeSdk } = storeToRefs(walletStore)
const { accountDetails, accountTokens } = storeToRefs(accountStore)
const { fetchAccount } = accountStore
const TAB_KEYS = ['activities', 'transactions', 'aens-names', 'tokens']
const { push, replace } = useRouter()
const route = useRoute()
const isTabsVisible = computed(() => process.client &&
((accountDetails.value && !accountDetails.value?.notExistent) ||
!!accountTokens.value?.data.length))
const isTokensTabSelected = computed(() => process.client &&
accountDetails.value?.notExistent &&
!!accountTokens.value?.data.length)
const activeTabIndex = computed({
get() {
const { type: activeTabName } = route.query
if (activeTabName === undefined) {
return 0
}
return TAB_KEYS.indexOf(activeTabName)
},
set(index) {
const newRoute = {
query: {
type: TAB_KEYS[index],
},
}
if (activeTabIndex.value === index) {
// if navigating back
return replace(newRoute)
}
return push(newRoute)
},
})
if (process.client) {
const limit = isDesktop() ? null : 3
await fetchAccount(aeSdk.value.address, { limit })
watch(() => aeSdk.value.address, async() => {
await fetchAccount(aeSdk.value.address, { limit })
})
}
</script>
<style scoped>
.wallet-account-panel__account-details-panel {
margin-bottom: var(--space-4);
@media (--desktop) {
margin-bottom: var(--space-6);
}
}
</style>
Loading

0 comments on commit f211ebc

Please sign in to comment.