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.

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: send user operations eoa doc #1192

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
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
54 changes: 54 additions & 0 deletions site/pages/react/send-user-operations.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -115,3 +115,57 @@ export default function MyOpSenderComponent() {
);
}
```

## Handling EOA Connections

If your application uses an Externally Owned Account (EOA) connection, you don't need to specify a Smart Contract Account (SCA) client explicitly. Simply pass undefined as the client parameter, or use a standard SCA client if one is available. The SDK will automatically detect and handle the EOA connection when applicable.

The SDK abstracts routing between User Operations (UOs) and traditional transactions (TXNs). When no Smart Contract Account (SCA) client is provided, or if an EOA connection is detected, transactions will default to using the EOA.

In the example below we have enabled EOAs to login. `useSendUserOperation` will automatically detect the EOA connection and send the transaction and return the transaction hash.

```tsx twoslash
import React from "react";
import {
type UseSendUserOperationResult,
useSendUserOperation,
useSmartAccountClient,
} from "@account-kit/react";

export default function MyOpSenderComponent() {
const { sendUserOperation, isSendingUserOperation } = useSendUserOperation({
uo: {
target: "0x...",
data: "0x...",
value: 0n,
},
// optional parameter that will wait for the transaction to be mined before returning
waitForTxn: true,
onSuccess: ({ hash, request }) => {
// [optional] Do something with the hash and request
},
onError: (error) => {
// [optional] Do something with the error
},
});

return (
<div>
<button
onClick={() =>
sendUserOperation({
uo: {
target: "0xTARGET_ADDRESS",
data: "0x",
value: 0n,
},
})
}
disabled={isSendingUserOperation}
>
{isSendingUserOperation ? "Sending..." : "Send UO"}
</button>
</div>
);
}
```
Loading