Skip to content

feat: integrate WalletConnect Pay SDK with payment modal #310

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

Open
ganchoradkov wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: integrate WalletConnect Pay SDK with payment modal #310

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f2b60f8
feat: integrate WalletConnect Pay SDK with payment modal
ganchoradkov Jan 12, 2026
ea9c60e
chore: added pay api key to release actions
ignaciosantise Jan 12, 2026
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
4 changes: 3 additions & 1 deletion .github/workflows/release-android-base.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,8 @@ on:
relay-url:
description: 'Relay URL'
required: false
pay-api-key:
required: false
sentry-dsn:
required: false
sentry-file:
Expand Down Expand Up @@ -114,7 +116,7 @@ jobs:
echo "$ENV_FILE_CONTENT" > "$ENV_FILE_PATH"
else
touch ${{ inputs.root-path }}/.env.${{ inputs.release-type }}
echo -e "ENV_PROJECT_ID=${{ secrets.project-id }}\nENV_RELAY_URL=${{ secrets.relay-url }}\nENV_SENTRY_DSN=${{ secrets.sentry-dsn }}\nENV_SENTRY_TAG=${{ inputs.release-type }}" >> ${{ inputs.root-path }}/.env.${{ inputs.release-type }}
echo -e "ENV_PROJECT_ID=${{ secrets.project-id }}\nENV_RELAY_URL=${{ secrets.relay-url }}\nENV_SENTRY_DSN=${{ secrets.sentry-dsn }}\nENV_SENTRY_TAG=${{ inputs.release-type }}\nENV_PAY_API_KEY=${{ secrets.pay-api-key }}" >> ${{ inputs.root-path }}/.env.${{ inputs.release-type }}
fi

- name: Add Sentry file
Expand Down
1 change: 1 addition & 0 deletions .github/workflows/release-dapp-ios-internal.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ jobs:
relay-url: ${{ secrets.ENV_RELAY_URL }}
sentry-dsn: ${{ secrets.W3M_WAGMI_SENTRY_DSN }}
sentry-file: ${{ secrets.W3M_WAGMI_SENTRY_FILE }}
pay-api-key: ${{ secrets.ENV_PAY_API_KEY }}
apple-username: ${{ secrets.APPLE_USERNAME }}
apple-key-id: ${{ secrets.APPLE_KEY_ID }}
apple-key-content: ${{ secrets.APPLE_KEY_CONTENT }}
Expand Down
4 changes: 3 additions & 1 deletion .github/workflows/release-ios-base.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,8 @@ on:
required: false
sentry-dsn:
required: false
pay-api-key:
required: false
sentry-file:
required: true
apple-username:
Expand Down Expand Up @@ -174,7 +176,7 @@ jobs:
echo "$ENV_FILE_CONTENT" > "$ENV_FILE_PATH"
else
touch ${{ inputs.root-path }}/.env.${{ inputs.release-type }}
echo -e "ENV_PROJECT_ID=${{ secrets.project-id }}\nENV_RELAY_URL=${{ secrets.relay-url }}\nENV_SENTRY_DSN=${{ secrets.sentry-dsn }}\nENV_SENTRY_TAG=${{ inputs.release-type }}" >> ${{ inputs.root-path }}/.env.${{ inputs.release-type }}
echo -e "ENV_PROJECT_ID=${{ secrets.project-id }}\nENV_RELAY_URL=${{ secrets.relay-url }}\nENV_SENTRY_DSN=${{ secrets.sentry-dsn }}\nENV_SENTRY_TAG=${{ inputs.release-type }}\nENV_PAY_API_KEY=${{ secrets.pay-api-key }}" >> ${{ inputs.root-path }}/.env.${{ inputs.release-type }}
fi

# Create sentry file
Expand Down
1 change: 1 addition & 0 deletions .github/workflows/release-wallet-android-internal.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ jobs:
relay-url: ${{ secrets.ENV_RELAY_URL }}
sentry-dsn: ${{ secrets.W3W_SENTRY_DSN }}
sentry-file: ${{ secrets.W3W_SENTRY_FILE }}
pay-api-key: ${{ secrets.ENV_PAY_API_KEY }}
secrets-file: ${{ secrets.ANDROID_SECRETS_FILE }}
firebase-app-id: ${{ secrets.W3W_ANDROID_INTERNAL_FIREBASE_APP_ID }}
gsa-key: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_KEY }}
Expand Down
1 change: 1 addition & 0 deletions wallets/rn_cli_wallet/.env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,4 @@ SENTRY_DISABLE_AUTO_UPLOAD=true

# debug, internal, production
ENV_SENTRY_TAG='debug'
ENV_PAY_API_KEY=''
2 changes: 2 additions & 0 deletions wallets/rn_cli_wallet/android/settings.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
plugins { id("com.facebook.react.settings") }
extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }


rootProject.name = 'RNWeb3Wallet'
include ':app'
includeBuild('../node_modules/@react-native/gradle-plugin')
1 change: 1 addition & 0 deletions wallets/rn_cli_wallet/babel.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ module.exports = {
'@/utils': './src/utils',
'@/provider': './src/provider',
'@/store': './src/store',
'@/lib': './src/lib',
},
},
],
Expand Down
1 change: 1 addition & 0 deletions wallets/rn_cli_wallet/declarations.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ declare module '*.webp';
declare module 'react-native-config' {
export interface NativeConfig {
ENV_PROJECT_ID: string;
ENV_PAY_API_KEY: string;
ENV_RELAY_URL: string;
ENV_SENTRY_DSN: string;
ENV_SENTRY_TAG: string;
Expand Down
3 changes: 2 additions & 1 deletion wallets/rn_cli_wallet/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@
"@ton/core": "0.62.0",
"@ton/crypto": "3.3.0",
"@ton/ton": "15.4.0",
"@walletconnect/react-native-compat": "2.23.0",
"@walletconnect/pay": "0.0.0-canary.1",
Copy link

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

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

The package version "0.0.0-canary.1" for @walletconnect/pay is a pre-release canary version. Using canary/pre-release versions in production code is risky as they may contain unstable features, breaking changes, or bugs. Canary versions are typically meant for testing and development purposes. Consider using a stable release version or documenting the risks of using this pre-release version.

Suggested change
"@walletconnect/pay": "0.0.0-canary.1",
"@walletconnect/pay": "1.0.0",

Copilot uses AI. Check for mistakes.
"@walletconnect/react-native-compat": "2.23.1-canary.1",
Copy link

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

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

The package version "2.23.1-canary.1" for @walletconnect/react-native-compat is a pre-release canary version. Using canary/pre-release versions in production code is risky as they may contain unstable features, breaking changes, or bugs. Canary versions are typically meant for testing and development purposes. Consider using a stable release version or documenting the risks of using this pre-release version.

Suggested change
"@walletconnect/react-native-compat": "2.23.1-canary.1",
"@walletconnect/react-native-compat": "2.23.1",

Copilot uses AI. Check for mistakes.
"bip39": "3.1.0",
"dayjs": "1.11.11",
"ed25519-hd-key": "^1.3.0",
Expand Down
27 changes: 14 additions & 13 deletions wallets/rn_cli_wallet/src/components/CopyURIDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import {useState} from 'react';
import {Dimensions, StyleSheet, TextInput, View} from 'react-native';
import { useState } from 'react';
import { Dimensions, StyleSheet, TextInput, View } from 'react-native';
import Dialog from 'react-native-dialog';

import {useTheme} from '@/hooks/useTheme';
import {ConnectButton} from './ConnectButton';
import { useTheme } from '@/hooks/useTheme';
import { ConnectButton } from './ConnectButton';

interface copyURIDialogProps {
visible: boolean;
Expand Down Expand Up @@ -41,16 +41,17 @@ export function CopyURIDialog({
useNativeDriver
contentStyle={[
styles.mainContainer,
{maxWidth: windowWidth * 0.9, backgroundColor: Theme['bg-175']},
]}>
{ maxWidth: windowWidth * 0.9, backgroundColor: Theme['bg-175'] },
]}
>
<View>
<Dialog.Title style={[styles.titleText, {color: Theme['fg-100']}]}>
Enter a WalletConnect URI
<Dialog.Title style={[styles.titleText, { color: Theme['fg-100'] }]}>
Paste URI or Payment Link
</Dialog.Title>
<Dialog.Description
style={[styles.descriptionText, {color: Theme['fg-150']}]}>
To get the URI press the copy to clipboard button from your dapp's
WalletConnect interface.
style={[styles.descriptionText, { color: Theme['fg-150'] }]}
>
Paste a WalletConnect URI or a WalletConnect Pay link to continue.
</Dialog.Description>

<View style={styles.flexRow}>
Expand All @@ -66,7 +67,7 @@ export function CopyURIDialog({
]}
placeholderTextColor={Theme['fg-300']}
onChangeText={setUri}
placeholder="wc://a13aef..."
placeholder="wc://... or https://pay.walletconnect.com/..."
clearButtonMode="always"
enablesReturnKeyAutomatically
autoCapitalize="none"
Expand All @@ -80,7 +81,7 @@ export function CopyURIDialog({
/>
<View style={styles.cancelContainer}>
<Dialog.Button
style={[styles.cancelText, {color: Theme['accent-100']}]}
style={[styles.cancelText, { color: Theme['accent-100'] }]}
label="Cancel"
onPress={handleCancel}
/>
Expand Down
25 changes: 16 additions & 9 deletions wallets/rn_cli_wallet/src/components/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,26 @@
import {useSnapshot} from 'valtio';
import {useCallback, useMemo} from 'react';
import {StyleSheet, View} from 'react-native';
import { useSnapshot } from 'valtio';
import { useCallback, useMemo } from 'react';
import { StyleSheet, View } from 'react-native';
import RNModal from 'react-native-modal';

import ModalStore from '@/store/ModalStore';
import SessionProposalModal from '@/modals/SessionProposalModal';
import SessionSignModal from '@/modals/SessionSignModal';
import SessionSendTransactionModal from '@/modals/SessionSendTransactionModal';
import SessionSignTypedDataModal from '@/modals/SessionSignTypedDataModal';
import {LoadingModal} from '@/modals/LoadingModal';
import { LoadingModal } from '@/modals/LoadingModal';
import SessionAuthenticateModal from '@/modals/SessionAuthenticateModal';
import SessionSignSuiPersonalMessageModal from '@/modals/SessionSuiSignPersonalMessageModal';
import SessionSignSuiTransactionModal from '@/modals/SessionSuiSignTransactionModal';
import SessionSignAndExecuteSuiTransactionModal from '@/modals/SessionSuiSignAndExecuteTransactionModal';
import SessionTonSendMessageModal from '@/modals/SessionTonSendMessageModal';
import SessionTonSignDataModal from '@/modals/SessionTonSignDataModal';
import SessionSignTronModal from '@/modals/SessionSignTronModal';
import PaymentOptionsModal from '@/modals/PaymentOptionsModal';
import ImportWalletModal from '@/modals/ImportWalletModal';

export default function Modal() {
const {open, view} = useSnapshot(ModalStore.state);
const { open, view } = useSnapshot(ModalStore.state);
// handle the modal being closed by click outside
const onClose = useCallback(() => {
if (open) {
Expand Down Expand Up @@ -47,11 +49,15 @@ export default function Modal() {
case 'SessionSuiSignAndExecuteTransactionModal':
return <SessionSignAndExecuteSuiTransactionModal />;
case 'SessionTonSendMessageModal':
return <SessionTonSendMessageModal />
return <SessionTonSendMessageModal />;
case 'SessionTonSignDataModal':
return <SessionTonSignDataModal />
return <SessionTonSignDataModal />;
case 'SessionSignTronModal':
return <SessionSignTronModal />
return <SessionSignTronModal />;
case 'PaymentOptionsModal':
return <PaymentOptionsModal />;
case 'ImportWalletModal':
return <ImportWalletModal />;
default:
return <View />;
}
Expand All @@ -67,7 +73,8 @@ export default function Modal() {
onBackdropPress={onClose}
onModalHide={onClose}
style={styles.modal}
isVisible={open}>
isVisible={open}
>
{componentView}
</RNModal>
);
Expand Down
28 changes: 28 additions & 0 deletions wallets/rn_cli_wallet/src/hooks/useInitializePaySDK.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { useEffect, useState } from 'react';
import Config from 'react-native-config';

import PayStore from '@/store/PayStore';

const PAY_CONFIG = {
projectId: Config.ENV_PROJECT_ID || '',
apiKey: Config.ENV_PAY_API_KEY || '',
metadata: {
name: 'RN Web3Wallet',
bundleId: 'com.walletconnect.web3wallet.rnsample',
},
};
Comment on lines +6 to +13
Copy link

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

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

The Pay SDK initialization proceeds with empty strings for projectId or apiKey if the environment variables are not set. This will likely cause the SDK to fail silently or produce confusing errors. Consider adding validation to check if these required configuration values are present before attempting initialization, and log a clear error message if they're missing.

Copilot uses AI. Check for mistakes.

export default function useInitializePaySDK() {
const [initialized, setInitialized] = useState(false);

useEffect(() => {
if (initialized) {
return;
}

PayStore.initialize(PAY_CONFIG);
setInitialized(PayStore.isAvailable());
}, [initialized]);

return initialized;
}
27 changes: 21 additions & 6 deletions wallets/rn_cli_wallet/src/lib/EIP155Lib.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import {providers, Wallet} from 'ethers';
import { providers, Wallet } from 'ethers';

/**
* Types
*/
interface IInitArgs {
mnemonic?: string;
privateKey?: string;
}

/**
Expand All @@ -17,16 +18,30 @@ export default class EIP155Lib {
this.wallet = wallet;
}

static init({mnemonic}: IInitArgs) {
const wallet = mnemonic
? Wallet.fromMnemonic(mnemonic)
: Wallet.createRandom();
static init({ mnemonic, privateKey }: IInitArgs) {
let wallet: Wallet;

if (privateKey) {
wallet = new Wallet(privateKey);
} else if (mnemonic) {
wallet = Wallet.fromMnemonic(mnemonic);
} else {
wallet = Wallet.createRandom();
}

return new EIP155Lib(wallet);
}

getMnemonic() {
return this.wallet.mnemonic.phrase;
return this.wallet.mnemonic?.phrase ?? '';
}

getPrivateKey() {
return this.wallet.privateKey;
}

hasMnemonic() {
return !!this.wallet.mnemonic?.phrase;
}

getAddress() {
Expand Down
Loading
Loading