​
Go Live in Minutes, Not Weeks

Stop wrestling with complex wallet integrations. With Refract Network, you can onboard your existing dApp in under five minutes. Our smart Drop-in SDK and Portal Setup Wizard do the heavy lifting, auto-detecting your tech stack and generating copy-paste-ready code. Go from code to viral growth engine, instantly.

​
The “Drop-In” Philosophy: Zero Refactoring

Our Refract Drop-in SDK is built on a simple but powerful idea: you should not have to rewrite your dApp to unlock mobile distribution. The SDK acts as an intelligent bridge, emulating the standard wallet providers your dApp already uses (like Wagmi, Viem, or Sui dApp-Kit).

When your dApp runs inside a Refract-enabled environment (like a TikTok Mini-program), our SDK automatically routes wallet requests to the user’s Refract Passport. When run in a standard browser, it gracefully falls back to browser extensions like MetaMask. Your code does not change—the experience just works, everywhere.

​
Your 5-Minute Integration Guide

The Refract Portal Setup Wizard makes integration a breeze. It is a guided, one-time process that connects your dApp to our entire suite of tools.

  1. Register & Enter Your dApp URL: Sign up for the Refract Portal and create your first project. Just provide your dApp’s name and its live URL.

  2. Automatic Tech-Stack Detection: The wizard analyzes your live URL to identify your front-end stack (e.g., React, Next.js, Vue). You can always override this if needed.

    How does this work? We use the Wappalyzer API and other heuristics to inspect your dApp’s bundle. This lets us provide perfectly tailored integration snippets. ::TODO: Confirm if we want to publicly mention the specific API.

  3. Get Your Custom Code Snippet: Based on the detected stack, the wizard generates a few lines of code for you to copy. This typically involves installing the SDK package and wrapping your root application component with our RefractProvider.

    Example: Integrating a Next.js + Wagmi dApp

    Terminal
    npm install @refract-network/securesign-sdk
    app/providers.tsx
    'use client';

import { RefractProvider } from '@refract-network/securesign-sdk/react';
import { WagmiProvider } from 'wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

// Your existing providers
const queryClient = new QueryClient();

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <RefractProvider>
      {/* Your other providers go here. RefractProvider should be at the top. */}
      <WagmiProvider config={config}>
        <QueryClientProvider client={queryClient}>
          {children}
        </QueryClientProvider>
      </WagmiProvider>
    </RefractProvider>
  );
}

  4. Deploy & Verify: Paste the snippet into your codebase, commit, and redeploy your dApp. Back in the Refract Portal, click “Verify Integration.” The wizard will confirm that the SDK is active.

That’s it! Your dApp is now connected to the Refract Network.

​
Unlock the Entire Growth Suite, Instantly

Once integrated, you do not just get a wallet—you get a full-stack GTM machine. The following features are available immediately, configurable in real-time from your Refract Portal dashboard:

  • Magic dApp Links: Generate viral, incentivized shareable links.
  • Refract Passport: Provide users with a seamless, secure, self-custody wallet.
  • GasMaster: Sponsor transactions for users intelligently based on their value.
  • Refract Insights: Understand your users with deep social and on-chain analytics.
  • Refract Quest: Create no-code quests to drive engagement and retention.