From 1af5d64b1f520a0367b7ed57e5c8397ee1da88d4 Mon Sep 17 00:00:00 2001 From: Shreerang Kale Date: Fri, 25 Oct 2024 14:45:36 +0530 Subject: [PATCH] Update flow in UI for making payments --- packages/backend/src/resolvers.ts | 20 ++--- .../components/projects/create/Configure.tsx | 87 +++++++++++++++++-- .../projects/create/ConnectWallet.tsx | 82 +++-------------- 3 files changed, 104 insertions(+), 85 deletions(-) diff --git a/packages/backend/src/resolvers.ts b/packages/backend/src/resolvers.ts index 3fe9a9be..f9282423 100644 --- a/packages/backend/src/resolvers.ts +++ b/packages/backend/src/resolvers.ts @@ -85,16 +85,16 @@ export const createResolvers = async (service: Service): Promise => { return service.getAddress(); }, - verifyTx: async ( - _: any, - { - txHash, - amount, - senderAddress, - }: { txHash: string; amount: string; senderAddress: string }, - ) => { - return service.verifyTx(txHash, amount, senderAddress); - }, + // verifyTx: async ( + // _: any, + // { + // txHash, + // amount, + // senderAddress, + // }: { txHash: string; amount: string; senderAddress: string }, + // ) => { + // return service.verifyTx(txHash, amount, senderAddress); + // }, }, // TODO: Return error in GQL response diff --git a/packages/frontend/src/components/projects/create/Configure.tsx b/packages/frontend/src/components/projects/create/Configure.tsx index ca64d1bd..b89e5dbf 100644 --- a/packages/frontend/src/components/projects/create/Configure.tsx +++ b/packages/frontend/src/components/projects/create/Configure.tsx @@ -23,6 +23,7 @@ import { useGQLClient } from '../../../context/GQLClientContext'; import EnvironmentVariablesForm from 'pages/org-slug/projects/id/settings/EnvironmentVariablesForm'; import { EnvironmentVariablesFormValues } from 'types/types'; import ConnectWallet from './ConnectWallet'; +import { useWalletConnectClient } from 'context/WalletConnectContext'; type ConfigureDeploymentFormValues = { option: string; @@ -35,8 +36,11 @@ type ConfigureFormValues = ConfigureDeploymentFormValues & EnvironmentVariablesFormValues; const Configure = () => { + const { signClient, session } = useWalletConnectClient(); + const [isLoading, setIsLoading] = useState(false); const [deployers, setDeployers] = useState([]); + const [selectedAccount, setSelectedAccount] = useState(); const [searchParams] = useSearchParams(); const templateId = searchParams.get('templateId'); @@ -148,12 +152,41 @@ const Configure = () => { } }; + // const verifyTx = async ( + // senderAddress: string, + // txHash: string, + // ): Promise => { + // const isValid = await client.verifyTx( + // txHash, + // `${amount.toString()}alnt`, + // senderAddress, + // ); + // return isValid; + // }; + const handleFormSubmit = useCallback( async (createFormData: FieldValues) => { // Send tx request to wallet -> amount = createFormData.maxPrice * createFormData.numProviders // Get address of sender account(from wallet connect session) and txHash(result.signature) - const senderAddress = 'address'; - const txHash = 'txHash'; + if (!selectedAccount) { + return; + } + + const senderAddress = selectedAccount; + + const amount = createFormData.numProviders * createFormData.maxPrice; + const txHash = await cosmosSendTokensHandler( + selectedAccount, + String(amount), + ); + + console.log(txHash); + + // const isTxHashValid = verifyTx(senderAddress, txHash); + // if (!isTxHashValid) { + // console.error("Invalid Tx hash", txHash) + // return + // } const environmentVariables = createFormData.variables.map( (variable: any) => { @@ -171,7 +204,7 @@ const Configure = () => { createFormData, environmentVariables, senderAddress, - txHash, + txHash!, ); await client.getEnvironmentVariables(projectId); @@ -202,6 +235,48 @@ const Configure = () => { setDeployers(res.deployers); }, [client]); + const onAccountChange = useCallback((account: string) => { + setSelectedAccount(account); + }, []); + + const cosmosSendTokensHandler = useCallback( + async (selectedAccount: string, amount: string) => { + if (!signClient || !session || !selectedAccount) { + return; + } + + const chainId = selectedAccount.split(':')[1]; + const senderAddress = selectedAccount.split(':')[2]; + const snowballAddress = await client.getAddress(); + + try { + const result: { signature: string } = await signClient.request({ + topic: session.topic, + chainId: `cosmos:${chainId}`, + request: { + method: 'cosmos_sendTokens', + params: [ + { + from: senderAddress, + to: snowballAddress, + value: amount, + }, + ], + }, + }); + + if (!result) { + throw new Error('Error completing transaction'); + } + + return result.signature; + } catch (error: any) { + throw error; + } + }, + [session, signClient], + ); + useEffect(() => { fetchDeployers(); }, []); @@ -340,7 +415,10 @@ const Configure = () => {
- + + Connect to your wallet + +
- ); diff --git a/packages/frontend/src/components/projects/create/ConnectWallet.tsx b/packages/frontend/src/components/projects/create/ConnectWallet.tsx index 86b79c0c..fffa82eb 100644 --- a/packages/frontend/src/components/projects/create/ConnectWallet.tsx +++ b/packages/frontend/src/components/projects/create/ConnectWallet.tsx @@ -1,86 +1,33 @@ -import { useMemo, useState, useCallback } from 'react'; import { Select, Option } from '@snowballtools/material-tailwind-react-fork'; import { Button } from '../../shared/Button'; import { useWalletConnectClient } from 'context/WalletConnectContext'; -import { useGQLClient } from 'context/GQLClientContext'; -const ConnectWallet = ({ numProviders }: { numProviders: number }) => { - const { onConnect, accounts, signClient, session } = useWalletConnectClient(); - const client = useGQLClient(); - - const [selectedAccount, setSelectedAccount] = useState(); - const [isTxValid, setIsTxValid] = useState(false); - - const amount = useMemo(() => numProviders * 10000, [numProviders]); +const ConnectWallet = ({ + onAccountChange, +}: { + onAccountChange: (selectedAccount: string) => void; +}) => { + const { onConnect, accounts } = useWalletConnectClient(); const handleConnect = async () => { await onConnect(); }; - const verifyTx = async ( - senderAddress: string, - txHash: string, - ): Promise => { - const isValid = await client.verifyTx( - txHash, - `${amount.toString()}alnt`, - senderAddress, - ); - return isValid; - }; - - const cosmosSendTokensHandler = useCallback( - async (selectedAccount: string) => { - if (!signClient || !session || !selectedAccount) { - return; - } - - const chainId = selectedAccount.split(':')[1]; - const senderAddress = selectedAccount.split(':')[2]; - const snowballAddress = await client.getAddress(); - - try { - const result: { signature: string } = await signClient.request({ - topic: session.topic, - chainId: `cosmos:${chainId}`, - request: { - method: 'cosmos_sendTokens', - params: [ - { - from: senderAddress, - to: snowballAddress, - value: amount, - }, - ], - }, - }); - - if (!result) { - throw new Error('Error completing transaction'); - } - - const isValid = await verifyTx(senderAddress, result.signature); - setIsTxValid(isValid); - } catch (error: any) { - throw error; - } - }, - [session, signClient, selectedAccount, amount], - ); - return (
{!accounts ? ( - - ) : isTxValid ? ( -
Tx successful!
+
+ +
) : (
-
)}