Mui Button Coinbase Pay Example

gistfile1.txt

import { useRef, useState, useEffect } from 'react';
import { initOnRamp } from '@coinbase/cbpay-js';
import { Button } from '@mui/material';

export const PayWithCoinbaseButton = () => {
  const onrampInstance = useRef();
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    console.log('initializing');
    onrampInstance.current = initOnRamp({
      appId: '',
      widgetParameters: {
        destinationWallets: [
          {
            address: '',
            blockchains: ['solana'],
            //assets: ['ETH', 'USDC'],
          },
        ],
      },
      onReady: () => {
        setIsReady(true);
      },
      onSuccess: () => {
        console.log('success');
      },
      onExit: (event: any) => {
        console.log('exit', event);
      },
      onEvent: (event: any) => {
        console.log('event', event);
      },
      experienceLoggedIn: 'embedded', //'embedded', 'popup', or 'newtab',
      experienceLoggedOut: 'embedded',
      closeOnExit: true,
      closeOnSuccess: true,
    });
    console.log('initialized', onrampInstance);
    return () => {
      onrampInstance.current?.destroy();
    };
  }, []);

  const handleClick = () => {
    console.log(onrampInstance);
    onrampInstance.current?.open();
  };

  return (
      <Button variant="contained" onClick={handleClick} disabled={!isReady}>
        Add crypto with Pay
      </Button>
  )
}