-
![]()
+
{{ `${address.slice(0, 6)}...${address.slice(-3)}` }}
@@ -90,12 +90,14 @@ import DeleteIcon from '@/assets/delete.svg';
import AnimatedSpinner from '@/assets/animated-spinner.svg';
import Alert from '@/assets/alert.svg';
import Check from '@/assets/check.svg';
+import AddressAvatar from '@/components/AddressAvatar.vue';
import ButtonPlain from './ButtonPlain.vue';
import ClipboardCopy from './ClipboardCopy.vue';
import ModalDefault from './ModalDefault.vue';
export default {
components: {
+ AddressAvatar,
ModalDefault,
ClipboardCopy,
ButtonPlain,
diff --git a/src/components/AddressAvatar.vue b/src/components/AddressAvatar.vue
new file mode 100644
index 00000000..155fe24c
--- /dev/null
+++ b/src/components/AddressAvatar.vue
@@ -0,0 +1,14 @@
+
+ ![]()
+
+
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 92e3b12d..ef7b0c77 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -34,7 +34,7 @@
- ![]()
+
{{ `${address.slice(0, 6)}...${address.slice(-3)}` }}
@@ -126,6 +126,7 @@ import AeLogo from '@/assets/logo.svg';
import AeLogoSmall from '@/assets/logo-small.svg';
import BackArrow from '@/assets/back.svg';
import AnimatedSpinner from '@/assets/animated-spinner.svg';
+import AddressAvatar from '@/components/AddressAvatar.vue';
import ActionsMenu from './ActionsMenu.vue';
import AeBalance from './AeBalance.vue';
import NavigationMenu from './NavigationMenu.vue';
@@ -134,6 +135,7 @@ import ButtonPlain from './ButtonPlain.vue';
export default {
components: {
+ AddressAvatar,
AeLogo,
AeLogoSmall,
BackArrow,
diff --git a/src/components/InfoRow.vue b/src/components/InfoRow.vue
index 568a5131..ee8cff18 100644
--- a/src/components/InfoRow.vue
+++ b/src/components/InfoRow.vue
@@ -36,7 +36,6 @@ export default {
span:last-of-type {
margin-right: 4px;
- white-space: nowrap;
}
}
diff --git a/src/components/NavigationMenu.vue b/src/components/NavigationMenu.vue
index 73256444..ab04b0d5 100644
--- a/src/components/NavigationMenu.vue
+++ b/src/components/NavigationMenu.vue
@@ -3,9 +3,12 @@
{{ $t('nav.swap') }}
-
+
{{ $t('nav.pool') }}
+
+ {{ $t('nav.explore') }}
+
@@ -106,6 +130,13 @@ export default {
@use '../../styles/typography.scss';
@use './style.scss';
+.button-show-more {
+ margin: 15px 0;
+ color: variables.$color-white;
+
+ @extend %face-sans-16-regular;
+}
+
.list-tokens {
display: flex;
flex-direction: column;
diff --git a/src/components/TokenSelector/TokenImportCard.vue b/src/components/TokenSelector/TokenImportCard.vue
index d1c1bb46..b1be269d 100644
--- a/src/components/TokenSelector/TokenImportCard.vue
+++ b/src/components/TokenSelector/TokenImportCard.vue
@@ -6,7 +6,7 @@
-
![]()
+
{{ token.symbol }}
@@ -32,10 +32,12 @@
+
+
diff --git a/src/components/explore/DividerLine.vue b/src/components/explore/DividerLine.vue
new file mode 100644
index 00000000..3fb4edba
--- /dev/null
+++ b/src/components/explore/DividerLine.vue
@@ -0,0 +1,9 @@
+
+
+
+
+
diff --git a/src/components/explore/ExploreWrapper.vue b/src/components/explore/ExploreWrapper.vue
new file mode 100644
index 00000000..01c6f371
--- /dev/null
+++ b/src/components/explore/ExploreWrapper.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/explore/InfoElement.vue b/src/components/explore/InfoElement.vue
new file mode 100644
index 00000000..3610f7a4
--- /dev/null
+++ b/src/components/explore/InfoElement.vue
@@ -0,0 +1,45 @@
+
+
+
{{ title }}
+
+
+ {{ value }}
+
+
+
+
diff --git a/src/components/explore/PairTable.vue b/src/components/explore/PairTable.vue
new file mode 100644
index 00000000..102821d1
--- /dev/null
+++ b/src/components/explore/PairTable.vue
@@ -0,0 +1,76 @@
+
+
+
+
+
diff --git a/src/components/explore/PriceHistoryGraph.vue b/src/components/explore/PriceHistoryGraph.vue
new file mode 100644
index 00000000..d90f8212
--- /dev/null
+++ b/src/components/explore/PriceHistoryGraph.vue
@@ -0,0 +1,329 @@
+
+
+
+ {{ label }}
+
+
+
+
+
+
+
+
+
+ Loading...
+
+
+ No Data
+
+
+
+ {{ time }}
+
+
+
+
+
+
+
diff --git a/src/components/explore/StatElement.vue b/src/components/explore/StatElement.vue
new file mode 100644
index 00000000..3fae220a
--- /dev/null
+++ b/src/components/explore/StatElement.vue
@@ -0,0 +1,21 @@
+
+
+
{{ title }}
+
+
{{ value }}
+
{{ change }}
+
+
{{ value2 }}
+
+
diff --git a/src/components/explore/TableCell.vue b/src/components/explore/TableCell.vue
new file mode 100644
index 00000000..b150322d
--- /dev/null
+++ b/src/components/explore/TableCell.vue
@@ -0,0 +1,46 @@
+
+
+
+
+ {{ text }}
+
+ External link
+
+
+
+
+
+ {{ text }}
+
+
+
+
+ {{ text }}
+
+
+
+
+
diff --git a/src/components/explore/TokenTable.vue b/src/components/explore/TokenTable.vue
new file mode 100644
index 00000000..e04b193e
--- /dev/null
+++ b/src/components/explore/TokenTable.vue
@@ -0,0 +1,92 @@
+
+
+
+
+
diff --git a/src/components/explore/TransactionTable.vue b/src/components/explore/TransactionTable.vue
new file mode 100644
index 00000000..d1405c70
--- /dev/null
+++ b/src/components/explore/TransactionTable.vue
@@ -0,0 +1,117 @@
+
+
+
+
+
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 548782ec..dd055695 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -2,6 +2,12 @@ import { formatAmount, AE_AMOUNT_FORMATS, decode } from '@aeternity/aepp-sdk';
import BigNumber from 'bignumber.js';
import dexContractsErrorMessages from 'dex-contracts-v2/build/errors';
import dexUiErrorMessages from '@/lib/errors';
+import { DEFAULT_NETWORKS } from '@/lib/constants';
+
+// eslint-disable-next-line no-extend-native,func-names
+BigInt.prototype.toJSON = function () {
+ return this.toString();
+};
const errorMessages = {
...dexContractsErrorMessages,
@@ -188,3 +194,30 @@ export const handleCallError = ({ returnType, returnValue }, instance) => {
*/
export const isDexBackendDisabled =
import.meta.env.VITE_DISABLE_DEX_BACKEND && JSON.parse(import.meta.env.VITE_DISABLE_DEX_BACKEND);
+
+export const shortenAddress = (address, lengthStart = 6, lengthEnd = 3) =>
+ address ? `${address.slice(0, lengthStart)}...${address.slice(-lengthEnd)}` : '';
+
+export const formatAmountPretty = (amount, decimals) => {
+ if (amount === null || new BigNumber(amount).isNaN()) return 'N/A';
+ const formattedAmount = new BigNumber(amount).div(new BigNumber(10).pow(decimals)).abs();
+ return formattedAmount
+ .toFixed(Math.max(0, 5 - formattedAmount.toFixed(0).length))
+ .replace(/\.0*$/, '') // remove trailing .0
+ .replace(/\B(? {
+ const formattedAmount = formatAmountPretty(amount, decimals);
+ return formattedAmount === 'N/A' ? formattedAmount : `$${formattedAmount}`;
+};
+
+export const detectAndModifyWAE = (token) => {
+ // find the wrapped ae token and modify it on any network
+ const waeAddresses = DEFAULT_NETWORKS.map((network) => network.waeAddress);
+ if (waeAddresses.includes(token.address)) {
+ return { ...token, symbol: 'AE', decimals: 18, name: 'Aeternity', isAe: true };
+ }
+ return token;
+};
diff --git a/src/locales/en.json b/src/locales/en.json
index 60fa2e12..fd8d73b9 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -2,6 +2,7 @@
"nav": {
"swap": "Swap",
"pool": "Pool",
+ "explore": "Explore",
"aboutUs": "About us",
"aboutDex": "About DEX",
"termsCondition": "Terms & Condition",
@@ -165,6 +166,10 @@
"middlewareNotAvailable": "Middleware is not available, some functionality may not work properly.",
"middlewareOutOfSync": "The middleware is out of sync, some functionality may not work properly."
},
+ "poolDetail": {
+ "swap": "Swap",
+ "addLiquidity": "Add Liquidity"
+ },
"superheroDex": "Superhero DEX",
"initializing": "Initializing...",
"connectWallet": "Connect Wallet",
diff --git a/src/mixins/saveTokenSelectionMixin.js b/src/mixins/saveTokenSelectionMixin.js
index 80972688..792f3316 100644
--- a/src/mixins/saveTokenSelectionMixin.js
+++ b/src/mixins/saveTokenSelectionMixin.js
@@ -72,8 +72,8 @@ export default {
const getToken = (token) =>
this.$store.getters['tokens/getAvailableTokens']().find(
(_token) =>
- (_token.is_ae ? _token.symbol : _token.contract_id) === token &&
- _token.networkId === this.$store.state.networkId,
+ (_token.is_ae && _token.symbol === token ? _token.symbol : _token.contract_id) ===
+ token && _token.networkId === this.$store.state.networkId,
);
if ((from && !getToken(from)) || (to && !getToken(to))) {
await new Promise((resolve) => {
diff --git a/src/router/index.js b/src/router/index.js
index 8e5acdec..1594f7f5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,11 +1,14 @@
import { h } from 'vue';
import { createRouter, createWebHistory, RouterView } from 'vue-router';
+import ExploreView from '../views/ExploreView.vue';
import SwapView from '../views/SwapView.vue';
import PoolView from '../views/PoolView.vue';
import ImportPool from '../views/ImportPool.vue';
import AddLiquidity from '../views/AddLiquidity.vue';
import RemoveLiquidity from '../views/RemoveLiquidity.vue';
import NotFound from '../views/NotFound.vue';
+import TokenDetailView from '../views/TokenDetailView.vue';
+import PoolDetailView from '../views/PoolDetailView.vue';
const routes = [
{
@@ -43,6 +46,27 @@ const routes = [
},
],
},
+ {
+ path: '/explore',
+ component: { render: () => h(RouterView) },
+ children: [
+ {
+ path: '',
+ name: 'explore',
+ component: ExploreView,
+ },
+ {
+ path: 'tokens/:id',
+ name: 'token-detail',
+ component: TokenDetailView,
+ },
+ {
+ path: 'pools/:id',
+ name: 'pool-detail',
+ component: PoolDetailView,
+ },
+ ],
+ },
{
path: '/404',
name: 'not-found',
diff --git a/src/store/index.js b/src/store/index.js
index 0f5a7ea7..6e6503f0 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,22 +1,22 @@
import { shallowRef } from 'vue';
import { createStore } from 'vuex';
import {
- Node,
+ AeSdk,
AeSdkAepp,
- walletDetector,
BrowserWindowMessageConnection,
- AeSdk,
- unpackTx,
+ Node,
RpcRejectedByUserError,
+ unpackTx,
+ walletDetector,
} from '@aeternity/aepp-sdk';
import createPersistedState from 'vuex-persistedstate';
import {
- handleUnknownError,
- findErrorExplanation,
createDeepLinkUrl,
- resolveWithTimeout,
- isSafariBrowser,
+ findErrorExplanation,
+ handleUnknownError,
isDexBackendDisabled,
+ isSafariBrowser,
+ resolveWithTimeout,
} from '@/lib/utils';
import { DEFAULT_NETWORKS, IN_FRAME, IS_MOBILE } from '@/lib/constants';
import aeternityModule from './modules/aeternity';
@@ -49,11 +49,8 @@ export default createStore({
},
// returns the network object for the currently selected network
// or null if no network is selected
- activeNetwork({ sdk }, { networks }) {
- return (
- sdk &&
- Object.values(networks).find((network) => network.networkName === sdk.selectedNodeName)
- );
+ activeNetwork({ sdk, networkId }, { networks }) {
+ return sdk && Object.values(networks).find((network) => network.networkId === networkId);
},
WAE({ networkId }, { activeNetwork }) {
return networkId && activeNetwork ? activeNetwork.waeAddress : null;
@@ -136,6 +133,10 @@ export default createStore({
onNetworkChange: ({ networkId }) => {
dispatch('selectNetwork', networkId);
},
+ onAddressChange: ({ current }) => {
+ const [address] = Object.keys(current);
+ commit('setAddress', address);
+ },
name: 'DEX',
onDisconnect() {
commit('resetState');
@@ -220,12 +221,11 @@ export default createStore({
'Login with your wallet has failed. Please make sure that you are logged into your wallet.',
dismissText: 'Open My Wallet',
resolve: () => {
- const addressDeepLink = createDeepLinkUrl({
+ window.location = createDeepLinkUrl({
type: 'address',
'x-success': `${window.location.href.split('?')[0]}?address={address}&networkId={networkId}`,
'x-cancel': window.location.href.split('?')[0],
});
- window.location = addressDeepLink;
},
});
} else {
diff --git a/src/store/modules/dexBackend.js b/src/store/modules/dexBackend.js
index 6e9b091f..0c590b96 100644
--- a/src/store/modules/dexBackend.js
+++ b/src/store/modules/dexBackend.js
@@ -118,10 +118,18 @@ export default {
return up;
},
- async fetchPairDetails({ getters: { getPairInfo }, dispatch }, { tokenA, tokenB }) {
- const pair = getPairInfo({ tokenA, tokenB });
- if (!pair) return null;
- const resp = await dispatch('safeFetch', { url: `pairs/by-address/${pair.address}` });
+ async fetchPairDetails(
+ { getters: { getPairInfo }, dispatch },
+ { pairAddress, tokenA, tokenB },
+ ) {
+ let pair;
+ if (!pairAddress) {
+ pair = getPairInfo({ tokenA, tokenB });
+ if (!pair) return null;
+ }
+ const resp = await dispatch('safeFetch', {
+ url: `pairs/by-address/${pairAddress || pair.address}`,
+ });
return (
resp && {
...resp,
@@ -148,6 +156,10 @@ export default {
}));
},
+ async getAllTokens({ dispatch }) {
+ return dispatch('safeFetch', { url: 'tokens' });
+ },
+
async fetchPairs({ dispatch, commit }, onlyListed) {
const pairsXs = await dispatch('safeFetch', { url: `pairs?only-listed=${!!onlyListed}` });
if (!pairsXs) return null;
@@ -158,5 +170,35 @@ export default {
commit('setPairs', pairs);
return pairs;
},
+
+ async fetchHistory({ dispatch }, options) {
+ // fetch the full history with all pages
+ let history = [];
+ let offset = 0;
+ const limit = 9999999;
+ let page;
+ do {
+ const queryString = new URLSearchParams({
+ limit,
+ offset,
+ ...options,
+ }).toString();
+ // eslint-disable-next-line no-await-in-loop
+ page = await dispatch('safeFetch', { url: `history?${queryString}` });
+ if (!page) break;
+ history = history.concat(page);
+ offset += limit;
+ } while (page.length === limit);
+
+ return history;
+ },
+
+ async fetchPairsByToken({ dispatch }, tokenId) {
+ return dispatch('safeFetch', { url: `tokens/by-address/${tokenId}/pairs` });
+ },
+
+ async fetchPairsByTokenUsd({ dispatch }, tokenId) {
+ return dispatch('safeFetch', { url: `pairs?token=${tokenId}` });
+ },
},
};
diff --git a/src/store/modules/tokens.js b/src/store/modules/tokens.js
index eedbb0c4..24bd8cb3 100644
--- a/src/store/modules/tokens.js
+++ b/src/store/modules/tokens.js
@@ -121,5 +121,9 @@ export default {
}
}
},
+ async fetchToken({ rootGetters: { activeNetwork } }, token) {
+ if (!activeNetwork) return null;
+ return fetchJson(`${activeNetwork.middlewareUrl}/v3/aex9/${token}`);
+ },
},
};
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 87d39fc4..9e58aed9 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -1,6 +1,9 @@
@use './variables.scss';
@use './mixins.scss';
@use './display-utilities.scss';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
* {
font-family: variables.$font-sans;
@@ -19,6 +22,14 @@ body {
background-color: variables.$color-black2;
}
+svg {
+ display: inline-block;
+}
+
+img {
+ max-width: inherit;
+}
+
@include mixins.laptop {
#app {
padding-bottom: 80px;
diff --git a/src/views/ExploreView.vue b/src/views/ExploreView.vue
new file mode 100644
index 00000000..fa30d11d
--- /dev/null
+++ b/src/views/ExploreView.vue
@@ -0,0 +1,212 @@
+
+
+
+
+
+
+ Tokens
+
+
+ Pools
+
+
+ Transactions
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/PoolDetailView.vue b/src/views/PoolDetailView.vue
new file mode 100644
index 00000000..b254eb22
--- /dev/null
+++ b/src/views/PoolDetailView.vue
@@ -0,0 +1,314 @@
+
+
+
+
+
+ {{
+ pair?.token0.symbol
+ }}
+ /
+ {{
+ pair?.token1.symbol
+ }}
+
+
+
+
+
+
+ {{ $t('poolDetail.swap') }}
+
+
+ {{ $t('poolDetail.addLiquidity') }}
+
+
+
+
+
+
+
+
+
Transactions
+
+
+
+
+
+
Pool Information
+
+
+
+
+
+
+
+
+
diff --git a/src/views/PoolView.vue b/src/views/PoolView.vue
index 540732f8..6b987213 100644
--- a/src/views/PoolView.vue
+++ b/src/views/PoolView.vue
@@ -22,7 +22,7 @@
{{ $t('pool.importIt') }}
-
+
{{ address ? $t('addLiquidity.title') : $t('connectWallet') }}
diff --git a/src/views/RemoveLiquidity.vue b/src/views/RemoveLiquidity.vue
index 90f74288..9e7a39bd 100644
--- a/src/views/RemoveLiquidity.vue
+++ b/src/views/RemoveLiquidity.vue
@@ -135,6 +135,7 @@
class="remove-btn"
:class="{ transparent: !enoughAllowance }"
:disabled="!removeButtonEnabled"
+ data-cy="remove-liquidity-btn"
@click="handleRemove"
>
{{ removing ? $t('removeLiquidity.removing') : $t('liquidityDetails.remove') }}
@@ -266,7 +267,7 @@ export default {
watch: {
async address(newVal) {
if (newVal && this.pairId) {
- await this.refreshAllowance(this.pairId, this.fetchAlowance);
+ await this.refreshAllowance(this.pairId, this.fetchAllowance);
}
},
},
@@ -277,7 +278,7 @@ export default {
this.tokenB = this.getAvailableTokens().find((t) => t.contract_id === tokenBContract);
await this.setPairInfo();
if (this.pairId) {
- await this.refreshAllowance(this.pairId, this.fetchAlowance);
+ await this.refreshAllowance(this.pairId, this.fetchAllowance);
}
},
methods: {
@@ -292,7 +293,7 @@ export default {
tokenBSymbol: this.tokenB.symbol,
});
},
- fetchAlowance() {
+ fetchAllowance() {
return this.$store.dispatch('aeternity/getRouterPairAllowance', {
tokenA: this.tokenA.contract_id,
tokenB: this.tokenB.contract_id,
@@ -306,7 +307,7 @@ export default {
tokenB: this.tokenB,
amount: expandDecimals(this.poolTokenInput, 18),
});
- await this.safeRefreshAllowance(this.pairId, this.poolTokenInput, 18, this.fetchAlowance);
+ await this.safeRefreshAllowance(this.pairId, this.poolTokenInput, 18, this.fetchAllowance);
} catch (e) {
this.approved = false;
await this.$store.dispatch('showUnknownError', e);
@@ -370,7 +371,7 @@ export default {
await this.$store.dispatch('showUnknownError', e);
} finally {
await this.setPairInfo();
- await this.refreshAllowance(this.pairId, this.fetchAlowance);
+ await this.refreshAllowance(this.pairId, this.fetchAllowance);
this.updatePercent(0);
this.removing = false;
}
diff --git a/src/views/SwapView.vue b/src/views/SwapView.vue
index 47fe86c6..3e58bbab 100644
--- a/src/views/SwapView.vue
+++ b/src/views/SwapView.vue
@@ -44,7 +44,7 @@
@click="approve"
>
-
![]()
+
{{ approveBtnMessage }}
+
+
{{ metaInfo?.symbol }} / {{ metaInfo?.name }}
+
+
+
+
+
+ {{ $t('poolDetail.swap') }}
+
+
+ {{ $t('poolDetail.addLiquidity') }}
+
+
+
+
+
+
+
+
+
Transactions
+
+
+
+
+
+
+
+
Token Information
+
+
+
+
+
+