design system: adds filecoin balances list component for 0.0.4

components/system/SystemPage.js

@@ -213,6 +213,11 @@ export default class SystemPage extends React.Component {
             href="/experiences/send-address-filecoin"
             title="Send an Address Filecoin"
           />
+          <SidebarLink
+            url={url}
+            href="/experiences/filecoin-wallet-balances"
+            title="Filecoin Wallet Balances"
+          />
 
           <span css={STYLES_LABEL}>
             <br />

components/system/components/fragments/TableComponents.js

@@ -70,6 +70,7 @@ const COMPONENTS_TRANSACTION_STATUS = {
 };
 
 const STYLES_COLUMN = css`
+  box-sizing: border-box;
   display: inline-flex;
   align-items: flex-start;
   justify-content: space-between;
@@ -78,6 +79,7 @@ const STYLES_COLUMN = css`
 `;
 
 const STYLES_TOP_COLUMN = css`
+  box-sizing: border-box;
   display: inline-flex;
   align-items: flex-start;
   justify-content: space-between;
@@ -87,6 +89,7 @@ const STYLES_TOP_COLUMN = css`
 `;
 
 const STYLES_CONTENT = css`
+  box-sizing: border-box;
   padding: 12px 12px 16px 12px;
   min-width: 10%;
   width: 100%;
@@ -98,6 +101,7 @@ const STYLES_CONTENT = css`
 `;
 
 const STYLES_CONTENT_BUTTON = css`
+  box-sizing: border-box;
   flex-shrink: 0;
   height: 40px;
   width: 30px;
@@ -113,6 +117,7 @@ const STYLES_CONTENT_BUTTON = css`
 `;
 
 const STYLES_TABLE_CONTENT_LINK = css`
+  box-sizing: border-box;
   font-family: ${Constants.font.medium};
   text-decoration: underline;
   cursor: pointer;

components/system/index.js

@@ -6,6 +6,7 @@ import { PeersList } from "~/components/system/modules/PeersList";
 import { CreateFilecoinAddress } from "~/components/system/modules/CreateFilecoinAddress";
 import { CreateFilecoinStorageDeal } from "~/components/system/modules/CreateFilecoinStorageDeal";
 import { SendAddressFilecoin } from "~/components/system/modules/SendAddressFilecoin";
+import { FilecoinBalancesList } from "~/components/system/modules/FilecoinBalancesList";
 
 // NOTE(jim): Components
 import {
@@ -57,6 +58,7 @@ export {
   CreateFilecoinAddress,
   CreateFilecoinStorageDeal,
   SendAddressFilecoin,
+  FilecoinBalancesList,
   // NOTE(jim): Components
   ButtonPrimary,
   ButtonPrimaryFull,

components/system/modules/FilecoinBalancesList.js

@@ -0,0 +1,53 @@
+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 const FilecoinBalancesList = (props) => {
+  return (
+    <div css={STYLES_CONTAINER}>
+      <System.Table
+        data={{
+          columns: [
+            {
+              key: "address",
+            },
+            {
+              key: "name",
+            },
+            {
+              key: "type",
+            },
+            {
+              key: "balance",
+            },
+          ],
+          rows: props.data.map((each) => {
+            return {
+              id: each.addr.addr,
+              balance: Strings.formatAsFilecoin(each.balance),
+              address: each.addr.addr,
+              name: each.addr.name,
+              type: each.addr.type,
+            };
+          }),
+        }}
+        selectedRowId={props.selectedRowId}
+        onChange={props.onChange}
+        name={props.name}
+      />
+    </div>
+  );
+};

pages/experiences/filecoin-wallet-balances.js

@@ -0,0 +1,76 @@
+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 { 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();
+
+class Example extends React.Component {
+  render() {
+    return (
+      <PeersList data={info.balanceList} />
+    );
+  }
+}
+`;
+
+export default class SystemPageFilecoinWalletBalances extends React.Component {
+  render() {
+    const balanceList = [
+      {
+        addr: {
+          addr:
+            "t3ual5q5qo5wolfxsui4ciujfucqwf6gqso4lettcjwl2tyismgol7c4tngvoono5rmytuqotye7oosfjv6g7a",
+          name: "Wallet A",
+          type: "bls",
+        },
+        balance: 40,
+      },
+      {
+        addr: {
+          addr: "t1n7sjmxtxkhwkmk25ly6hk6xfmvi6sjx5v27wliq",
+          name: "Wallet B",
+          type: "secp256k1",
+        },
+        balance: 500,
+      },
+    ];
+
+    return (
+      <SystemPage
+        title="SDS: Filecoin Wallet Balances"
+        description="..."
+        url="https://fps.onrender.com/experiences/filecoin-wallet-balances"
+      >
+        <System.H1>
+          Filecoin Wallet Balances{" "}
+          <ViewSourceLink file="experiences/filecoin-wallet-balances.js" />
+        </System.H1>
+        <br />
+        <br />
+        <System.P>
+          Here is an example of an experience for getting Filecoin Wallet
+          Balances from{" "}
+          <a target="_blank" href="https://github.com/textileio/powergate/">
+            Textile's Powergate
+          </a>
+          .
+        </System.P>
+        <br />
+        <br />
+        <System.FilecoinBalancesList data={balanceList} />
+        <br />
+        <br />
+        <System.H2>Code</System.H2>
+        <br /> <br />
+        <System.CodeBlock>{EXAMPLE_CODE}</System.CodeBlock>
+      </SystemPage>
+    );
+  }
+}

pages/experiences/send-address-filecoin.js

@@ -42,7 +42,7 @@ export default class SystemPageSendAddressFilecoin extends React.Component {
         url="https://fps.onrender.com/experiences/send-address-filecoin"
       >
         <System.H1>
-          Create a Filecoin Address{" "}
+          Send an Address Filecoin{" "}
           <ViewSourceLink file="experiences/send-address-filecoin.js" />
         </System.H1>
         <br />