Quick Start - React

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 = () => {
  const handleClick = () => {
    let widget = new RampInstantSDK({
      hostAppName: 'Your App Name',
      hostLogoUrl: 'https://assets.ramp.network/misc/test-logo.png',
      variant: 'auto',
    });
    widget.show();
  };

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

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 = () => {
  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://assets.ramp.network/misc/test-logo.png',
      variant: 'auto',
      swapAmount: weiAmount,
      swapAsset: asset,
      userAddress: address,
    }).show();
  };

  return (
    <section>
      <h2>Ramp Network - 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 Network</button>
    </section>
  );
};

See the full configuration options list for additional parameters.