Skip to content

Commit

Permalink
Merge pull request #1584 from aeternity/restore-browser-intro
Browse files Browse the repository at this point in the history
Restore browser's intro page
  • Loading branch information
davidyuk authored Feb 18, 2025
2 parents b6277aa + 322b2c4 commit 8fb9fe3
Show file tree
Hide file tree
Showing 28 changed files with 365 additions and 66 deletions.
1 change: 0 additions & 1 deletion .env
Original file line number Diff line number Diff line change
@@ -1,3 +1,2 @@
VUE_APP_BACKEND_URL=https://base-backend.prd.aepps.com
VUE_APP_VAPID_PUBLIC_KEY=BHkQhNWW2TKfKfxo7vAgXkZGcVOXGrjhIZJlN1hKp6abIjWJgO8FYPswXJ35XEuKw46O9yZ-8KmsZ4-TXNBePcw
VUE_APP_HOME_PAGE_URL=https://home.base.aepps.com
9 changes: 8 additions & 1 deletion src/components/AppShortcut.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<ButtonPlain v-bind="$attrs" class="app-shortcut" v-on="$listeners">
<img :src="icon" :alt="name" />
<img :class="{ iconNotPadded }" :src="icon" :alt="name" />
{{ name }}
</ButtonPlain>
</template>
Expand All @@ -14,6 +14,7 @@ export default {
props: {
name: { type: String, required: true },
icon: { type: String, default: DEFAULT_ICON },
iconNotPadded: Boolean,
},
};
</script>
Expand All @@ -31,11 +32,17 @@ export default {
overflow-wrap: break-word;
img {
box-sizing: border-box;
width: functions.rem(75px);
height: functions.rem(75px);
border-radius: functions.rem(18px);
box-shadow: 0 0 16px rgba(0, 33, 87, 0.15);
margin-bottom: 5px;
background: #fff;
&.iconNotPadded {
padding: functions.rem(10px);
}
}
}
</style>
1 change: 1 addition & 0 deletions src/lib/appsRegistry.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
["superhero.com", "governance.aeternity.com", "graffiti.aeternity.com", "faucet.aepps.com"]
5 changes: 4 additions & 1 deletion src/lib/storeErrorHandler.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import Vue from 'vue';

window.onerror = async function errorHandler() {
window.onerror = async function errorHandler(...args) {
if (document.getElementById('app').innerHTML) {
window.onerror = null;
return;
Expand All @@ -10,4 +10,7 @@ window.onerror = async function errorHandler() {
new Vue({
render: (h) => h(StoreLoadError),
}).$mount('#app');

// eslint-disable-next-line no-console
console.error('Unknown error', ...args);
};
1 change: 1 addition & 0 deletions src/locales/cn.json
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,7 @@

"list": {
"featured-guide": "<primary>精选</primary>",
"browse-guide": "浏览",
"bookmarked-guide": "Bookmarks",
"guide": "æpps <primary>浏览器</primary> (beta)",
"note": "将运行在æternity区块链上的æpps添加到这里",
Expand Down
1 change: 1 addition & 0 deletions src/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,7 @@

"list": {
"featured-guide": "<primary>Featured</primary>",
"browse-guide": "Browse",
"bookmarked-guide": "Bookmarks",
"guide": "æpps <primary>browser</primary> (beta)",
"note": "æpps running on the æternity blockchain will be added below.",
Expand Down
1 change: 1 addition & 0 deletions src/locales/es.json
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,7 @@

"list": {
"featured-guide": "<primary>æpps destacados</primary>",
"browse-guide": "Examinar æpps",
"bookmarked-guide": "Mis æpps",
"guide": "æpps <primary>explorador</primary> (beta)",
"note": "æpps que se ejecutan en la blockchain de æternity se agregarán a continuación",
Expand Down
6 changes: 0 additions & 6 deletions src/locales/keysUsedInOtherProjects.js

This file was deleted.

1 change: 1 addition & 0 deletions src/locales/ru.json
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,7 @@

"list": {
"featured-guide": "<primary>Избранное</primary>",
"browse-guide": "Просмотр",
"bookmarked-guide": "Закладки",
"guide": "æpps <primary>браузер</primary> (бета)",
"note": "æpps, работающие в блокчейне æternity, будут добавлены ниже.",
Expand Down
20 changes: 4 additions & 16 deletions src/pages/desktop/Apps.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,7 @@
</Note>

<div class="shortcuts">
<AppShortcut
v-for="(app, idx) in aeternityApps"
:key="idx"
v-bind="app"
:to="`https://${app.path}`"
/>
<AppShortcut v-for="(app, idx) in apps" :key="idx" v-bind="app" :to="`https://${app.host}`" />
</div>
</div>
</template>
Expand All @@ -23,21 +18,14 @@ import { fetchJson } from '../../store/utils';
import Guide from '../../components/Guide.vue';
import Note from '../../components/Note.vue';
import AppShortcut from '../../components/AppShortcut.vue';
import appsRegistry from '../../lib/appsRegistry';
export default {
components: { Guide, Note, AppShortcut },
data: () => ({ aeternityAppsPaths: [] }),
computed: mapState({
aeternityApps(state, getters) {
return this.aeternityAppsPaths.map((path) => ({
...getters['appsMetadata/get'](path),
path,
}));
},
apps: (state, getters) =>
appsRegistry.map((host) => ({ ...getters['appsMetadata/get'](host), host })),
}),
async mounted() {
this.aeternityAppsPaths = await fetchJson(`${process.env.VUE_APP_HOME_PAGE_URL}/apps.json`);
},
};
</script>

Expand Down
28 changes: 20 additions & 8 deletions src/pages/mobile/AppBrowser.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@
<header>
<UrlForm :current-url="url" @new-url="reload" />

<template v-if="path">
<ButtonPlain :to="{ name: 'app-browser' }">
<Home />
</ButtonPlain>
</template>
<ButtonPlain @click="toggleBookmarking">
<Component :is="bookmarked ? 'BookmarkFull' : 'Bookmark'" />
</ButtonPlain>
<ButtonPlain :to="{ name: 'app-list' }">
<Home />
</ButtonPlain>
<ButtonPlain ref="menuButton" @click="showMenu = true">
<More />
</ButtonPlain>
Expand Down Expand Up @@ -39,11 +40,12 @@
</template>

<script>
import { mapState } from 'vuex';
import BrowserWindowMessageConnection from '@aeternity/aepp-sdk/es/utils/aepp-wallet-communication/connection/browser-window-message';
import { PROTOCOLS_ALLOWED, PROTOCOL_DEFAULT } from '../../lib/constants';
import UrlForm from '../../components/mobile/UrlForm.vue';
import ButtonPlain from '../../components/ButtonPlain.vue';
import { Home, More, Reload } from '../../components/icons';
import { Bookmark, BookmarkFull, Home, More, Reload } from '../../components/icons';
import AeMenu from '../../components/AeMenu.vue';
import AeMenuItem from '../../components/AeMenuItem.vue';
import ProgressFake from '../../components/ProgressFake.vue';
Expand All @@ -53,6 +55,8 @@ export default {
components: {
UrlForm,
ButtonPlain,
Bookmark,
BookmarkFull,
Home,
More,
Reload,
Expand All @@ -70,17 +74,22 @@ export default {
},
computed: {
path() {
return this.$route.fullPath.replace(/\/browser\/?/, '');
return this.$route.fullPath.replace('/browser/', '');
},
url() {
const path = this.path || process.env.VUE_APP_HOME_PAGE_URL;
const path = this.path;
const url = new URL(/^\w+:\D+/.test(path) ? path : `${PROTOCOL_DEFAULT}//${path}`);
if (!PROTOCOLS_ALLOWED.includes(url.protocol)) url.protocol = PROTOCOL_DEFAULT;
return url.toString();
},
host() {
return new URL(this.url).host;
},
...mapState({
bookmarked({ apps }) {
return apps.some(({ host, bookmarked }) => host === this.host && bookmarked);
},
}),
},
async mounted() {
const sdk = await this.$store.state.sdk;
Expand Down Expand Up @@ -108,6 +117,9 @@ export default {
this.$refs.iframe.src += '';
this.$refs.iframe.focus();
},
toggleBookmarking() {
this.$store.commit('toggleAppBookmarking', this.host);
},
},
};
</script>
Expand Down
130 changes: 130 additions & 0 deletions src/pages/mobile/AppDetails.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
<template>
<Page
class="app-details"
fill="neutral"
:left-button-to="{ name: 'app-list' }"
left-button-icon-name="back"
>
<header>
<img v-if="app.icon" :src="app.icon" :alt="app.name" />
<div>
<Guide>
<em>{{ app.name }}</em>
</Guide>
<span v-if="app.author">
{{ $t('app.list.by') }}
<AeLink v-if="app.author_url" :to="app.author_url">
<!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
{{ app.author }} »
</AeLink>
<template v-else>{{ app.author }}</template>
</span>
</div>
</header>

<AeCard v-if="app.categories || app.networks || app.description" fill="maximum">
<p>
<span class="categories">{{ app.categories }}</span>
<span class="networks">{{ app.networks }}</span>
</p>
<p>{{ app.description }}</p>
</AeCard>

<AeButton fill="secondary" :to="`/browser/${app.host}`">
{{ $t('app.list.launch') }}
</AeButton>
</Page>
</template>

<script>
import { mapState } from 'vuex';
import { capitalize } from 'lodash-es';
import Page from '../../components/Page.vue';
import Guide from '../../components/Guide.vue';
import AeLink from '../../components/AeLink.vue';
import AeCard from '../../components/AeCard.vue';
import AeButton from '../../components/AeButton.vue';
export default {
components: {
Page,
Guide,
AeLink,
AeCard,
AeButton,
},
computed: {
host() {
return this.$route.fullPath.replace('/browser/details/', '');
},
...mapState({
app(state, getters) {
const app = getters['appsMetadata/get'](this.host);
return {
...app,
host: this.host,
categories: (app.categories ?? []).map((c) => capitalize(c)).join(', '),
networks: (app.aeternity_network_ids ?? [])
.map((id) => ({ ae_mainnet: 'Mainnet', ae_uat: 'Testnet' })[id] || id)
.join(' | '),
};
},
}),
},
};
</script>
<style lang="scss" scoped>
@use '../../styles/functions';
@use '../../styles/typography';
@use '../../styles/variables';
.app-details {
header {
display: flex;
> img {
width: functions.rem(48px);
height: functions.rem(48px);
margin-right: functions.rem(12px);
}
> div {
display: flex;
flex-direction: column;
justify-content: space-between;
.guide {
margin-bottom: 0;
}
span,
span a {
@extend %face-sans-s;
color: variables.$color-neutral-negative-1;
text-decoration: none;
}
}
}
.ae-card {
margin-bottom: functions.rem(24px);
padding: 0 functions.rem(16px);
@extend %face-sans-s;
color: variables.$color-neutral-negative-3;
span {
display: block;
}
.categories {
font-weight: 500;
}
.networks {
@extend %face-sans-xs;
color: variables.$color-neutral-negative-1;
}
}
}
</style>
Loading

0 comments on commit 8fb9fe3

Please sign in to comment.