Skip to content

Commit

Permalink
add network selector (beethovenxfi#128)
Browse files Browse the repository at this point in the history
  • Loading branch information
groninge01 authored Jun 2, 2022
1 parent ab58187 commit 3a0a217
Showing 4 changed files with 29 additions and 30 deletions.
1 change: 1 addition & 0 deletions src/assets/images/icons/networks/fantom.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/assets/images/icons/networks/optimism.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 5 additions & 1 deletion src/components/navs/AppNav/AppNavActions.vue
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
<template>
<div>
<div v-if="account" class="flex items-center">
<AppNavNetworkSelect />
<AppNavActivityBtn />
<AppNavClaimBtn />
<AppNavBeets />
<AppNavAccountBtn />
</div>
<div v-else class="flex">
<AppNavNetworkSelect />
<div class="mr-2">
<AppNavBeets />
</div>
@@ -31,6 +33,7 @@ import AppNavActivityBtn from './AppNavActivityBtn/AppNavActivityBtn.vue';
import AppNavAccountBtn from './AppNavAccountBtn.vue';
import AppNavClaimBtn from './AppNavClaimBtn.vue';
import AppNavBeets from './AppNavBeets.vue';
import AppNavNetworkSelect from './AppNavNetworkSelect.vue';
export default defineComponent({
name: 'AppNavActions',
@@ -39,7 +42,8 @@ export default defineComponent({
AppNavBeets,
AppNavAccountBtn,
AppNavClaimBtn,
AppNavActivityBtn
AppNavActivityBtn,
AppNavNetworkSelect
},
setup() {
48 changes: 19 additions & 29 deletions src/components/navs/AppNav/AppNavNetworkSelect.vue
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
<template>
<BalPopover align="left" no-pad>
<BalPopover align="right" no-pad>
<template v-slot:activator>
<BalBtn
color="white"
color="transparent"
flat
class="text-base"
:size="upToLargeBreakpoint ? 'md' : 'sm'"
class="ml-4"
:circle="upToLargeBreakpoint"
>
<img
:src="iconSrc(activeNetwork)"
:alt="activeNetwork.name"
class="w-5 h-5 rounded-full shadow-sm"
width="25"
/>
<span class="ml-2">
{{ activeNetwork.name }}
</span>
<BalIcon name="chevron-down" size="sm" class="ml-2" />
</BalBtn>
</template>
<div class="flex flex-col w-44 rounded-lg overflow-hidden">
@@ -70,31 +68,20 @@ export default defineComponent({
// DATA
const networks = [
{
id: 'ethereum',
name: 'Ethereum',
subdomain: 'app',
key: '1'
id: 'fantom',
name: 'Fantom',
subdomain: 'ftm',
key: '250'
},
{
id: 'polygon',
name: 'Polygon',
subdomain: 'polygon',
key: '137'
},
{
id: 'arbitrum',
name: 'Arbitrum',
subdomain: 'arbitrum',
key: '42161'
id: 'optimism',
name: 'Optimism',
subdomain: 'op',
key: '10'
}
];
const appNetworkSupported = networks
.map(network => network.key)
.includes(configService.network.key);
const activeNetwork = networks.find(network => {
if (!appNetworkSupported && network.id === 'ethereum') return true;
return isActive(network);
});
@@ -104,11 +91,14 @@ export default defineComponent({
}
function appUrl(network: Network): string {
return `https://${network.subdomain}.balancer.fi`;
if (network.id === 'fantom') {
return `https://beets.fi`;
}
return `https://${network.subdomain}.beets.fi`;
}
function isActive(network: Network): boolean {
if (!appNetworkSupported && network.id === 'ethereum') return true;
return configService.network.key === network.key;
}

0 comments on commit 3a0a217

Please sign in to comment.