[P-1149] Add Porto example (WIP) #1

yosriady · 2025-09-15T11:27:13Z

Wallet events not getting detected

May need wagmi support

TODOs

check if 6963 returns providers
check if EIP1193 callbacks are implemented
Need to debug this locally with yarn linked SDK

yosriady · 2025-09-15T11:27:28Z

bugbot run

cursor · 2025-09-15T11:27:31Z

Skipping Bugbot: Bugbot is disabled for this repository

yosriady · 2025-09-15T11:28:13Z

bugbot run

Copilot

Pull Request Overview

This PR adds a comprehensive example application demonstrating the integration of Porto SDK (passkey-based wallet) with Formo Analytics for tracking wallet events and user interactions in a Next.js environment.

Created a complete Next.js Wagmi app with Porto connector integration
Implemented Formo Analytics SDK for comprehensive event tracking
Added testing interface with UI components for all wallet operations

Reviewed Changes

Copilot reviewed 10 out of 14 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/wagmi.ts	Wagmi configuration with Porto connector and multi-chain support
src/app/providers.tsx	React providers setup for Wagmi, TanStack Query, and Formo Analytics
src/app/page.tsx	Main testing interface with wallet operations and event tracking
src/app/layout.tsx	Next.js app layout with SSR cookie state initialization
src/app/globals.css	Global CSS styles with dark/light theme support
package.json	Project dependencies including Porto SDK and Formo Analytics
README.md	Comprehensive documentation and setup instructions
INTEGRATION_TEST_RESULTS.md	Detailed integration test results and technical documentation
.npmrc	NPM configuration for legacy peer dependencies
.env.example	Environment variables template

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-15T11:28:16Z

src/wagmi.ts

+    connectors: [
+      injected(),
+      baseAccount(),
+      walletConnect({ projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID! }),


The non-null assertion operator (!) could cause runtime errors if the environment variable is undefined. Consider providing a fallback value or conditional logic to handle missing project ID gracefully.

Suggested change

walletConnect({ projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID! }),

walletConnect({

projectId: (() => {

const id = process.env.NEXT_PUBLIC_WC_PROJECT_ID;

if (!id) {

throw new Error("Environment variable NEXT_PUBLIC_WC_PROJECT_ID is required for WalletConnect but is not defined.");

}

return id;

})(),

}),

Copilot · 2025-09-15T11:28:17Z

src/app/page.tsx

+  const handleCustomEvent = () => {
+    if (!customEventName) return
+
+    const eventData = customEventData ? JSON.parse(customEventData) : {}


JSON.parse could throw an error if customEventData is malformed JSON. Add try-catch error handling to prevent application crashes from invalid user input.

Suggested change

const eventData = customEventData ? JSON.parse(customEventData) : {}

let eventData = {};

if (customEventData) {

try {

eventData = JSON.parse(customEventData);

} catch (e) {

eventData = {};

// Optionally, you could log the error or notify the user here

}

}

Copilot · 2025-09-15T11:28:17Z

package.json

+    "@formo/analytics": "^1.20.0",
+    "@tanstack/react-query": "5.45.1",
+    "next": "14.2.4",
+    "porto": "^0.2.5",


Using 'latest' for version specifications can lead to unpredictable builds. Consider pinning to specific versions for better reproducibility and stability.

Copilot · 2025-09-15T11:28:17Z

package.json

+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "viem": "latest",
+    "wagmi": "latest"


Using 'latest' for version specifications can lead to unpredictable builds. Consider pinning to specific versions for better reproducibility and stability.

Suggested change

"wagmi": "latest"

"wagmi": "1.7.0"

linear · 2025-09-15T11:33:04Z

P-1149 SDK: Porto integration

https://x.com/gakonst/status/1927764579028783156

https://porto.sh/

Should just work if integrated with Wagmi? https://porto.sh/sdk

Create wagmi app with https://wagmi.sh/cli/create-wagmi

TODOs

Create a example app with https://porto.sh/sdk similar to https://github.com/getformo/formo-analytics-example-next/
Push to https://github.com/getformo/formo-example-porto
install the Formo SDK on the example app
add simple UI components to help test key SDK features and wallet events
- page events
- connect
- disconnect
- signature
- transaction
- custom events
Test and make sure the SDK emits all key events automatically
- if not, update the SDK to support it

https://ithaca.xyz/

Wallet library based on passkeys

Formo should be able to detect wallet events (connect wallet, etc)

Page and track function works

Event	Works?	Action items
Detect
Identify
Accounts changed
Chain changed
Connect
Signature
Transaction

References

Integrate with these APIs https://porto.sh/sdk/rpc

Copilot

Pull Request Overview

Copilot reviewed 10 out of 14 changed files in this pull request and generated 4 comments.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-15T11:33:15Z

src/wagmi.ts

+      walletConnect({ projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID! }),
+      porto(),
+    ],


The non-null assertion operator (!) will cause a runtime error if NEXT_PUBLIC_WC_PROJECT_ID is undefined. Consider adding validation or making this parameter optional with a fallback.

Suggested change

walletConnect({ projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID! }),

porto(),

],

process.env.NEXT_PUBLIC_WC_PROJECT_ID

? walletConnect({ projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID })

: undefined,

porto(),

].filter(Boolean),

Copilot · 2025-09-15T11:33:16Z

src/app/page.tsx

+      to_chain_id: targetChainId,
+      address: account.address
+    })
+    switchChain({ chainId: targetChainId as any })


Using 'as any' type assertion bypasses type safety. The chainId should be properly typed as the expected chain ID type from Wagmi.

Suggested change

switchChain({ chainId: targetChainId as any })

switchChain({ chainId: targetChainId })

Copilot · 2025-09-15T11:33:16Z

src/app/page.tsx

+      } catch (error) {
+        console.error('Invalid JSON in custom event data:', error)
+        alert('Invalid JSON format in event data. Please check your input.')


Using 'alert()' for error messages provides poor user experience. Consider using a more user-friendly notification system or inline error display.

Copilot · 2025-09-15T11:33:16Z

package.json

+    "porto": "^0.2.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "viem": "latest",
+    "wagmi": "latest"
+  },
+  "devDependencies": {
+    "@types/node": "^20.12.10",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "@wagmi/cli": "latest",


Using 'latest' for dependencies can lead to unexpected breaking changes. Consider pinning to specific versions for better stability, especially for production applications.

Suggested change

"porto": "^0.2.5",

"react": "^18.3.1",

"react-dom": "^18.3.1",

"viem": "latest",

"wagmi": "latest"

},

"devDependencies": {

"@types/node": "^20.12.10",

"@types/react": "^18.3.1",

"@types/react-dom": "^18.3.0",

"@wagmi/cli": "latest",

"porto": "0.2.5",

"react": "^18.3.1",

"react-dom": "^18.3.1",

"viem": "2.8.0",

"wagmi": "2.8.0"

},

"devDependencies": {

"@types/node": "^20.12.10",

"@types/react": "^18.3.1",

"@types/react-dom": "^18.3.0",

"@wagmi/cli": "2.8.0",

Add Porto example (WIP)

34c2e12

yosriady requested a review from Copilot September 15, 2025 11:27

Copilot AI reviewed Sep 15, 2025

View reviewed changes

fix

e407bb5

This comment was marked as outdated.

Sign in to view

yosriady requested a review from Copilot September 15, 2025 11:32

yosriady changed the title ~~Add Porto example (WIP)~~ [P-1149] Add Porto example (WIP) Sep 15, 2025

Copilot AI reviewed Sep 15, 2025

View reviewed changes

yosriady added 2 commits September 16, 2025 13:03

iterate

288d604

iterate

bbadc59

This comment was marked as outdated.

Sign in to view

iterate

02a78c2

-      walletConnect({ projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID! }),
+      walletConnect({
+        projectId: (() => {
+          const id = process.env.NEXT_PUBLIC_WC_PROJECT_ID;
+          if (!id) {
+            throw new Error("Environment variable NEXT_PUBLIC_WC_PROJECT_ID is required for WalletConnect but is not defined.");
+          }
+          return id;
+        })(),
+      }),

-    const eventData = customEventData ? JSON.parse(customEventData) : {}
+    let eventData = {};
+    if (customEventData) {
+      try {
+        eventData = JSON.parse(customEventData);
+      } catch (e) {
+        eventData = {};
+        // Optionally, you could log the error or notify the user here
+      }
+    }

	switchChain({ chainId: targetChainId as any })
	switchChain({ chainId: targetChainId })

[P-1149] Add Porto example (WIP) #1

Are you sure you want to change the base?

[P-1149] Add Porto example (WIP) #1

Uh oh!

Conversation

yosriady commented Sep 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yosriady commented Sep 15, 2025

Uh oh!

cursor bot commented Sep 15, 2025

Uh oh!

yosriady commented Sep 15, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

This comment was marked as outdated.

Uh oh!

linear bot commented Sep 15, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

This comment was marked as outdated.

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

yosriady commented Sep 15, 2025 •

edited

Loading