diff --git a/packages/ui/components/Main.vue b/packages/ui/components/Main.vue index 0097119b..2b05adc8 100644 --- a/packages/ui/components/Main.vue +++ b/packages/ui/components/Main.vue @@ -28,6 +28,7 @@ import feeds from '@/apollo/queries/feeds.gql' import networks from '@/apollo/queries/networks.gql' import { formatSvgName } from '../utils/formatSvgName' import { generateSelectOptions } from '../utils/generateSelectOptions' +import { sortByNetwork } from '../utils/sortByNetwork' export default { apollo: { @@ -63,37 +64,26 @@ export default { }, allFeeds() { if (this.feeds) { - return this.feeds.feeds - .map((feed) => { - return { - detailsPath: { - name: 'feeds-id', - params: { id: feed.feedFullName }, - }, - decimals: parseInt(feed.feedFullName.split('_').pop()) || 3, - name: feed.name, - value: feed.lastResult, - label: feed.label, - img: { - name: formatSvgName(feed.name), - alt: feed.name, - }, - network: feed.network, - color: feed.color, - blockExplorer: feed.blockExplorer, - } - }) - .sort((a, b) => { - if (a.network.includes('ethereum-mainnet')) { - return -1 - } else if (a.network.includes('ethereum')) { - return 0 - } else if (a.network < b.network) { - return 1 - } else { - return 2 - } - }) + const result = this.feeds.feeds.map((feed) => { + return { + detailsPath: { + name: 'feeds-id', + params: { id: feed.feedFullName }, + }, + decimals: parseInt(feed.feedFullName.split('_').pop()) || 3, + name: feed.name, + value: feed.lastResult, + label: feed.label, + img: { + name: formatSvgName(feed.name), + alt: feed.name, + }, + network: feed.network, + color: feed.color, + blockExplorer: feed.blockExplorer, + } + }) + return sortByNetwork(result) } else { return [] } diff --git a/packages/ui/tests/utils/sortByNetwork.spec.js b/packages/ui/tests/utils/sortByNetwork.spec.js new file mode 100644 index 00000000..640822ea --- /dev/null +++ b/packages/ui/tests/utils/sortByNetwork.spec.js @@ -0,0 +1,23 @@ +import { sortByNetwork } from '../../utils/sortByNetwork' + +describe('sortByNetwork.js', () => { + it('orders ethereum-mainnet first, ethereum remainning networks in second place, and the rest alphabetically', () => { + const feeds = [ + { network: 'boba-rinkeby' }, + { network: 'conflux-testnet' }, + { network: 'ethereum-rinkeby' }, + { network: 'ethereum-mainnet' }, + { network: 'ethereum-goerli' }, + ] + + const options = sortByNetwork(feeds) + + expect(options).toStrictEqual([ + { network: 'ethereum-mainnet' }, + { network: 'ethereum-rinkeby' }, + { network: 'ethereum-goerli' }, + { network: 'boba-rinkeby' }, + { network: 'conflux-testnet' }, + ]) + }) +}) diff --git a/packages/ui/utils/sortByNetwork.js b/packages/ui/utils/sortByNetwork.js new file mode 100644 index 00000000..4cb3eafe --- /dev/null +++ b/packages/ui/utils/sortByNetwork.js @@ -0,0 +1,17 @@ +export function sortByNetwork(feeds) { + return feeds.sort((firstFeed, secondFeed) => { + if ( + firstFeed.network.includes('ethereum-mainnet') && + !secondFeed.network.includes('ethereum-mainnet') + ) { + return -1 + } else if ( + firstFeed.network.includes('ethereum') && + !secondFeed.network.includes('ethereum') + ) { + return -1 + } else { + return 0 + } + }) +}