Skip to content

Commit

Permalink
Merge pull request #42 from ATOR-Development/leggo/phase-1/dev
Browse files Browse the repository at this point in the history 
disable mainnet, create modal for disconnect, add switch network
  • Loading branch information
@MarcoMandar
MarcoMandar authored Jun 22, 2024
2 parents 81f4c8d + 53750de commit 8e3c05f
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 103 deletions.
66 changes: 46 additions & 20 deletions components/ui-kit/ButtonConnect.vue
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,71 @@
<script setup lang="ts">
import { useWeb3Modal } from '@web3modal/wagmi/vue';
import { useAccount, useDisconnect } from '@wagmi/vue';
import { useAccount, useDisconnect, useSwitchChain } from '@wagmi/vue';
import { config } from '@/config/wagmi.config';
import Address from './Address.vue';
import { ref } from 'vue';
import { getChainId } from '@wagmi/core'
const { address, status, isDisconnected, isReconnecting, isConnecting } =
useAccount({ config });
const { address, status, isDisconnected, isReconnecting, isConnecting } = useAccount({ config });
const { open } = useWeb3Modal();
const { disconnect } = useDisconnect({ config });
const { disconnect } = useDisconnect({ config });
const handleDisconnect = () => {
disconnect();
};
const { chains, switchChain } = useSwitchChain({ config });
const chainId = getChainId(config)
const isWrongNetwork = computed(() => !chains.value.some((chainItem) => chainItem.id === chainId));
const isOpen = ref(false);
</script>

<template>
<div v-if="address" class="flex gap-3 items-center text-left cursor-pointer" @click="handleDisconnect">
<Icon
name="heroicons:user-circle"
class="dark:text-cyan-100 w-8 h-8 ring ring-cyan-600 rounded-full relative bg-slate-200/50 dark:bg-transparent"
/>
<div class="flex flex-col flex-wrap gap-1">
<div v-if="address" class="flex gap-3 items-center text-left cursor-pointer" @click="isOpen = true">
<Icon name="heroicons:user-circle"
class="dark:text-cyan-100 w-8 h-8 ring ring-cyan-600 rounded-full relative bg-slate-200/50 dark:bg-transparent" />
<div v-if="!isWrongNetwork" class="flex flex-col flex-wrap gap-1">
<span class="dark:text-white text-xs uppercase">{{ status }}</span>
<Address :address="address" />
</div>
<UButton v-else variant="outline" color="yellow">Wrong Network</UButton>
</div>

<UButton
v-if="isDisconnected"
variant="outline"
@click="open({ view: 'Connect' })"
>

<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">Account Options</h4>
</template>

<div class="space-y-4">
<UButton variant="outline" color="red" class="w-full" @click="handleDisconnect">Disconnect</UButton>

<div>
<h5 class="text-sm font-medium mb-2">Switch Network</h5>
<div class="space-y-2">
<UButton v-for="chainItem in chains" :key="chainItem.id" class="w-full" variant="outline"
:class="{ 'opacity-50 cursor-not-allowed': chainId === chainItem.id }"
@click="switchChain({ chainId: chainItem.id })" :disabled="chainId === chainItem.id">
{{ chainItem.name }} <span v-if="chainId === chainItem.id" class="ml-2">(Connected)</span>
</UButton>
</div>
</div>
</div>

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

<UButton v-if="isDisconnected" variant="outline" @click="open({ view: 'Connect' })">
Connect wallet
</UButton>

<div
v-if="isReconnecting || isConnecting"
class="px-3 py-2"
:aria-label="status"
>
<div v-if="isReconnecting || isConnecting" class="px-3 py-2" :aria-label="status">
<Icon name="eos-icons:three-dots-loading" class="dark:text-cyan-300" />
<span class="sr-only">{{ status }}</span>
</div>
Expand Down
140 changes: 58 additions & 82 deletions components/ui-kit/ReportIssueDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,82 +3,54 @@
<UCard class="modal-card" name="text-black dark:text-white">
<template #header>
<h4 tabindex="999" @keyup="onKeyup">Report Issue</h4>
</template>

<UContainer class="pb-0">
<div class="mb-4">
<UFormGroup label="Title">
<UInput
ref="titleField"
v-model="title"
hint="Title will be public"
placeholder="Issue Title"
:rules="[rules.required]"
:error="titleError !== null"
persistent-hint
class="mb-1"
>
<template #message="{ message }">
<UIcon name="w-4 h-4">mdi-alert</UIcon>
{{ message }}
</template>
</UInput>
</UFormGroup>
<UFormGroup label="Description">
<UTextarea
v-model="desc"
hint="Description will be public"
placeholder="Issue Description (optional)"
persistent-hint
>
<template #message="{ message }">
<UIcon name="w-4 h-4">mdi-alert</UIcon>
{{ message }}
</template>
</UTextarea>
</UFormGroup>
</div>

</UContainer>

<UContainer class="pt-0">
<div class="text-center mb-4">
<UButton
variant="outline"
size="sm"
color="primary"
:icon="logsCopySuccess ? 'i-heroicons-check' : 'i-heroicons-clipboard'"
@click="onCopyLogsClicked"
>
(Optional) Copy Encrypted Logs
</UButton>
</div>


<div class="flex justify-between">
<UButton
variant="outline"
size="sm"
color="red"
@click="onCancelClicked"
>
Cancel
</UButton>

<UDivider />

<UButton
variant="outline"
size="sm"
color="primary"
icon="i-heroicons-link"
@click="onReportIssueClicked"
>
Open GitHub Issue
</UButton>

</div>
</UContainer>
</template>

<UContainer class="pb-0">
<div class="mb-4">
<UFormGroup label="Title">
<UInput ref="titleField" v-model="title" hint="Title will be public" placeholder="Issue Title"
:rules="[rules.required]" :error="titleError !== null" persistent-hint class="mb-1">
<template #message="{ message }">
<UIcon name="w-4 h-4">mdi-alert</UIcon>
{{ message }}
</template>
</UInput>
</UFormGroup>
<UFormGroup label="Description">
<UTextarea v-model="desc" hint="Description will be public" placeholder="Issue Description (optional)"
persistent-hint>
<template #message="{ message }">
<UIcon name="w-4 h-4">mdi-alert</UIcon>
{{ message }}
</template>
</UTextarea>
</UFormGroup>
</div>

</UContainer>

<UContainer class="pt-0">
<div class="text-center mb-4">
<UButton variant="outline" size="sm" color="primary"
:icon="logsCopySuccess ? 'i-heroicons-check' : 'i-heroicons-clipboard'" @click="onCopyLogsClicked">
(Optional) Copy Encrypted Logs
</UButton>
</div>


<div class="flex justify-between">
<UButton variant="outline" size="sm" color="red" @click="onCancelClicked">
Cancel
</UButton>

<UDivider />

<UButton variant="outline" size="sm" color="primary" icon="i-heroicons-link" @click="onReportIssueClicked">
Open GitHub Issue
</UButton>

</div>
</UContainer>
</UCard>
</UModal>
</template>
Expand Down Expand Up @@ -198,9 +170,9 @@ const onCopyLogsClicked = debounce(async () => {
const type = 'text/plain'
const logsJson = JSON.stringify(payload.value)
const logsBlob = new Blob([ logsJson ], { type })
const logsBlob = new Blob([logsJson], { type })
const item = new ClipboardItem({ [type]: logsBlob })
await navigator.clipboard.write([ item ])
await navigator.clipboard.write([item])
logger.info('copied encrypted logs to clipboard')
logsCopySuccess.value = true
setTimeout(() => { logsCopySuccess.value = false }, 2500)
Expand All @@ -212,16 +184,20 @@ const onCopyLogsClicked = debounce(async () => {

<style scoped>
.modal-overlay {
background-color: rgba(0, 0, 0, 0.7); /* Change background color */
background-color: rgba(0, 0, 0, 0.7);
/* Change background color */
}
.modal-card {
background-color: #333; /* Change modal card background color */
color: #fff; /* Change text color */
background-color: #333;
/* Change modal card background color */
color: #fff;
/* Change text color */
}
.modal-card h4 {
color: #fff; /* Change title color */
color: #fff;
/* Change title color */
}
.modal-card .u-button {
Expand Down
7 changes: 6 additions & 1 deletion config/wagmi.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,16 @@ import { reconnect } from '@wagmi/core';
import { defaultWagmiConfig } from '@web3modal/wagmi/vue';
import { metadata } from './web3modal.config';
import { mainnet, sepolia } from 'viem/chains';
import { http } from '@wagmi/vue';

const projectId = 'f5e29d36441ccd0e2f5e3473d5a2021b';

export const config = defaultWagmiConfig({
chains: [mainnet, sepolia],
chains: [/*mainnet,*/ sepolia],
transports: {
// [mainnet.id]: http(),
[sepolia.id]: http(),
},
projectId,
metadata,
ssr: false,
Expand Down

0 comments on commit 8e3c05f

Please sign in to comment.