Skip to content

Commit

Permalink
Merge pull request kodadot#10534 from kodadot/feat/evm/v1
Browse files Browse the repository at this point in the history
Trying to make EVM work [Feat/evm/v1]
  • Loading branch information
vikiival authored Jun 30, 2024
2 parents 9395b7b + 097dbac commit 0c9a121
Show file tree
Hide file tree
Showing 46 changed files with 5,829 additions and 1,103 deletions.
1 change: 1 addition & 0 deletions .env.example
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,4 @@ SUBSQUID_ENDPOINT=""
RAMP_API_KEY=""
TRANSAK_API_KEY=""
TRANSAK_ENV="" #STAGING|PRODUCTION
WALLET_CONNECT_PROJECT_ID=""
2 changes: 1 addition & 1 deletion components/common/ChainDropdown.vue
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const props = withDefaults(
const route = useRoute()
const { setUrlPrefix, urlPrefix } = usePrefix()
const { availableChains: allChains } = useChain()
const allChains = useAvailableChainsOptions()
const { redirectAfterChainChange } = useChainRedirect()
const { isMobile } = useViewport()
Expand Down
45 changes: 45 additions & 0 deletions components/common/ConnectWallet/ConnectEvm.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<template>
<div class="!mt-6 h-full">
<NeoButton
variant="primary"
no-shadow
:loading="isConnecting"
:disabled="isConnecting"
loading-with-label
size="large"
class="w-full"
@click="modal?.open()">
<div class="inline-flex gap-3">
<span>
{{ isConnecting ? 'Connecting' : 'Connect with Web3Modal' }}
</span>
<NeoIcon v-if="!isConnecting" icon="arrow-right" />
</div>
</NeoButton>
</div>
</template>
<script lang="ts" setup>
import { NeoButton, NeoIcon } from '@kodadot1/brick'
const emits = defineEmits(['select'])
const { address, isConnected, isConnecting, chainId } = useWagmi()
const { urlPrefix, setUrlPrefix } = usePrefix()
const { modal } = useWeb3Modal()
watch([address, isConnected, chainId], ([address, isConnected, chainId]) => {
if (address && isConnected && chainId) {
const chainPrefix = CHAIN_ID_TO_PREFIX[chainId]
const isCorrectChainConnected = chainPrefix === urlPrefix.value
if (!isCorrectChainConnected) {
setUrlPrefix(chainPrefix)
}
emits('select', {
address: address as string,
vm: 'EVM',
})
}
})
</script>
126 changes: 126 additions & 0 deletions components/common/ConnectWallet/ConnectSubstrate.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
<template>
<section class="modal-card-body">
<div class="buttons m-0">
<WalletMenuItem
v-for="(wallet, index) in installedWallet"
:key="index"
:wallet="wallet"
@set-account="setAccount" />
</div>

<div v-if="showUninstalledWallet" class="!px-8 !pt-6">
<div class="font-bold capitalize mb-3 text-xl">
{{ $t('walletConnect.newToKoda') }}
</div>
<div class="text-sm !mb-6">
{{ $t('walletConnect.startConnect') }}
</div>
<div class="border py-4 !px-6 !mb-6 bg-k-grey-light border-k-grey">
<div class="mb-3">{{ $t('walletConnect.quickSteps') }}</div>
<ol class="text-sm font-bold pl-4">
<li class="mb-3">
{{ $t('walletConnect.chooseWallet')
}}<span class="font-normal">{{
$t('walletConnect.chooseBelow')
}}</span>
</li>
<li>
{{ $t('walletConnect.downloadAndConnect')
}}<span class="font-normal">{{
$t('walletConnect.setUpConnect')
}}</span>
</li>
</ol>
</div>
<div class="font-bold mb-3 capitalize">
{{ $t('walletConnect.selectWallet') }}
</div>
</div>

<a
v-else
class="flex items-center pt-4 pb-3 text-xs text-k-grey mx-6 my-0 hover:text-k-hover-grey border-t border-k-shade2"
@click="toggleShowUninstalledWallet">
{{ $t('walletConnect.moreOption') }}
<NeoIcon
v-if="isUninstalledWalletExpand"
class="ml-1"
icon="chevron-down" />

<NeoIcon v-else class="ml-1" icon="chevron-right" />
</a>
<div
v-if="showUninstalledWallet || isUninstalledWalletExpand"
class="buttons">
<WalletMenuItem
v-for="wallet in uninstalledWallet"
:key="wallet.name"
:wallet="wallet" />
</div>

<div v-if="showUninstalledWallet" class="px-6">
<hr class="!my-0" />
<NeoButton
class="!w-full !my-6"
variant="outlined-rounded"
@click="checkWallet">
{{ $t('walletConnect.walletHeading') }}
<NeoIcon icon="arrow-right" />
</NeoButton>
</div>
</section>
</template>
<script lang="ts" setup>
import { NeoButton, NeoIcon } from '@kodadot1/brick'
import WalletMenuItem from '@/components/common/ConnectWallet/WalletMenuItem.vue'
import { BaseDotsamaWallet } from '@/utils/config/wallets/BaseDotsamaWallet'
import {
WalletAccount as SubstrateWalletAccount,
SupportedWallets,
} from '@/utils/config/wallets'
const emits = defineEmits(['select'])
const { toast } = useToast()
const forceWalletSelect = ref(false)
const wallets = ref<BaseDotsamaWallet[]>([])
const uninstalledWallet = computed(() => {
return wallets.value.filter((wallet) => !wallet.installed)
})
const showUninstalledWallet = computed(() => !installedWallet.value.length)
const installedWallet = computed(() => {
return wallets.value.filter((wallet) => wallet.installed)
})
const setAccount = (account: SubstrateWalletAccount) => {
forceWalletSelect.value = false
emits('select', {
address: account.address,
extension: account.source,
name: account.name,
vm: 'SUB',
} as WalletAccount)
}
const refreshWallets = () => {
wallets.value = SupportedWallets()
}
const checkWallet = () => {
refreshWallets()
if (showUninstalledWallet.value) {
toast('Please download a wallet first')
}
}
const isUninstalledWalletExpand = ref(!showUninstalledWallet.value)
const toggleShowUninstalledWallet = () => {
isUninstalledWalletExpand.value = !isUninstalledWalletExpand.value
}
onMounted(refreshWallets)
</script>
173 changes: 43 additions & 130 deletions components/common/ConnectWallet/ConnectWalletModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,163 +4,76 @@
data-testid="wallet-connect-sidebar-modal">
<NeoModalHead
:title="
showAccount
? $i18n.t('profile.page')
: $i18n.t('walletConnect.walletHeading')
showAccount ? $t('profile.page') : $t('walletConnect.walletHeading')
"
@close="emit('close', ModalCloseType.BACK)" />

<section v-if="showAccount">
<WalletAsset />
</section>
<section v-else class="modal-card-body">
<div class="buttons m-0">
<WalletMenuItem
v-for="(wallet, index) in installedWallet"
:key="index"
:wallet="wallet"
@set-account="setAccount" />
</div>

<div v-if="showUninstalledWallet" class="!px-8 !pt-6">
<div class="font-bold capitalize mb-3 text-xl">
{{ $i18n.t('walletConnect.newToKoda') }}
</div>
<div class="text-sm !mb-6">
{{ $i18n.t('walletConnect.startConnect') }}
</div>
<div class="border py-4 !px-6 !mb-6 bg-k-grey-light border-k-grey">
<div class="mb-3">{{ $i18n.t('walletConnect.quickSteps') }}</div>
<ol class="text-sm font-bold pl-4">
<li class="mb-3">
{{ $i18n.t('walletConnect.chooseWallet')
}}<span class="font-normal">{{
$i18n.t('walletConnect.chooseBelow')
}}</span>
</li>
<li>
{{ $i18n.t('walletConnect.downloadAndConnect')
}}<span class="font-normal">{{
$i18n.t('walletConnect.setUpConnect')
}}</span>
</li>
</ol>
</div>
<div class="font-bold mb-3 capitalize">
{{ $i18n.t('walletConnect.selectWallet') }}
</div>
</div>

<a
v-else
class="flex items-center pt-4 pb-3 text-xs text-k-grey mx-6 my-0 hover:text-k-hover-grey border-t border-k-shade2"
@click="toggleShowUninstalledWallet">
{{ $i18n.t('walletConnect.moreOption') }}
<NeoIcon
v-if="isUninstalledWalletExpand"
class="ml-1"
icon="chevron-down" />

<NeoIcon v-else class="ml-1" icon="chevron-right" />
</a>
<template v-else>
<div
v-if="showUninstalledWallet || isUninstalledWalletExpand"
class="buttons">
<WalletMenuItem
v-for="wallet in uninstalledWallet"
:key="wallet.name"
:wallet="wallet" />
v-if="disconnecting"
class="flex items-start justify-center pt-10 h-full">
<span class="text-k-grey inline-flex gap-1">
{{ $t('disconnecting') }}
<div class="dots w-2" />
</span>
</div>

<div v-if="showUninstalledWallet" class="px-6">
<hr class="!my-0" />
<NeoButton
class="!w-full !my-6"
variant="outlined-rounded"
@click="checkWallet">
{{ $t('walletConnect.walletHeading') }}
<NeoIcon icon="arrow-right" />
</NeoButton>
</div>
</section>
<template v-else>
<WalletTabs v-model="selectedTab" />

<div v-if="!showAccount" class="bg-k-grey-light p-4 flex items-center mx-6">
<NeoIcon class="ml-1" icon="circle-info" variant="k-grey" />
<div class="text-xs text-neutral-7 ml-3">
{{ $i18n.t('walletConnect.authText') }}
</div>
</div>

<div v-if="!showAccount" class="px-6 !pb-6 pt-2">
<a
class="text-sm text-k-blue hover:text-k-blue-hover flex items-center flex justify-center"
href="https://hello.kodadot.xyz/tutorial/wallet"
target="_blank"
rel="nofollow noopener noreferrer">
{{ $i18n.t('walletConnect.walletLink') }}
</a>
</div>
<ConnectSubstrate v-if="selectedTab === 'SUB'" @select="setAccount" />

<ConnectEvm v-else class="!px-7" @select="setAccount" />
</template>

<MnemonicNotice />
</template>
</div>
</template>

<script setup lang="ts">
import { SupportedWallets } from '@/utils/config/wallets'
import { BaseDotsamaWallet } from '@/utils/config/wallets/BaseDotsamaWallet'
import { NeoButton, NeoIcon, NeoModalHead } from '@kodadot1/brick'
import { Auth, useIdentityStore } from '@/stores/identity'
import WalletMenuItem from '@/components/common/ConnectWallet/WalletMenuItem.vue'
import { NeoModalHead } from '@kodadot1/brick'
import WalletAsset from '@/components/common/ConnectWallet/WalletAsset.vue'
import { ModalCloseType } from '@/components/navbar/types'
const { $i18n } = useNuxtApp()
const selectedWalletProvider = ref<BaseDotsamaWallet>()
const forceWalletSelect = ref(false)
const wallets = ref<BaseDotsamaWallet[]>([])
const identityStore = useIdentityStore()
const { urlPrefix } = usePrefix()
import { type ChainVM, DEFAULT_VM_PREFIX } from '@kodadot1/static'
const emit = defineEmits(['close', 'connect'])
const { toast } = useToast()
const account = computed(() => identityStore.auth.address)
const showAccount = computed(() => account.value)
const installedWallet = computed(() => {
return wallets.value.filter((wallet) => wallet.installed)
})
const uninstalledWallet = computed(() => {
return wallets.value.filter((wallet) => !wallet.installed)
})
const showUninstalledWallet = computed(() => !installedWallet.value.length)
const refreshWallets = () => {
wallets.value = SupportedWallets()
}
const { urlPrefix, setUrlPrefix } = usePrefix()
const { redirectAfterChainChange } = useChainRedirect()
const walletStore = useWalletStore()
const { selected: account, disconnecting } = storeToRefs(walletStore)
const identityStore = useIdentityStore()
const checkWallet = () => {
refreshWallets()
if (showUninstalledWallet.value) {
toast('Please download a wallet first')
}
}
const selectedTab = ref<ChainVM>('SUB')
const setAccount = (account: Auth) => {
forceWalletSelect.value = false
identityStore.setAuth(account)
emit('connect', account)
const showAccount = computed(() => Boolean(account.value))
if (selectedWalletProvider.value) {
localStorage.setItem('wallet', selectedWalletProvider.value.extensionName)
const isCurrentPrefixAvailableForVm = (vm: ChainVM) =>
getAvailableChainsByVM(vm)
.map(({ value }) => value)
.includes(urlPrefix.value)
const setAccount = (account: WalletAccount) => {
walletStore.setWallet(account)
identityStore.setAuth({ address: account.address })
if (!isCurrentPrefixAvailableForVm(account.vm)) {
const newChain = DEFAULT_VM_PREFIX[account.vm]
setUrlPrefix(newChain)
redirectAfterChainChange(newChain)
}
}
const isUninstalledWalletExpand = ref(!showUninstalledWallet.value)
const toggleShowUninstalledWallet = () => {
isUninstalledWalletExpand.value = !isUninstalledWalletExpand.value
emit('connect', account)
}
watch(account, (account) => {
setAccount({ address: account })
})
onMounted(() => walletStore.setDisconnecting(false))
watch([urlPrefix], () => {
emit('close', ModalCloseType.NAVIGATION)
})
onMounted(refreshWallets)
</script>
Loading

0 comments on commit 0c9a121

Please sign in to comment.