Skip to content

Commit

Permalink
Merge pull request #43 from ATOR-Development/leggo/phase-1/dev
Browse files Browse the repository at this point in the history
contract links
  • Loading branch information
MarcoMandar authored Jun 26, 2024
2 parents 8e3c05f + 4fd3ae9 commit 83a0402
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 39 deletions.
8 changes: 7 additions & 1 deletion components/ChainSelector.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { switchChain, watchAccount } from '@wagmi/core';
import { switchChain, watchAccount, watchChainId } from '@wagmi/core';
import { useAccount } from '@wagmi/vue';
import { config, defaultChain } from '@/config/wagmi.config';
Expand All @@ -10,7 +10,13 @@ const unwatch = watchAccount(config, {
console.log('Account changed!', data);
},
});
const unwatchChainId = watchChainId(config, {
onChange(data) {
console.log('Chain ID changed!', data);
},
});
unwatch();
unwatchChainId();
</script>

<template>
Expand Down
120 changes: 110 additions & 10 deletions components/DashboardFooter.vue
Original file line number Diff line number Diff line change
@@ -1,26 +1,126 @@
<script setup lang="ts">
import ButtonThemeToggle from './ui-kit/ButtonThemeToggle.vue';
import { ref } from 'vue';
const config = useRuntimeConfig();
const version = config.public.version;
const commitHash = config.public.commitHash || 'dev';
const contractLinks = [
{
name: 'Relay Registry',
address: config.public.relayRegistryAddress,
type: 'arweave',
},
{
name: 'Facilitator',
address: config.public.facilitatorContract,
type: 'evm',
},
{
name: 'Sepolia ANON Token',
address: config.public.sepoliaAtorTokenContract,
type: 'evm',
},
{
name: 'Distribution Contract',
address: config.public.distributionContract,
type: 'arweave',
},
{
name: 'Metrics Deployer',
address: config.public.metricsDeployer,
type: 'arweave',
},
{
name: 'Registrator',
address: config.public.registratorContract,
type: 'evm',
},
];
const getLink = (address: string, type: string) => {
switch (type) {
case 'evmMain':
return `https://etherscan.io/address/${address}`;
case 'evm':
return `https://sepolia.etherscan.io/address/${address}`;
case 'arweave':
return `https://sonar.warp.cc/#/app/contract/${address}`;
default:
return '#';
}
};
const isOpen = ref(false);
</script>

<template>
<footer
class="bg-gradient-to-t from-slate-100 to-teal-50 dark:from-zinc-900 dark:via-gray-900 py-4 px-6 mt-auto flex justify-between lg:justify-center items-center rounded-xl">
<footer
class="bg-gradient-to-t from-slate-100 to-teal-50 dark:from-zinc-900 dark:via-gray-900 py-4 px-6 mt-auto flex justify-between lg:justify-center items-center flex-col rounded-xl"
>
<UModal v-model="isOpen">
<UCard class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<template #header>
<h4 class="text-lg font-semibold mb-4">Contract Links</h4>
</template>

<div class="space-y-4">
<ul
class="list-disc flex flex-col lg:grid lg:grid-cols-3 gap-2 text-center"
>
<li
v-for="link in contractLinks"
:key="link.address"
class="ml-5 text-left"
>
<a
:href="getLink(link.address, link.type)"
target="_blank"
class="text-sm text-cyan-800 dark:text-cyan-200 hover:underline"
>
{{ link.name }}
</a>
</li>
</ul>
</div>

<template #footer>
<UButton variant="outline" class="mt-4 w-full" @click="isOpen = false"
>Close</UButton
>
</template>
</UCard>
</UModal>

<div class="flex justify-between items-center rounded-xl w-full">
<div class="flex gap-2">
<h1 class="lg:hidden capitalize font-brand tracking-wider">ATOR</h1>
<h1 class="lg:hidden capitalize font-brand tracking-wider">ATOR</h1>
<div class="font-brand tracking-wider">
<UButton variant="outline" @click="isOpen = true"
>View Contracts</UButton
>
</div>
</div>

<div class="text-sm text-gray-600 dark:text-gray-300 justify-self-center margin-auto">
Version: {{ version }} | Commit: {{ commitHash }}
<div
class="text-sm text-gray-600 dark:text-gray-300 justify-self-center margin-auto"
>
Version: {{ version }} | Commit: {{ commitHash }}
</div>

<div class="lg:hidden flex items-center gap-2">
<ButtonThemeToggle />
<div>
<div class="lg:hidden flex items-center gap-2">
<ButtonThemeToggle />
</div>
</div>
</footer>
</div>
</footer>
</template>
<style scoped>
@media (min-width: 1024px) {
ul.list-disc {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
</style>
14 changes: 4 additions & 10 deletions components/ui-kit/ReportIssueButton.vue
Original file line number Diff line number Diff line change
@@ -1,14 +1,8 @@
<template>
<UButton
variant="outline"
@click="onReportIssueClicked"
class=" flex p-2 gap-3 items-center text-left cursor-pointer hover:bg-slate-100 hover:text-white dark:hover:bg-cyan-600 dark:hover:text-white"
>
<UIcon
name="i-heroicons-exclamation-circle"
/>
<div class="flex flex-col flex-wrap gap-1">
<span class="dark:text-white text-xs uppercase text-black">Report Issue</span>
<UButton variant="outline" @click="onReportIssueClicked">
<UIcon name="i-heroicons-exclamation-circle" />
<div>
<span>Report Issue</span>
</div>
</UButton>
</template>
Expand Down
34 changes: 16 additions & 18 deletions pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,7 @@ import { initDistribution, useDistribution } from '@/composables/distribution';
import { useRegistratorStore } from '@/stores/useRegistratorStore';
import type { ClaimProcess } from '@/types/facilitator';
import ReportIssueButton from '@/components/ui-kit/ReportIssueButton.vue';
import ReportIssueDialog from '@/components/ui-kit/ReportIssueDialog.vue';
import ReportIssueDialog from '@/components/ui-kit/ReportIssueDialog.vue';
const userStore = useUserStore();
const facilitatorStore = useFacilitatorStore();
Expand Down Expand Up @@ -104,23 +103,22 @@ const trancateUserBalance = (userBalance: string | null | bigint) => {
<div
class="relative grid grid-flow-row grid-cols-1 pt-4 lg:pt-0 gap-6 lg:grid-cols-6"
>
<div
class="flex w-full flex-col gap-4 lg:col-span-6 lg:flex-row-reverse"
>
<div class="flex w-full flex-col gap-4 lg:col-span-6 lg:flex-row-reverse">
<DashboardMobileSection class="lg:basis-1/2" title="account-balance">
<Card title="Account balance" :icon="'eos-icons:master-outlined'">
<div class="flex justify-between items-start lg:items-center flex-col lg:flex-row mb-2 lg:mb-0">

<p class="mb-4 text-sm">
The connected wallet shows the following balance:
</p>
<ReportIssueButton />
</div>
<div
class="flex justify-between items-start lg:items-center flex-col lg:flex-row mb-2 lg:mb-0"
>
<p class="mb-4 text-sm">
The connected wallet shows the following balance:
</p>
<ReportIssueButton />
</div>

<div class="flex gap-5 lg:gap-32 flex-col lg:flex-row">
<div class="border-l-4 border-cyan-600 pl-3">
<UserBalance
class="bg-gradient-to-r from-gray-600 to-gray-800 bg-clip-text text-6xl font-bold text-transparent drop-shadow-lg dark:from-gray-200 dark:to-gray-500 "
class="bg-gradient-to-r from-gray-600 to-gray-800 bg-clip-text text-6xl font-bold text-transparent drop-shadow-lg dark:from-gray-200 dark:to-gray-500"
>
<p class="ml-1 mt-2 text-sm"><Ticker /> Account balance</p>
</UserBalance>
Expand All @@ -144,10 +142,12 @@ const trancateUserBalance = (userBalance: string | null | bigint) => {

<DashboardMobileSection class="lg:basis-1/2" title="my-rewards">
<Card>
<div class="flex justify-between items-start lg:items-center flex-col lg:flex-row mb-2 lg:mb-0">
<div
class="flex justify-between items-start lg:items-center flex-col lg:flex-row mb-2 lg:mb-0"
>
<div>
<h2
class="dark:text-cyan-200 lg:text-3xl text-2xl tracking-wide flex items-center gap-2 font-brand"
class="dark:text-cyan-200 lg:text-3xl text-2xl tracking-wide flex items-center gap-2 font-brand"
>
<Icon name="eos-icons:trusted-organization" />
Rewards history
Expand All @@ -157,7 +157,7 @@ const trancateUserBalance = (userBalance: string | null | bigint) => {
</p>
</div>
<div v-if="isConnected" class="redeem flex gap-6 items-center">
<div class="divider hidden lg:visible"></div>
<div class="divider hidden lg:visible"></div>
<div>
<Button
:disabled="
Expand Down Expand Up @@ -233,8 +233,6 @@ const trancateUserBalance = (userBalance: string | null | bigint) => {
</DashboardMobileSection>
<ReportIssueDialog />
<SupportIssueDialog />


</template>

<style scoped lang="scss">
Expand Down

0 comments on commit 83a0402

Please sign in to comment.