diff --git a/frontend/widgets/examples/feed/src/QueryApi.Feed.ActivityPage.jsx b/frontend/widgets/examples/feed/src/QueryApi.Feed.ActivityPage.jsx
new file mode 100644
index 000000000..52b2afc52
--- /dev/null
+++ b/frontend/widgets/examples/feed/src/QueryApi.Feed.ActivityPage.jsx
@@ -0,0 +1,167 @@
+const GRAPHQL_ENDPOINT =
+ "https://near-queryapi.api.pagoda.co";
+const APP_OWNER = "dataplatform.near";
+
+let accountsFollowing = undefined;
+
+if (context.accountId) {
+ const graph = Social.keys(`${context.accountId}/graph/follow/*`, "final");
+ if (graph !== null) {
+ accountsFollowing = Object.keys(graph[context.accountId].graph.follow || {});
+ }
+}
+
+State.init({
+ selectedTab: props.tab || "posts",
+});
+
+if (props.tab && props.tab !== state.selectedTab) {
+ State.update({
+ selectedTab: props.tab,
+ });
+}
+
+const activityUrl = `/#/${APP_OWNER}/widget/QueryApi.Feed`;
+
+const Wrapper = styled.div`
+ margin-top: calc(var(--body-top-padding) * -1);
+ padding-bottom: 48px;
+`;
+
+const Main = styled.div`
+ display: grid;
+ grid-template-columns: 290px minmax(0, 1fr) 290px;
+ grid-gap: 16px;
+
+ @media (max-width: 1200px) {
+ display: block;
+ }
+`;
+
+const Section = styled.div`
+ padding-top: 24px;
+ border-left: ${(p) => (p.primary ? "1px solid #ECEEF0" : "none")};
+ border-right: ${(p) => (p.primary ? "1px solid #ECEEF0" : "none")};
+
+ > div {
+ padding-bottom: 24px;
+ margin-bottom: 24px;
+ border-bottom: 1px solid #ECEEF0;
+
+ &:last-child {
+ padding-bottom: 0;
+ margin-bottom: 0;
+ border-bottom: none;
+ }
+ }
+
+ @media (max-width: 1200px) {
+ padding-top: 0px;
+ border-left: none;
+ border-right: none;
+ display: ${(p) => (p.active ? "block" : "none")};
+ margin: ${(p) => (p.negativeMargin ? "0 -12px" : "0")};
+ }
+`;
+
+const Tabs = styled.div`
+ display: none;
+ height: 48px;
+ background: #F8F9FA;
+ border-bottom: 1px solid #ECEEF0;
+ margin-bottom: ${(p) => (p.noMargin ? "0" : p.halfMargin ? "24px" : "24px")};
+ overflow: auto;
+ scroll-behavior: smooth;
+
+ @media (max-width: 1200px) {
+ display: flex;
+ margin-left: -12px;
+ margin-right: -12px;
+
+ > * {
+ flex: 1;
+ }
+ }
+`;
+
+const TabsButton = styled.a`
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ font-weight: 600;
+ font-size: 12px;
+ padding: 0 12px;
+ position: relative;
+ color: ${(p) => (p.selected ? "#11181C" : "#687076")};
+ background: none;
+ border: none;
+ outline: none;
+ text-align: center;
+ text-decoration: none !important;
+
+ &:hover {
+ color: #11181C;
+ }
+
+ &::after {
+ content: '';
+ display: ${(p) => (p.selected ? "block" : "none")};
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 3px;
+ background: #59E692;
+ }
+`;
+
+return (
+
+
+
+ Posts
+
+
+
+ Components
+
+
+
+ Explore
+
+
+
+
+
+
+
+
+
+);
+
diff --git a/frontend/widgets/examples/feed/src/QueryApi.Feed.jsx b/frontend/widgets/examples/feed/src/QueryApi.Feed.jsx
index 52b2afc52..e800bf49e 100644
--- a/frontend/widgets/examples/feed/src/QueryApi.Feed.jsx
+++ b/frontend/widgets/examples/feed/src/QueryApi.Feed.jsx
@@ -1,167 +1,75 @@
-const GRAPHQL_ENDPOINT =
- "https://near-queryapi.api.pagoda.co";
+const GRAPHQL_ENDPOINT = "https://near-queryapi.api.pagoda.co";
const APP_OWNER = "dataplatform.near";
-let accountsFollowing = undefined;
-
-if (context.accountId) {
- const graph = Social.keys(`${context.accountId}/graph/follow/*`, "final");
- if (graph !== null) {
- accountsFollowing = Object.keys(graph[context.accountId].graph.follow || {});
- }
-}
+let lastPostSocialApi = Social.index("post", "main", {
+ limit: 1,
+ order: "desc",
+});
State.init({
- selectedTab: props.tab || "posts",
+ shouldFallback: props.shouldFallback ?? false,
});
-if (props.tab && props.tab !== state.selectedTab) {
- State.update({
- selectedTab: props.tab,
+function fetchGraphQL(operationsDoc, operationName, variables) {
+ return asyncFetch(`${GRAPHQL_ENDPOINT}/v1/graphql`, {
+ method: "POST",
+ headers: { "x-hasura-role": "dataplatform_near" },
+ body: JSON.stringify({
+ query: operationsDoc,
+ variables: variables,
+ operationName: operationName,
+ }),
});
}
-const activityUrl = `/#/${APP_OWNER}/widget/QueryApi.Feed`;
-
-const Wrapper = styled.div`
- margin-top: calc(var(--body-top-padding) * -1);
- padding-bottom: 48px;
-`;
-
-const Main = styled.div`
- display: grid;
- grid-template-columns: 290px minmax(0, 1fr) 290px;
- grid-gap: 16px;
-
- @media (max-width: 1200px) {
- display: block;
+const lastPostQuery = `
+query IndexerQuery {
+ dataplatform_near_social_feed_posts( limit: 1, order_by: { block_height: desc }) {
+ block_height
}
+}
`;
-const Section = styled.div`
- padding-top: 24px;
- border-left: ${(p) => (p.primary ? "1px solid #ECEEF0" : "none")};
- border-right: ${(p) => (p.primary ? "1px solid #ECEEF0" : "none")};
+fetchGraphQL(lastPostQuery, "IndexerQuery", {})
+ .then((feedIndexerResponse) => {
+ if (feedIndexerResponse && feedIndexerResponse.body.data.dataplatform_near_social_feed_posts.length > 0) {
+ const nearSocialBlockHeight = lastPostSocialApi[0].blockHeight;
+ const feedIndexerBlockHeight =
+ feedIndexerResponse.body.data.dataplatform_near_social_feed_posts[0]
+ .block_height;
- > div {
- padding-bottom: 24px;
- margin-bottom: 24px;
- border-bottom: 1px solid #ECEEF0;
-
- &:last-child {
- padding-bottom: 0;
- margin-bottom: 0;
- border-bottom: none;
- }
- }
-
- @media (max-width: 1200px) {
- padding-top: 0px;
- border-left: none;
- border-right: none;
- display: ${(p) => (p.active ? "block" : "none")};
- margin: ${(p) => (p.negativeMargin ? "0 -12px" : "0")};
- }
-`;
+ const lag = nearSocialBlockHeight - feedIndexerBlockHeight;
-const Tabs = styled.div`
- display: none;
- height: 48px;
- background: #F8F9FA;
- border-bottom: 1px solid #ECEEF0;
- margin-bottom: ${(p) => (p.noMargin ? "0" : p.halfMargin ? "24px" : "24px")};
- overflow: auto;
- scroll-behavior: smooth;
+ let shouldFallback = lag > 2 || !feedIndexerBlockHeight;
- @media (max-width: 1200px) {
- display: flex;
- margin-left: -12px;
- margin-right: -12px;
+ // console.log(`Social API block height: ${nearSocialBlockHeight}`);
+ // console.log(`Feed block height: ${feedIndexerBlockHeight}`);
+ // console.log(`Lag: ${lag}`);
+ // console.log(`Fallback to old widget? ${shouldFallback}`);
- > * {
- flex: 1;
+ State.update({ shouldFallback });
+ } else {
+ console.log("Falling back to old widget.");
+ State.update({ shouldFallback: true });
}
- }
-`;
-
-const TabsButton = styled.a`
- display: inline-flex;
- align-items: center;
- justify-content: center;
- height: 100%;
- font-weight: 600;
- font-size: 12px;
- padding: 0 12px;
- position: relative;
- color: ${(p) => (p.selected ? "#11181C" : "#687076")};
- background: none;
- border: none;
- outline: none;
- text-align: center;
- text-decoration: none !important;
-
- &:hover {
- color: #11181C;
- }
-
- &::after {
- content: '';
- display: ${(p) => (p.selected ? "block" : "none")};
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- height: 3px;
- background: #59E692;
- }
-`;
+ })
+ .catch((error) => {
+ console.log("Error while fetching GraphQL(falling back to old widget): ", error);
+ State.update({ shouldFallback: true });
+ });
return (
-
-
-
- Posts
-
-
-
- Components
-
-
-
- Explore
-
-
-
-
-
-
-
+ {state.shouldFallback == true ? (
+
+ ) : (
+
-
-
-
-
+ )}
+
);
-
diff --git a/frontend/widgets/examples/feed/src/QueryApi.dev.Feed.jsx b/frontend/widgets/examples/feed/src/QueryApi.dev.Feed.jsx
index a3b0e3d18..f3e95cd02 100644
--- a/frontend/widgets/examples/feed/src/QueryApi.dev.Feed.jsx
+++ b/frontend/widgets/examples/feed/src/QueryApi.dev.Feed.jsx
@@ -2,166 +2,75 @@ const GRAPHQL_ENDPOINT =
"https://near-queryapi.dev.api.pagoda.co";
const APP_OWNER = "dev-queryapi.dataplatform.near";
-let accountsFollowing = undefined;
-
-if (context.accountId) {
- const graph = Social.keys(`${context.accountId}/graph/follow/*`, "final");
- if (graph !== null) {
- accountsFollowing = Object.keys(graph[context.accountId].graph.follow || {});
- }
-}
+let lastPostSocialApi = Social.index("post", "main", {
+ limit: 1,
+ order: "desc",
+});
State.init({
- selectedTab: props.tab || "posts",
+ shouldFallback: props.shouldFallback ?? false,
});
-if (props.tab && props.tab !== state.selectedTab) {
- State.update({
- selectedTab: props.tab,
+function fetchGraphQL(operationsDoc, operationName, variables) {
+ return asyncFetch(`${GRAPHQL_ENDPOINT}/v1/graphql`, {
+ method: "POST",
+ headers: { "x-hasura-role": "dataplatform_near" },
+ body: JSON.stringify({
+ query: operationsDoc,
+ variables: variables,
+ operationName: operationName,
+ }),
});
}
-const activityUrl = `/#/${APP_OWNER}/widget/QueryApi.dev.Feed`;
-
-const Wrapper = styled.div`
- margin-top: calc(var(--body-top-padding) * -1);
- padding-bottom: 48px;
-`;
-
-const Main = styled.div`
- display: grid;
- grid-template-columns: 290px minmax(0, 1fr) 290px;
- grid-gap: 16px;
-
- @media (max-width: 1200px) {
- display: block;
+const lastPostQuery = `
+query IndexerQuery {
+ dataplatform_near_social_feed_posts( limit: 1, order_by: { block_height: desc }) {
+ block_height
}
+}
`;
-const Section = styled.div`
- padding-top: 24px;
- border-left: ${(p) => (p.primary ? "1px solid #ECEEF0" : "none")};
- border-right: ${(p) => (p.primary ? "1px solid #ECEEF0" : "none")};
+fetchGraphQL(lastPostQuery, "IndexerQuery", {})
+ .then((feedIndexerResponse) => {
+ if (feedIndexerResponse && feedIndexerResponse.body.data.dataplatform_near_social_feed_posts.length > 0) {
+ const nearSocialBlockHeight = lastPostSocialApi[0].blockHeight;
+ const feedIndexerBlockHeight =
+ feedIndexerResponse.body.data.dataplatform_near_social_feed_posts[0]
+ .block_height;
- > div {
- padding-bottom: 24px;
- margin-bottom: 24px;
- border-bottom: 1px solid #ECEEF0;
-
- &:last-child {
- padding-bottom: 0;
- margin-bottom: 0;
- border-bottom: none;
- }
- }
-
- @media (max-width: 1200px) {
- padding-top: 0px;
- border-left: none;
- border-right: none;
- display: ${(p) => (p.active ? "block" : "none")};
- margin: ${(p) => (p.negativeMargin ? "0 -12px" : "0")};
- }
-`;
+ const lag = nearSocialBlockHeight - feedIndexerBlockHeight;
-const Tabs = styled.div`
- display: none;
- height: 48px;
- background: #F8F9FA;
- border-bottom: 1px solid #ECEEF0;
- margin-bottom: ${(p) => (p.noMargin ? "0" : p.halfMargin ? "24px" : "24px")};
- overflow: auto;
- scroll-behavior: smooth;
+ let shouldFallback = lag > 2 || !feedIndexerBlockHeight;
- @media (max-width: 1200px) {
- display: flex;
- margin-left: -12px;
- margin-right: -12px;
+ // console.log(`Social API block height: ${nearSocialBlockHeight}`);
+ // console.log(`Feed block height: ${feedIndexerBlockHeight}`);
+ // console.log(`Lag: ${lag}`);
+ // console.log(`Fallback to old widget? ${shouldFallback}`);
- > * {
- flex: 1;
+ State.update({ shouldFallback });
+ } else {
+ console.log("Falling back to old widget.");
+ State.update({ shouldFallback: true });
}
- }
-`;
-
-const TabsButton = styled.a`
- display: inline-flex;
- align-items: center;
- justify-content: center;
- height: 100%;
- font-weight: 600;
- font-size: 12px;
- padding: 0 12px;
- position: relative;
- color: ${(p) => (p.selected ? "#11181C" : "#687076")};
- background: none;
- border: none;
- outline: none;
- text-align: center;
- text-decoration: none !important;
-
- &:hover {
- color: #11181C;
- }
-
- &::after {
- content: '';
- display: ${(p) => (p.selected ? "block" : "none")};
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- height: 3px;
- background: #59E692;
- }
-`;
+ })
+ .catch((error) => {
+ console.log("Error while fetching GraphQL(falling back to old widget): ", error);
+ State.update({ shouldFallback: true });
+ });
return (
-
-
-
- Posts
-
-
-
- Components
-
-
-
- Explore
-
-
-
-
-
-
-
+ {state.shouldFallback == true ? (
+
+ ) : (
+
-
-
-
-
+ )}
+
);
-