Skip to content

Commit 0b11ac4

Browse files
nachoiacovinonachoiacovino
committed
Add biconomy support
1 parent 91aa97f commit 0b11ac4

File tree

6 files changed

+52
-61
lines changed

6 files changed

+52
-61
lines changed

‎src/embeds/edition-drop.tsx‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { css, Global } from "@emotion/react";
88
import { ThirdwebProvider, useContract, useNFT } from "@thirdweb-dev/react";
99
import { EditionDrop } from "@thirdweb-dev/sdk";
1010
import { ThirdwebStorage } from "@thirdweb-dev/storage";
11-
import React, { useEffect, useMemo } from "react";
11+
import React, { useEffect } from "react";
1212
import { createRoot } from "react-dom/client";
1313
import { ERC1155ClaimButton } from "src/shared/claim-button-erc1155";
1414
import { TokenMetadataPage } from "../shared/token-metadata-page";
@@ -17,6 +17,7 @@ import { Header } from "../shared/header";
1717
import chakraTheme from "../shared/theme";
1818
import { fontsizeCss } from "../shared/theme/typography";
1919
import { parseIpfsGateway } from "../utils/parseIpfsGateway";
20+
import { useGasless } from "../shared/hooks/useGasless";
2021

2122
interface BodyProps {
2223
children?: React.ReactNode;
@@ -90,23 +91,15 @@ const App: React.FC = () => {
9091
const rpcUrl = urlParams.get("rpcUrl") || "";
9192
const tokenId = urlParams.get("tokenId") || "0";
9293
const relayerUrl = urlParams.get("relayUrl") || "";
94+
const biconomyApiKey = urlParams.get("biconomyApiKey") || "";
95+
const biconomyApiId = urlParams.get("biconomyApiId") || "";
9396

9497
const ipfsGateway = parseIpfsGateway(urlParams.get("ipfsGateway") || "");
9598

9699
const colorScheme = urlParams.get("theme") === "dark" ? "dark" : "light";
97100
const primaryColor = urlParams.get("primaryColor") || "purple";
98101

99-
const sdkOptions = useMemo(
100-
() =>
101-
relayerUrl
102-
? {
103-
gasless: {
104-
openzeppelin: { relayerUrl },
105-
},
106-
}
107-
: undefined,
108-
[relayerUrl],
109-
);
102+
const sdkOptions = useGasless(relayerUrl, biconomyApiKey, biconomyApiId);
110103

111104
return (
112105
<>

‎src/embeds/marketplace.tsx‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ import { createRoot } from "react-dom/client";
4343
import { AiFillExclamationCircle } from "react-icons/ai";
4444
import { IoDiamondOutline } from "react-icons/io5";
4545
import { Header } from "src/shared/header";
46+
import { useGasless } from "../shared/hooks/useGasless";
4647
import { TokenMetadataPage } from "src/shared/token-metadata-page";
4748
import { Footer } from "../shared/footer";
4849
import chakraTheme from "../shared/theme";
@@ -661,23 +662,15 @@ const App: React.FC = () => {
661662
const rpcUrl = urlParams.get("rpcUrl") || "";
662663
const listingId = urlParams.get("listingId") || "";
663664
const relayerUrl = urlParams.get("relayUrl") || "";
665+
const biconomyApiKey = urlParams.get("biconomyApiKey") || "";
666+
const biconomyApiId = urlParams.get("biconomyApiId") || "";
664667
const colorScheme = urlParams.get("theme") === "dark" ? "dark" : "light";
665668
const primaryColor = urlParams.get("primaryColor") || "purple";
666669
const secondaryColor = urlParams.get("secondaryColor") || "orange";
667670

668671
const ipfsGateway = parseIpfsGateway(urlParams.get("ipfsGateway") || "");
669672

670-
const sdkOptions = useMemo(
671-
() =>
672-
relayerUrl
673-
? {
674-
gasless: {
675-
openzeppelin: { relayerUrl },
676-
},
677-
}
678-
: undefined,
679-
[relayerUrl],
680-
);
673+
const sdkOptions = useGasless(relayerUrl, biconomyApiKey, biconomyApiId);
681674

682675
return (
683676
<>

‎src/embeds/nft-drop.tsx‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@ import { css, Global } from "@emotion/react";
88
import { ThirdwebProvider, useContract } from "@thirdweb-dev/react";
99
import { ThirdwebStorage } from "@thirdweb-dev/storage";
1010
import type { NFTDrop } from "@thirdweb-dev/sdk";
11-
import React, { useEffect, useMemo } from "react";
11+
import React, { useEffect } from "react";
1212
import { createRoot } from "react-dom/client";
1313
import { Footer } from "../shared/footer";
1414
import { Header } from "../shared/header";
15-
1615
import chakraTheme from "../shared/theme";
1716
import { fontsizeCss } from "../shared/theme/typography";
1817
import { parseIpfsGateway } from "../utils/parseIpfsGateway";
1918
import { ERC721ClaimButton } from "../shared/claim-button-erc721";
2019
import { ContractMetadataPage } from "../shared/contract-metadata-page";
20+
import { useGasless } from "../shared/hooks/useGasless";
2121

2222
interface BodyProps {
2323
children?: React.ReactNode;
@@ -88,23 +88,15 @@ const App: React.FC = () => {
8888
const contractAddress = urlParams.get("contract") || "";
8989
const rpcUrl = urlParams.get("rpcUrl") || "";
9090
const relayerUrl = urlParams.get("relayUrl") || "";
91+
const biconomyApiKey = urlParams.get("biconomyApiKey") || "";
92+
const biconomyApiId = urlParams.get("biconomyApiId") || "";
9193

9294
const colorScheme = urlParams.get("theme") === "dark" ? "dark" : "light";
9395
const primaryColor = urlParams.get("primaryColor") || "purple";
9496

9597
const ipfsGateway = parseIpfsGateway(urlParams.get("ipfsGateway") || "");
9698

97-
const sdkOptions = useMemo(
98-
() =>
99-
relayerUrl
100-
? {
101-
gasless: {
102-
openzeppelin: { relayerUrl },
103-
},
104-
}
105-
: undefined,
106-
[relayerUrl],
107-
);
99+
const sdkOptions = useGasless(relayerUrl, biconomyApiKey, biconomyApiId);
108100

109101
return (
110102
<>

‎src/embeds/signature-drop.tsx‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@ import { css, Global } from "@emotion/react";
88
import { ThirdwebProvider, useContract } from "@thirdweb-dev/react";
99
import type { SignatureDrop } from "@thirdweb-dev/sdk";
1010
import { ThirdwebStorage } from "@thirdweb-dev/storage";
11-
import React, { useEffect, useMemo } from "react";
11+
import React, { useEffect } from "react";
1212
import { createRoot } from "react-dom/client";
1313
import { ContractMetadataPage } from "../shared/contract-metadata-page";
1414
import { ERC721ClaimButton } from "../shared/claim-button-erc721";
1515
import { Footer } from "../shared/footer";
1616
import { Header } from "../shared/header";
17-
1817
import chakraTheme from "../shared/theme";
1918
import { fontsizeCss } from "../shared/theme/typography";
2019
import { parseIpfsGateway } from "../utils/parseIpfsGateway";
20+
import { useGasless } from "../shared/hooks/useGasless";
2121

2222
interface BodyProps {
2323
children?: React.ReactNode;
@@ -86,22 +86,14 @@ const App: React.FC = () => {
8686
const contractAddress = urlParams.get("contract") || "";
8787
const rpcUrl = urlParams.get("rpcUrl") || "";
8888
const relayerUrl = urlParams.get("relayUrl") || "";
89+
const biconomyApiKey = urlParams.get("biconomyApiKey") || "";
90+
const biconomyApiId = urlParams.get("biconomyApiId") || "";
8991
const colorScheme = urlParams.get("theme") === "dark" ? "dark" : "light";
9092
const primaryColor = urlParams.get("primaryColor") || "purple";
9193

9294
const ipfsGateway = parseIpfsGateway(urlParams.get("ipfsGateway") || "");
9395

94-
const sdkOptions = useMemo(
95-
() =>
96-
relayerUrl
97-
? {
98-
gasless: {
99-
openzeppelin: { relayerUrl },
100-
},
101-
}
102-
: undefined,
103-
[relayerUrl],
104-
);
96+
const sdkOptions = useGasless(relayerUrl, biconomyApiKey, biconomyApiId);
10597

10698
return (
10799
<>

‎src/embeds/token-drop.tsx‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,12 @@ import { css, Global } from "@emotion/react";
88
import { ThirdwebProvider, useContract } from "@thirdweb-dev/react";
99
import { TokenDrop } from "@thirdweb-dev/sdk";
1010
import { ThirdwebStorage } from "@thirdweb-dev/storage";
11-
import React, { useEffect, useMemo } from "react";
11+
import React, { useEffect } from "react";
1212
import { createRoot } from "react-dom/client";
1313
import { ERC20ClaimButton } from "src/shared/claim-button-erc20";
1414
import { ContractMetadataPage } from "src/shared/contract-metadata-page";
1515
import { Header } from "src/shared/header";
16+
import { useGasless } from "../shared/hooks/useGasless";
1617
import { Footer } from "../shared/footer";
1718
import chakraTheme from "../shared/theme";
1819
import { fontsizeCss } from "../shared/theme/typography";
@@ -85,22 +86,14 @@ const App: React.FC = () => {
8586
const contractAddress = urlParams.get("contract") || "";
8687
const rpcUrl = urlParams.get("rpcUrl") || "";
8788
const relayerUrl = urlParams.get("relayUrl") || "";
89+
const biconomyApiKey = urlParams.get("biconomyApiKey") || "";
90+
const biconomyApiId = urlParams.get("biconomyApiId") || "";
8891

8992
const ipfsGateway = parseIpfsGateway(urlParams.get("ipfsGateway") || "");
9093
const colorScheme = urlParams.get("theme") === "dark" ? "dark" : "light";
9194
const primaryColor = urlParams.get("primaryColor") || "purple";
9295

93-
const sdkOptions = useMemo(
94-
() =>
95-
relayerUrl
96-
? {
97-
gasless: {
98-
openzeppelin: { relayerUrl },
99-
},
100-
}
101-
: undefined,
102-
[relayerUrl],
103-
);
96+
const sdkOptions = useGasless(relayerUrl, biconomyApiKey, biconomyApiId);
10497

10598
return (
10699
<>

‎src/shared/hooks/useGasless.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { useMemo } from "react";
2+
3+
export function useGasless(
4+
relayerUrl?: string,
5+
biconomyApiKey?: string,
6+
biconomyApiId?: string,
7+
) {
8+
return useMemo(
9+
() =>
10+
relayerUrl
11+
? {
12+
gasless: {
13+
openzeppelin: { relayerUrl },
14+
},
15+
}
16+
: biconomyApiKey && biconomyApiId
17+
? {
18+
gasless: {
19+
biconomy: {
20+
apiKey: biconomyApiKey,
21+
apiId: biconomyApiId,
22+
},
23+
},
24+
}
25+
: undefined,
26+
[relayerUrl, biconomyApiKey, biconomyApiId],
27+
);
28+
}

0 commit comments

Comments
 (0)