Support for Join and FundingRequest plugins (proposals are read only)

src/assets/locales/en/translation.json

@@ -38,5 +38,11 @@
     "3BoxProfileSuccess": "Profile data saved to 3Box",
     "Following": "Now following",
     "UnFollowing": "No longer following",
-    "Raw call data": "Raw call data"
+    "Raw call data": "Raw call data",
+    "Address": "Address:",
+    "Funding": "Funding:",
+    "Reputation Minted": "Reputation Minted:",
+    "Minimum DAO bounty": "Minimum DAO bounty:",
+    "Amount": "Amount:",
+    "Amount Redeemed": "Amount Redeemed:"
 }

src/components/Plugin/Plugin.scss

@@ -85,6 +85,7 @@
         background-color: $disabled-button-color;
         border: $disabled-button-border;
         cursor: not-allowed;
+        pointer-events: none;
       }
       .activationTime {
         font-size: $caption;

src/components/Plugin/PluginContainer.tsx

@@ -140,6 +140,8 @@ class PluginContainer extends React.Component<IProps, IState> {
     }
 
     const isActive = getPluginIsActive(pluginState);
+    // The next line is temporary until creation of Join and FundingRequest proposals will be available.
+    const disabled = pluginState.name === "Join" || pluginState.name === "FundingRequest";
     const isProposalPlugin = Object.keys(PLUGIN_NAMES).includes(pluginState.name);
     const isBountyPlugin = pluginName(pluginState, pluginState.address) === "Standard Bounties";
     // checking the special case here where the information tab is the default
@@ -229,7 +231,7 @@ class PluginContainer extends React.Component<IProps, IState> {
                     <TrainingTooltip placement="topRight" overlay={i18next.t("New Proposal Button Tooltip")}>
                       <a className={
                         classNames({
-                          [css.disabled]: !isActive,
+                          [css.disabled]: !isActive || disabled,
                         })}
                       data-test-id="createProposal"
                       href="#!"

src/components/Proposal/ProposalSummary/ProposalSummary.tsx

@@ -1,4 +1,14 @@
-import { IDAOState, AnyProposal, IContributionRewardProposalState, IGenericPluginProposalState, IPluginRegistrarProposalState, IProposalState, Proposal, IPluginManagerProposalState } from "@daostack/arc.js";
+import {
+  IDAOState,
+  AnyProposal,
+  IContributionRewardProposalState,
+  IGenericPluginProposalState,
+  IPluginRegistrarProposalState,
+  IProposalState,
+  Proposal,
+  IPluginManagerProposalState,
+  IFundingRequestProposalState,
+  IJoinProposalState } from "@daostack/arc.js";
 import classNames from "classnames";
 import { GenericPluginRegistry } from "genericPluginRegistry";
 import * as React from "react";
@@ -9,6 +19,8 @@ import ProposalSummaryKnownGenericPlugin from "./ProposalSummaryKnownGenericPlug
 import ProposalSummaryPluginRegistrar from "./ProposalSummaryPluginRegistrar";
 import ProposalSummaryPluginManager from "./ProposalSummaryPluginManager";
 import ProposalSummaryUnknownGenericPlugin from "./ProposalSummaryUnknownGenericPlugin";
+import ProposalSummaryJoin from "./ProposalSummaryJoin";
+import ProposalSummaryFundingRequest from "./ProposalSummaryFundingRequest";
 import { getArc } from "arc";
 
 interface IProps {
@@ -64,6 +76,12 @@ export default class ProposalSummary extends React.Component<IProps, IState> {
       } else {
         return <ProposalSummaryUnknownGenericPlugin {...this.props} proposalState={state} />;
       }
+    } else if (proposal.coreState.name === "Join"){
+      const state = proposal.coreState as IJoinProposalState;
+      return <ProposalSummaryJoin {...this.props} proposalState={state} />;
+    } else if (proposal.coreState.name === "FundingRequest") {
+      const state = proposal.coreState as IFundingRequestProposalState;
+      return <ProposalSummaryFundingRequest {...this.props} proposalState={state} />;
     } else {
       return <div className={proposalSummaryClass}>Unknown proposal type</div>;
     }

src/components/Proposal/ProposalSummary/ProposalSummaryFundingRequest.tsx

@@ -0,0 +1,73 @@
+import { IDAOState, IFundingRequestProposalState } from "@daostack/arc.js";
+import classNames from "classnames";
+import { getNetworkName, linkToEtherScan, fromWei } from "lib/util";
+import * as React from "react";
+import { IProfileState } from "reducers/profilesReducer";
+import i18next from "i18next";
+import * as css from "./ProposalSummary.scss";
+
+interface IExternalProps {
+  beneficiaryProfile?: IProfileState;
+  detailView?: boolean;
+  daoState: IDAOState;
+  proposalState: IFundingRequestProposalState;
+  transactionModal?: boolean;
+}
+
+interface IState {
+  network: string;
+}
+
+type IProps = IExternalProps;
+
+export default class ProposalSummary extends React.Component<IProps, IState> {
+
+  constructor(props: IProps) {
+    super(props);
+    this.state = {
+      network: "",
+    };
+
+  }
+
+  public async componentDidMount(): Promise<void> {
+    this.setState({ network: (await getNetworkName()).toLowerCase() });
+  }
+
+  public render(): RenderOutput {
+    const { proposalState, detailView, transactionModal } = this.props;
+    const proposalSummaryClass = classNames({
+      [css.detailView]: detailView,
+      [css.transactionModal]: transactionModal,
+      [css.proposalSummary]: true,
+      [css.withDetails]: true,
+    });
+
+    return (
+      <div className={proposalSummaryClass}>
+        <div>
+          <span className={css.summaryTitle}>
+            <a href={linkToEtherScan(proposalState.beneficiary)} target="_blank" rel="noopener noreferrer">{proposalState.name}</a>
+          </span>
+          {detailView &&
+            <div className={css.summaryDetails}>
+              <table><tbody>
+                <tr>
+                  <th>
+                    {i18next.t("Address")}
+                    <a href={linkToEtherScan(proposalState.beneficiary)} target="_blank" rel="noopener noreferrer">
+                      <img src="/assets/images/Icon/Link-blue.svg" />
+                    </a>
+                  </th>
+                  <td>{proposalState.beneficiary}</td>
+                </tr>
+                <tr><th>{i18next.t("Amount")}</th><td>{fromWei(proposalState.amount)}</td></tr>
+                <tr><th>{i18next.t("Amount Redeemed")}:</th><td>{fromWei(proposalState.amountRedeemed)}</td></tr>
+              </tbody></table>
+            </div>
+          }
+        </div>
+      </div>
+    );
+  }
+}

src/components/Proposal/ProposalSummary/ProposalSummaryJoin.tsx

@@ -0,0 +1,74 @@
+import { IDAOState, IJoinProposalState } from "@daostack/arc.js";
+import classNames from "classnames";
+import { getNetworkName, linkToEtherScan, fromWei } from "lib/util";
+import * as React from "react";
+import { IProfileState } from "reducers/profilesReducer";
+import i18next from "i18next";
+import * as css from "./ProposalSummary.scss";
+
+interface IExternalProps {
+  beneficiaryProfile?: IProfileState;
+  detailView?: boolean;
+  daoState: IDAOState;
+  proposalState: IJoinProposalState;
+  transactionModal?: boolean;
+}
+
+interface IState {
+  network: string;
+}
+
+type IProps = IExternalProps;
+
+export default class ProposalSummary extends React.Component<IProps, IState> {
+
+  constructor(props: IProps) {
+    super(props);
+    this.state = {
+      network: "",
+    };
+
+  }
+
+  public async componentDidMount(): Promise<void> {
+    this.setState({ network: (await getNetworkName()).toLowerCase() });
+  }
+
+  public render(): RenderOutput {
+    const { proposalState, detailView, transactionModal } = this.props;
+    const proposalSummaryClass = classNames({
+      [css.detailView]: detailView,
+      [css.transactionModal]: transactionModal,
+      [css.proposalSummary]: true,
+      [css.withDetails]: true,
+    });
+
+    return (
+      <div className={proposalSummaryClass}>
+        <div>
+          <span className={css.summaryTitle}>
+            <a href={linkToEtherScan(proposalState.name)} target="_blank" rel="noopener noreferrer">{proposalState.name}</a>
+          </span>
+          {detailView &&
+            <div className={css.summaryDetails}>
+              <table><tbody>
+                <tr>
+                  <th>
+                    {i18next.t("Address")}
+                    <a href={linkToEtherScan(proposalState.proposedMember)} target="_blank" rel="noopener noreferrer">
+                      <img src="/assets/images/Icon/Link-blue.svg" />
+                    </a>
+                  </th>
+                  <td>{proposalState.proposedMember}</td>
+                </tr>
+                <tr><th>{i18next.t("Funding")}</th><td>{fromWei(proposalState.funding)}</td></tr>
+                <tr><th>{i18next.t("Reputation Minted")}</th><td>{fromWei(proposalState.reputationMinted)}</td></tr>
+                <tr><th>{i18next.t("Minimum DAO bounty")}</th><td>{fromWei(proposalState.genesisProtocolParams.minimumDaoBounty)}</td></tr>
+              </tbody></table>
+            </div>
+          }
+        </div>
+      </div>
+    );
+  }
+}

src/lib/pluginUtils.ts

@@ -42,6 +42,8 @@ export const REQUIRED_PLUGIN_PERMISSIONS: any = {
   "UpgradeScheme": PluginPermissions.IsRegistered | PluginPermissions.CanRegisterPlugins | PluginPermissions.CanUpgradeController,
   "VestingScheme": PluginPermissions.IsRegistered,
   "VoteInOrganizationScheme": PluginPermissions.IsRegistered | PluginPermissions.CanCallDelegateCall,
+  "Join": PluginPermissions.IsRegistered,
+  "FundingRequest": PluginPermissions.IsRegistered,
 };
 
 /** plugins that we know how to interpret  */
@@ -53,6 +55,8 @@ export const PLUGIN_NAMES = {
   SchemeFactory: "Plugin Manager",
   Competition: "Competition",
   ContributionRewardExt: "Contribution Reward Ext",
+  Join: "Join",
+  FundingRequest: "Funding Request",
 };
 
 /**