+
+ );
+};
+
+export default AddressGenerator;
diff --git a/example/src/components-ui/StakingKeyDeregistrar.tsx b/example/src/components-ui/StakingKeyDeregistrar.tsx
new file mode 100644
index 00000000..2db79497
--- /dev/null
+++ b/example/src/components-ui/StakingKeyDeregistrar.tsx
@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import useCardanoApi from '../context/CardanoContext';
+import { protocolParams } from '../utils/networkConfig';
+import { createTxWithStakeDeregistrationCert } from '../components-logic/StakingKeyDeregistrar';
+
+const StakingKeyDeregistrar: React.FC = () => {
+ const { cardanoApi } = useCardanoApi();
+ const [stakeRefundAmount, setStakeRefundAmount] = useStateCardano address generator
+ + {address && ( +
+
+ )}
+ Your address:
+{address}
+
+
+ );
+};
+
+export default StakingKeyDeregistrar;
diff --git a/example/src/components-ui/StakingKeyRegistrar.tsx b/example/src/components-ui/StakingKeyRegistrar.tsx
new file mode 100644
index 00000000..3bb79d43
--- /dev/null
+++ b/example/src/components-ui/StakingKeyRegistrar.tsx
@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import useCardanoApi from '../context/CardanoContext';
+import { protocolParams } from '../utils/networkConfig';
+import { createTxWithStakeRegistrationCert } from '../components-logic/StakingKeyRegistrar';
+
+const StakingKeyRegistrar: React.FC = () => {
+ const { cardanoApi } = useCardanoApi();
+ const [stakeDepositAmount, setStakeDepositAmount] = useStateCreating a transaction with the Stake Deregistration certificate
+ + + + {isPopupOpen && } + + {isPopupOpen && ( +
+
+ )}
+
+ {unsignedTransactionHex && (
+ Tx with StakeDeregistration certificate
+ + {loader ? ( +
+
+
+ ) : (
+ <>
+ Creating transaction...
+
+
+
+
+
+
+
+ setStakeRefundAmount(event.target.value)}
+ disabled={!useConway}
+ />
+
+
+
+
+
+ )}
+
+
+ )}
+ Unsigned Transaction (hex):
+{unsignedTransactionHex}
+
+
+ );
+};
+
+export default StakingKeyRegistrar;
diff --git a/example/src/components-ui/TransactionCreator.tsx b/example/src/components-ui/TransactionCreator.tsx
new file mode 100644
index 00000000..c7ca7678
--- /dev/null
+++ b/example/src/components-ui/TransactionCreator.tsx
@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import { BuildTransactionInputType, createTransaction } from '../components-logic/TransactionCreator';
+import useCardanoApi from '../context/CardanoContext';
+
+const TransactionCreator: React.FC = () => {
+ const { cardanoApi } = useCardanoApi();
+ const [transactionHex, setTransactionHex] = useStateCreating a transaction with the Stake Registration certificate
+ + + + {isPopupOpen && } + + {isPopupOpen && ( +
+
+ )}
+
+ {unsignedTransactionHex && (
+ Tx with StakeRegistration certificate
+ + {loader ? ( +
+
+
+ ) : (
+ <>
+ Creating transaction...
+
+
+
+
+
+
+
+ setStakeDepositAmount(event.target.value)}
+ disabled={!useConway}
+ />
+
+
+
+
+
+ )}
+
+
+ )}
+ Unsigned Transaction (hex):
+{unsignedTransactionHex}
+
+
+ );
+};
+
+export default TransactionCreator;
diff --git a/example/src/components-ui/VoteDelegator.tsx b/example/src/components-ui/VoteDelegator.tsx
new file mode 100644
index 00000000..43144503
--- /dev/null
+++ b/example/src/components-ui/VoteDelegator.tsx
@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import useCardanoApi from '../context/CardanoContext';
+import { createTxWithVoteDelegationCert } from '../components-logic/VoteDelegator';
+
+const VoteDelegator: React.FC = () => {
+ const { cardanoApi } = useCardanoApi();
+ const [isPopupOpen, setIsPopupOpen] = useStateCreating a simple transaction
+ + + + {isPopupOpen && } + + {isPopupOpen && ( +
+
+ )}
+
+ {transactionHex && (
+ Simple transaction data
+ + {loader ? ( +
+
+
+ ) : (
+ <>
+ Creating transaction...
+
+
+
+
+
+ setBuildTransactionInput({ ...buildTransactionInput, address: event.target.value })
+ }
+ />
+
+
+
+
+
+
+
+ setBuildTransactionInput({ ...buildTransactionInput, amount: event.target.value })
+ }
+ disabled={buildTransactionInput.sendAll}
+ />
+
+
+
+
+
+ )}
+
+
+ )}
+ Unsigned Transaction (hex):
+{transactionHex}
+
+
+ );
+};
+
+export default VoteDelegator;
diff --git a/example/src/components-ui/WalletConnector.css b/example/src/components-ui/WalletConnector.css
new file mode 100644
index 00000000..ad540325
--- /dev/null
+++ b/example/src/components-ui/WalletConnector.css
@@ -0,0 +1,11 @@
+.connected {
+ display: flex;
+ flex-direction: column;
+}
+
+.available-wallets {
+ padding-top: 16px;
+ display: flex;
+ flex-direction: row;
+ gap: 16px;
+}
\ No newline at end of file
diff --git a/example/src/components-ui/WalletConnector.tsx b/example/src/components-ui/WalletConnector.tsx
new file mode 100644
index 00000000..4de0d209
--- /dev/null
+++ b/example/src/components-ui/WalletConnector.tsx
@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import useCardanoApi from '../context/CardanoContext';
+import {
+ NO_CARDANO,
+ NOT_CONNECTED,
+ IN_PROGRESS,
+ CONNECTED,
+} from '../utils/connectionStates';
+import './WalletConnector.css';
+
+const WalletConnector: React.FC = () => {
+ const {
+ connect,
+ availableWallets,
+ selectedWallet,
+ setSelectedWallet,
+ connectionState,
+ } = useCardanoApi();
+ const [selectedUserWallet, setSelectedUserWallet] = useState('');
+ const [showWallets, setShowWallets] = useState(false);
+
+ console.log(`[dApp][WalletConnector] is called`);
+
+ const handleSelectionAndClose = () => {
+ setSelectedWallet(selectedUserWallet);
+ connect(selectedUserWallet, false, false);
+ setShowWallets(false);
+ };
+
+ const getWalletIcon = () => {
+ return window.cardano[selectedWallet].icon;
+ };
+
+ const getWalletName = () => {
+ const walletName = window.cardano[selectedWallet].name;
+ const capitilizedFirstLetter = walletName[0].toUpperCase() + walletName.substring(1);
+
+ return capitilizedFirstLetter;
+ };
+
+ if (connectionState === NO_CARDANO) {
+ return Creating a transaction with the Vote Delegation certificate
+ + + + {isPopupOpen && } + + {isPopupOpen && ( +
+
+ )}
+
+ {unsignedTransactionHex && (
+ Tx with VoteDelegation certificate
+ + {loader ? ( +
+
+
+ ) : (
+ <>
+ Creating transaction...
+
+
+
+
+ setVoteChoice(event.target.value)}
+ />
+
+
+
+
+
+ )}
+
+
+ )}
+ Unsigned Transaction (hex):
+{unsignedTransactionHex}
+Connect a Cardano wallet
;
+ }
+
+ if (connectionState === IN_PROGRESS) {
+ return Waiting connection...
;
+ }
+
+ if (connectionState === CONNECTED) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+
+
+ })
+
+
+
+
+
+ Connected to {getWalletName()}
+
+ {connectionState === NOT_CONNECTED && !showWallets && (
+
+ )}
+
+ {showWallets && (
+
+ );
+};
+
+export default WalletConnector;
diff --git a/example/src/context/CardanoContext.tsx b/example/src/context/CardanoContext.tsx
new file mode 100644
index 00000000..580b3a1c
--- /dev/null
+++ b/example/src/context/CardanoContext.tsx
@@ -0,0 +1,261 @@
+import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
+import {
+ CONNECTED,
+ IN_PROGRESS,
+ NO_CARDANO,
+ NOT_CONNECTED,
+} from '../utils/connectionStates';
+
+declare global {
+ interface Window {
+ cardano: any;
+ }
+}
+
+type Cip95Type = {
+ getPubDRepKey: () => Promise
+
+ )}
+ Select a wallet for connection:
+
+ {availableWallets.map((walletInfo) => (
+
+
+
+
+ ))}
+
+
+
+