Instadapp/assembly
1
0
Fork 0
mirror of https://github.com/Instadapp/assembly.git synced 2024-07-29 22:37:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Georges KABBOUCHI 2021-07-27 21:54:59 +03:00
parent a54be3569c
commit 6f362361e3
11 changed files with 83 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/Badge.vue
View File

@ -1,18 +1,21 @@
<template>
<div
class="flex items-center justify-center flex-shrink-0 px-2 py-1 leading-none whitespace-no-wrap transition-colors duration-75 ease-out select-none xxl:font-semibold rounded-xs"
class="flex items-center justify-center flex-shrink-0 px-2 py-1.5 leading-none whitespace-no-wrap transition-colors duration-75 ease-out select-none font-semibold rounded-[4px]"
:class="{
'text-9': !large,
'text-[10px]': !large,
'text-12': large,
'bg-green-pure text-green-light dark:bg-opacity-17 dark:text-light': color === 'green-pure',
'bg-green-pure text-green-light dark:bg-opacity-17 dark:text-light':
color === 'green-pure',
'bg-grey-pure bg-opacity-17 text-grey-pure': color === 'grey',
'bg-blue-pure bg-opacity-20 text-blue-pure': color === 'blue',
'bg-green-pure bg-opacity-20 text-green-pure': color === 'green',
'bg-yellow-pure bg-opacity-25 text-yellow-pure': color === 'yellow',
'bg-orange-pure bg-opacity-25 text-orange-pure': color === 'orange',
'bg-passion-orange-pure bg-opacity-25 text-passion-orange-pure': color === 'passion-orange',
'bg-red-pure dark:bg-opacity-25 text-white dark:text-light': color === 'red',
'bg-red-800 bg-opacity-25 text-red-800': color === 'red-dark',
'bg-passion-orange-pure bg-opacity-25 text-passion-orange-pure':
color === 'passion-orange',
'bg-red-pure dark:bg-opacity-25 text-white dark:text-light':
color === 'red',
'bg-red-800 bg-opacity-25 text-red-800': color === 'red-dark'
}"
>
<slot />

4
components/common/ProgressBar.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="relative overflow-hidden rounded-xs">
<div class="w-full h-1 bg-opacity-25 bg-grey-pure"></div>
<div class="relative overflow-hidden rounded-[5px] border border-primary-gray border-opacity-[0.15]">
<div class="w-full h-2 bg-white"></div>
<div
class="absolute inset-0 transition-transform duration-200 ease-out"
:style="{ transform }"

2
components/common/input/ButtonCTA.vue
View File

@ -1,6 +1,6 @@
<template>
<button
class="flex items-center justify-center flex-shrink-0 py-2 font-semibold text-white whitespace-no-wrap duration-75 ease-out transform rounded-sm select-none bg-ocean-blue-pure text-14 shadow-cta focus:outline-none dark:shadow-none"
class="flex items-center justify-center flex-shrink-0 py-2 font-semibold text-white whitespace-no-wrap duration-75 ease-out transform rounded-[4px] select-none bg-ocean-blue-pure shadow-cta focus:outline-none dark:shadow-none"
:class="{
'bg-opacity-50 pointer-events-none': disabled && !loading,
'hover:-translate-y-px': !disabled && !loading,

28
components/common/input/InputNumeric.vue
View File

@ -1,14 +1,17 @@
<template>
<div class="flex flex-col flex-shrink-0 w-full">
<input
autocomplete="off"
class="w-full pl-8 pr-8 rounded-[6px] border border-grey-dark border-opacity-[0.15]"
type="text"
inputmode="decimal"
:value="value"
v-bind="$attrs"
v-on="inputListeners"
/>
<div class="relative w-full">
<input
autocomplete="off"
class="w-full px-4 rounded-[6px] border border-grey-dark border-opacity-[0.15]"
type="text"
inputmode="decimal"
:value="value"
v-bind="$attrs"
v-on="inputListeners"
/>
<slot name="suffix" />
</div>
<div class="h-0">
<transition
@ -19,7 +22,12 @@
leave-class="opacity-100"
leave-to-class="opacity-0"
>
<p v-if="touched && showError && error" class="mt-1 text-red-600 text-11">{{ error }}</p>
<p
v-if="touched && showError && error"
class="mt-1 text-red-600 text-11"
>
{{ error }}
</p>
</transition>
</div>
</div>

2
components/sidebar/context/SidebarContextHeader.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="flex-shrink-0 w-full mx-auto max-w-[385px] p-4">
<div class="flex-shrink-0 w-full mx-auto p-4">
<div class="flex justify-between items-center w-full">
<button
class="flex items-center justify-center text-opacity-50 group hover:text-opacity-100 focus:hover:text-opacity-100 text-grey-pure focus:outline-none"

2
components/sidebar/context/SidebarContextHeading.vue
View File

@ -1,3 +1,3 @@
<template>
<div class="font-semibold text-center text-19"><slot /></div>
<div class="font-semibold text-center text-sm text-primary-black"><slot /></div>
</template>

56
components/sidebar/context/aaveV2/SidebarAaveV2Supply.vue
View File

@ -2,54 +2,54 @@
<SidebarContextRootContainer>
<template #title>Supply {{ symbol }}</template>
<SidebarSectionValueWithIcon label="Token Balance">
<SidebarSectionValueWithIcon label="Token Balance" center>
<template #icon
><IconCurrency :currency="rootTokenKey" class="w-20 h-20" noHeight
/></template>
<template #value>{{ formatNumber(balance) }} {{ symbol }}</template>
</SidebarSectionValueWithIcon>
<div class="bg-background mt-6 p-8">
<div class="bg-[#C5CCE1] bg-opacity-[0.15] mt-10 p-8">
<h3 class="text-primary-gray text-xs font-semibold mb-2.5">
Amount to supply
</h3>
<input-numeric
v-model="amount"
placeholder="Amount to supply"
:error="errors.amount.message"
/>
</div>
<hr />
<div class="px-5">
<div class="flex items-center justify-between mt-6">
<div class="font-semibold">Set Max</div>
<toggle-button :checked="isMaxAmount" @change="toggle" />
</div>
<SidebarContextHeading class="mt-6"
>Projected Debt Position</SidebarContextHeading
>
<template v-if="!isMaxAmount" #suffix>
<div class="absolute mt-2 top-0 right-0 mr-4">
<button
type="button"
class="text-primary-blue-dark font-semibold text-sm hover:text-primary-blue-hover"
@click="toggle"
>
Max
</button>
</div>
</template>
</input-numeric>
<hr />
<SidebarContextHeading class="mt-5">
Projected Debt Position
</SidebarContextHeading>
<SidebarSectionStatus
class="mt-6"
class="mt-8"
:liquidation="maxLiquidation"
:status="status"
/>
<hr />
<SidebarSectionValueWithIcon class="mt-6" label="Liquidation Price (ETH)">
<SidebarSectionValueWithIcon class="mt-8" label="Liquidation Price (ETH)">
<template #value>
{{ formatUsdMax(liquidationPrice, liquidationMaxPrice) }} /
{{ formatUsd(liquidationMaxPrice) }}
{{ formatUsdMax(liquidationPrice, liquidationMaxPrice) }} <span class="">/
{{ formatUsd(liquidationMaxPrice) }}</span>
</template>
</SidebarSectionValueWithIcon>
<hr />
<div class="flex flex-shrink-0 mt-6">
<div class="flex flex-shrink-0 mt-10">
<ButtonCTA
class="w-full"
:disabled="!isValid || pending"
@ -83,14 +83,14 @@ import ToggleButton from '~/components/common/input/ToggleButton.vue'
import { useDSA } from '~/composables/useDSA'
import ButtonCTA from '~/components/common/input/ButtonCTA.vue'
import { useNotification } from '~/composables/useNotification'
import Button from '~/components/Button.vue'
export default defineComponent({
components: { InputNumeric, ToggleButton, ButtonCTA },
components: { InputNumeric, ToggleButton, ButtonCTA, Button },
props: {
tokenKey: { type: String, required: true },
},
setup(props) {
const { showTransaction } = useNotification()
const { networkName, account } = useWeb3()
const { dsa } = useDSA()
const { getTokenByKey, valInt } = useToken()

8
components/sidebar/context/components/SidebarSectionStatus.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="flex flex-col flex-shrink-0">
<div class="flex items-center justify-between mb-4">
<div class="text-grey-pure text-14">Status (max. {{ formatPercent(liquidation) }})</div>
<div class="flex items-center justify-between mb-6">
<div class="font-semibold text-grey-pure text-xs">Status (max. {{ formatPercent(liquidation) }})</div>
<Badge class="w-18" :color="color">{{ text }}</Badge>
<Badge class="w-[80px]" :color="color">{{ text }}</Badge>
</div>
<div class="flex items-center">
<div class="w-24 mr-3 font-medium text-19">{{ formatPercent(status) }}</div>
<div class="w-24 mr-3 font-medium text-lg">{{ formatPercent(status) }}</div>
<progress-bar class="w-full" :color="color" :progress="status" />
</div>
</div>

8
components/sidebar/context/components/SidebarSectionValueWithIcon.vue
View File

@ -1,8 +1,11 @@
<template>
<div class="flex flex-col items-center justify-center text-center flex-shrink-0">
<div
class="flex flex-col items-center justify-center flex-shrink-0"
:class="{ 'text-center': center }"
>
<slot name="icon" />
<value-display class="mt-4" :label="label">
<value-display class="mt-4" :label="label" :center="center">
<slot name="value" />
</value-display>
</div>
@ -16,6 +19,7 @@ export default defineComponent({
components: { ValueDisplay },
props: {
label: { type: String, required: true },
center: { type: Boolean, default: false },
},
})
</script>

20
components/sidebar/context/components/ValueDisplay.vue
View File

@ -1,14 +1,19 @@
<template>
<div class="flex flex-col items-center">
<div class="h-6 font-medium text-24">
<div
class="flex flex-col w-full"
:class="{ 'text-center items-center': center }"
>
<value-display-label class="flex mb-2 text-primary-gray font-semibold">
{{ label }} <Info v-if="tooltip" :text="tooltip" class="ml-1" />
</value-display-label>
<div
class="font-medium text-lg text-primary-black"
:class="{ 'text-center': center }"
>
<Spinner v-if="loading" class="w-5 h-5" />
<slot v-else name="default" />
</div>
<value-display-label class="flex mb-2 mt-3"
>{{ label }} <Info v-if="tooltip" :text="tooltip" class="ml-1" />
</value-display-label>
<transition
enter-active-class="duration-200 ease-out"
enter-class="opacity-0"
@ -36,6 +41,7 @@ export default defineComponent({
label: { type: String, default: null },
loading: { type: Boolean, default: false },
tooltip: { type: String, default: null },
center: { type: Boolean, default: false },
},
})
</script>

14
pages/index.vue
View File

@ -54,20 +54,6 @@ const appsPerNetwork = {
url: "/polygon/aave-v2",
description: "Lend and borrow straight from your Gnosis Safe"
},
{
id: "aave-v3",
icon: AaveIcon,
name: "Aave v3",
url: "/polygon/aave-v2",
description: "Lend and borrow straight from your Gnosis Safe"
},
{
id: "aave-v4",
icon: AaveIcon,
name: "Aave v4",
url: "/polygon/aave-v2",
description: "Lend and borrow straight from your Gnosis Safe"
}
]
};