Integrate into React

Useful links:


Simple example

This method will let users decide which token and how much of it they want to buy.

import { RampInstantSDK } from '@ramp-network/ramp-instant-sdk';

const App: React.FC = () => {
  const handleClick = () => {
    let widget = new RampInstantSDK({
      hostAppName: 'Your App Name',
      hostLogoUrl: 'https://your.logo/url.png',
      variant: 'auto'
    });
    widget.show();
  };

  return (
    <section>
      <h2>Ramp Instant - Simple Integration</h2>
      <button onClick={handleClick}>Buy with Ramp Instant</button>
    </section>
  );
};

As you can see, the simplest integration requires only having an instance of RampInstantSDK object initialized with proper values and calling .show() on it.

You need to remember that instances of RampInstantSDK are not reusable. Each time your users want to buy tokens you need to create new instance of RampInstantSDK.

Advanced example

In this example we can control token and amount which will be used in purchasing process in the application itself. Wallet address is also passed to widget. User will not be able to change asset and amount in the widget but wallet address will be editable.

import { RampInstantSDK } from '@ramp-network/ramp-instant-sdk';

const App: React.FC = () => {
  const [address, setAddress] = useState(
    '0xe2E0256d6785d49eC7BadCD1D44aDBD3F6B0Ab58'
  );

  const [amount, setAmount] = useState('0.01');

  const [asset, setAsset] = useState < string > 'ETH';

  const handleSubmitButtonClick = () => {
    let weiAmount: string;

    try {
      weiAmount = toWei(amount);
    } catch (e) {
      alert('Supplied amount is not a valid number');
      return;
    }

    new RampInstantSDK({
      hostAppName: 'Your App Name',
      hostLogoUrl: 'https://your.logo/url.png',
      variant: 'auto',
      swapAmount: weiAmount,
      swapAsset: asset,
      userAddress: address
    }).show();
  };

  return (
    <section>
      <h2>Ramp Instant - Advanced Integration</h2>
      <label>
        Buyer's ETH address:
        <input value={address} onChange={e => setAddress(e.target.value)} />
      </label>

      <label>
        Token / ETH amount:
        <input value={amount} onChange={e => setAmount(e.target.value)} />
      </label>

      <div className={styles.label}>
        Asset:
        <div>
          <label htmlFor="ethRadio">
            <input
              type="radio"
              name="asset"
              value="ETH"
              onChange={() => setAsset('ETH')}
              checked={asset === 'ETH'}
              id="ethRadio"
            />
            ETH
          </label>
          <label htmlFor="tokenRadio">
            <input
              type="radio"
              name="asset"
              value="DAI"
              onChange={() => setAsset('DAI')}
              checked={asset === 'DAI'}
              id="daiRadio"
            />
            DAI
          </label>
        </div>
      </div>

      <button onClick={handleClick}>Buy with Ramp Instant</button>
    </section>
  );
};

There are additional parameters that you can pass to RampInstantSDK:

  • swapAmount: Amount of eth/tokens to buy, in Wei or token units.
  • swapAsset: ID (symbol) of the asset to buy. Currently we support ETH and DAI
  • userAddress: Ethereum wallet address. This should be a simple address, but putting contract addresses will should work (depending on your contract's fallback method and gas consumption).
  • see the full SDK reference for more.