Peach Plugin
Seamlessly embed a full Peach Swap experience directly in your application. Customize colors, tokens, and behavior to match your brand.
Seamlessly embed a full Peach Swap experience directly in your application. Customize colors, tokens, and behavior to match your brand.
User can set their own slippage tolerance when trading.
Optional fee charged on the swap output amount.
Loading router custom fee limit.
This widget supports two wallet connection modes: 1. Independent 2. Use dApp Wallet
Max 16 characters (0/16)
Renders Peach directly within your dApp layout as a native component.
1Script Embed
Ideal for vanilla HTML, CMS, or non-React environments. Simply include our versionedCSSandJSbundles from the CDN, then initialize the plugin viawindow.PeachPlugin.init(). Script embeds default to a managed wallet experience for plug-and-play integration.
2React Component
Native integration for React applications. Install the React package first:
npm i @masterpeach/plugin-reactThen renderPeachPlugin. UseindependentWallet={true}with your own Reown project ID in NEXT_PUBLIC_PROJECT_ID and wallet.appKit.projectId for the same wallet list and WalletConnect experience as this preview. Without a project ID, independent mode supports injected wallets. Alternatively, set it tofalsewhile nested inside your existingWagmiProviderto allow the plugin to share your dApp's active wallet connection. If your page already uses AppKit, use host mode and supply hostWallet.openConnectModal to open its wallet UI.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Peach Plugin</title>
<link rel="stylesheet" href="https://plugin.peach.ag/assets/style.v0.0.11.css" />
<script src="https://plugin.peach.ag/assets/main.v0.0.11.js" data-peach-plugin-origin="https://plugin.peach.ag"></script>
</head>
<body>
<div id="peach-plugin"></div>
<script>
window.PeachPlugin.init({
chain: "arc",
el: "#peach-plugin",
display: {
mode: "integrated",
},
theme: "dark",
// Note: script embeds always run in Peach-managed wallet mode.
// AppKit / host wallet mode is only available in React integration.
customTheme: {
platformBg: "#060606",
primaryColor: "#ffb44e",
primaryText: "#ffffff",
secondaryText: "#ababab",
positiveText: "#14de59",
warningText: "#ff8d2b",
errorText: "#ff492a",
buttonTextColor: "#1f1f1f",
inputRadius: "12px",
buttonRadius: "12px",
cardRadius: "12px",
},
});
</script>
</body>
</html>import { PeachPlugin } from "@masterpeach/plugin-react";
// Set NEXT_PUBLIC_PROJECT_ID to your own Reown project ID for the preview's wallet experience.
// Without it, independent mode uses injected wallets only.
// If this page already initializes AppKit, use independentWallet={false} with hostWallet callbacks.
export function MySwapWidget() {
return (
<PeachPlugin
chain="arc"
display={{ mode: "integrated" }}
theme="dark"
independentWallet={true}
wallet={{
appKit: {
// Vite: use import.meta.env.VITE_PROJECT_ID ?? "" instead.
projectId: process.env.NEXT_PUBLIC_PROJECT_ID ?? "",
features: { analytics: false, email: false, socials: false },
hideBranding: true,
},
}}
customTheme={{
platformBg: "#060606",
primaryColor: "#ffb44e",
primaryText: "#ffffff",
secondaryText: "#ababab",
positiveText: "#14de59",
warningText: "#ff8d2b",
errorText: "#ff492a",
buttonTextColor: "#1f1f1f",
inputRadius: "12px",
buttonRadius: "12px",
cardRadius: "12px",
}}
/>
);
}
Optimized routing across multiple DEXs for the best rates with minimal latency.
Match your brand with custom colors, logos, and display options.
Set referral fees and earn from every swap made through your integration.
Battle-tested smart contracts with multiple security audits.