Integrate wallet IFrame for payments #42

Merged
nabarun merged 27 commits from iv-integrate-frame into main 2024-11-13 13:32:28 +00:00
7 changed files with 27 additions and 17 deletions
Showing only changes of commit 49c204affd - Show all commits

View File

@ -17,6 +17,7 @@ VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO = 'LACONIC_HOSTED_CONFIG_github_image
VITE_GITHUB_NEXT_APP_TEMPLATE_REPO = 'LACONIC_HOSTED_CONFIG_github_next_app_templaterepo'
VITE_WALLET_CONNECT_ID = 'LACONIC_HOSTED_CONFIG_wallet_connect_id'
VITE_LACONICD_CHAIN_ID = 'LACONIC_HOSTED_CONFIG_laconicd_chain_id'
VITE_WALLET_IFRAME_URL = 'LACONIC_HOSTED_CONFIG_wallet_iframe_url'
VITE_LIT_RELAY_API_KEY = 'LACONIC_HOSTED_CONFIG_lit_relay_api_key'
VITE_BUGSNAG_API_KEY = 'LACONIC_HOSTED_CONFIG_bugsnag_api_key'
VITE_PASSKEY_WALLET_RPID = 'LACONIC_HOSTED_CONFIG_passkey_wallet_rpid'

View File

@ -18,6 +18,8 @@ record:
LACONIC_HOSTED_CONFIG_bugsnag_api_key: 8c480cd5386079f9dd44f9581264a073
LACONIC_HOSTED_CONFIG_passkey_wallet_rpid: dashboard.staging.apps.snowballtools.com
LACONIC_HOSTED_CONFIG_turnkey_api_base_url: https://api.turnkey.com
LACONIC_HOSTED_CONFIG_laconicd_chain_id:
LACONIC_HOSTED_CONFIG_wallet_iframe_url:
LACONIC_HOSTED_CONFIG_turnkey_organization_id: 5049ae99-5bca-40b3-8317-504384d4e591
meta:
note: Added by Snowball @ Mon Jun 24 23:51:48 UTC 2024

View File

@ -15,4 +15,4 @@ VITE_PASSKEY_WALLET_RPID=
VITE_TURNKEY_API_BASE_URL=
VITE_LACONICD_CHAIN_ID=
VITE_IFRAME_ORIGIN_URL=
VITE_WALLET_IFRAME_URL=

View File

@ -7,7 +7,6 @@ const AccountsDropdown = ({
accounts: string[];
onAccountChange: (selectedAccount: string) => void;
}) => {
return (
<div className="p-6 bg-slate-100 dark:bg-overlay3 rounded-lg mb-6 shadow-md">
{!accounts.length ? (

View File

@ -23,7 +23,7 @@ import { useGQLClient } from '../../../context/GQLClientContext';
import IFrameModal from './IFrameModal';
import EnvironmentVariablesForm from 'pages/org-slug/projects/id/settings/EnvironmentVariablesForm';
import { EnvironmentVariablesFormValues } from 'types/types';
import { VITE_LACONICD_CHAIN_ID, VITE_IFRAME_ORIGIN_URL } from 'utils/constants';
import { VITE_LACONICD_CHAIN_ID, VITE_WALLET_IFRAME_URL } from 'utils/constants';
import AccountsDropdown from './AccountsDropdown';
type ConfigureDeploymentFormValues = {
@ -37,7 +37,7 @@ type ConfigureFormValues = ConfigureDeploymentFormValues &
EnvironmentVariablesFormValues;
const DEFAULT_MAX_PRICE = '10000';
const TX_APPROVAL_TIMEOUT = 60000;
const TX_APPROVAL_TIMEOUT_MS = 60000;
const Configure = () => {
const [isLoading, setIsLoading] = useState(false);
@ -216,6 +216,13 @@ const Configure = () => {
);
if (!txHash) {
console.error('Tx not successful');
toast({
id: 'unsuccessful-tx',
title: 'Transaction rejected',
variant: 'error',
onDismiss: dismiss,
});
return;
}
@ -289,6 +296,7 @@ const Configure = () => {
variant: 'error',
onDismiss: dismiss,
});
throw new Error('Error deploying app');
}
},
[client, createProject, dismiss, toast],
@ -318,7 +326,7 @@ const Configure = () => {
const cosmosSendTokensHandler = useCallback(
async (selectedAccount: string, amount: string) => {
if (!selectedAccount) {
return;
throw new Error('Account not selected');
}
const senderAddress = selectedAccount;
@ -330,14 +338,13 @@ const Configure = () => {
await requestTx(senderAddress, snowballAddress, amount);
const txHash = await new Promise<string>((resolve, reject) => {
const txHash = await new Promise<string | null>((resolve, reject) => {
const handleTxStatus = async (event: MessageEvent) => {
if (event.origin !== VITE_IFRAME_ORIGIN_URL) return;
if (event.origin !== VITE_WALLET_IFRAME_URL) return;
if (event.data.type === 'TRANSACTION_SUCCESS') {
if (event.data.type === 'TRANSACTION_RESPONSE') {
const txResponse = event.data.data;
resolve(txResponse);
setIsFrameVisible(false);
} else if (event.data.type === 'ERROR') {
console.error('Error from wallet:', event.data.message);
reject(new Error('Transaction failed'));
@ -348,6 +355,7 @@ const Configure = () => {
onDismiss: dismiss,
});
}
setIsFrameVisible(false);
window.removeEventListener('message', handleTxStatus);
};
@ -364,12 +372,12 @@ const Configure = () => {
variant: 'error',
onDismiss: dismiss,
});
}, TX_APPROVAL_TIMEOUT);
}, TX_APPROVAL_TIMEOUT_MS);
});
return txHash;
} catch (error) {
console.error('Error in transaction:', error);
return;
throw new Error('Error in transaction:');
} finally {
setIsPaymentLoading(false);
}
@ -393,7 +401,7 @@ const Configure = () => {
toAddress: recipient,
amount,
},
VITE_IFRAME_ORIGIN_URL
VITE_WALLET_IFRAME_URL
);
setIsFrameVisible(true);

View File

@ -2,7 +2,7 @@ import { useCallback, useEffect } from 'react';
import { Box, Modal } from '@mui/material';
import { VITE_LACONICD_CHAIN_ID, VITE_IFRAME_ORIGIN_URL } from 'utils/constants';
import { VITE_LACONICD_CHAIN_ID, VITE_WALLET_IFRAME_URL } from 'utils/constants';
const IFrameModal = ({
setAccounts,
@ -16,7 +16,7 @@ const IFrameModal = ({
useEffect(() => {
const handleMessage = (event: MessageEvent) => {
// TODO: Use env for origin URL
if (event.origin !== VITE_IFRAME_ORIGIN_URL) return;
if (event.origin !== VITE_WALLET_IFRAME_URL) return;
if (event.data.type === 'WALLET_ACCOUNTS_DATA') {
setAccounts(event.data.data);
@ -45,7 +45,7 @@ const IFrameModal = ({
type: 'REQUEST_WALLET_ACCOUNTS',
chainId: VITE_LACONICD_CHAIN_ID,
},
VITE_IFRAME_ORIGIN_URL
VITE_WALLET_IFRAME_URL
);
}, []);
@ -71,7 +71,7 @@ const IFrameModal = ({
<iframe
onLoad={getDataFromWallet}
id="walletIframe"
src={`${VITE_IFRAME_ORIGIN_URL}/WalletEmbed`}
src={`${VITE_WALLET_IFRAME_URL}/WalletEmbed`}
width="100%"
height="100%"
sandbox="allow-scripts allow-same-origin"

View File

@ -12,4 +12,4 @@ export const VITE_WALLET_CONNECT_ID = import.meta.env.VITE_WALLET_CONNECT_ID;
export const VITE_BUGSNAG_API_KEY = import.meta.env.VITE_BUGSNAG_API_KEY;
export const VITE_LIT_RELAY_API_KEY = import.meta.env.VITE_LIT_RELAY_API_KEY;
export const VITE_LACONICD_CHAIN_ID = import.meta.env.VITE_LACONICD_CHAIN_ID;
export const VITE_IFRAME_ORIGIN_URL = import.meta.env.VITE_IFRAME_ORIGIN_URL;
export const VITE_WALLET_IFRAME_URL = import.meta.env.VITE_WALLET_IFRAME_URL;