-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Co-authored-by: zlayine <[email protected]> Co-authored-by: zlayine <[email protected]>
- Loading branch information
3 people
authored
Aug 7, 2023
1 parent
5dff93f
commit f75ced5
Showing
17 changed files
with
11,312 additions
and
15,574 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| <template> | ||
| <div class="relative"> | ||
| <svg :height="44" viewBox="0 0 64 64" :width="44"> | ||
| <circle | ||
| v-for="(circle, index) in circles" | ||
| :key="index" | ||
| :cx="circle.cx" | ||
| :cy="circle.cy" | ||
| :fill="circle.fill" | ||
| :r="circle.r" | ||
| /> | ||
| </svg> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import { polkadotIcon } from '@polkadot/ui-shared'; | ||
| import { ref, h } from 'vue'; | ||
| const props = defineProps({ | ||
| address: { | ||
| type: String, | ||
| required: true, | ||
| }, | ||
| }); | ||
| const circles = polkadotIcon(props.address, { | ||
| isAlternative: false, | ||
| }).map(({ cx, cy, fill, r }) => ({ cx, cy, fill, r })); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| <template> | ||
| <Btn primary @click="signTransaction" class="px-8" :disabled="isLoading"> | ||
| <LoadingCircle v-if="isLoading" class="h-5 w-5 mx-1 ml-0.5 text-white" /> | ||
| <span v-else> Sign </span> | ||
| </Btn> | ||
| <Modal :is-open="showAccountsModal" :close="closeModal" width="max-w-lg"> | ||
| <DialogTitle as="h3" class="text-lg font-medium leading-6 text-gray-900 text-center"> | ||
| Select an account to sign | ||
| </DialogTitle> | ||
| <div class="flex flex-col space-y-2 mt-4"> | ||
| <div | ||
| v-for="account in useAppStore().accounts" | ||
| :key="account.address" | ||
| class="px-4 py-3 border border-gray-300 rounded-md cursor-pointer hover:bg-primary/20 transition-all flex items-center space-x-4" | ||
| @click="selectAccount(account)" | ||
| > | ||
| <Identicon :address="account.address" /> | ||
| <div class="flex flex-col"> | ||
| <span class="font-medium">{{ account.name }} </span> | ||
| <span class="text-sm"> | ||
| {{ addressShortHex(account.address) }} | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </Modal> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { DialogTitle } from '@headlessui/vue'; | ||
| import Btn from './Btn.vue'; | ||
| import Modal from './Modal.vue'; | ||
| import { addressShortHex } from '~/util/address'; | ||
| import { useAppStore } from '~/store'; | ||
| import { ref } from 'vue'; | ||
| import LoadingCircle from './LoadingCircle.vue'; | ||
| import snackbar from '~/util/snackbar'; | ||
| import Identicon from './Identicon.vue'; | ||
| const props = defineProps<{ | ||
| transaction: any; | ||
| }>(); | ||
| const emit = defineEmits(['success']); | ||
| const isLoading = ref(false); | ||
| const showAccountsModal = ref(false); | ||
| const signTransaction = async () => { | ||
| useAppStore().getAccounts(); | ||
| showAccountsModal.value = true; | ||
| }; | ||
| const closeModal = () => { | ||
| showAccountsModal.value = false; | ||
| }; | ||
| const selectAccount = async (account) => { | ||
| try { | ||
| isLoading.value = true; | ||
| useAppStore().setAccount(account); | ||
| showAccountsModal.value = false; | ||
| const res = await useAppStore().signTransaction(props.transaction); | ||
| if (res) { | ||
| emit('success'); | ||
| } | ||
| } catch (e) { | ||
| snackbar.error({ title: 'Failed to sign transaction' }); | ||
| } finally { | ||
| isLoading.value = false; | ||
| } | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| <template> | ||
| <Menu as="div" class="relative"> | ||
| <div> | ||
| <MenuButton | ||
| class="flex items-center space-x-2 rounded-md bg-primary py-2 px-3 text-sm font-semibold shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-light focus:ring-offset-2 text-white transition-all" | ||
| > | ||
| <WalletIcon class="h-6 w-6" /> | ||
| <LoadingCircle v-if="loading" class="!text-white" /> | ||
| <span v-else>{{ walletSession ? 'Wallet connected' : 'Connect wallet' }}</span> | ||
| </MenuButton> | ||
| </div> | ||
| <ScaleTransition> | ||
| <MenuItems | ||
| class="absolute right-0 z-10 mt-2 w-44 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none pt-1" | ||
| > | ||
| <template v-if="!walletSession"> | ||
| <MenuItem v-slot="{ active }"> | ||
| <button | ||
| :class="[ | ||
| active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', | ||
| 'block px-4 py-2 text-sm w-full text-center transition-all', | ||
| ]" | ||
| @click="connectWallet('wc')" | ||
| > | ||
| WalletConnect | ||
| </button> | ||
| </MenuItem> | ||
| <MenuItem v-slot="{ active }"> | ||
| <button | ||
| :class="[ | ||
| active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', | ||
| 'block px-4 py-2 text-sm w-full text-center transition-all', | ||
| ]" | ||
| @click="connectWallet('polkadot.js')" | ||
| > | ||
| Polkadot.JS | ||
| </button> | ||
| </MenuItem> | ||
| </template> | ||
| <template v-else> | ||
| <MenuItem v-slot="{ active }"> | ||
| <button | ||
| :class="[ | ||
| active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', | ||
| 'block px-4 py-2 text-sm w-full text-center transition-all', | ||
| ]" | ||
| @click="disconnectWallet" | ||
| > | ||
| Disconnect | ||
| </button> | ||
| </MenuItem> | ||
| </template> | ||
| </MenuItems> | ||
| </ScaleTransition> | ||
| </Menu> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { WalletIcon } from '@heroicons/vue/24/outline'; | ||
| import { useAppStore } from '~/store'; | ||
| import LoadingCircle from './LoadingCircle.vue'; | ||
| import { computed, ref } from 'vue'; | ||
| import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'; | ||
| import ScaleTransition from './ScaleTransition.vue'; | ||
| import snackbar from '~/util/snackbar'; | ||
| const appStore = useAppStore(); | ||
| const loading = ref(true); | ||
| const showAccountsModal = ref(false); | ||
| const walletSession = computed(() => appStore.wallet); | ||
| const connectWallet = async (provider: string) => { | ||
| try { | ||
| loading.value = true; | ||
| await appStore.connectWallet(provider); | ||
| if (appStore.accounts) { | ||
| showAccountsModal.value = true; | ||
| } | ||
| } catch { | ||
| snackbar.error({ title: 'Failed to connect wallet' }); | ||
| } finally { | ||
| loading.value = false; | ||
| } | ||
| }; | ||
| const getSession = async () => { | ||
| try { | ||
| loading.value = true; | ||
| await appStore.getSession(); | ||
| } catch (e) { | ||
| snackbar.error({ title: 'Failed to get session' }); | ||
| } finally { | ||
| loading.value = false; | ||
| } | ||
| }; | ||
| const disconnectWallet = async () => { | ||
| loading.value = true; | ||
| await appStore.disconnectWallet(); | ||
| loading.value = false; | ||
| }; | ||
| (async () => { | ||
| getSession(); | ||
| })(); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.