0x

iframe.js

import React, {Component} from 'react';
import styled from 'styled-components';
import {forbidExtraProps} from 'airbnb-prop-types';

const Wr = styled.div`
`;

const Container = styled.div`
  max-width: 1200px;
  padding: 0 15px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 40px;
`;

const Iframe = styled.iframe`
  border: 0;
  width: 500px;
  height: 600px;
`;

export default class Trade extends Component {
  static propTypes = forbidExtraProps({
  });

  componentDidMount() {
    this.iframe.contentDocument.open();
    this.iframe.contentDocument.write(`
      \<script src="https://instant.0xproject.com/instant.js">\<\/script>
      \<script>
        const intervalId = setInterval(
          () => {
            if (window.zeroExInstant) {
              clearInterval(intervalId);
              window.zeroExInstant.render({
                orderSource: 'https://api.radarrelay.com/0x/v2/',
                provider: parent.ethereum,
              }, 'body');
            }
          },
          300,
        );
      \<\/script>
    `);
    this.iframe.contentDocument.close();
  }

  render() {
    return (
      <Wr>
        <Container>
          <Iframe innerRef={r => this.iframe = r}/>
        </Container>
      </Wr>
    );
  }

}