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-08-04 22:17:26 +03:00
parent e0964abe0f
commit 68e7cd8931
17 changed files with 270 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
components/QrCode.vue Normal file
View File

@ -0,0 +1,70 @@
<template>
<div
class="flex items-center justify-center"
:style="{
width: width + 'px',
height: width + 'px',
}"
>
<transition
enter-active-class="duration-300 ease-out"
enter-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="duration-200 ease-in"
leave-class="opacity-100"
leave-to-class="opacity-0"
@leave="show = false"
@after-leave="show = true"
>
<img
v-if="show && !!src"
:width="width"
:height="width"
:src="src"
alt="QR Code"
class="w-full h-full overflow-hidden rounded-xs"
/>
</transition>
</div>
</template>
<script>
import { defineComponent, watch, ref, useContext, onUnmounted } from '@nuxtjs/composition-api'
import { toDataURL } from 'qrcode'
export default defineComponent({
props: {
value: { type: String, required: true },
width: { type: Number, default: 220 },
},
setup(props, context) {
const src = ref(null)
const show = ref(true)
watch(
() => [props.value],
async ([value]) => {
URL.revokeObjectURL(src.value)
src.value = null
if (!value) return
src.value = await toDataURL(value, {
width: props.width,
margin: 0,
color: {
light: '#00000000',
dark: '#131E40ff',
},
})
},
{ immediate: true }
)
onUnmounted(() => URL.revokeObjectURL(src.value))
return { src, show }
},
})
</script>

2
components/SearchInput.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="relative flex items-center h-9 w-[200px]">
<div class="relative flex items-center h-9">
<input
class="w-full pl-3 pr-8 rounded-[6px] border border-grey-dark border-opacity-[0.15]"
type="text"

6
components/common/menu/MenuButton.vue
View File

@ -1,18 +1,20 @@
<template>
<Button
color="white"
class="border rounded-sm border-grey-light dark:border-opacity-25 dark:bg-opacity-100 dark:bg-dark-400"
class="border rounded-[6px] p-1.5 border-grey-light dark:border-opacity-25 dark:bg-opacity-100 dark:bg-dark-400"
:style="`width: ${size}px; height: ${size}px`"
v-on="$listeners"
>
<Icon name="dots-horizontal" :style="`height: ${+size / 2}`" />
<DotsHorizontal :style="`height: ${+size / 2}`" />
</Button>
</template>
<script>
import { defineComponent } from '@nuxtjs/composition-api'
import DotsHorizontal from '@/assets/img/icons/heroicons/solid/dots-horizontal.svg?inline'
export default defineComponent({
components: { DotsHorizontal },
props: { size: { type: String, default: '30' } },
})
</script>

81
components/sidebar/context/SidebarDepositOverview.vue Normal file
View File

@ -0,0 +1,81 @@
<template>
<SidebarContextRootContainer>
<template #title
>Deposit <span class="uppercase">{{ tokenKey }}</span></template
>
<div class="relative">
<div
v-if="activeAccount"
class="flex flex-col items-center justify-center px-8 mt-6 mb-8"
>
<QrCode
v-if="
activeAccount.address !==
'0x0000000000000000000000000000000000000000'
"
:value="activeAccount.address"
:width="220"
/>
<div
v-if="
activeAccount.address !==
'0x0000000000000000000000000000000000000000'
"
v-tooltip.bottom="tooltip"
v-clipboard:copy="activeAccount.address"
v-clipboard:success="onCopy"
class="flex items-center px-8 mt-4 whitespace-no-wrap cursor-pointer select-none group"
style="width: 220px"
>
<div
class="flex-1 font-medium text-center text-ocean-blue-pure text-19"
>
{{ shortenHash(activeAccount.address) }}
</div>
<Icon
v-if="!copied"
name="clipboard-copy"
type="outline"
class="flex-shrink-0 w-6 h-6 ml-4 text-grey-pure group-hover:text-ocean-blue-pure"
/>
<Icon
v-else
name="clipboard-check"
type="outline"
class="flex-shrink-0 w-6 h-6 ml-4 transform -translate-x-px text-ocean-blue-pure dark:text-light"
/>
</div>
</div>
</div>
</SidebarContextRootContainer>
</template>
<script>
import { defineComponent } from '@nuxtjs/composition-api'
import { useFormatting } from '~/composables/useFormatting'
import { useDSA } from '~/composables/useDSA'
import { useCopiedToClipboardUx } from '~/composables/useCopiedToClipboardUx'
export default defineComponent({
props: {
tokenKey: {}
},
setup() {
const { activeAccount } = useDSA()
const { shortenHash } = useFormatting()
const { onCopy, tooltip, copied } = useCopiedToClipboardUx()
return { activeAccount, shortenHash, onCopy, tooltip, copied }
},
})
</script>
<style>
.blured {
filter: blur(6px);
}
</style>

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

@ -9,7 +9,7 @@
:net-worth="token.netWorth"
:symbol="token.symbol"
:action-label="actionLabel"
@action="$emit('action', token.key)"
@deposit="$router.push({ hash: 'deposit-overview?tokenKey=' + token.key })"
/>
</div>
<div v-else>

31
components/sidebar/context/overview/CardCurrency.vue
View File

@ -1,13 +1,34 @@
<template>
<div class="flex items-center px-4 py-4 select-none dark:bg-dark-400">
<div
class="flex items-center px-4 py-4 select-none shadow-sm bg-white rounded-[4px] "
>
<IconCurrency :currency="tokenKey" />
<div class="flex flex-col px-4">
<div class="mb-1 font-semibold whitespace-no-wrap text-12 text-navi-pure dark:text-light">
<div class="flex-1 flex flex-col px-4">
<div
class="mb-1 font-semibold whitespace-no-wrap text-sm text-primary-dark"
>
{{ formatDecimal(balance) }} {{ symbol }}
</div>
<div class="font-medium whitespace-no-wrap text-12 text-grey-pure">{{ formatUsd(netWorth, 2) }}</div>
<div
class="font-medium whitespace-no-wrap text-sm text-[#9299AF] text-opacity-90"
>
{{ formatUsd(netWorth, 2) }}
</div>
</div>
<div class="flex flex-col items-center">
<button
class="mb-2 h-[26px] w-24 flex-shrink-0 text-xs bg-primary-blue-dark shadow text-white rounded-[4px] hover:bg-primary-blue-hover"
@click="$emit('deposit')"
>
Deposit
</button>
<button
class="h-[26px] w-24 text-xs flex-shrink-0 text-primary-blue-dark shadow border border-primary-blue-dark border-opacity-38 hover:border-primary-blue-hover rounded-[4px] hover:text-primary-blue-hover"
@click="$emit('action')"
>
Withdraw
</button>
</div>
<Button class="ml-auto w-18" color="ocean-blue" @click="$emit('action')">{{ actionLabel }}</Button>
</div>
</template>

10
components/sidebar/context/overview/SidebarOverview.vue
View File

@ -3,15 +3,17 @@
<SidebarContextHeader :showBackButton="false"></SidebarContextHeader>
<div class="flex-grow overflow-y-scroll scrollbar-hover">
<div class="h-full mx-auto" style="max-width: 296px">
<div class="h-full mx-auto">
<div class="flex flex-col h-full py-2 sm:py-4">
<SidebarOverviewBalance />
<div class="flex flex-col flex-grow mt-2 sm:mt-4">
<div
class="bg-[#C5CCE1] bg-opacity-[0.15] py-10 px-8 flex flex-col flex-grow mt-2 sm:mt-4"
>
<div class="flex flex-shrink-0">
<search-input
v-model.trim="search"
placeholder="Search Currency"
class="mr-2"
class="w-full mr-2"
/>
<Menu>
<template v-slot:activator="{ on }">
@ -32,7 +34,7 @@
</Menu>
</div>
<div class="flex flex-col flex-grow mt-2 sm:mt-4">
<div class="flex flex-col flex-grow mt-2 sm:mt-4 overflow-y-scroll">
<currency-list :search="search" type="dsa" action-label="Trade">
<template v-slot:no-items>
<div class="flex flex-col">

6
components/sidebar/context/overview/SidebarOverviewBalance.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="flex flex-col items-center flex-shrink-0 w-full px-8 mt-6 mb-2 text-center sm:mb-10">
<h3 class="flex items-center leading-none">Balance <Info text="This is your DSA balance and doesn't reflect your wallet balance (like Metamask)" class="ml-1" /></h3>
<div class="mt-4 font-semibold text-32">{{ formatUsd(balanceTotal) }}</div>
<div class="flex flex-col items-center text-primary-black flex-shrink-0 w-full px-8 mb-2 text-center sm:mb-10">
<h3 class="flex items-center font-medium leading-none">Balance</h3>
<div class="mt-2 font-semibold text-32">{{ formatUsd(balanceTotal) }}</div>
</div>
</template>

27
composables/useCopiedToClipboardUx.ts Normal file
View File

@ -0,0 +1,27 @@
import { computed, ref } from "@nuxtjs/composition-api";
export function useCopiedToClipboardUx() {
const copied = ref(false);
let copiedTimeout;
function onCopy() {
if (copiedTimeout) {
clearTimeout(copiedTimeout);
copiedTimeout = null;
}
copied.value = true;
copiedTimeout = setTimeout(() => {
copied.value = false;
copiedTimeout = null;
}, 1800);
}
const tooltip = computed(() => ({
content: "Copied!",
trigger: "manual",
show: copied.value
}));
return { onCopy, tooltip, copied };
}

3
composables/useSidebar.ts
View File

@ -20,9 +20,12 @@ import SidebarAaveV2Payback from '~/components/sidebar/context/aaveV2/SidebarAav
//@ts-ignore
import SidebarOverview from '~/components/sidebar/context/overview/SidebarOverview.vue'
//@ts-ignore
import SidebarDepositOverview from '~/components/sidebar/context/SidebarDepositOverview.vue'
const sidebars = {
"#overview" : {component: SidebarOverview, back : false, close : true },
"#deposit-overview": {component: SidebarDepositOverview },
"/polygon/aave-v2": { component: null },
"/polygon/aave-v2#supply": { component: SidebarAaveV2Supply },
"/polygon/aave-v2#borrow": { component: SidebarAaveV2Borrow },

1
nuxt.config.js
View File

@ -33,6 +33,7 @@ export default {
"~/plugins/v-click-outside.js",
"~/plugins/web3modal.js",
{ src: '~/plugins/v-tooltip', mode: 'client' },
{ src: '~/plugins/v-clipboard2', mode: 'client' },
],
// Auto import components: https://go.nuxtjs.dev/config-components

2
package.json
View File

@ -20,8 +20,10 @@
"css-color-function": "^1.3.3",
"dsa-connect": "^0.4.2",
"nuxt": "^2.15.7",
"qrcode": "^1.4.4",
"v-click-outside": "^3.1.2",
"v-tooltip": "^2.1.3",
"vue-clipboard2": "^0.3.1",
"vue-composable": "^1.0.0-beta.23",
"walletlink": "^2.1.6",
"web3": "^1.4.0",

1
pages/mainnet/aave-v2.vue
View File

@ -113,6 +113,7 @@
<SearchInput
v-model.trim="search"
dense
class="w-[200px]"
placeholder="Search positions"
/>
</div>

14
pages/overview.vue
View File

@ -1,14 +0,0 @@
<template>
<div>
<sidebar-overview />
</div>
</template>
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api";
import SidebarOverview from "~/components/sidebar/context/overview/SidebarOverview.vue";
export default defineComponent({
components: {SidebarOverview },
});
</script>

1
pages/polygon/aave-v2.vue
View File

@ -113,6 +113,7 @@
<SearchInput
v-model.trim="search"
dense
class="w-[200px]"
placeholder="Search positions"
/>
</div>

4
plugins/v-clipboard2.js Normal file
View File

@ -0,0 +1,4 @@
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

40
yarn.lock
View File

@ -3625,6 +3625,15 @@ cli-width@^3.0.0:
resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
clipboard@^2.0.0:
version "2.0.8"
resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.8.tgz#ffc6c103dd2967a83005f3f61976aa4655a4cdba"
integrity sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==
dependencies:
good-listener "^1.2.2"
select "^1.1.2"
tiny-emitter "^2.0.0"
cliui@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
@ -4476,6 +4485,11 @@ delayed-stream@~1.0.0:
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
delegate@^3.1.2:
version "3.2.0"
resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
delegates@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@ -5850,6 +5864,13 @@ globby@^11.0.3:
merge2 "^1.3.0"
slash "^3.0.0"
good-listener@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
dependencies:
delegate "^3.1.2"
google-fonts-helper@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/google-fonts-helper/-/google-fonts-helper-1.2.0.tgz#32eb8ebf9816dbb2ec8acda81ad03a021ed44050"
@ -9508,7 +9529,7 @@ q@^1.1.2:
resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
qrcode@1.4.4:
qrcode@1.4.4, qrcode@^1.4.4:
version "1.4.4"
resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.4.4.tgz#f0c43568a7e7510a55efc3b88d9602f71963ea83"
integrity sha512-oLzEC5+NKFou9P0bMj5+v6Z40evexeE29Z9cummZXZ9QXyMr3lphkURzxjXgPJC5azpxcshoDWV1xE46z+/c3Q==
@ -10160,6 +10181,11 @@ secp256k1@^4.0.1:
node-addon-api "^2.0.0"
node-gyp-build "^4.2.0"
select@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
semaphore@>=1.0.1, semaphore@^1.0.3:
version "1.1.0"
resolved "https://registry.yarnpkg.com/semaphore/-/semaphore-1.1.0.tgz#aaad8b86b20fe8e9b32b16dc2ee682a8cd26a8aa"
@ -10999,6 +11025,11 @@ timsort@^0.3.0:
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
tiny-emitter@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
tmp@^0.0.33:
version "0.0.33"
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@ -11499,6 +11530,13 @@ vue-client-only@^2.0.0:
resolved "https://registry.yarnpkg.com/vue-client-only/-/vue-client-only-2.1.0.tgz#1a67a47b8ecacfa86d75830173fffee3bf8a4ee3"
integrity sha512-vKl1skEKn8EK9f8P2ZzhRnuaRHLHrlt1sbRmazlvsx6EiC3A8oWF8YCBrMJzoN+W3OnElwIGbVjsx6/xelY1AA==
vue-clipboard2@^0.3.1:
version "0.3.1"
resolved "https://registry.yarnpkg.com/vue-clipboard2/-/vue-clipboard2-0.3.1.tgz#6e551fb7bd384889b28b0da3b12289ed6bca4894"
integrity sha512-H5S/agEDj0kXjUb5GP2c0hCzIXWRBygaWLN3NEFsaI9I3uWin778SFEMt8QRXiPG+7anyjqWiw2lqcxWUSfkYg==
dependencies:
clipboard "^2.0.0"
vue-composable@^1.0.0-beta.23:
version "1.0.0-beta.23"
resolved "https://registry.yarnpkg.com/vue-composable/-/vue-composable-1.0.0-beta.23.tgz#1085bcd8360d9ed309ec5c33e8242611790cd5c5"