[WIP] Signal Scheme Alchemy Integration

src/actions/arcActions.ts

@@ -1,4 +1,5 @@
-import { Address, DAO, IProposalCreateOptions, IProposalOutcome, ITransactionState, ITransactionUpdate, ReputationFromTokenScheme, Scheme } from "@daostack/client";
+import { Address, DAO, IProposalCreateOptions, IProposalOutcome, ITransactionState,
+  ITransactionUpdate, ReputationFromTokenScheme, Scheme } from "@daostack/client";
 import { IAsyncAction } from "actions/async";
 import { getArc } from "arc";
 import { toWei } from "lib/util";
@@ -38,11 +39,28 @@ export const operationNotifierObserver = (dispatch: Redux.Dispatch<any, any>, tx
   ];
 };
 
+export function saveSignalDescription(signalDescription: any): ThunkAction<any, IRootState, null> {
+  return async (_getState: () => IRootState) => {
+    const arc = getArc();
+    let ipfsDataToSave: object = {};
+    if (signalDescription.key && signalDescription.value !== undefined) {
+      if (!arc.ipfsProvider) {
+        throw Error("No ipfsProvider set on Arc instance - cannot save data on IPFS");
+      }
+      ipfsDataToSave = {
+        key: signalDescription.key,
+        value: signalDescription.value,
+      };
+    }
+    return await arc.ipfs.addAndPinString(Buffer.from(JSON.stringify(ipfsDataToSave)));
+  };
+}
+
 export function createProposal(proposalOptions: IProposalCreateOptions): ThunkAction<any, IRootState, null> {
   return async (dispatch: Redux.Dispatch<any, any>, _getState: () => IRootState) => {
     try {
       const arc = getArc();
-
+      
       const dao = new DAO(proposalOptions.dao, arc);
 
       const observer = operationNotifierObserver(dispatch, "Create proposal");

src/components/Account/AccountImage.tsx

@@ -8,12 +8,13 @@ interface IProps {
   accountAddress: string;
   profile?: IProfileState;
   width: number;
+  style?: any;
 }
 
 export default class AccountImage extends React.Component<IProps, null> {
 
   public render(): RenderOutput {
-    const { accountAddress, profile, width } = this.props;
+    const { accountAddress, profile, width, style } = this.props;
 
     let url;
     if (profile && profile.image && profile.image[0] && profile.image[0].contentUrl) {
@@ -25,6 +26,6 @@ export default class AccountImage extends React.Component<IProps, null> {
       });
     }
 
-    return (<img src={url} className={css.accountImage} width={width} />);
+    return (<img src={url} className={css.accountImage} width={width} style={ style ? style : {}}/>);
   }
 }

src/components/Dao/DaoHeader.scss

@@ -0,0 +1,71 @@
+.headerWrap {
+  background: white;
+  margin: 8rem 2.5% 40px 0;
+  padding: 25px;
+  position: relative;
+  border-radius: 20px 20px 0 0;
+}
+
+.reputationHolders {
+  display: block;
+  position: absolute;
+  font-size: 10px;
+  font-weight: normal;
+  color: $gray-1;
+  white-space: nowrap;
+}
+
+.daoName {
+  font-size: 24px;
+  color: #689bd6;
+}
+
+.daoInfo {
+  margin-left: 15%;
+  top: 15px;
+  position: absolute;
+}
+
+.daoDescription {
+  font-family: $body-font;
+  color: $black;
+  font-weight: 500;
+  font-size: 13px;
+  width: 75%;
+}
+
+.circularSquare {
+  border-radius: 50%;
+  border-color: white;
+  border-style: solid
+}
+
+.daoImg {
+  // margin-left: 15%
+  top: -40px;
+  position: absolute
+}
+
+.holdings {
+  margin-left: 85%;
+  padding: 15px;
+  border: 1px solid #dbd7d7;
+  border-radius: 7px;
+  margin-bottom: 15px
+}
+
+.holdings .holdingsAmount {
+  margin-top: 5px;
+  color: #565a5d;
+  font-size: 12px
+}
+
+.holdings .holdingsAmount .holdingsName {
+  float: right;
+  margin-right: 25px
+}  
+
+.daoHeader {
+  position: absolute;
+  top: 50px;
+}

src/components/Dao/DaoHeader.tsx

@@ -0,0 +1,101 @@
+import * as React from "react";
+import { IDAOState, Scheme } from "@daostack/client";
+
+import withSubscription, { ISubscriptionProps } from "components/Shared/withSubscription";
+import AccountImage from "components/Account/AccountImage";
+import * as css from "./DaoHeader.scss";
+
+const styles = { 
+  circularSquare: {
+    borderRadius: "50%",
+    borderColor: "white",
+    borderStyle: "solid",  
+  },
+};
+
+interface Signal {
+  id: string;
+  data: any | string;
+}
+
+interface IExternalProps {
+  daoState: IDAOState;
+  signal?: Signal | any;
+}
+
+type IProps = IExternalProps & ISubscriptionProps<[Scheme[], Signal | any]>;
+
+class DaoHeaderComponent extends React.Component<IProps, any> {
+  render() {
+    const { daoState, signal } = this.props;
+    const { name, memberCount, address } = daoState;
+    const data = {
+      daoImg: "/assets/images/generic-user-avatar.png",
+      reputationHolders: memberCount,
+      holdings: [
+        { name: "GEN", amount: 0.24653 },
+        { name: "ETH", amount: 16.01 },
+        { name: "DAI", amount: 148.19 },
+      ],
+      description: `
+      ${name} is an independent, global community of people working together to build and promote Decentralized Autonomous Organizations (DAOs). 
+      It’s the perfect place to get involved with DAOstack and get your feet wet in a real-life DAO.
+      `,
+    };
+
+    return (
+      <div className={css.headerWrap}>
+        <div className={css.daoImg}>
+          {/* Logo will go here instead of AccountImage this is just a placeholder */}
+          <AccountImage
+            accountAddress={address}
+            width={106}
+            style={styles.circularSquare}
+          />
+        </div>
+        <div className={css.daoInfo}>
+          <b className={css.daoName}>
+            { signal.name ? signal.name : name }
+          </b>
+          <b className={css.reputationHolders}>
+            { data.reputationHolders } Reputation Holders
+          </b>
+        </div>
+
+        <div className={css.holdings}>
+          Holdings
+          {
+            data.holdings.map((holding, index) => {
+              return (
+                <div key={index} className={css.holdingsAmount}>
+                  { holding.amount }
+                  <div className={css.holdingsName}>
+                    { holding.name }
+                  </div>
+                </div>
+              );
+            })
+          }
+        </div>
+
+        <h2 className={css.daoHeader}>
+          This is the { name } Header
+          <div className={css.daoDescription}>
+            { data.description }
+          </div>
+        </h2>
+      </div>
+    );
+  }
+}
+
+const DaoHeader = withSubscription({
+  wrappedComponent: DaoHeaderComponent,
+  checkForUpdate: [],
+  createObservable: (props: IExternalProps) => {
+    const dao = props.daoState.dao;
+    return dao.schemes({}, { fetchAllData: true, subscribe: true });
+  },
+});
+
+export default DaoHeader;

src/components/Dao/DaoSchemesPage.scss

@@ -41,6 +41,16 @@
   padding-top: 30px;
 }
 
+.daoHeaderBackground {
+  // @TODO Image is repeating, check this later when using real image
+  // background-image: url(/assets/images/bg-test.jpeg);
+  width: 115%;
+  position: absolute;
+  display: flex;
+  height: 30%;
+  top:0;
+  right: 0;
+}
 
 @media only screen and (max-width: 425px) {
   .wrapper h1 {

src/components/Dao/DaoSchemesPage.tsx

@@ -13,6 +13,10 @@ import { CSSTransition, TransitionGroup } from "react-transition-group";
 import * as css from "./DaoSchemesPage.scss";
 import ProposalSchemeCard from "./ProposalSchemeCard";
 import SimpleSchemeCard from "./SimpleSchemeCard";
+import DAOHeader from "./DaoHeader";
+import gql from "graphql-tag";
+import { getArc } from "arc";
+import { combineLatest } from "rxjs";
 
 const Fade = ({ children, ...props }: any) => (
   <CSSTransition
@@ -29,11 +33,23 @@ const Fade = ({ children, ...props }: any) => (
   </CSSTransition>
 );
 
+const DAOHeaderBackground = (props: any) => (
+  <div
+    className={css.daoHeaderBackground}
+    style={{ backgroundImage: `url(${props.backgroundImage})` }}
+  ></div>
+);
+
 type IExternalProps = {
   daoState: IDAOState;
 } & RouteComponentProps<any>;
 
-type IProps = IExternalProps & ISubscriptionProps<Scheme[]>;
+interface Signal {
+  id: string;
+  data: any | string;
+};
+
+type IProps = IExternalProps & ISubscriptionProps<[Scheme[], Signal[] | any]>;
 
 class DaoSchemesPage extends React.Component<IProps, null> {
 
@@ -48,7 +64,11 @@ class DaoSchemesPage extends React.Component<IProps, null> {
   public render() {
     const { data } = this.props;
     const dao = this.props.daoState;
-    const allSchemes = data;
+    const [allSchemes, signalsData] = data;
+    const { signals } = signalsData.data;
+    const signal = signals.length > 0 ? signals[0] : null;
+    const daoHeaderBackground = signal ? JSON.parse(signal.data).Header : null;
+    const backgroundImage = daoHeaderBackground ? daoHeaderBackground : null;
 
     const contributionReward = allSchemes.filter((scheme: Scheme) => scheme.staticState.name === "ContributionReward");
     const knownSchemes = allSchemes.filter((scheme: Scheme) => scheme.staticState.name !== "ContributionReward" && KNOWN_SCHEME_NAMES.indexOf(scheme.staticState.name) >= 0);
@@ -78,8 +98,9 @@ class DaoSchemesPage extends React.Component<IProps, null> {
 
     return (
       <div className={css.wrapper}>
+        { backgroundImage &&  <DAOHeaderBackground backgroundImage={backgroundImage} /> }
         <BreadcrumbsItem to={"/dao/" + dao.address}>{dao.name}</BreadcrumbsItem>
-
+        { signal && <DAOHeader {...this.props} signal={signal} /> }
         <Sticky enabled top={50} innerZ={10000}>
           <h1>All Plugins</h1>
         </Sticky>
@@ -104,7 +125,21 @@ export default withSubscription({
   errorComponent: (props) => <span>{props.error.message}</span>,
   checkForUpdate: [],
   createObservable: (props: IExternalProps) => {
+    const arc = getArc();
     const dao = props.daoState.dao;
-    return dao.schemes({}, { fetchAllData: true, subscribe: true });
+    const schemes = dao.schemes({}, { fetchAllData: true, subscribe: true });
+    // const DAOAddress = props.daoState.address;
+    // Currently only one dao has signal data 
+    const DAOAddress = dao.id;
+    const signalQuery = gql`
+    {
+      signals(where: { id: "${DAOAddress}" } ) {
+        id
+        data
+      }
+    }
+    `;
+    const signalSchemeData = arc.getObservable(signalQuery);
+    return combineLatest(schemes, signalSchemeData);
   },
 });

src/components/Proposal/Create/SchemeForms/CreateKnownGenericSchemeProposal.tsx

@@ -38,11 +38,13 @@ const mapStateToProps = (state: IRootState, ownProps: IStateProps) => {
 
 interface IDispatchProps {
   createProposal: typeof arcActions.createProposal;
+  saveSignalData: typeof arcActions.saveSignalDescription;
   showNotification: typeof showNotification;
 }
 
 const mapDispatchToProps = {
   createProposal: arcActions.createProposal,
+  saveSignalData: arcActions.saveSignalDescription,
   showNotification,
 };
 
@@ -98,7 +100,6 @@ class CreateKnownSchemeProposal extends React.Component<IProps, IState> {
   private handleSubmit = async (values: IFormValues, { setSubmitting }: any ): Promise<void> => {
 
     if (!await enableWalletProvider({ showNotification: this.props.showNotification })) { return; }
-
     const currentAction = this.state.currentAction;
     const callValues = [];
 
@@ -107,24 +108,35 @@ class CreateKnownSchemeProposal extends React.Component<IProps, IState> {
       values[field.name] = callValue;
       callValues.push(callValue);
     }
-
     let callData = "";
     try {
-      callData = this.props.genericSchemeInfo.encodeABI(currentAction, callValues);
+
+      if(values.key) {
+        const ipfsValue = {
+          key: values.key,
+          value: "",
+        };
+        if(currentAction.id !== "deleteSignalType") {
+          ipfsValue.value = values.value;
+          currentAction.abi.inputs.pop();
+        }
+        const ipfsData = await this.props.saveSignalData(ipfsValue);
+        callData = this.props.genericSchemeInfo.encodeABI(currentAction, [ipfsData]);
+      } else {
+        callData = this.props.genericSchemeInfo.encodeABI(currentAction, callValues);
+      }
     } catch (err) {
       showNotification(NotificationStatus.Failure, err.message);
       setSubmitting(false);
       return;
     }
     setSubmitting(false);
-
     let ethValue = new BN(0);
 
     if (this.props.genericSchemeInfo.specs.name === "Standard Bounties") {
       const calcBountEth = await this.getBountyEth(values);
       ethValue =  ethValue.add(calcBountEth);
     } 
-
     const proposalValues = {
       ...values,
       callData,