diff --git a/src/assets/images/shared/koala-wallet-logo.svg b/src/assets/images/shared/koala-wallet-logo.svg
new file mode 100644
index 00000000..71d830f9
--- /dev/null
+++ b/src/assets/images/shared/koala-wallet-logo.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/index.js b/src/assets/index.js
index f16f420f..53bf6ee4 100644
--- a/src/assets/index.js
+++ b/src/assets/index.js
@@ -72,6 +72,7 @@ export { ReactComponent as VaultIcon } from './images/shared/vault.svg';
export { ReactComponent as SKDXIcon } from './images/shared/skdx-logo.svg';
export { ReactComponent as UnmarshalLogo } from './images/shared/unmarshal-logo.svg';
export { ReactComponent as KadenaExplorerLogo } from './images/shared/kadena-explorer-logo.svg';
+export { ReactComponent as KoalaWalletLogo } from './images/shared/koala-wallet-logo.svg'
export * from '../assets/images/game-edition';
export * from './socials';
diff --git a/src/components/modals/kdaModals/ConnectWalletModal.js b/src/components/modals/kdaModals/ConnectWalletModal.js
index 0a6fde78..fa00f06d 100644
--- a/src/components/modals/kdaModals/ConnectWalletModal.js
+++ b/src/components/modals/kdaModals/ConnectWalletModal.js
@@ -1,23 +1,101 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
import CustomButton from '../../../components/shared/CustomButton';
import { WALLET } from '../../../constants/wallet';
-import { useKaddexWalletContext, useNotificationContext, useModalContext, useGameEditionContext, useAccountContext } from '../../../contexts';
+import { useKaddexWalletContext, useNotificationContext, useModalContext, useGameEditionContext, useAccountContext, useWalletConnectContext } from '../../../contexts';
import ConnectWalletZelcoreModal from './ConnectWalletZelcoreModal';
import ConnectWalletChainweaverModal from './ConnectWalletChainweaverModal';
import styled from 'styled-components';
import { FlexContainer } from '../../shared/FlexContainer';
import Label from '../../shared/Label';
import ConnectWalletWalletConnectModal from './ConnectWalletWalletConnectModal';
+import { NETWORKID } from '../../../constants/contextConstants';
+import GetWalletConnectAccountModal from './GetWalletConnectAccountModal';
const ConnectWalletModal = () => {
const modalContext = useModalContext();
- const { account } = useAccountContext();
+ const { account, setVerifiedAccount } = useAccountContext();
const { STATUSES, showNotification } = useNotificationContext();
const { initializeKaddexWallet, isInstalled } = useKaddexWalletContext();
- const { gameEditionView, openModal, closeModal } = useGameEditionContext();
+ const { gameEditionView, openModal, closeModal, onWireSelect } = useGameEditionContext();
+
+ const { connectWallet, requestGetAccounts } = useWalletConnectContext();
+ const [_, setIsGettingAccounts] = useState(false);
+
+ const onWalletDismiss = useCallback(
+ (err) => {
+ console.log(`onWalletDismiss err:`, err);
+ setIsGettingAccounts(false);
+ if (gameEditionView) {
+ if (!account.account) {
+ onWireSelect(null);
+ } else {
+ closeModal();
+ }
+ } else {
+ modalContext.onBackModal();
+ }
+ },
+ [gameEditionView, account, onWireSelect, closeModal, modalContext]
+ );
+
+ const onConnectWallet = useCallback(() => {
+ let onConnectionSuccess;
+ connectWallet()
+ .then(async (responseNullable) => {
+ if (responseNullable && responseNullable.accounts.length > 0) {
+ setIsGettingAccounts(true);
+ const wcAccounts = await requestGetAccounts(
+ NETWORKID,
+ responseNullable.accounts.map((a) => ({ account: a })),
+ responseNullable.topic
+ );
+ setIsGettingAccounts(false);
+ // call getAccounts
+ const resultAccounts = [];
+ wcAccounts.accounts.forEach((wcAcc) => wcAcc.kadenaAccounts.forEach((kAcc) => resultAccounts.push(kAcc.name)));
+
+ if (resultAccounts.length === 1) {
+ await setVerifiedAccount(resultAccounts[0], onConnectionSuccess);
+ modalContext.closeModal();
+ } else {
+ if (gameEditionView) {
+ openModal({
+ hideOnClose: true,
+ title: 'SELECT ACCOUNT',
+ content: (
+
+ ),
+ });
+ } else {
+ modalContext.openModal({
+ id: 'WALLETCONNECT_ACCOUNT',
+ title: 'WalletConnect accounts',
+ description: 'Select Account',
+ onBack: () => modalContext.onBackModal(),
+ content: (
+
+ ),
+ });
+ }
+ }
+ } else {
+ onWalletDismiss();
+ setIsGettingAccounts(false);
+ }
+ })
+ .catch(onWalletDismiss);
+ }, [gameEditionView, onWalletDismiss, openModal, setVerifiedAccount, modalContext, connectWallet]);
const openWalletModal = (walletName) => {
switch (walletName) {
+ case WALLET.KOALAWALLET.name:
+ onConnectWallet();
+ break;
+
case WALLET.ZELCORE.name:
if (gameEditionView) {
return openModal({
@@ -89,6 +167,16 @@ const ConnectWalletModal = () => {
return (
+ {
+ openWalletModal(WALLET.KOALAWALLET.name);
+ }}
+ >
+ {!gameEditionView && WALLET.KOALAWALLET.logo}
+
+
+
{
diff --git a/src/constants/wallet.js b/src/constants/wallet.js
index 2a449f4a..0f68d7c5 100644
--- a/src/constants/wallet.js
+++ b/src/constants/wallet.js
@@ -11,9 +11,18 @@ import {
WalletConnectLogo,
WireWalletConnectIcon,
LogoWalletConnectIcon,
+ KoalaWalletLogo
} from '../assets';
export const WALLET = {
+ KOALAWALLET: {
+ id: 'KOALAWALLET',
+ name: 'KoalaWallet',
+ logo: ,
+ signMethod: 'wallet',
+ // wireIcon: ,
+ // notificationLogo: ,
+ },
ECKOWALLET: {
id: 'ECKOWALLET',
name: 'eckoWALLET',