Merge pull request #79 from PotLock/feat/social-share

add share to twitter

apps/potlock/widget/Cart/Checkout.jsx

@@ -1,9 +1,13 @@
 const ownerId = "potlock.near";
+const donationContractId = "donate.potlock.near";
 
 const IPFS_BASE_URL = "https://nftstorage.link/ipfs/";
 const TRASH_ICON_URL =
   IPFS_BASE_URL + "bafkreicwtubzlywmtvoxc4tqjfturyi5oqxtbpezceosiw3juv2d4uf7om";
 
+const DEFAULT_GATEWAY = "https://near.social/potlock.near";
+const POTLOCK_TWITTER_ACCOUNT_ID = "PotLock_";
+
 // const Wrapper = styled.div`
 //   display: flex;
 //   flex-direction: row;
@@ -115,30 +119,102 @@ const SubTitle = styled.div`
   font-size: 14px;
 `;
 
+const TxLink = styled.a`
+  color: #2e2e2e;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: none;
+  }
+`;
+
 State.init({
   selectedProjectIds: [],
   masterSelectorSelected: false,
+  successfulDonationRecipientId: null,
+  successfulDonationRecipientProfile: null,
 });
 
 const allSelected =
   state.selectedProjectIds.length !== 0 &&
   state.selectedProjectIds.length === Object.keys(props.cart).length;
+// const twitterSuccessText = `I just donated to this project on @potlock_!`;
+
+// console.log("props in Checkout: ", props);
+
+const txInfo = useMemo(() => {
+  if (props.transactionHashes && props.registeredProjects) {
+    const body = JSON.stringify({
+      jsonrpc: "2.0",
+      id: "dontcare",
+      method: "tx",
+      params: [props.transactionHashes, context.accountId],
+    });
+    const res = fetch("https://rpc.mainnet.near.org", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body,
+    });
+    if (res.ok) {
+      const successVal = res.body.result.status?.SuccessValue;
+      let decoded = Buffer.from(successVal, "base64").toString("utf-8"); // atob not working
+      decoded = JSON.parse(decoded);
+      const recipientId = decoded.recipient_id;
+      if (recipientId) {
+        State.update({ successfulDonationRecipientId: recipientId });
+      }
+    }
+  }
+}, [props.transactionHashes]);
+
+if (state.successfulDonationRecipientId && !state.successfulDonationRecipientProfile) {
+  const profile = Social.getr(`${state.successfulDonationRecipientId}/profile`);
+  if (profile) {
+    State.update({ successfulDonationRecipientProfile: profile });
+  }
+}
+
+const twitterIntent = useMemo(() => {
+  if (!state.successfulDonationRecipientId) return;
+  const twitterIntentBase = "https://twitter.com/intent/tweet?text=";
+  let url =
+    DEFAULT_GATEWAY +
+    `${ownerId}/widget/Index?tab=project&projectId=${state.successfulDonationRecipientId}&referrerId=${context.accountId}`;
+  let text = `I just donated to ${
+    state.successfulDonationRecipientProfile
+      ? state.successfulDonationRecipientProfile.name
+      : state.successfulDonationRecipientId
+  } on @${POTLOCK_TWITTER_ACCOUNT_ID}! Support public goods at `;
+  text = encodeURIComponent(text);
+  url = encodeURIComponent(url);
+  return twitterIntentBase + text + `&url=${url}`;
+}, [state.successfulDonationRecipientId, state.successfulDonationRecipientProfile]);
+
+// console.log(encodeURIComponent("https://twitter.com/intent/tweet?text=Hello%20world"));
+
+// const donationsForDonor = useMemo(() => {
+//   const donations = Near.view(donationContractId, "get_donations_for_donor", {
+//     donor_id: context.accountId,
+//   });
+//   console.log("donations: ", donations);
+// }, []);
 
 return (
   // <div>
   <Container>
     {props.checkoutSuccess ? (
       <SuccessContainer>
         <Title>Thanks for donating!</Title>
-        {/* <ButtonsContainer> */}
         <Widget
           src={`${ownerId}/widget/Buttons.NavigationButton`}
           props={{
-            href: `https://nearblocks.io/txns/${props.checkoutSuccessTxHash}`,
+            href: twitterIntent,
             target: "_blank",
-            type: "secondary",
-            text: "View transaction",
-            disabled: !props.checkoutSuccessTxHash,
+            type: "primary",
+            text: "Share to Twitter",
+            disabled: !twitterIntent,
             style: {
               width: "300px",
             },
@@ -148,14 +224,14 @@ return (
           src={`${ownerId}/widget/Buttons.NavigationButton`}
           props={{
             href: `?tab=projects`,
-            type: "primary",
+            type: "secondary",
             text: "Explore projects",
             style: {
               width: "300px",
             },
           }}
         />
-        {/* </ButtonsContainer> */}
+        <TxLink>View transaction</TxLink>
       </SuccessContainer>
     ) : (
       <>

apps/potlock/widget/Index.jsx

@@ -45,7 +45,9 @@ const Theme = styled.div`
 `;
 
 State.init({
+  registeredProjects: null,
   cart: null,
+  // previousCart: null,
   // nearToUsd: null,
   nearToUsd: useCache(
     () =>
@@ -70,6 +72,64 @@ if (!state.registeredProjects) {
 
 if (!state.registeredProjects) return "";
 
+const IPFS_BASE_URL = "https://nftstorage.link/ipfs/";
+
+const getImageUrlFromSocialImage = (image) => {
+  if (image.url) {
+    return image.url;
+  } else if (image.ipfs_cid) {
+    return IPFS_BASE_URL + image.ipfs_cid;
+  }
+};
+
+if (!state.registeredProjects) {
+  Near.asyncView(registryContractId, "get_projects", {})
+    .then((projects) => {
+      // get social data for each project
+      // name
+      // description
+      // bannerImage
+      // profileImage
+      // category
+      // horizon stuff, e.g. tags
+      Near.asyncView("social.near", "get", {
+        keys: projects.map((project) => `${project.id}/profile/**`),
+      }).then((socialData) => {
+        const formattedProjects = projects.map((project) => {
+          const profileData = socialData[project.id]?.profile;
+          let profileImageUrl = DEFAULT_PROFILE_IMAGE_URL;
+          if (profileData.image) {
+            const imageUrl = getImageUrlFromSocialImage(profileData.image);
+            if (imageUrl) profileImageUrl = imageUrl;
+          }
+          // get banner image URL
+          let bannerImageUrl = DEFAULT_BANNER_IMAGE_URL;
+          if (profileData.backgroundImage) {
+            const imageUrl = getImageUrlFromSocialImage(profileData.backgroundImage);
+            if (imageUrl) bannerImageUrl = imageUrl;
+          }
+          const formatted = {
+            id: project.id,
+            name: profileData.name ?? "",
+            description: profileData.description ?? "",
+            bannerImageUrl,
+            profileImageUrl,
+            status: project.status,
+            tags: [profileData.category.text ?? CATEGORY_MAPPINGS[profileData.category] ?? ""], // TODO: change this to get tags from horizon/social
+          };
+          return formatted;
+        });
+        State.update({
+          registeredProjects: formattedProjects,
+        });
+      });
+    })
+    .catch((e) => {
+      console.log("error getting projects: ", e);
+      State.update({ getRegisteredProjectsError: e });
+    });
+}
+
 if (state.registryAdmins === null) {
   const registryAdmins = Near.view(registryContractId, "get_admins", {});
   State.update({ registryAdmins });
@@ -151,7 +211,9 @@ const props = {
 };
 
 const CART_KEY = "cart";
+// const PREVIOUS_CART_KEY = "previousCart";
 const storageCart = Storage.get(CART_KEY);
+// const storagePreviousCart = Storage.get(PREVIOUS_CART_KEY);
 const DEFAULT_CART = {};
 
 if (state.cart === null && storageCart !== null) {
@@ -165,10 +227,24 @@ if (state.cart === null && storageCart !== null) {
   State.update({ cart });
 }
 
+// if (state.previousCart === null && storagePreviousCart !== null) {
+//   // previousCart hasn't been set on state yet, and storagePreviousCart has been fetched
+//   // if storagePreviousCart isn't undefined, set it on state
+//   if (storagePreviousCart && Object.keys(JSON.parse(storagePreviousCart)).length > 0) {
+//     console.log("updating previous cart");
+//     State.update({ previousCart: JSON.parse(storagePreviousCart) });
+//   }
+// }
+
+// console.log("state in Index: ", state);
+
 if (props.checkoutSuccess && state.cart && Object.keys(state.cart).length > 0) {
   // if checkout was successful, clear cart
+  // store previous cart in local storage to show success message
+  // console.log("previous cart: ", state.cart);
   State.update({ cart: {} });
   Storage.set(CART_KEY, JSON.stringify(DEFAULT_CART));
+  // Storage.set(PREVIOUS_CART_KEY, JSON.stringify(state.cart));
 }
 
 if (props.tab === EDIT_PROJECT_TAB) {

apps/potlock/widget/Project/ListPage.jsx

@@ -1,22 +1,10 @@
 const ownerId = "potlock.near";
-const registryId = "registry.potlock.near"; // TODO: update when registry is deployed
+const registryId = "registry.potlock.near";
 
 const IPFS_BASE_URL = "https://nftstorage.link/ipfs/";
-const DEFAULT_BANNER_IMAGE_URL =
-  IPFS_BASE_URL + "bafkreih4i6kftb34wpdzcuvgafozxz6tk6u4f5kcr2gwvtvxikvwriteci";
-const DEFAULT_PROFILE_IMAGE_URL =
-  IPFS_BASE_URL + "bafkreibwq2ucyui3wmkyowtzau6txgbsp6zizy4l2s5hkymsyv6tc75j3u";
 const HERO_BACKGROUND_IMAGE_URL =
   IPFS_BASE_URL + "bafkreiewg5afxbkvo6jbn6jgv7zm4mtoys22jut65fldqtt7wagar4wbga";
 
-const getImageUrlFromSocialImage = (image) => {
-  if (image.url) {
-    return image.url;
-  } else if (image.ipfs_cid) {
-    return IPFS_BASE_URL + image.ipfs_cid;
-  }
-};
-
 const Container = styled.div`
   display: flex;
   flex-direction: column;