coinley-checkout 0.1.6 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/coinley-checkout.es.js +155 -592
- package/dist/coinley-checkout.es.js.map +1 -1
- package/dist/style.css +0 -6
- package/package.json +1 -1
- package/dist/coinley-checkout.umd.js +0 -2013
- package/dist/coinley-checkout.umd.js.map +0 -1
|
@@ -1,5 +1,117 @@
|
|
|
1
1
|
import require$$0, { createContext, useContext, useState, useEffect, forwardRef, useImperativeHandle } from "react";
|
|
2
2
|
const styles = "";
|
|
3
|
+
let apiConfig = {
|
|
4
|
+
apiKey: null,
|
|
5
|
+
apiSecret: null,
|
|
6
|
+
apiUrl: "https://coinleyserver-production.up.railway.app"
|
|
7
|
+
};
|
|
8
|
+
const initializeApi = (config) => {
|
|
9
|
+
apiConfig = { ...apiConfig, ...config };
|
|
10
|
+
console.log("API initialized with:", apiConfig);
|
|
11
|
+
};
|
|
12
|
+
const getHeaders = () => {
|
|
13
|
+
return {
|
|
14
|
+
"Content-Type": "application/json",
|
|
15
|
+
"x-api-key": apiConfig.apiKey,
|
|
16
|
+
"x-api-secret": apiConfig.apiSecret
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
const createPayment = async (paymentData) => {
|
|
20
|
+
try {
|
|
21
|
+
console.log("Creating payment with data:", paymentData);
|
|
22
|
+
console.log("API URL:", `${apiConfig.apiUrl}/api/payments/create`);
|
|
23
|
+
const response = await fetch(`${apiConfig.apiUrl}/api/payments/create`, {
|
|
24
|
+
method: "POST",
|
|
25
|
+
headers: getHeaders(),
|
|
26
|
+
body: JSON.stringify(paymentData)
|
|
27
|
+
});
|
|
28
|
+
console.log("Create payment response status:", response.status);
|
|
29
|
+
if (!response.ok) {
|
|
30
|
+
const errorData = await response.json();
|
|
31
|
+
console.error("Error creating payment:", errorData);
|
|
32
|
+
throw new Error(errorData.error || `Failed to create payment: ${response.status}`);
|
|
33
|
+
}
|
|
34
|
+
const data = await response.json();
|
|
35
|
+
console.log("Create payment response data:", data);
|
|
36
|
+
return data;
|
|
37
|
+
} catch (error) {
|
|
38
|
+
console.error("Create payment error:", error);
|
|
39
|
+
throw error;
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
const getPayment = async (paymentId) => {
|
|
43
|
+
try {
|
|
44
|
+
console.log("Getting payment:", paymentId);
|
|
45
|
+
const response = await fetch(`${apiConfig.apiUrl}/api/payments/${paymentId}`, {
|
|
46
|
+
method: "GET",
|
|
47
|
+
headers: getHeaders()
|
|
48
|
+
});
|
|
49
|
+
if (!response.ok) {
|
|
50
|
+
const errorData = await response.json();
|
|
51
|
+
console.error("Error getting payment:", errorData);
|
|
52
|
+
throw new Error(errorData.error || `Failed to get payment: ${response.status}`);
|
|
53
|
+
}
|
|
54
|
+
const data = await response.json();
|
|
55
|
+
console.log("Get payment response:", data);
|
|
56
|
+
return data;
|
|
57
|
+
} catch (error) {
|
|
58
|
+
console.error("Get payment error:", error);
|
|
59
|
+
throw error;
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
const processPayment = async (processData) => {
|
|
63
|
+
try {
|
|
64
|
+
console.log("Processing payment with data:", processData);
|
|
65
|
+
console.log("API URL:", `${apiConfig.apiUrl}/api/payments/process`);
|
|
66
|
+
const response = await fetch(`${apiConfig.apiUrl}/api/payments/process`, {
|
|
67
|
+
method: "POST",
|
|
68
|
+
headers: getHeaders(),
|
|
69
|
+
body: JSON.stringify(processData)
|
|
70
|
+
});
|
|
71
|
+
console.log("Process payment response status:", response.status);
|
|
72
|
+
if (!response.ok) {
|
|
73
|
+
const errorData = await response.json();
|
|
74
|
+
console.error("Error processing payment:", errorData);
|
|
75
|
+
throw new Error(errorData.error || `Failed to process payment: ${response.status}`);
|
|
76
|
+
}
|
|
77
|
+
const data = await response.json();
|
|
78
|
+
console.log("Process payment response data:", data);
|
|
79
|
+
return data;
|
|
80
|
+
} catch (error) {
|
|
81
|
+
console.error("Process payment error:", error);
|
|
82
|
+
throw error;
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
const isMetaMaskInstalled = () => {
|
|
86
|
+
return typeof window !== "undefined" && typeof window.ethereum !== "undefined";
|
|
87
|
+
};
|
|
88
|
+
const connectWallet = async () => {
|
|
89
|
+
if (!isMetaMaskInstalled()) {
|
|
90
|
+
throw new Error("MetaMask is not installed");
|
|
91
|
+
}
|
|
92
|
+
try {
|
|
93
|
+
const accounts = await window.ethereum.request({ method: "eth_requestAccounts" });
|
|
94
|
+
return accounts;
|
|
95
|
+
} catch (error) {
|
|
96
|
+
console.error("Error connecting to wallet:", error);
|
|
97
|
+
throw error;
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
const sendTransaction = async (txParams) => {
|
|
101
|
+
if (!isMetaMaskInstalled()) {
|
|
102
|
+
throw new Error("MetaMask is not installed");
|
|
103
|
+
}
|
|
104
|
+
try {
|
|
105
|
+
const txHash = await window.ethereum.request({
|
|
106
|
+
method: "eth_sendTransaction",
|
|
107
|
+
params: [txParams]
|
|
108
|
+
});
|
|
109
|
+
return txHash;
|
|
110
|
+
} catch (error) {
|
|
111
|
+
console.error("Error sending transaction:", error);
|
|
112
|
+
throw error;
|
|
113
|
+
}
|
|
114
|
+
};
|
|
3
115
|
var jsxRuntime = { exports: {} };
|
|
4
116
|
var reactJsxRuntime_production_min = {};
|
|
5
117
|
/**
|
|
@@ -955,159 +1067,6 @@ const ThemeProvider = ({ initialTheme = "light", children }) => {
|
|
|
955
1067
|
}, [theme]);
|
|
956
1068
|
return /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children });
|
|
957
1069
|
};
|
|
958
|
-
let apiConfig = {
|
|
959
|
-
apiKey: null,
|
|
960
|
-
apiSecret: null,
|
|
961
|
-
apiUrl: "https://coinleyserver-production.up.railway.app"
|
|
962
|
-
};
|
|
963
|
-
const initializeApi = (config) => {
|
|
964
|
-
apiConfig = { ...apiConfig, ...config };
|
|
965
|
-
console.log("API initialized with:", apiConfig);
|
|
966
|
-
};
|
|
967
|
-
const getHeaders = () => {
|
|
968
|
-
return {
|
|
969
|
-
"Content-Type": "application/json",
|
|
970
|
-
"x-api-key": apiConfig.apiKey,
|
|
971
|
-
"x-api-secret": apiConfig.apiSecret
|
|
972
|
-
};
|
|
973
|
-
};
|
|
974
|
-
const createPayment = async (paymentData) => {
|
|
975
|
-
try {
|
|
976
|
-
console.log("Creating payment with data:", paymentData);
|
|
977
|
-
console.log("API URL:", `${apiConfig.apiUrl}/api/payments/create`);
|
|
978
|
-
const response = await fetch(`${apiConfig.apiUrl}/api/payments/create`, {
|
|
979
|
-
method: "POST",
|
|
980
|
-
headers: getHeaders(),
|
|
981
|
-
body: JSON.stringify(paymentData)
|
|
982
|
-
});
|
|
983
|
-
console.log("Create payment response status:", response.status);
|
|
984
|
-
if (!response.ok) {
|
|
985
|
-
const errorData = await response.json();
|
|
986
|
-
console.error("Error creating payment:", errorData);
|
|
987
|
-
throw new Error(errorData.error || `Failed to create payment: ${response.status}`);
|
|
988
|
-
}
|
|
989
|
-
const data = await response.json();
|
|
990
|
-
console.log("Create payment response data:", data);
|
|
991
|
-
return data;
|
|
992
|
-
} catch (error) {
|
|
993
|
-
console.error("Create payment error:", error);
|
|
994
|
-
throw error;
|
|
995
|
-
}
|
|
996
|
-
};
|
|
997
|
-
const getPayment = async (paymentId) => {
|
|
998
|
-
try {
|
|
999
|
-
console.log("Getting payment:", paymentId);
|
|
1000
|
-
const response = await fetch(`${apiConfig.apiUrl}/api/payments/${paymentId}`, {
|
|
1001
|
-
method: "GET",
|
|
1002
|
-
headers: getHeaders()
|
|
1003
|
-
});
|
|
1004
|
-
if (!response.ok) {
|
|
1005
|
-
const errorData = await response.json();
|
|
1006
|
-
console.error("Error getting payment:", errorData);
|
|
1007
|
-
throw new Error(errorData.error || `Failed to get payment: ${response.status}`);
|
|
1008
|
-
}
|
|
1009
|
-
const data = await response.json();
|
|
1010
|
-
console.log("Get payment response:", data);
|
|
1011
|
-
return data;
|
|
1012
|
-
} catch (error) {
|
|
1013
|
-
console.error("Get payment error:", error);
|
|
1014
|
-
throw error;
|
|
1015
|
-
}
|
|
1016
|
-
};
|
|
1017
|
-
const processPayment = async (processData) => {
|
|
1018
|
-
try {
|
|
1019
|
-
console.log("Processing payment with data:", processData);
|
|
1020
|
-
console.log("API URL:", `${apiConfig.apiUrl}/api/payments/process`);
|
|
1021
|
-
const response = await fetch(`${apiConfig.apiUrl}/api/payments/process`, {
|
|
1022
|
-
method: "POST",
|
|
1023
|
-
headers: getHeaders(),
|
|
1024
|
-
body: JSON.stringify(processData)
|
|
1025
|
-
});
|
|
1026
|
-
console.log("Process payment response status:", response.status);
|
|
1027
|
-
if (!response.ok) {
|
|
1028
|
-
const errorData = await response.json();
|
|
1029
|
-
console.error("Error processing payment:", errorData);
|
|
1030
|
-
throw new Error(errorData.error || `Failed to process payment: ${response.status}`);
|
|
1031
|
-
}
|
|
1032
|
-
const data = await response.json();
|
|
1033
|
-
console.log("Process payment response data:", data);
|
|
1034
|
-
return data;
|
|
1035
|
-
} catch (error) {
|
|
1036
|
-
console.error("Process payment error:", error);
|
|
1037
|
-
throw error;
|
|
1038
|
-
}
|
|
1039
|
-
};
|
|
1040
|
-
const getMerchantPayments = async (options = {}) => {
|
|
1041
|
-
try {
|
|
1042
|
-
const { page = 1, limit = 10, status, currency, startDate, endDate, search } = options;
|
|
1043
|
-
const queryParams = new URLSearchParams();
|
|
1044
|
-
queryParams.append("page", page);
|
|
1045
|
-
queryParams.append("limit", limit);
|
|
1046
|
-
if (status)
|
|
1047
|
-
queryParams.append("status", status);
|
|
1048
|
-
if (currency)
|
|
1049
|
-
queryParams.append("currency", currency);
|
|
1050
|
-
if (startDate)
|
|
1051
|
-
queryParams.append("startDate", startDate);
|
|
1052
|
-
if (endDate)
|
|
1053
|
-
queryParams.append("endDate", endDate);
|
|
1054
|
-
if (search)
|
|
1055
|
-
queryParams.append("search", search);
|
|
1056
|
-
const url = `${apiConfig.apiUrl}/api/payments/merchant/list?${queryParams.toString()}`;
|
|
1057
|
-
const response = await fetch(url, {
|
|
1058
|
-
method: "GET",
|
|
1059
|
-
headers: getHeaders()
|
|
1060
|
-
});
|
|
1061
|
-
if (!response.ok) {
|
|
1062
|
-
const errorData = await response.json();
|
|
1063
|
-
throw new Error(errorData.error || `Failed to get payments: ${response.status}`);
|
|
1064
|
-
}
|
|
1065
|
-
return await response.json();
|
|
1066
|
-
} catch (error) {
|
|
1067
|
-
console.error("Get merchant payments error:", error);
|
|
1068
|
-
throw error;
|
|
1069
|
-
}
|
|
1070
|
-
};
|
|
1071
|
-
const getMerchantPaymentStats = async () => {
|
|
1072
|
-
try {
|
|
1073
|
-
const response = await fetch(`${apiConfig.apiUrl}/api/payments/merchant/stats`, {
|
|
1074
|
-
method: "GET",
|
|
1075
|
-
headers: getHeaders()
|
|
1076
|
-
});
|
|
1077
|
-
if (!response.ok) {
|
|
1078
|
-
const errorData = await response.json();
|
|
1079
|
-
throw new Error(errorData.error || `Failed to get payment stats: ${response.status}`);
|
|
1080
|
-
}
|
|
1081
|
-
return await response.json();
|
|
1082
|
-
} catch (error) {
|
|
1083
|
-
console.error("Get merchant payment stats error:", error);
|
|
1084
|
-
throw error;
|
|
1085
|
-
}
|
|
1086
|
-
};
|
|
1087
|
-
const getSupportedCurrencies = async () => {
|
|
1088
|
-
try {
|
|
1089
|
-
const response = await fetch(`${apiConfig.apiUrl}/api/payments/currencies`, {
|
|
1090
|
-
method: "GET",
|
|
1091
|
-
headers: getHeaders()
|
|
1092
|
-
});
|
|
1093
|
-
if (!response.ok) {
|
|
1094
|
-
const errorData = await response.json();
|
|
1095
|
-
throw new Error(errorData.error || `Failed to get currencies: ${response.status}`);
|
|
1096
|
-
}
|
|
1097
|
-
return await response.json();
|
|
1098
|
-
} catch (error) {
|
|
1099
|
-
console.error("Get supported currencies error:", error);
|
|
1100
|
-
return {
|
|
1101
|
-
currencies: [
|
|
1102
|
-
{ id: "USDT", name: "Tether USD", network: "ethereum" },
|
|
1103
|
-
{ id: "USDC", name: "USD Coin", network: "ethereum" },
|
|
1104
|
-
{ id: "BNB", name: "Binance Coin", network: "binance" },
|
|
1105
|
-
{ id: "SOL", name: "Solana", network: "solana" },
|
|
1106
|
-
{ id: "USDC_SOL", name: "USD Coin (Solana)", network: "solana" }
|
|
1107
|
-
]
|
|
1108
|
-
};
|
|
1109
|
-
}
|
|
1110
|
-
};
|
|
1111
1070
|
const CoinleyContext = createContext();
|
|
1112
1071
|
const useCoinley = () => useContext(CoinleyContext);
|
|
1113
1072
|
const CoinleyProvider = ({
|
|
@@ -1148,7 +1107,7 @@ const CoinleyProvider = ({
|
|
|
1148
1107
|
return /* @__PURE__ */ jsxRuntimeExports.jsx(CoinleyContext.Provider, { value, children });
|
|
1149
1108
|
};
|
|
1150
1109
|
const QRCode = ({ walletAddress, amount, currency, theme = "light" }) => {
|
|
1151
|
-
const
|
|
1110
|
+
const qrDisplay = /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
1152
1111
|
"div",
|
|
1153
1112
|
{
|
|
1154
1113
|
style: {
|
|
@@ -1169,33 +1128,26 @@ const QRCode = ({ walletAddress, amount, currency, theme = "light" }) => {
|
|
|
1169
1128
|
]
|
|
1170
1129
|
}
|
|
1171
1130
|
);
|
|
1172
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
|
|
1173
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className:
|
|
1174
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", {
|
|
1175
|
-
walletAddress && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
|
|
1176
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("
|
|
1131
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
|
|
1132
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: theme === "dark" ? "bg-gray-700" : "bg-white", children: qrDisplay }),
|
|
1133
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { textAlign: "center", marginTop: "12px", fontSize: "14px" }, children: "Scan with your wallet app to pay" }),
|
|
1134
|
+
walletAddress && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { marginTop: "12px" }, children: [
|
|
1135
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { fontSize: "12px", marginBottom: "4px" }, children: [
|
|
1177
1136
|
"Send ",
|
|
1178
1137
|
amount,
|
|
1179
1138
|
" ",
|
|
1180
1139
|
currency,
|
|
1181
1140
|
" to:"
|
|
1182
1141
|
] }),
|
|
1183
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", {
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
amount,
|
|
1193
|
-
" ",
|
|
1194
|
-
currency
|
|
1195
|
-
] }),
|
|
1196
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: '4. Click "Pay Now" button after sending' })
|
|
1197
|
-
] })
|
|
1198
|
-
] }) })
|
|
1142
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: {
|
|
1143
|
+
fontSize: "12px",
|
|
1144
|
+
fontFamily: "monospace",
|
|
1145
|
+
padding: "8px",
|
|
1146
|
+
backgroundColor: theme === "dark" ? "#1f2937" : "#f3f4f6",
|
|
1147
|
+
borderRadius: "4px",
|
|
1148
|
+
overflowWrap: "break-word"
|
|
1149
|
+
}, children: walletAddress })
|
|
1150
|
+
] })
|
|
1199
1151
|
] });
|
|
1200
1152
|
};
|
|
1201
1153
|
const PaymentStatus = ({ status, message, theme = "light" }) => {
|
|
@@ -1331,155 +1283,23 @@ const PaymentMethods = ({ onSelect, selected, theme = "light" }) => {
|
|
|
1331
1283
|
)) })
|
|
1332
1284
|
] });
|
|
1333
1285
|
};
|
|
1334
|
-
const
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
throw new Error("MetaMask is not installed");
|
|
1352
|
-
}
|
|
1353
|
-
try {
|
|
1354
|
-
const accounts = await window.ethereum.request({ method: "eth_accounts" });
|
|
1355
|
-
return accounts;
|
|
1356
|
-
} catch (error) {
|
|
1357
|
-
console.error("Error getting accounts:", error);
|
|
1358
|
-
throw error;
|
|
1359
|
-
}
|
|
1360
|
-
};
|
|
1361
|
-
const getChainId = async () => {
|
|
1362
|
-
if (!isMetaMaskInstalled()) {
|
|
1363
|
-
throw new Error("MetaMask is not installed");
|
|
1364
|
-
}
|
|
1365
|
-
try {
|
|
1366
|
-
const chainId = await window.ethereum.request({ method: "eth_chainId" });
|
|
1367
|
-
return chainId;
|
|
1368
|
-
} catch (error) {
|
|
1369
|
-
console.error("Error getting chain ID:", error);
|
|
1370
|
-
throw error;
|
|
1371
|
-
}
|
|
1372
|
-
};
|
|
1373
|
-
const sendTransaction = async (txParams) => {
|
|
1374
|
-
if (!isMetaMaskInstalled()) {
|
|
1375
|
-
throw new Error("MetaMask is not installed");
|
|
1376
|
-
}
|
|
1377
|
-
try {
|
|
1378
|
-
const txHash = await window.ethereum.request({
|
|
1379
|
-
method: "eth_sendTransaction",
|
|
1380
|
-
params: [txParams]
|
|
1381
|
-
});
|
|
1382
|
-
return txHash;
|
|
1383
|
-
} catch (error) {
|
|
1384
|
-
console.error("Error sending transaction:", error);
|
|
1385
|
-
throw error;
|
|
1386
|
-
}
|
|
1387
|
-
};
|
|
1388
|
-
const sendToken = async (tokenAddress, toAddress, amount) => {
|
|
1389
|
-
if (!isMetaMaskInstalled()) {
|
|
1390
|
-
throw new Error("MetaMask is not installed");
|
|
1391
|
-
}
|
|
1392
|
-
try {
|
|
1393
|
-
const accounts = await window.ethereum.request({ method: "eth_requestAccounts" });
|
|
1394
|
-
const fromAddress = accounts[0];
|
|
1395
|
-
const transferFunctionSignature = "0xa9059cbb";
|
|
1396
|
-
const paddedToAddress = toAddress.slice(2).padStart(64, "0");
|
|
1397
|
-
const paddedAmount = amount.toString(16).padStart(64, "0");
|
|
1398
|
-
const data = `${transferFunctionSignature}${paddedToAddress}${paddedAmount}`;
|
|
1399
|
-
const txParams = {
|
|
1400
|
-
from: fromAddress,
|
|
1401
|
-
to: tokenAddress,
|
|
1402
|
-
data
|
|
1403
|
-
};
|
|
1404
|
-
const txHash = await window.ethereum.request({
|
|
1405
|
-
method: "eth_sendTransaction",
|
|
1406
|
-
params: [txParams]
|
|
1407
|
-
});
|
|
1408
|
-
return txHash;
|
|
1409
|
-
} catch (error) {
|
|
1410
|
-
console.error("Error sending token:", error);
|
|
1411
|
-
throw error;
|
|
1412
|
-
}
|
|
1413
|
-
};
|
|
1414
|
-
const isWalletConnected = async () => {
|
|
1415
|
-
try {
|
|
1416
|
-
const accounts = await getAccounts();
|
|
1417
|
-
return accounts.length > 0;
|
|
1418
|
-
} catch (error) {
|
|
1419
|
-
return false;
|
|
1420
|
-
}
|
|
1421
|
-
};
|
|
1422
|
-
const getNetworkName = (chainId) => {
|
|
1423
|
-
const networks = {
|
|
1424
|
-
"0x1": "Ethereum Mainnet",
|
|
1425
|
-
"0x3": "Ropsten Testnet",
|
|
1426
|
-
"0x4": "Rinkeby Testnet",
|
|
1427
|
-
"0x5": "Goerli Testnet",
|
|
1428
|
-
"0x2a": "Kovan Testnet",
|
|
1429
|
-
"0x38": "Binance Smart Chain",
|
|
1430
|
-
"0x89": "Polygon",
|
|
1431
|
-
"0xa86a": "Avalanche"
|
|
1432
|
-
};
|
|
1433
|
-
return networks[chainId] || `Unknown Network (${chainId})`;
|
|
1434
|
-
};
|
|
1435
|
-
const getTokenBalance = async (tokenAddress, userAddress) => {
|
|
1436
|
-
if (!isMetaMaskInstalled()) {
|
|
1437
|
-
throw new Error("MetaMask is not installed");
|
|
1438
|
-
}
|
|
1439
|
-
try {
|
|
1440
|
-
const balanceOfSignature = "0x70a08231";
|
|
1441
|
-
const paddedAddress = userAddress.slice(2).padStart(64, "0");
|
|
1442
|
-
const data = `${balanceOfSignature}${paddedAddress}`;
|
|
1443
|
-
const balance = await window.ethereum.request({
|
|
1444
|
-
method: "eth_call",
|
|
1445
|
-
params: [
|
|
1446
|
-
{
|
|
1447
|
-
to: tokenAddress,
|
|
1448
|
-
data
|
|
1449
|
-
},
|
|
1450
|
-
"latest"
|
|
1451
|
-
]
|
|
1452
|
-
});
|
|
1453
|
-
return parseInt(balance, 16).toString();
|
|
1454
|
-
} catch (error) {
|
|
1455
|
-
console.error("Error getting token balance:", error);
|
|
1456
|
-
throw error;
|
|
1457
|
-
}
|
|
1458
|
-
};
|
|
1459
|
-
const TOKEN_ADDRESSES = {
|
|
1460
|
-
USDT: "0xdAC17F958D2ee523a2206206994597C13D831ec7",
|
|
1461
|
-
USDC: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
|
|
1462
|
-
DAI: "0x6B175474E89094C44Da98b954EedeAC495271d0F",
|
|
1463
|
-
WETH: "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2",
|
|
1464
|
-
WBTC: "0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599"
|
|
1465
|
-
};
|
|
1466
|
-
const Logo = "data:image/png;base64,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";
|
|
1467
|
-
const CoinleyModal = ({
|
|
1468
|
-
isOpen,
|
|
1469
|
-
onClose,
|
|
1470
|
-
payment,
|
|
1471
|
-
paymentStatus,
|
|
1472
|
-
selectedCurrency,
|
|
1473
|
-
onCurrencySelect,
|
|
1474
|
-
onPayment,
|
|
1475
|
-
error,
|
|
1476
|
-
theme = "light",
|
|
1477
|
-
merchantName,
|
|
1478
|
-
transactionHash,
|
|
1479
|
-
walletConnected,
|
|
1480
|
-
onConnectWallet,
|
|
1481
|
-
testMode = false
|
|
1482
|
-
}) => {
|
|
1286
|
+
const CoinleyModal = (props) => {
|
|
1287
|
+
const {
|
|
1288
|
+
isOpen,
|
|
1289
|
+
onClose,
|
|
1290
|
+
payment,
|
|
1291
|
+
paymentStatus,
|
|
1292
|
+
selectedCurrency,
|
|
1293
|
+
onCurrencySelect,
|
|
1294
|
+
onPayment,
|
|
1295
|
+
error,
|
|
1296
|
+
theme = "light",
|
|
1297
|
+
merchantName,
|
|
1298
|
+
transactionHash,
|
|
1299
|
+
walletConnected,
|
|
1300
|
+
onConnectWallet,
|
|
1301
|
+
testMode = false
|
|
1302
|
+
} = props;
|
|
1483
1303
|
const [step, setStep] = useState("select-currency");
|
|
1484
1304
|
const [isMetaMaskAvailable, setIsMetaMaskAvailable] = useState(false);
|
|
1485
1305
|
const [paymentMethod, setPaymentMethod] = useState("wallet");
|
|
@@ -1499,263 +1319,17 @@ const CoinleyModal = ({
|
|
|
1499
1319
|
setStep("select-currency");
|
|
1500
1320
|
}
|
|
1501
1321
|
}, [paymentStatus, payment]);
|
|
1502
|
-
const handleCurrencySelect = (currency) => {
|
|
1503
|
-
onCurrencySelect(currency);
|
|
1504
|
-
setStep("confirm");
|
|
1505
|
-
};
|
|
1506
|
-
const handlePaymentConfirm = () => {
|
|
1507
|
-
onPayment(paymentMethod === "qrcode");
|
|
1508
|
-
};
|
|
1509
|
-
const handleBack = () => {
|
|
1510
|
-
if (step === "confirm") {
|
|
1511
|
-
setStep("select-currency");
|
|
1512
|
-
}
|
|
1513
|
-
};
|
|
1514
|
-
const handleClose = () => {
|
|
1515
|
-
onClose();
|
|
1516
|
-
};
|
|
1517
|
-
const formatAmount = (amount) => {
|
|
1518
|
-
return parseFloat(amount).toFixed(2);
|
|
1519
|
-
};
|
|
1520
|
-
const formatTransactionHash = (hash) => {
|
|
1521
|
-
if (!hash)
|
|
1522
|
-
return "";
|
|
1523
|
-
if (hash.length <= 14)
|
|
1524
|
-
return hash;
|
|
1525
|
-
return `${hash.slice(0, 8)}...${hash.slice(-6)}`;
|
|
1526
|
-
};
|
|
1527
|
-
const togglePaymentMethod = (method) => {
|
|
1528
|
-
setPaymentMethod(method);
|
|
1529
|
-
};
|
|
1530
|
-
const modalBaseClasses = `fixed inset-0 z-50 overflow-y-auto ${theme === "dark" ? "bg-gray-900/75" : "bg-black/50"}`;
|
|
1531
|
-
const modalContentClasses = `relative p-6 w-full max-w-md mx-auto rounded-lg shadow-xl ${theme === "dark" ? "bg-gray-800 text-white" : "bg-white text-gray-800"}`;
|
|
1532
|
-
const headerClasses = `text-xl font-bold mb-4 ${theme === "dark" ? "text-white" : "text-gray-900"}`;
|
|
1533
|
-
const buttonPrimaryClasses = `w-full py-2 px-4 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 ${theme === "dark" ? "bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500" : "bg-blue-500 hover:bg-blue-600 text-white focus:ring-blue-500"}`;
|
|
1534
|
-
const buttonSecondaryClasses = `w-full py-2 px-4 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 ${theme === "dark" ? "bg-gray-700 hover:bg-gray-600 text-white focus:ring-gray-500" : "bg-gray-200 hover:bg-gray-300 text-gray-800 focus:ring-gray-500"}`;
|
|
1535
|
-
const tabButtonClasses = `py-2 px-4 text-sm font-medium focus:outline-none transition-colors`;
|
|
1536
|
-
const activeTabClasses = `${theme === "dark" ? "bg-gray-700 text-white" : "bg-gray-100 text-gray-800"} rounded-t-md`;
|
|
1537
|
-
const inactiveTabClasses = `${theme === "dark" ? "text-gray-400 hover:text-gray-300" : "text-gray-500 hover:text-gray-700"}`;
|
|
1538
1322
|
if (!isOpen)
|
|
1539
1323
|
return null;
|
|
1540
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className:
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
onClick: handleClose,
|
|
1550
|
-
className: `text-gray-500 hover:text-gray-700 focus:outline-none ${theme === "dark" ? "text-gray-400 hover:text-gray-300" : ""}`,
|
|
1551
|
-
children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
|
|
1552
|
-
}
|
|
1553
|
-
)
|
|
1554
|
-
] }),
|
|
1555
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-6", children: [
|
|
1556
|
-
payment && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `mb-6 p-4 rounded-lg ${theme === "dark" ? "bg-gray-700" : "bg-gray-100"}`, children: [
|
|
1557
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm ${theme === "dark" ? "text-gray-300" : "text-gray-600"}`, children: merchantName }),
|
|
1558
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center mt-2", children: [
|
|
1559
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `font-medium ${theme === "dark" ? "text-gray-300" : "text-gray-700"}`, children: "Amount:" }),
|
|
1560
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-bold text-xl", children: [
|
|
1561
|
-
"$",
|
|
1562
|
-
formatAmount(payment.totalAmount || payment.amount)
|
|
1563
|
-
] })
|
|
1564
|
-
] }),
|
|
1565
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs mt-1 text-right", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: `${theme === "dark" ? "text-gray-400" : "text-gray-500"}`, children: [
|
|
1566
|
-
"Payment ID: ",
|
|
1567
|
-
payment.id && payment.id.slice(0, 8),
|
|
1568
|
-
"..."
|
|
1569
|
-
] }) })
|
|
1570
|
-
] }),
|
|
1571
|
-
step === "select-currency" && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1572
|
-
PaymentMethods,
|
|
1573
|
-
{
|
|
1574
|
-
onSelect: handleCurrencySelect,
|
|
1575
|
-
selected: selectedCurrency,
|
|
1576
|
-
theme
|
|
1577
|
-
}
|
|
1578
|
-
),
|
|
1579
|
-
step === "confirm" && payment && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
|
|
1580
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `p-4 rounded-lg mb-4 ${theme === "dark" ? "bg-gray-700" : "bg-gray-100"}`, children: [
|
|
1581
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `text-lg font-medium mb-2 ${theme === "dark" ? "text-white" : "text-gray-800"}`, children: "Payment Details" }),
|
|
1582
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
|
|
1583
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
|
|
1584
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: theme === "dark" ? "text-gray-300" : "text-gray-600", children: "Currency:" }),
|
|
1585
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: selectedCurrency })
|
|
1586
|
-
] }),
|
|
1587
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
|
|
1588
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: theme === "dark" ? "text-gray-300" : "text-gray-600", children: "Network:" }),
|
|
1589
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: selectedCurrency === "SOL" || selectedCurrency === "USDC_SOL" ? "Solana" : "Ethereum" })
|
|
1590
|
-
] }),
|
|
1591
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
|
|
1592
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: theme === "dark" ? "text-gray-300" : "text-gray-600", children: "Fee:" }),
|
|
1593
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "1.75%" })
|
|
1594
|
-
] })
|
|
1595
|
-
] })
|
|
1596
|
-
] }),
|
|
1597
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex border-b border-gray-200", children: [
|
|
1598
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1599
|
-
"button",
|
|
1600
|
-
{
|
|
1601
|
-
onClick: () => togglePaymentMethod("wallet"),
|
|
1602
|
-
className: `${tabButtonClasses} ${paymentMethod === "wallet" ? activeTabClasses : inactiveTabClasses}`,
|
|
1603
|
-
children: "Connect Wallet"
|
|
1604
|
-
}
|
|
1605
|
-
),
|
|
1606
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1607
|
-
"button",
|
|
1608
|
-
{
|
|
1609
|
-
onClick: () => togglePaymentMethod("qrcode"),
|
|
1610
|
-
className: `${tabButtonClasses} ${paymentMethod === "qrcode" ? activeTabClasses : inactiveTabClasses}`,
|
|
1611
|
-
children: "QR Code"
|
|
1612
|
-
}
|
|
1613
|
-
)
|
|
1614
|
-
] }) }),
|
|
1615
|
-
testMode ? (
|
|
1616
|
-
// Test mode payment option
|
|
1617
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `p-4 rounded-lg mb-4 ${theme === "dark" ? "bg-blue-900/20" : "bg-blue-50"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
|
|
1618
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-blue-500 rounded-full p-2 mr-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }) }),
|
|
1619
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
|
|
1620
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `font-medium ${theme === "dark" ? "text-white" : "text-gray-800"}`, children: "Test Mode Payment" }),
|
|
1621
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm ${theme === "dark" ? "text-gray-300" : "text-gray-600"}`, children: 'Click "Pay Now" to simulate a successful payment' })
|
|
1622
|
-
] })
|
|
1623
|
-
] }) })
|
|
1624
|
-
) : paymentMethod === "qrcode" ? (
|
|
1625
|
-
// QR Code payment option
|
|
1626
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `p-4 rounded-lg mb-4 ${theme === "dark" ? "bg-blue-900/20" : "bg-blue-50"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1627
|
-
QRCode,
|
|
1628
|
-
{
|
|
1629
|
-
walletAddress: payment.walletAddress || "0x742d35Cc6634C0532925a3b844Bc454e4438f44e",
|
|
1630
|
-
amount: payment.totalAmount || payment.amount,
|
|
1631
|
-
currency: selectedCurrency,
|
|
1632
|
-
theme
|
|
1633
|
-
}
|
|
1634
|
-
) })
|
|
1635
|
-
) : isMetaMaskAvailable ? (
|
|
1636
|
-
// MetaMask available option
|
|
1637
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `p-4 rounded-lg mb-4 ${theme === "dark" ? "bg-blue-900/20" : "bg-blue-50"}`, children: [
|
|
1638
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
|
|
1639
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1640
|
-
"img",
|
|
1641
|
-
{
|
|
1642
|
-
src: "https://metamask.io/images/metamask-fox.svg",
|
|
1643
|
-
alt: "MetaMask",
|
|
1644
|
-
className: "w-8 h-8 mr-2"
|
|
1645
|
-
}
|
|
1646
|
-
),
|
|
1647
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
|
|
1648
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `font-medium ${theme === "dark" ? "text-white" : "text-gray-800"}`, children: "Pay with MetaMask" }),
|
|
1649
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm ${theme === "dark" ? "text-gray-300" : "text-gray-600"}`, children: walletConnected ? "Your wallet is connected. Click 'Pay Now' to proceed." : "Click 'Connect Wallet' to proceed with payment." })
|
|
1650
|
-
] })
|
|
1651
|
-
] }),
|
|
1652
|
-
!walletConnected && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1653
|
-
"button",
|
|
1654
|
-
{
|
|
1655
|
-
onClick: onConnectWallet,
|
|
1656
|
-
className: `mt-3 ${buttonPrimaryClasses}`,
|
|
1657
|
-
children: "Connect Wallet"
|
|
1658
|
-
}
|
|
1659
|
-
)
|
|
1660
|
-
] })
|
|
1661
|
-
) : (
|
|
1662
|
-
// MetaMask not available warning
|
|
1663
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `p-4 rounded-lg mb-4 ${theme === "dark" ? "bg-yellow-900/20" : "bg-yellow-50"}`, children: [
|
|
1664
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
|
|
1665
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6 text-yellow-500 mr-2", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }),
|
|
1666
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
|
|
1667
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: `font-medium ${theme === "dark" ? "text-white" : "text-gray-800"}`, children: "MetaMask Not Detected" }),
|
|
1668
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm ${theme === "dark" ? "text-gray-300" : "text-gray-600"}`, children: "Please install MetaMask extension to make payments" })
|
|
1669
|
-
] })
|
|
1670
|
-
] }),
|
|
1671
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1672
|
-
"a",
|
|
1673
|
-
{
|
|
1674
|
-
href: "https://metamask.io/download/",
|
|
1675
|
-
target: "_blank",
|
|
1676
|
-
rel: "noopener noreferrer",
|
|
1677
|
-
className: `block mt-3 text-center ${buttonPrimaryClasses}`,
|
|
1678
|
-
children: "Install MetaMask"
|
|
1679
|
-
}
|
|
1680
|
-
)
|
|
1681
|
-
] })
|
|
1682
|
-
),
|
|
1683
|
-
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-6 grid grid-cols-2 gap-3", children: [
|
|
1684
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1685
|
-
"button",
|
|
1686
|
-
{
|
|
1687
|
-
type: "button",
|
|
1688
|
-
onClick: handleBack,
|
|
1689
|
-
className: buttonSecondaryClasses,
|
|
1690
|
-
children: "Back"
|
|
1691
|
-
}
|
|
1692
|
-
),
|
|
1693
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1694
|
-
"button",
|
|
1695
|
-
{
|
|
1696
|
-
type: "button",
|
|
1697
|
-
onClick: handlePaymentConfirm,
|
|
1698
|
-
className: buttonPrimaryClasses,
|
|
1699
|
-
disabled: !testMode && paymentMethod === "wallet" && isMetaMaskAvailable && !walletConnected,
|
|
1700
|
-
children: "Pay Now"
|
|
1701
|
-
}
|
|
1702
|
-
)
|
|
1703
|
-
] })
|
|
1704
|
-
] }),
|
|
1705
|
-
step === "processing" && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1706
|
-
PaymentStatus,
|
|
1707
|
-
{
|
|
1708
|
-
status: "processing",
|
|
1709
|
-
theme,
|
|
1710
|
-
message: "Processing your payment..."
|
|
1711
|
-
}
|
|
1712
|
-
),
|
|
1713
|
-
step === "success" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
|
|
1714
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1715
|
-
PaymentStatus,
|
|
1716
|
-
{
|
|
1717
|
-
status: "success",
|
|
1718
|
-
theme,
|
|
1719
|
-
message: "Payment successful!"
|
|
1720
|
-
}
|
|
1721
|
-
),
|
|
1722
|
-
transactionHash && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `mt-4 p-3 rounded-lg ${theme === "dark" ? "bg-gray-700" : "bg-gray-100"}`, children: [
|
|
1723
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-xs ${theme === "dark" ? "text-gray-300" : "text-gray-600"} mb-1`, children: "Transaction Hash:" }),
|
|
1724
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: `text-sm font-mono break-all ${theme === "dark" ? "text-white" : "text-gray-800"}`, children: formatTransactionHash(transactionHash) }),
|
|
1725
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1726
|
-
"a",
|
|
1727
|
-
{
|
|
1728
|
-
href: `https://etherscan.io/tx/${transactionHash}`,
|
|
1729
|
-
target: "_blank",
|
|
1730
|
-
rel: "noopener noreferrer",
|
|
1731
|
-
className: `text-xs ${theme === "dark" ? "text-blue-400" : "text-blue-600"} mt-2 inline-block`,
|
|
1732
|
-
children: "View on Etherscan →"
|
|
1733
|
-
}
|
|
1734
|
-
)
|
|
1735
|
-
] })
|
|
1736
|
-
] }),
|
|
1737
|
-
step === "error" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
|
|
1738
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1739
|
-
PaymentStatus,
|
|
1740
|
-
{
|
|
1741
|
-
status: "error",
|
|
1742
|
-
theme,
|
|
1743
|
-
message: error || "An error occurred while processing your payment."
|
|
1744
|
-
}
|
|
1745
|
-
),
|
|
1746
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1747
|
-
"button",
|
|
1748
|
-
{
|
|
1749
|
-
type: "button",
|
|
1750
|
-
onClick: handleBack,
|
|
1751
|
-
className: `mt-4 ${buttonSecondaryClasses}`,
|
|
1752
|
-
children: "Try Again"
|
|
1753
|
-
}
|
|
1754
|
-
)
|
|
1755
|
-
] })
|
|
1756
|
-
] }),
|
|
1757
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `text-center text-xs ${theme === "dark" ? "text-gray-400" : "text-gray-500"}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Powered by Coinley - Secure Cryptocurrency Payments" }) })
|
|
1758
|
-
] }) }) });
|
|
1324
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: theme === "dark" ? "bg-gray-900/75" : "bg-black/50", style: { position: "fixed", inset: 0, zIndex: 50 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", padding: "16px" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: theme === "dark" ? "bg-gray-800 text-white" : "bg-white text-gray-800", style: { position: "relative", padding: "24px", width: "100%", maxWidth: "28rem", borderRadius: "8px", boxShadow: "0 20px 25px -5px rgb(0 0 0 / 0.1)" }, children: step === "confirm" && payment && paymentMethod === "qrcode" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { marginTop: "16px" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1325
|
+
QRCode,
|
|
1326
|
+
{
|
|
1327
|
+
walletAddress: payment.walletAddress || "0x742d35Cc6634C0532925a3b844Bc454e4438f44e",
|
|
1328
|
+
amount: payment.totalAmount || payment.amount,
|
|
1329
|
+
currency: selectedCurrency,
|
|
1330
|
+
theme
|
|
1331
|
+
}
|
|
1332
|
+
) }) }) }) });
|
|
1759
1333
|
};
|
|
1760
1334
|
const CoinleyCheckout = forwardRef(({
|
|
1761
1335
|
apiKey,
|
|
@@ -1979,7 +1553,7 @@ const DEFAULT_CONFIG = {
|
|
|
1979
1553
|
testMode: false,
|
|
1980
1554
|
theme: "light"
|
|
1981
1555
|
};
|
|
1982
|
-
const VERSION = "1.0.
|
|
1556
|
+
const VERSION = "1.0.7";
|
|
1983
1557
|
export {
|
|
1984
1558
|
CoinleyCheckout,
|
|
1985
1559
|
CoinleyModal,
|
|
@@ -1988,23 +1562,12 @@ export {
|
|
|
1988
1562
|
PaymentMethods,
|
|
1989
1563
|
PaymentStatus,
|
|
1990
1564
|
QRCode,
|
|
1991
|
-
TOKEN_ADDRESSES,
|
|
1992
1565
|
ThemeProvider,
|
|
1993
1566
|
VERSION,
|
|
1994
1567
|
connectWallet,
|
|
1995
1568
|
createPayment,
|
|
1996
|
-
getAccounts,
|
|
1997
|
-
getChainId,
|
|
1998
|
-
getMerchantPaymentStats,
|
|
1999
|
-
getMerchantPayments,
|
|
2000
|
-
getNetworkName,
|
|
2001
1569
|
getPayment,
|
|
2002
|
-
getSupportedCurrencies,
|
|
2003
|
-
getTokenBalance,
|
|
2004
1570
|
isMetaMaskInstalled,
|
|
2005
|
-
|
|
2006
|
-
processPayment,
|
|
2007
|
-
sendToken,
|
|
2008
|
-
sendTransaction
|
|
1571
|
+
processPayment
|
|
2009
1572
|
};
|
|
2010
1573
|
//# sourceMappingURL=coinley-checkout.es.js.map
|