From 6903873f7a97e083a60d42bc157b6a065ce6c95d Mon Sep 17 00:00:00 2001 From: Samuel Huber <40248495+SamuelLHuber@users.noreply.github.com> Date: Fri, 5 Apr 2024 01:22:57 +0200 Subject: [PATCH 1/4] Add wallet address executing the tx documentation --- docs/pages/guides/transactions.mdx | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/docs/pages/guides/transactions.mdx b/docs/pages/guides/transactions.mdx index 69ebdd10..2526d001 100644 --- a/docs/pages/guides/transactions.mdx +++ b/docs/pages/guides/transactions.mdx @@ -18,4 +18,29 @@ An example snippet can be found below. ] ``` -Use the [Transactions starter](https://github.com/framesjs/frames.js/tree/main/examples/framesjs-starter/app/examples/new-api-transaction) as a template to build your transaction Frames. \ No newline at end of file +Use the [Transactions starter](https://github.com/framesjs/frames.js/tree/main/examples/framesjs-starter/app/examples/new-api-transaction) as a template to build your transaction Frames. + +## Use the actual address executing the transaction + +The Farcaster Client when calling back for the transaction data, will send the wallet address the user connected to the Frame Button with action="tx" set. + +We can use this address which may differ from the connectedAddresses (Validations) the user has attached to his Farcaster Profile (FID). + +```tsx +// ... in your POST handler serving the transaction data +const json = await re.json(); +const frameMessage = await getFrameMessage(json); + +if (!frameMessage) { + throw new Error("No message"); +} + +const walletAddress = frameMessage.connectedAddress; // this is the address executing the requested transaction + +// ... + +``` + +Here `frameMessage.connectedAddress` is the address of the wallet connected by the user after pressing the button to do the transaction. + +This is the wallet address the user executes the transaction with. From fe2d38b76f1931550401301f7b70e52991ec7304 Mon Sep 17 00:00:00 2001 From: Stephan Cilliers <5469870+stephancill@users.noreply.github.com> Date: Fri, 5 Apr 2024 12:08:39 +0200 Subject: [PATCH 2/4] fix: improve draft --- docs/pages/guides/transactions.mdx | 44 +++++++++++---------- docs/pages/reference/js/getFrameMessage.mdx | 8 +++- 2 files changed, 29 insertions(+), 23 deletions(-) diff --git a/docs/pages/guides/transactions.mdx b/docs/pages/guides/transactions.mdx index 2526d001..e7c78578 100644 --- a/docs/pages/guides/transactions.mdx +++ b/docs/pages/guides/transactions.mdx @@ -10,37 +10,39 @@ Frames can initiate transactions that apps that integrate Frames can complete, c An example snippet can be found below. ```tsx - // ... - buttons: [ - - ] +// ... +buttons: [ + , +]; ``` Use the [Transactions starter](https://github.com/framesjs/frames.js/tree/main/examples/framesjs-starter/app/examples/new-api-transaction) as a template to build your transaction Frames. -## Use the actual address executing the transaction +## Using the connected wallet address -The Farcaster Client when calling back for the transaction data, will send the wallet address the user connected to the Frame Button with action="tx" set. +The client will include the user's connected wallet address that will be executing the transaction in the frame action payload in the when a Frame Button with `action="tx"` set is pressed. -We can use this address which may differ from the connectedAddresses (Validations) the user has attached to his Farcaster Profile (FID). +The address is available in the context under the key `connectedAddress`. -```tsx -// ... in your POST handler serving the transaction data -const json = await re.json(); -const frameMessage = await getFrameMessage(json); +Note: -if (!frameMessage) { - throw new Error("No message"); -} +- The address is only available when the user has connected a wallet to the client the frame button pressed is has a `tx` action. +- `connectedAddress` differs from the `requesterVerifiedAddresses` returned by the [`farcasterHubContext`](/middleware/farcasterHubContext) middleware. -const walletAddress = frameMessage.connectedAddress; // this is the address executing the requested transaction +```tsx [./app/frames/tx-data/route.tsx] +import { frames } from "../frames"; -// ... +export const POST = frames(async (ctx) => { + if (!ctx.message) { + throw new Error("No message"); + } -``` + const userAddress = ctx.message.connectedAddress; -Here `frameMessage.connectedAddress` is the address of the wallet connected by the user after pressing the button to do the transaction. + // Do something with the user's connected address that will be executing the tx -This is the wallet address the user executes the transaction with. + return txData; +}); +``` diff --git a/docs/pages/reference/js/getFrameMessage.mdx b/docs/pages/reference/js/getFrameMessage.mdx index 2573e341..3d295359 100644 --- a/docs/pages/reference/js/getFrameMessage.mdx +++ b/docs/pages/reference/js/getFrameMessage.mdx @@ -5,7 +5,7 @@ Returns a `FrameActionData` object from the message trusted data, as well as `Fr ## Usage ```ts -import { frameMessage } from 'frames.js'; +import { getFrameMessage } from 'frames.js'; const frameMessage = await getFrameMessage(frameActionPayload); console.log(frameMessage); @@ -16,6 +16,7 @@ console.log(frameMessage); inputText: '', requesterFid: 1689, isValid: true, + connectedAddress: '0x8d25687829d6b85d9e0020b8c89e3ca24de20a89', casterFollowsRequester: false, requesterFollowsCaster: false, likedCast: false, @@ -42,7 +43,8 @@ console.log(frameMessage); buttonIndex: 2, castId: { fid: 1, hash: '0x0000000000000000000000000000000000000000' }, inputText: '', - requesterFid: 1689 + requesterFid: 1689, + connectedAddress: '0x8d25687829d6b85d9e0020b8c89e3ca24de20a89' } **/ ``` @@ -57,6 +59,8 @@ type FrameActionData = { hash: `0x${string}`; }; inputText?: string; + /** Only available in payloads of buttons with action `tx` **/ + connectedAddress: string; }; ``` From d15f9276028314873adaf0b9433abd96b11bc1be Mon Sep 17 00:00:00 2001 From: Stephan Cilliers <5469870+stephancill@users.noreply.github.com> Date: Fri, 5 Apr 2024 12:09:55 +0200 Subject: [PATCH 3/4] chore: changeset --- .changeset/weak-moons-provide.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/weak-moons-provide.md diff --git a/.changeset/weak-moons-provide.md b/.changeset/weak-moons-provide.md new file mode 100644 index 00000000..c71be79b --- /dev/null +++ b/.changeset/weak-moons-provide.md @@ -0,0 +1,5 @@ +--- +"docs": patch +--- + +fix: add connectedAddress docs From ffe9de1b34e38f6a38ec7ae453802baff6829ed9 Mon Sep 17 00:00:00 2001 From: Stephan Cilliers <5469870+stephancill@users.noreply.github.com> Date: Fri, 5 Apr 2024 12:10:28 +0200 Subject: [PATCH 4/4] fix: typo --- docs/pages/guides/transactions.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/guides/transactions.mdx b/docs/pages/guides/transactions.mdx index e7c78578..db762c0d 100644 --- a/docs/pages/guides/transactions.mdx +++ b/docs/pages/guides/transactions.mdx @@ -22,7 +22,7 @@ Use the [Transactions starter](https://github.com/framesjs/frames.js/tree/main/e ## Using the connected wallet address -The client will include the user's connected wallet address that will be executing the transaction in the frame action payload in the when a Frame Button with `action="tx"` set is pressed. +The client will include the user's connected wallet address that will be executing the transaction in the frame action payload in the when a frame button with `action="tx"` set is pressed. The address is available in the context under the key `connectedAddress`.