Skip to content

Commit 46e548a

Browse files
authored
test: updated metadata as per network name (#689)
* test: update metadata * test: update metadata (2) * fix: image path for astar and shiden logos * fix: define a function to return the metadata * fix: metadata
1 parent a946ee1 commit 46e548a

15 files changed

Lines changed: 176 additions & 43 deletions

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "astar-portal",
33
"version": "0.0.16",
4-
"description": "Your one-stop platform for the Astar ecosystem - Wallet / Staking / Bridging",
4+
"description": "Astar Portal is the hub of a multi-chain, one-stop platform for managing assets and dApp Staking - build2earn protocol.",
55
"productName": "Astar Portal - Astar & Shiden Network",
66
"author": "Astar Network",
77
"private": true,

quasar.conf.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,8 @@ module.exports = configure(function (ctx) {
156156
manifest: {
157157
name: 'Astar Portal - Astar & Shiden Network',
158158
short_name: 'Astar Portal',
159-
description: 'Your one-stop platform for the Astar ecosystem - Wallet / Staking / Bridging',
159+
description:
160+
'Astar Portal is the hub of a multi-chain, one-stop platform for managing assets and dApp Staking - build2earn protocol.',
160161
display: 'standalone',
161162
orientation: 'portrait',
162163
background_color: '#ffffff',

src/boot/api.ts

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { capitalize } from './../hooks/helper/common';
12
import { SubstrateAccount } from 'src/store/general/state';
23
import { ApiPromise } from '@polkadot/api';
34
import { keyring } from '@polkadot/ui-keyring';
@@ -7,9 +8,9 @@ import { connectApi } from 'src/config/api/polkadot/connectApi';
78
import { endpointKey, getProviderIndex, providerEndpoints } from 'src/config/chainEndpoints';
89
import { ASTAR_CHAIN } from 'src/config/chain';
910
import { LOCAL_STORAGE } from 'src/config/localStorage';
10-
import { opengraphMeta } from 'src/config/opengraph';
11+
import { opengraphMeta } from 'src/config/metadata';
1112
import { createAstarWeb3Instance, TNetworkId } from 'src/config/web3';
12-
import { objToArray, getRandomFromArray } from 'src/hooks/helper/common';
13+
import { objToArray } from 'src/hooks/helper/common';
1314
import { isMobileDevice } from 'src/hooks/helper/wallet';
1415
import { useChainInfo } from 'src/hooks/useChainInfo';
1516
import { useExtensions } from 'src/hooks/useExtensions';
@@ -65,17 +66,19 @@ export default boot(async ({ store }) => {
6566

6667
// set metadata header
6768
const favicon = providerEndpoints[Number(networkIdx.value)].defaultLogo;
69+
const displayName = providerEndpoints[Number(networkIdx.value)].displayName;
70+
const networkName = capitalize(providerEndpoints[Number(networkIdx.value)].networkAlias);
6871
useMeta({
6972
title: '',
70-
titleTemplate: (title) => `${title} | Astar Portal - Astar & Shiden Network`,
73+
titleTemplate: (title) => `${title} | ${networkName} Portal - ${displayName}`,
7174
htmlAttr: { lang: 'en' },
7275
link: {
7376
material: {
7477
rel: 'icon',
7578
href: favicon,
7679
},
7780
},
78-
meta: opengraphMeta,
81+
meta: opengraphMeta(displayName, networkName),
7982
});
8083
let { api } = await connectApi(endpoint, networkIdx.value, store);
8184
$api = api;

src/components/dapp-staking/StakingTop.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@ import OnChainData from './my-staking/OnChainData.vue';
3737
import TopMetric from './my-staking/TopMetric.vue';
3838
import AdsArea from './my-staking/AdsArea.vue';
3939
import BannerArea from './my-staking/BannerArea.vue';
40+
import { generateMeta } from 'src/config/metadata';
41+
import { Path } from 'src/router';
4042
4143
export default defineComponent({
4244
components: {
@@ -49,7 +51,7 @@ export default defineComponent({
4951
OnChainData,
5052
},
5153
setup() {
52-
useMeta({ title: 'Discover dApps' });
54+
useMeta(generateMeta(Path.Discover));
5355
const store = useStore();
5456
const { isReady } = usePageReady();
5557
useDispatchGetDapps();

src/config/chainEndpoints.ts

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,8 @@ export const providerEndpoints: ChainProvider[] = [
5353
evmChainId: '592',
5454
evmEndpoints: ['https://evm.astar.network', 'https://astar.api.onfinality.io/public'],
5555
faucetEndpoint: 'https://us-central1-facuet-bot.cloudfunctions.net/app/astar',
56-
// Todo: update the path to src/assets/img/chain/
5756
defaultLogo:
58-
'https://github.com/AstarNetwork/astar-apps/blob/main/src/assets/img/ic_astar.png?raw=true',
57+
'https://github.com/AstarNetwork/astar-apps/blob/main/src/assets/img/chain/astar.png?raw=true',
5958
},
6059
{
6160
networkAlias: 'shiden',
@@ -79,7 +78,7 @@ export const providerEndpoints: ChainProvider[] = [
7978
evmEndpoints: ['https://evm.shiden.astar.network', 'https://shiden.api.onfinality.io/public'],
8079
faucetEndpoint: 'https://us-central1-facuet-bot.cloudfunctions.net/app/shiden',
8180
defaultLogo:
82-
'https://github.com/AstarNetwork/astar-apps/blob/main/src/assets/img/ic_shiden.png?raw=true',
81+
'https://github.com/AstarNetwork/astar-apps/blob/main/src/assets/img/chain/shiden.png?raw=true',
8382
},
8483
{
8584
networkAlias: 'shibuya-testnet',
@@ -101,7 +100,7 @@ export const providerEndpoints: ChainProvider[] = [
101100
evmEndpoints: ['https://evm.shibuya.astar.network'],
102101
faucetEndpoint: 'https://us-central1-facuet-bot.cloudfunctions.net/app/shibuya',
103102
defaultLogo:
104-
'https://github.com/AstarNetwork/astar-apps/blob/main/src/assets/img/ic_shibuya.png?raw=true',
103+
'https://github.com/AstarNetwork/astar-apps/blob/main/src/assets/img/chain/shibuya.png?raw=true',
105104
xvmErcTransferContract: 'ZdNJsZUK96jGxr8iRfT8xHXUi5iQ7XwL9qbyJkADPdH7C1U',
106105
},
107106
{
@@ -118,7 +117,7 @@ export const providerEndpoints: ChainProvider[] = [
118117
evmEndpoints: ['http://127.0.0.1:9933'],
119118
faucetEndpoint: '',
120119
defaultLogo:
121-
'https://github.com/AstarNetwork/astar-apps/blob/main/src/assets/img/ic_shibuya.png?raw=true',
120+
'https://github.com/AstarNetwork/astar-apps/blob/main/src/assets/img/chain/shibuya.png?raw=true',
122121
// Memo: paste the contract addresses after deployed the contracts on the local network
123122
// xvmErcTransferContract: '',
124123
},
@@ -136,7 +135,7 @@ export const providerEndpoints: ChainProvider[] = [
136135
evmEndpoints: [''],
137136
faucetEndpoint: '',
138137
defaultLogo:
139-
'https://github.com/AstarNetwork/astar-apps/blob/main/src/assets/img/ic_shibuya.png?raw=true',
138+
'https://github.com/AstarNetwork/astar-apps/blob/main/src/assets/img/chain/shibuya.png?raw=true',
140139
},
141140
];
142141

src/config/metadata.ts

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import { providerEndpoints } from 'src/config/chainEndpoints';
2+
import { capitalize } from './../hooks/helper/common';
3+
import { LOCAL_STORAGE } from './localStorage';
4+
import { Path } from 'src/router';
5+
6+
interface MetaData {
7+
title: string;
8+
meta: {
9+
description: {
10+
name: string;
11+
content: string;
12+
};
13+
};
14+
}
15+
16+
export const opengraphMeta = (displayName: string, networkName: string) => {
17+
return {
18+
ogTitle: {
19+
property: 'og:title',
20+
template() {
21+
return `${networkName} Portal - ${displayName}`;
22+
},
23+
},
24+
ogDescription: {
25+
property: 'og:description',
26+
template() {
27+
return `Your one-stop platform for the ${networkName} ecosystem - Wallet / Staking / Bridging`;
28+
},
29+
},
30+
ogSiteName: {
31+
property: 'og:site_name',
32+
template() {
33+
return `${networkName} Portal`;
34+
},
35+
},
36+
};
37+
};
38+
39+
const networkIdx = localStorage.getItem(LOCAL_STORAGE.NETWORK_IDX);
40+
const currency = localStorage.getItem(LOCAL_STORAGE.DEFAULT_CURRENCY);
41+
42+
const networkName = capitalize(providerEndpoints[Number(networkIdx)].networkAlias);
43+
44+
export const meta = {
45+
title: {
46+
assets: {
47+
assets: 'Assets',
48+
transfer: 'Transfer',
49+
xvmTransfer: 'XVM Transfer',
50+
},
51+
dashboard: 'Dashboard',
52+
dappsStaking: {
53+
dappStaking: 'Dapp Staking',
54+
discoverDapps: 'Discover dApps',
55+
registerDapp: 'Register dApp',
56+
stake: 'Stake',
57+
},
58+
},
59+
description: {
60+
assets: `${networkName} Portal is the hub of multi-chain, one-stop platform for managing assets and dApp Staking - build2earn protocol. Asset page provides seem less cross-chain transfers using Polkadot unique technology XCM as well as newly invented Cross Virtual Machine technology XVM.`,
61+
dappsStaking: `${networkName} dApp Staking is a unique protocol that designed to support builders by providing basic income. Build2Earn program sustains the early stage of builders as well as rewarding the successful projects`,
62+
dashboard: `${networkName} Portal is the hub of multi-chain, one-stop platform for managing assets and dApp Staking - build2earn protocol. Dashboard page provides statics of ${currency}, blocks of the ${networkName} Network and TVL.`,
63+
},
64+
};
65+
66+
const buildMeta = ({ title, content }: { title: string; content: string }) => {
67+
return {
68+
title,
69+
meta: {
70+
description: {
71+
name: 'description',
72+
content,
73+
},
74+
},
75+
};
76+
};
77+
78+
export const generateMeta = (path: Path): MetaData => {
79+
switch (path) {
80+
case Path.Assets:
81+
return buildMeta({
82+
title: meta.title.assets.assets,
83+
content: meta.description.assets,
84+
});
85+
86+
case Path.Transfer:
87+
return buildMeta({
88+
title: meta.title.assets.transfer,
89+
content: meta.description.assets,
90+
});
91+
92+
case Path.XvmTransfer:
93+
return buildMeta({
94+
title: meta.title.assets.xvmTransfer,
95+
content: meta.description.assets,
96+
});
97+
98+
case Path.Discover:
99+
return buildMeta({
100+
title: meta.title.dappsStaking.discoverDapps,
101+
content: meta.description.dappsStaking,
102+
});
103+
104+
case Path.Dapp:
105+
return buildMeta({
106+
title: meta.title.dappsStaking.dappStaking,
107+
content: meta.description.dappsStaking,
108+
});
109+
110+
case Path.Dashboard:
111+
return buildMeta({
112+
title: meta.title.dashboard,
113+
content: meta.description.dashboard,
114+
});
115+
116+
case Path.Register:
117+
return buildMeta({
118+
title: meta.title.dappsStaking.registerDapp,
119+
content: meta.description.dappsStaking,
120+
});
121+
122+
case Path.Stake:
123+
return buildMeta({
124+
title: meta.title.dappsStaking.stake,
125+
content: meta.description.dappsStaking,
126+
});
127+
128+
default:
129+
return buildMeta({
130+
title: meta.title.assets.assets,
131+
content: meta.description.assets,
132+
});
133+
}
134+
};

src/config/opengraph.ts

Lines changed: 0 additions & 20 deletions
This file was deleted.

src/index.template.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,13 @@
2727
<meta name="robots" content="index, follow" />
2828

2929
<!-- Open Graph Tags -->
30-
<meta property="og:title" content="Astar Portal - Astar & Shiden Network" />
30+
<!-- <meta property="og:title" content="Astar Portal - Astar & Shiden Network" /> -->
3131
<meta property="og:type" content="website" />
3232
<meta property="og:image" content="https://portal.astar.network/images/card-img.jpg" />
33-
<meta
33+
<!-- <meta
3434
property="og:description"
3535
content="Your one-stop platform for the Astar ecosystem - Wallet / Staking / Bridging"
36-
/>
36+
/> -->
3737
<meta property="og:locale" content="en-US" />
3838
<meta property="og:site_name" content="Astar Portal - Astar & Shiden Network" />
3939
<meta property="og:url" content="https://portal.astar.network" />

src/pages/AssetsPage.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,17 @@
88

99
<script lang="ts">
1010
import { useMeta } from 'quasar';
11+
import { generateMeta } from 'src/config/metadata';
1112
import { useAccount } from 'src/hooks';
13+
import { Path } from 'src/router';
1214
import { defineComponent } from 'vue';
1315
1416
// <div v-else /> Memo: To avoid not rendering anything when users go to other pages
1517
// Leaving comments on the `template` caused an unknown bug
1618
1719
export default defineComponent({
1820
setup() {
19-
useMeta({ title: 'Assets' });
21+
useMeta(generateMeta(Path.Assets));
2022
const { currentAccount } = useAccount();
2123
return { currentAccount };
2224
},

src/pages/DappPage.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,15 @@
66
<script lang="ts">
77
import { useMeta } from 'quasar';
88
import Dapp from 'src/components/dapp-staking/dapp/Dapp.vue';
9+
import { generateMeta } from 'src/config/metadata';
910
import { usePageReady } from 'src/hooks';
11+
import { Path } from 'src/router';
1012
import { defineComponent } from 'vue';
1113
1214
export default defineComponent({
1315
components: { Dapp },
1416
setup() {
15-
useMeta({ title: 'Dapp Staking' });
17+
useMeta(generateMeta(Path.Dapp));
1618
const { isReady } = usePageReady();
1719
return { isReady };
1820
},

0 commit comments

Comments
 (0)