Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add base64 example #355

Merged
merged 5 commits into from
Nov 26, 2024
Merged

docs: add base64 example #355

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3d3ed2e
docs: add base64 example
kantorcodes Nov 25, 2024
bd1517e
chore: revert text
kantorcodes Nov 25, 2024
ba759f2
Merge remote-tracking branch 'upstream/main' into base-64-demo
kantorcodes Nov 25, 2024
2299a0d
Merge branch 'main' into base-64-demo
kantorcodes Nov 26, 2024
e39ef06
Merge branch 'main' into base-64-demo
kantorcodes Nov 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 64 additions & 3 deletions demos/react-dapp/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import {
transactionToBase64String,
SignAndExecuteQueryParams,
ExecuteTransactionParams,
} from '../../../dist/src/index'
} from '../../../dist'

import React, { useEffect, useMemo, useState } from 'react'
import Modal from './components/Modal'
Expand All @@ -38,6 +38,7 @@ const App: React.FC = () => {
const [description, setDescription] = useState('')
const [url, setUrl] = useState('')
const [icons, setIcons] = useState('')
const [base64Transaction, setBase64Transaction] = useState('')

// Session management states
const [dAppConnector, setDAppConnector] = useState<DAppConnector | null>(null)
Expand Down Expand Up @@ -239,6 +240,35 @@ const App: React.FC = () => {
return { transaction: transactionSigned }
}

const handleBase64TransactionExecution = async () => {
if (!selectedSigner || !base64Transaction) return

try {
setIsLoading(true)
const accountId = selectedSigner.getAccountId()
const params: SignAndExecuteTransactionParams = {
transactionList: base64Transaction,
signerAccountId: 'hedera:testnet:' + accountId.toString(),
}

const result = await dAppConnector!.signAndExecuteTransaction(params)

setModalData({
title: 'Transaction Executed',
content: JSON.stringify(result, null, 2),
})
setModalOpen(true)
} catch (error) {
setModalData({
title: 'Error',
content: error instanceof Error ? error.message : 'Unknown error occurred',
})
setModalOpen(true)
} finally {
setIsLoading(false)
}
}

/**
* Session management methods
*/
Expand Down Expand Up @@ -589,8 +619,39 @@ const App: React.FC = () => {
</button>
</div>
</section>
<hr />
<h2>Pairing and session management:</h2>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I assume you want these removing as the button title for disconnecting the sessions is obvious enough?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I assume you want these removing as the button title for disconnecting the sessions is obvious enough?

haha no, I removed this by accident. Thanks for flagging

<section>
<h2>Execute Base64 Transaction</h2>
<div>
<label>Transaction Bytes</label>
<textarea
placeholder="Paste base64 transaction bytes here"
value={base64Transaction}
onChange={(e) => setBase64Transaction(e.target.value)}
style={{
width: '100%',
minHeight: '120px',
padding: '0.5rem',
marginBottom: '1rem',
border: '1px solid black',
fontFamily: 'monospace',
fontSize: '14px',
borderRadius: '1rem'
}}
/>
<button
onClick={handleBase64TransactionExecution}
disabled={!dAppConnector || !selectedSigner || !base64Transaction || isLoading}
>
{!dAppConnector
? 'Initialize WalletConnect First'
: !selectedSigner
? 'Connect Wallet First'
: isLoading
? 'Executing...'
: 'Execute Transaction'}
</button>
</div>
</section>
<section>
<div>
<button disabled={!dAppConnector} onClick={handleDisconnectSessions}>
Expand Down
Loading