import * as React from "react"; import * as System from "~/components/system"; import SystemPage from "~/components/system/SystemPage"; import ViewSourceLink from "~/components/system/ViewSourceLink"; const EXAMPLE_CODE = `import * as React from 'react'; import { CreateFilecoinStorageDeal } from 'slate-react-system'; class Example extends React.Component { _handleSubmit = async ({ file }) => { let data = new FormData(); data.append("image", file); const options = { method: "POST", headers: { Accept: "application/json", }, body: data, }; const response = await fetch('/your-storage-end-point', options); const json = await response.json(); } render() { return ( <CreateFilecoinStorageDeal onSubmit={this._handleSubmit} /> ); } } `; export default class SystemPageMakeStorageDeal extends React.Component { _handleSubmit = async ({ file }) => { // TODO(jim): Send file data to server. alert(file); }; render() { return ( <SystemPage title="SDS: Make a Storage Deal" description="..." url="https://fps.onrender.com/experiences/make-storage-deal" > <System.H1> Make a Storage Deal{" "} <ViewSourceLink file="experiences/make-storage-deal.js" /> </System.H1> <br /> <br /> <System.P> Here is a partial example of using{" "} <a target="_blank" href="https://github.com/textileio/powergate/"> Textile's Powergate </a>{" "} to make a data storage deal. This example only provides an example for how to send your file to a server. <br /> <br /> There will be an example of how to make a storage deal coming soon. </System.P> <br /> <br /> <System.CreateFilecoinStorageDeal onSubmit={this._handleSubmit} /> <br /> <br /> <System.H2>Code</System.H2> <br /> <br /> <System.CodeBlock>{EXAMPLE_CODE}</System.CodeBlock> </SystemPage> ); } }