assembly/composables/useSidebar.ts

160 lines
5.9 KiB
TypeScript
Raw Normal View History

2021-07-24 23:40:30 +00:00
import {
computed,
nextTick,
ref,
useContext,
useRouter,
watch
} from "@nuxtjs/composition-api";
import { useDSA } from "./useDSA";
2021-09-03 13:59:09 +00:00
import { useWeb3 } from "@instadapp/vue-web3";
2021-07-27 19:16:38 +00:00
import SidebarAaveV2Supply from "~/components/sidebar/context/aaveV2/SidebarAaveV2Supply.vue";
import SidebarAaveV2Withdraw from '~/components/sidebar/context/aaveV2/SidebarAaveV2Withdraw.vue'
2021-07-28 21:38:15 +00:00
import SidebarAaveV2Borrow from '~/components/sidebar/context/aaveV2/SidebarAaveV2Borrow.vue'
import SidebarAaveV2Payback from '~/components/sidebar/context/aaveV2/SidebarAaveV2Payback.vue'
2021-08-07 23:22:42 +00:00
2021-08-01 18:29:41 +00:00
import SidebarOverview from '~/components/sidebar/context/overview/SidebarOverview.vue'
2021-08-04 19:17:26 +00:00
import SidebarDepositOverview from '~/components/sidebar/context/SidebarDepositOverview.vue'
2021-08-05 19:21:22 +00:00
import SidebarWithdraw from '~/components/sidebar/context/SidebarWithdraw.vue'
2021-08-01 18:29:41 +00:00
2021-08-07 23:22:42 +00:00
import SidebarCompoundWithdraw from '~/components/sidebar/context/compound/SidebarCompoundWithdraw.vue'
import SidebarCompoundSupply from '~/components/sidebar/context/compound/SidebarCompoundSupply.vue'
import SidebarCompoundBorrow from '~/components/sidebar/context/compound/SidebarCompoundBorrow.vue'
2021-08-08 10:07:21 +00:00
import SidebarCompoundPayback from '~/components/sidebar/context/compound/SidebarCompoundPayback.vue'
2021-08-07 23:22:42 +00:00
2021-08-10 16:11:15 +00:00
import SidebarMakerdaoCollateral from '~/components/sidebar/context/makerdao/SidebarMakerdaoCollateral.vue'
2021-08-10 14:42:32 +00:00
import SidebarMakerdaoSupply from '~/components/sidebar/context/makerdao/SidebarMakerdaoSupply.vue'
import SidebarMakerdaoWithdraw from '~/components/sidebar/context/makerdao/SidebarMakerdaoWithdraw.vue'
2021-08-10 14:17:20 +00:00
import SidebarMakerdaoBorrow from '~/components/sidebar/context/makerdao/SidebarMakerdaoBorrow.vue'
import SidebarMakerdaoPayback from '~/components/sidebar/context/makerdao/SidebarMakerdaoPayback.vue'
2021-08-07 23:22:42 +00:00
2021-08-21 11:20:16 +00:00
import SidebarLiquityTroveOpenNew from '~/components/sidebar/context/liquity/SidebarLiquityTroveOpenNew.vue'
2021-08-21 12:36:15 +00:00
import SidebarLiquityTroveSupply from '~/components/sidebar/context/liquity/SidebarLiquityTroveSupply.vue'
import SidebarLiquityTroveWithdraw from '~/components/sidebar/context/liquity/SidebarLiquityTroveWithdraw.vue'
import SidebarLiquityTroveBorrow from '~/components/sidebar/context/liquity/SidebarLiquityTroveBorrow.vue'
import SidebarLiquityTrovePayback from '~/components/sidebar/context/liquity/SidebarLiquityTrovePayback.vue'
2021-08-21 11:20:16 +00:00
2021-08-22 12:54:23 +00:00
import SidebarStrategySelection from '~/components/sidebar/context/strategy/SidebarStrategySelection.vue'
import SidebarStrategy from '~/components/sidebar/context/strategy/SidebarStrategy.vue'
2021-08-21 11:20:16 +00:00
2021-07-24 23:40:30 +00:00
const sidebars = {
2021-08-01 18:29:41 +00:00
"#overview" : {component: SidebarOverview, back : false, close : true },
2021-08-05 19:21:22 +00:00
"#deposit-overview": {component: SidebarDepositOverview, back: { hash: 'overview' } },
'#withdraw-token': { component: SidebarWithdraw, back: { hash: 'overview' } },
2021-08-22 12:54:23 +00:00
'#strategies': { component: SidebarStrategySelection },
'#strategy': { component: SidebarStrategy },
2021-08-21 19:06:27 +00:00
"/aave-v2": { component: null },
"/aave-v2#supply": { component: SidebarAaveV2Supply },
"/aave-v2#borrow": { component: SidebarAaveV2Borrow },
"/aave-v2#payback": { component: SidebarAaveV2Payback },
"/aave-v2#withdraw": { component: SidebarAaveV2Withdraw },
2021-08-07 23:22:42 +00:00
"/mainnet/compound": { component: null },
"/mainnet/compound#withdraw": { component: SidebarCompoundWithdraw },
"/mainnet/compound#supply": { component: SidebarCompoundSupply },
"/mainnet/compound#borrow": { component: SidebarCompoundBorrow },
"/mainnet/compound#payback": { component: SidebarCompoundPayback },
2021-08-10 14:17:20 +00:00
"/mainnet/maker": { component: null },
2021-08-10 16:11:15 +00:00
'/mainnet/maker#collateral': { component: SidebarMakerdaoCollateral },
2021-08-10 14:42:32 +00:00
"/mainnet/maker#supply": { component: SidebarMakerdaoSupply },
"/mainnet/maker#withdraw": { component: SidebarMakerdaoWithdraw },
2021-08-10 14:17:20 +00:00
"/mainnet/maker#borrow": { component: SidebarMakerdaoBorrow },
"/mainnet/maker#payback": { component: SidebarMakerdaoPayback },
2021-08-21 11:20:16 +00:00
'/mainnet/liquity#trove-new': { component: SidebarLiquityTroveOpenNew },
2021-08-21 12:36:15 +00:00
'/mainnet/liquity#trove-supply': { component: SidebarLiquityTroveSupply },
'/mainnet/liquity#trove-withdraw': { component: SidebarLiquityTroveWithdraw },
'/mainnet/liquity#trove-borrow': { component: SidebarLiquityTroveBorrow },
'/mainnet/liquity#trove-payback': { component: SidebarLiquityTrovePayback },
2021-07-24 23:40:30 +00:00
};
const sidebar = ref(null);
const props = ref(null);
export function init() {
const { route } = useContext();
const router = useRouter()
const { active } = useWeb3();
const { dsa } = useDSA();
watch(
[route, active, dsa],
async ([route, active, dsa], [oldRoute, oldActive, oldDsa]) => {
await nextTick();
2021-08-22 14:20:28 +00:00
//@ts-ignore
2021-07-24 23:40:30 +00:00
const hasPathChanged = !oldRoute || route.path !== oldRoute.path;
const hasIsLoggedInChanged = active !== oldActive;
const hasDsaChanged = dsa !== oldDsa;
2021-08-22 14:20:28 +00:00
//@ts-ignore
2021-07-24 23:40:30 +00:00
const [hash, params] = route.hash.split("?");
2021-07-26 18:33:52 +00:00
2021-07-24 23:40:30 +00:00
if (hasPathChanged){
router.push({ hash: null })
return
}
2021-08-22 14:20:28 +00:00
//@ts-ignore
2021-07-24 23:40:30 +00:00
sidebar.value = sidebars[route.path + hash] || sidebars[hash];
if (!sidebar.value) {
props.value = {};
return;
}
if (!params) {
props.value = {};
return;
}
// parse url params (example: `prop1=value1&prop2=value2`)
props.value = params.split("&").reduce((props, entry) => {
const [key, value] = entry.split("=");
props[key] = value;
return props;
}, {});
},
{ immediate: true }
);
}
export function useSidebar() {
const { route } = useContext();
const router = useRouter();
function close() {
router.push({ hash: null });
}
function back() {
const location = sidebar.value?.back || { hash: null };
router.push(location);
}
const component = computed(() => sidebar.value?.component);
const isOpen = computed(() => {
if (!route.value.hash) return false;
return !!component.value;
});
2021-08-01 18:29:41 +00:00
const showSidebarBalances = () => {
router.push({ hash: 'overview' });
}
2021-07-24 23:40:30 +00:00
return {
close,
back,
component,
props,
2021-08-01 18:29:41 +00:00
isOpen,
showSidebarBalances
2021-07-24 23:40:30 +00:00
};
}