storage deals and edit to table component

2024-09-20 02:37:09 +03:00 · 2020-07-18 21:47:19 -07:00 · 2020-07-18 21:47:19 -07:00 · 3478637ccb
commit 3478637ccb
parent afcf54c651
11 changed files with 377 additions and 18 deletions
--- a/components/system/SystemPage.js
+++ b/components/system/SystemPage.js
@ -215,6 +215,11 @@ export default class SystemPage extends React.Component {
            href="/experiences/send-address-filecoin"
            title="SendAddressFilecoin"
          />
+          <SidebarLink
+            url={url}
+            href="/experiences/list-storage-deals"
+            title="FilecoinDealsList"
+          />

          <span css={STYLES_LABEL}>
            <br />
--- a/components/system/components/Table.js
+++ b/components/system/components/Table.js
@ -5,6 +5,7 @@ import * as SubSystem from "~/components/system/components/fragments/TableCompon

 import { css } from "@emotion/react";
 import { P } from "~/components/system/components/Typography";
+import * as SVG from "~/components/system/svg";

 const TABLE_COLUMN_WIDTH_DEFAULTS = {
  1: "100%",
@ -28,6 +29,7 @@ const STYLES_TABLE_PLACEHOLDER = css`
 `;

 const STYLES_TABLE_ROW = css`
+  position: relative;
  box-sizing: border-box;
  padding: 0 8px 0 8px;
  border-bottom: 1px solid ${Constants.system.gray};
@ -127,7 +129,24 @@ export class Table extends React.Component {

          return (
            <React.Fragment key={`${r.id}-${i}`}>
-              <div css={STYLES_TABLE_ROW}>
+              <div
+                css={STYLES_TABLE_ROW}
+                onClick={() => this._handleChange(r.id)}
+                style={{
+                  cursor:
+                    this.props.onChange && r.children ? "pointer" : "default",
+                }}
+              >
+                {this.props.onChange && r.children && (
+                  <SVG.ChevronDown
+                    style={{
+                      position: "absolute",
+                      height: "16px",
+                      bottom: "4px",
+                      right: "4px",
+                    }}
+                  />
+                )}
                {Object.keys(ac).map((each, cIndex) => {
                  const field = ac[each];
                  const text = r[each];
@ -161,7 +180,7 @@ export class Table extends React.Component {
                  );
                })}
              </div>
-              {selected ? (
+              {selected && r.children ? (
                <div css={STYLES_TABLE_SELECTED_ROW}>
                  <span css={STYLES_TABLE_PLACEHOLDER}>{r.children}</span>
                </div>
--- a/components/system/components/fragments/CodeText.js
+++ b/components/system/components/fragments/CodeText.js
@ -19,7 +19,7 @@ const STYLES_WRAP = {
 const STYLES_CODE = css`
  box-sizing: border-box;
  font-family: ${Constants.font.mono};
-  font-size: 0.95em;
+  font-size: 0.9em;
  background-color: ${Constants.system.white};
  border-radius: 4px;
  padding: 0.1em 0.2em;
--- a/components/system/components/fragments/TableComponents.js
+++ b/components/system/components/fragments/TableComponents.js
@ -49,6 +49,15 @@ const STYLES_TABLE_TAG = css`
  white-space: nowrap;
 `;

+const COMPONENTS_DEAL_DIRECTION = {
+  "1": (
+    <span css={STYLES_TABLE_TAG} style={{ background: Constants.system.green }}>
+      storage
+    </span>
+  ),
+  "2": <span css={STYLES_TABLE_TAG}>retrieval</span>,
+};
+
 const COMPONENTS_TRANSACTION_DIRECTION = {
  "1": (
    <span css={STYLES_TABLE_TAG} style={{ background: Constants.system.green }}>
@ -203,6 +212,8 @@ export const TableContent = ({
      return COMPONENTS_ICON[text];
    case "AVATAR":
      return <Avatar url={text} size={40} online={online} />;
+    case "DEAL_DIRECTION":
+      return COMPONENTS_DEAL_DIRECTION[text];
    case "DEAL_STATUS_RETRIEVAL":
      return RETRIEVAL_DEAL_STATES[`${text}`];
    case "DEAL_STATUS":
--- a/components/system/index.js
+++ b/components/system/index.js
@ -10,6 +10,8 @@ import { CreateFilecoinAddress } from "~/components/system/modules/CreateFilecoi
 import { CreateFilecoinStorageDeal } from "~/components/system/modules/CreateFilecoinStorageDeal";
 import { SendAddressFilecoin } from "~/components/system/modules/SendAddressFilecoin";
 import { FilecoinBalancesList } from "~/components/system/modules/FilecoinBalancesList";
+import { FilecoinTransactionsList } from "~/components/system/modules/FilecoinTransactionsList";
+import { FilecoinDealsList } from "~/components/system/modules/FilecoinDealsList";

 // NOTE(jim): Components
 import {
@ -65,6 +67,8 @@ export {
  CreateFilecoinStorageDeal,
  SendAddressFilecoin,
  FilecoinBalancesList,
+  FilecoinTransactionsList,
+  FilecoinDealsList,
  // NOTE(jim): Components
  ButtonPrimary,
  ButtonPrimaryFull,
--- a/components/system/modules/FilecoinDealsList.js
+++ b/components/system/modules/FilecoinDealsList.js
@ -0,0 +1,94 @@
+import * as React from "react";
+import * as Constants from "~/common/constants";
+import * as Strings from "~/common/strings";
+import * as System from "~/components/system";
+
+import { css } from "@emotion/react";
+
+const STYLES_CONTAINER = css`
+  font-family: ${Constants.font.text};
+  box-sizing: border-box;
+  border-radius: 4px;
+  background-color: ${Constants.system.white};
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  border: 1px solid ${Constants.system.border};
+  width: 100%;
+`;
+
+export class FilecoinDealsList extends React.Component {
+  state = {
+    selectedRowId: null,
+  };
+
+  _handleChange = (e) => {
+    this.setState({ selectedRowId: e.target.value });
+  };
+
+  render() {
+    return (
+      <div css={STYLES_CONTAINER} style={this.props.style}>
+        <System.Table
+          data={{
+            columns: [
+              {
+                key: "type",
+                name: "Type",
+                type: "DEAL_DIRECTION",
+                width: "104px",
+              },
+              {
+                key: "address",
+                name: "Address",
+                width: "196px",
+              },
+              {
+                key: "rootCid",
+                name: "Root cid",
+                width: "196px",
+              },
+              {
+                key: "status",
+                name: "Status",
+                type: "TRANSACTION_STATUS",
+                width: "104px",
+              },
+              {
+                key: "time",
+                name: "Time",
+                width: "104px",
+              },
+            ],
+            rows: this.props.data.map((each) => {
+              return {
+                id: each.rootCid,
+                address: each.addr,
+                rootCid: each.rootCid,
+                type: "1",
+                status: each.pending ? "2" : "1",
+                time: each.time,
+                children: (
+                  <div>
+                    {Object.keys(each.dealInfo).map((key) => (
+                      <div
+                        style={{
+                          display: "grid",
+                          gridTemplateColumns: "1fr 3fr",
+                        }}
+                      >
+                        <b>{key}</b>
+                        <span>{each.dealInfo[key]}</span>
+                      </div>
+                    ))}
+                  </div>
+                ),
+              };
+            }),
+          }}
+          selectedRowId={this.state.selectedRowId}
+          onChange={this._handleChange}
+          name={this.props.name}
+        />
+      </div>
+    );
+  }
+}
--- a/package.json
+++ b/package.json
@ -40,7 +40,7 @@
    "@emotion/react": "11.0.0-next.12",
    "@emotion/server": "11.0.0-next.12",
    "@textile/hub": "^0.3.4",
-    "@textile/powergate-client": "0.1.0-beta.14",
+    "@textile/powergate-client": "0.1.0",
    "babel-plugin-module-resolver": "^4.0.0",
    "body-parser": "^1.19.0",
    "chart.js": "^2.9.3",
--- a/pages/experiences/create-address.js
+++ b/pages/experiences/create-address.js
@ -8,14 +8,15 @@ const EXAMPLE_CODE = `import * as React from 'react';
 import { CreateFilecoinAddress } from 'slate-react-system';
 import { createPow } from "@textile/powergate-client";

-const PowerGate = createPow({ host: 'http://0.0.0.0:6002' });
-const FFS = await PowerGate.ffs.create();
-const token = FFS.token ? FFS.token : null;
-PowerGate.setToken(token)
+const PowerGate = createPow({ host: 'http://pow.slate.textile.io:6002' });

 class Example extends React.Component {
-  // NOTE(jim):
-  // Requires token and authentication.
+  componentDidMount = async () => {
+    const FFS = await PowerGate.ffs.create();
+    const token = FFS.token ? FFS.token : null;
+    PowerGate.setToken(token);
+  }
+
  _handleCreateAddress = async ({ name, type, makeDefault }) => {
    const response = await PowerGate.ffs.newAddr(
      name, 
--- a/pages/experiences/filecoin-wallet-balances.js
+++ b/pages/experiences/filecoin-wallet-balances.js
@ -8,10 +8,17 @@ const EXAMPLE_CODE = `import * as React from 'react';
 import { FilecoinBalancesList } from 'slate-react-system';
 import { createPow } from "@textile/powergate-client";

-const PowerGate = createPow({ host: 'http://0.0.0.0:6002' });
-const { info } = await PowerGate.ffs.info();
+const PowerGate = createPow({ host: "http://pow.slate.textile.io:6002" });

 class Example extends React.Component {
+  componentDidMount = async () => {
+    
+    const FFS = await PowerGate.ffs.create();
+    const token = FFS.token ? FFS.token : null;
+    PowerGate.setToken(token);
+    const { info } = await PowerGate.ffs.info();
+  }
+
  render() {
    return (
      <FilecoinBalancesList data={info.balancesList} />
--- a/pages/experiences/list-storage-deals.js
+++ b/pages/experiences/list-storage-deals.js
@ -0,0 +1,218 @@
+import * as React from "react";
+import * as System from "~/components/system";
+import * as Constants from "~/common/constants";
+
+import Group from "~/components/system/Group";
+import SystemPage from "~/components/system/SystemPage";
+import ViewSourceLink from "~/components/system/ViewSourceLink";
+
+import { createPow, ffsOptions } from "@textile/powergate-client";
+const PowerGate = createPow({ host: "http://pow.slate.textile.io:6002" });
+
+const EXAMPLE_CODE = `import * as React from 'react';
+import { FilecoinDealsList } from 'slate-react-system';
+import { createPow, ffsOptions } from "@textile/powergate-client";
+
+const PowerGate = createPow({ host: "http://pow.slate.textile.io:6002" });
+
+class Example extends React.Component {
+  componentDidMount = async () => {
+    const FFS = await PowerGate.ffs.create();
+    const token = FFS.token ? FFS.token : null;
+    PowerGate.setToken(token);
+    this.recordsList = await PowerGate.ffs.listStorageDealRecords(
+      ffsOptions.withIncludeFinal(true),
+      ffsOptions.withIncludePending(true)
+    );
+  }
+
+  render() {
+    return (
+      <FilecoinDealsList data={this.recordsList} />
+    );
+  }
+}
+`;
+
+export default class SystemPageStorageDeals extends React.Component {
+  render() {
+    const recordsList = [
+      {
+        addr:
+          "t3solnyrrblqlmvi6gmzewzvu62vs7uqvkl22yemzr63bcylbaaqsg44mnipepuafg7efzzx4zwcsi66jgze3q",
+        dealInfo: {
+          activationEpoch: 0,
+          dealId: 0,
+          duration: 1000,
+          miner: "t0101180",
+          msg: "",
+          pieceCid: "b",
+          pricePerEpoch: 1220,
+          proposalCid:
+            "bafyreifvjnupitsw3zwykymlnuruqqpyxhmpm5xo6cf72e7hdxscqistea",
+          size: 0,
+          startEpoch: 0,
+          stateId: 0,
+          stateName: "",
+        },
+        pending: true,
+        rootCid: "QmctRftYBfbWAtfz9svcprTnmah4eFJXdAUuBhAA6Z6c84",
+        time: 1594960648,
+      },
+      {
+        addr:
+          "t3solnyrrblqlmvi6gmzewzvu62vs7uqvkl22yemzr63bcylbaaqsg44mnipepuafg7efzzx4zwcsi66jgze3q",
+        dealInfo: {
+          activationEpoch: 0,
+          dealId: 0,
+          duration: 1000,
+          miner: "t0101180",
+          msg: "",
+          pieceCid: "b",
+          pricePerEpoch: 4882,
+          proposalCid:
+            "bafyreihej2ejt32ackx5h6n5vfgdjulya6lqtvhim22scnxbnw2kf3f6bm",
+          size: 0,
+          startEpoch: 0,
+          stateId: 0,
+          stateName: "",
+        },
+        pending: true,
+        rootCid: "QmUXsfqC1bHbZyD7T341rBXQCfDxA8UaiAmziHcwRRZHsQ",
+        time: 1594960738,
+      },
+    ];
+
+    return (
+      <SystemPage
+        title="SDS: Storage Deals"
+        description="..."
+        url="https://fps.onrender.com/experiences/list-storage-deals"
+      >
+        <System.H1>
+          View Storage and Retrieval Deals{" "}
+          <ViewSourceLink file="experiences/list-storage-deals.js" />
+        </System.H1>
+        <br />
+        <br />
+        <System.P>
+          Here is an example of an experience for getting Filecoin Storage deals
+          from{" "}
+          <a target="_blank" href="https://github.com/textileio/powergate/">
+            Textile's Powergate
+          </a>
+          .
+        </System.P>
+        <br />
+        <br />
+        <System.FilecoinDealsList
+          data={recordsList}
+          style={{ width: "110%" }}
+        />
+        <br />
+        <br />
+        <System.H2>Code</System.H2>
+        <hr />
+        <br />
+        <System.P>
+          You must specify at least one of{" "}
+          <System.CodeText>withIncludeFinal(true)</System.CodeText> and{" "}
+          <System.CodeText>withIncludePending(true)</System.CodeText>
+          to ensure you get a response. Other optional{" "}
+          <System.CodeText>ffsOptions</System.CodeText> that can be used to
+          specify what data you get back are noted in the table below.
+        </System.P>
+        <br />
+        <System.P>
+          To use the component for retrieval deals, simply pass in the data from{" "}
+          <System.CodeText>listRetrievalDealRecords</System.CodeText> instead of{" "}
+          <System.CodeText>listStorageDealRecords</System.CodeText>.
+        </System.P>
+        <br />
+        <br />
+        <System.CodeBlock>{EXAMPLE_CODE}</System.CodeBlock>
+        <br />
+        <br />
+        <System.H2>Accepted Options Properties</System.H2>
+        <hr />
+        <br />
+        <System.P>
+          To specify what type of data you get back from{" "}
+          <System.CodeText>listStorageDealRecords</System.CodeText> and{" "}
+          <System.CodeText>listRetrievalDealRecords</System.CodeText>, you must
+          pass in a destructured list of the below{" "}
+          <System.CodeText>ffsOption</System.CodeText> functions. Each of the{" "}
+          <System.CodeText>ffsOption</System.CodeText> functions take a
+          parameter of their own, whose type is specified in the table below.
+        </System.P>
+        <br />
+        <br />
+        <Group title="Storage Deals">
+          <System.Table
+            data={{
+              columns: [
+                { key: "a", name: "Name", width: "144px" },
+                {
+                  key: "b",
+                  name: "Input Type",
+                  width: "104px",
+                  type: "OBJECT_TYPE",
+                },
+                { key: "c", name: "Default", width: "88px" },
+                { key: "d", name: "Description", width: "100%" },
+              ],
+              rows: [
+                {
+                  id: 1,
+                  a: (
+                    <span style={{ fontFamily: Constants.font.semiBold }}>
+                      withIncludeFinal
+                    </span>
+                  ),
+                  b: "boolean",
+                  c: "false",
+                  d:
+                    "Specifies whether or not to include final deals in the results. Ignored for listRetrievalDealRecords",
+                },
+                {
+                  id: 2,
+                  a: (
+                    <span style={{ fontFamily: Constants.font.semiBold }}>
+                      withIncludePending
+                    </span>
+                  ),
+                  b: "boolean",
+                  c: "false",
+                  d:
+                    "Specifies whether or not to include pending deals in the results. Ignored for listRetrievalDealRecords",
+                },
+                {
+                  id: 3,
+                  a: "withDataCids",
+                  b: "...string[]",
+                  c: "null",
+                  d: "Limits the results to deals for the provided data cids",
+                },
+                {
+                  id: 4,
+                  a: "withFromAddresses",
+                  b: "...string[]",
+                  c: "null",
+                  d:
+                    "Limits the results to deals initiated from the provided wallet addresses",
+                },
+                {
+                  id: 5,
+                  a: "withAscending",
+                  b: "boolean",
+                  c: "false",
+                  d: "Specifies to sort the results in ascending order",
+                },
+              ],
+            }}
+          />
+        </Group>
+      </SystemPage>
+    );
+  }
+}
--- a/pages/system/list-editor.js
+++ b/pages/system/list-editor.js
@ -110,7 +110,7 @@ import { ListEditor } from 'slate-react-system';`}
            data={{
              columns: [
                { key: "a", name: "Name", width: "128px" },
-                { key: "b", name: "Type", width: "88px" },
+                { key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
                { key: "c", name: "Default", width: "88px" },
                { key: "d", name: "Description", width: "100%" },
              ],
@ -127,7 +127,7 @@ import { ListEditor } from 'slate-react-system';`}
                  d: "Function called upon an onChange event",
                },
                {
-                  id: 6,
+                  id: 2,
                  a: (
                    <span style={{ fontFamily: Constants.font.semiBold }}>
                      options
@ -139,28 +139,28 @@ import { ListEditor } from 'slate-react-system';`}
                    "Values to choose from and reorder. Can be used to specify the default value. An array of strings.",
                },
                {
-                  id: 2,
+                  id: 3,
                  a: "name",
                  b: "string",
                  c: "null",
                  d: "Input name",
                },
                {
-                  id: 3,
+                  id: 4,
                  a: "label",
                  b: "string",
                  c: "null",
                  d: "Label text",
                },
                {
-                  id: 4,
+                  id: 5,
                  a: "description",
                  b: "string",
                  c: "null",
                  d: "Description text",
                },
                {
-                  id: 5,
+                  id: 6,
                  a: "tooltip",
                  b: "string",
                  c: "null",