Integrate wallet IFrame for payments #42
@ -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'
|
||||
|
@ -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
|
||||
|
@ -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=
|
||||
|
@ -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 ? (
|
||||
|
@ -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);
|
||||
|
@ -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"
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user