Skip to content

Commit

Permalink
feat: connect my transactions to graphql data
Browse files Browse the repository at this point in the history
  • Loading branch information
@aidankinzett
aidankinzett committed May 21, 2024
1 parent f8f8cb6 commit ff79769
Show file tree
Hide file tree
Showing 7 changed files with 115 additions and 48 deletions.
2 changes: 1 addition & 1 deletion web/src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export default async function RootLayout({
const gitHash = process.env.GIT_HASH;

// make server-side requests for pre-fetching data
const data = await request(graphqlEndpoint, graphqlQuery);
const data = await request(graphqlEndpoint, graphqlQuery, { address: "" });

const featuresDataRequest = await fetch(
"https://features.long.so/features.json",
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/SwapPro/SwapProGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export const Graph = ({ pool }: { pool?: SwapProPoolFragmentFragment }) => {
// reformat pool data to match expected graph data
?.map((d) => ({
date: new Date(d.timestamp),
value: parseFloat(d.fusdc.valueUnscaled),
value: parseFloat(d.fusdc.valueUsd),
}))
);
}
Expand Down
10 changes: 2 additions & 8 deletions web/src/components/SwapPro/SwapProPoolFragment.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,19 +37,13 @@ export const SwapProPoolFragment = graphql(`
daily {
timestamp
fusdc {
# TODO: uncomment this when the data is available
# valueUsd
# TODO: this is returning hex values, not sure what it is
valueUnscaled
valueUsd
}
}
monthly {
timestamp
fusdc {
# TODO: uncomment this when the data is available
# valueUsd
# TODO: this is returning hex values, not sure what it is
valueUnscaled
valueUsd
}
}
}
Expand Down
97 changes: 72 additions & 25 deletions web/src/components/SwapPro/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,31 @@ import { useGraphql } from "@/hooks/useGraphql";
import { graphql, useFragment } from "@/gql";
import { SwapProPoolFragment } from "@/components/SwapPro/SwapProPoolFragment";
import { useMemo } from "react";
import { useFeatureFlag } from "@/hooks/useFeatureFlag";

const variants = {
hidden: { opacity: 0, width: 0 },
visible: { opacity: 1, width: "auto" },
};

const SwapProTransactionsFragment = graphql(`
fragment SwapProTransactionsFragment on SeawaterSwap {
timestamp
amountIn {
valueScaled
token {
symbol
}
}
amountOut {
valueScaled
token {
symbol
}
}
}
`);

export const SwapPro = ({
override,
badgeTitle,
Expand All @@ -49,12 +68,60 @@ export const SwapPro = ({
() =>
pools?.find(
(pool) =>
pool.token.address.toLowerCase() === token0.address.toLowerCase() ||
pool.token.address.toLowerCase() === token1.address.toLowerCase(),
pool.address.toLowerCase() === token0.address.toLowerCase() ||
pool.address.toLowerCase() === token1.address.toLowerCase(),
),
[pools, token0.address, token1.address],
);

// find the selected pool for the transactions data
const transactionsPool = useMemo(
() => data?.pools?.find((pool) => pool.address === pool?.address),
[data?.pools, pool?.address],
);

const transactions = useFragment(
SwapProTransactionsFragment,
transactionsPool?.swapsForUser,
);

const showMockData = useFeatureFlag("ui show demo data");

const transactionData = useMemo((): Transaction[] | undefined => {
if (showMockData)
return [
{
id: "1",
value: 100,
rewards: 200,
time: new Date("2023-10-10T14:48:00.000+09:00"),
amountFrom: 30.2,
amountTo: 0.0001,
},
{
id: "2",
value: 300,
rewards: 20,
time: new Date("2023-10-10T16:32:00.000+09:00"),
amountFrom: 30.2,
amountTo: 0.0001,
},
] as Transaction[];

return transactions?.map((transaction) => {
return {
id: transaction.timestamp.toString(),
value: parseFloat(transaction.amountIn.valueScaled),
rewards: 0,
time: new Date(transaction.timestamp * 1000),
amountFrom: parseFloat(transaction.amountIn.valueScaled),
amountTo: parseFloat(transaction.amountOut.valueScaled),
};
});
}, []);

console.log(transactions);

return (
<motion.div
initial={"hidden"}
Expand Down Expand Up @@ -129,29 +196,9 @@ export const SwapPro = ({
</div>
</div>

<DataTable
columns={columns}
data={
[
{
id: "1",
value: 100,
rewards: 200,
time: new Date("2023-10-10T14:48:00.000+09:00"),
amountFrom: 30.2,
amountTo: 0.0001,
},
{
id: "2",
value: 300,
rewards: 20,
time: new Date("2023-10-10T16:32:00.000+09:00"),
amountFrom: 30.2,
amountTo: 0.0001,
},
] as Transaction[]
}
/>
{transactionData && (
<DataTable columns={columns} data={transactionData} />
)}
</div>
</motion.div>
);
Expand Down
13 changes: 9 additions & 4 deletions web/src/gql/gql.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,9 @@ const documents = {
"\n fragment ManagePoolFragment on SeawaterPool {\n address\n id\n token {\n symbol\n name\n }\n liquidityIncentives {\n valueScaled # TODO: we want a percentage here\n }\n superIncentives {\n valueScaled # TODO: we want a percentage here\n }\n utilityIncentives {\n amountGivenOut\n maximumAmount\n }\n earnedFeesAPRFUSDC\n }\n": types.ManagePoolFragmentFragmentDoc,
"\n fragment SwapExploreFragment on SeawaterPool {\n token {\n name\n symbol\n address\n }\n price\n }\n": types.SwapExploreFragmentFragmentDoc,
"\n fragment StakeFormFragment on SeawaterPool {\n address\n earnedFeesAPRFUSDC\n }\n": types.StakeFormFragmentFragmentDoc,
"\n fragment SwapProPoolFragment on SeawaterPool {\n address\n token {\n address\n }\n priceOverTime {\n daily\n monthly\n }\n volumeOverTime {\n monthly {\n timestamp\n token1 {\n valueUsd\n }\n fusdc {\n valueUsd\n }\n }\n daily {\n timestamp # TODO: timestamp is always 0\n token1 {\n valueUsd\n }\n fusdc {\n valueUsd\n }\n }\n }\n liquidityOverTime {\n daily {\n timestamp\n fusdc {\n # TODO: uncomment this when the data is available\n # valueUsd\n # TODO: this is returning hex values, not sure what it is\n valueUnscaled\n }\n }\n monthly {\n timestamp\n fusdc {\n # TODO: uncomment this when the data is available\n # valueUsd\n # TODO: this is returning hex values, not sure what it is\n valueUnscaled\n }\n }\n }\n }\n": types.SwapProPoolFragmentFragmentDoc,
"\n query AllData {\n pools {\n ...SwapProPoolFragment\n ...AllPoolsFragment\n ...SelectPrimeAssetFragment\n ...SwapExploreFragment\n ...ManagePoolFragment\n ...SwapFormFragment\n ...StakeFormFragment\n }\n }\n": types.AllDataDocument,
"\n fragment SwapProPoolFragment on SeawaterPool {\n address\n token {\n address\n }\n priceOverTime {\n daily\n monthly\n }\n volumeOverTime {\n monthly {\n timestamp\n token1 {\n valueUsd\n }\n fusdc {\n valueUsd\n }\n }\n daily {\n timestamp # TODO: timestamp is always 0\n token1 {\n valueUsd\n }\n fusdc {\n valueUsd\n }\n }\n }\n liquidityOverTime {\n daily {\n timestamp\n fusdc {\n valueUsd\n }\n }\n monthly {\n timestamp\n fusdc {\n valueUsd\n }\n }\n }\n }\n": types.SwapProPoolFragmentFragmentDoc,
"\n fragment SwapProTransactionsFragment on SeawaterSwap {\n timestamp\n amountIn {\n valueScaled\n token {\n symbol\n }\n }\n amountOut {\n valueScaled\n token {\n symbol\n }\n }\n }\n": types.SwapProTransactionsFragmentFragmentDoc,
"\n query AllData($address: String!) {\n pools {\n address\n\n swapsForUser(address: $address) {\n # add transaction fragments here\n ...SwapProTransactionsFragment\n }\n\n # add general fragments here\n ...SwapProPoolFragment\n ...AllPoolsFragment\n ...SelectPrimeAssetFragment\n ...SwapExploreFragment\n ...ManagePoolFragment\n ...SwapFormFragment\n ...StakeFormFragment\n }\n }\n": types.AllDataDocument,
};

/**
Expand Down Expand Up @@ -64,11 +65,15 @@ export function graphql(source: "\n fragment StakeFormFragment on SeawaterPool
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n fragment SwapProPoolFragment on SeawaterPool {\n address\n token {\n address\n }\n priceOverTime {\n daily\n monthly\n }\n volumeOverTime {\n monthly {\n timestamp\n token1 {\n valueUsd\n }\n fusdc {\n valueUsd\n }\n }\n daily {\n timestamp # TODO: timestamp is always 0\n token1 {\n valueUsd\n }\n fusdc {\n valueUsd\n }\n }\n }\n liquidityOverTime {\n daily {\n timestamp\n fusdc {\n # TODO: uncomment this when the data is available\n # valueUsd\n # TODO: this is returning hex values, not sure what it is\n valueUnscaled\n }\n }\n monthly {\n timestamp\n fusdc {\n # TODO: uncomment this when the data is available\n # valueUsd\n # TODO: this is returning hex values, not sure what it is\n valueUnscaled\n }\n }\n }\n }\n"): (typeof documents)["\n fragment SwapProPoolFragment on SeawaterPool {\n address\n token {\n address\n }\n priceOverTime {\n daily\n monthly\n }\n volumeOverTime {\n monthly {\n timestamp\n token1 {\n valueUsd\n }\n fusdc {\n valueUsd\n }\n }\n daily {\n timestamp # TODO: timestamp is always 0\n token1 {\n valueUsd\n }\n fusdc {\n valueUsd\n }\n }\n }\n liquidityOverTime {\n daily {\n timestamp\n fusdc {\n # TODO: uncomment this when the data is available\n # valueUsd\n # TODO: this is returning hex values, not sure what it is\n valueUnscaled\n }\n }\n monthly {\n timestamp\n fusdc {\n # TODO: uncomment this when the data is available\n # valueUsd\n # TODO: this is returning hex values, not sure what it is\n valueUnscaled\n }\n }\n }\n }\n"];
export function graphql(source: "\n fragment SwapProPoolFragment on SeawaterPool {\n address\n token {\n address\n }\n priceOverTime {\n daily\n monthly\n }\n volumeOverTime {\n monthly {\n timestamp\n token1 {\n valueUsd\n }\n fusdc {\n valueUsd\n }\n }\n daily {\n timestamp # TODO: timestamp is always 0\n token1 {\n valueUsd\n }\n fusdc {\n valueUsd\n }\n }\n }\n liquidityOverTime {\n daily {\n timestamp\n fusdc {\n valueUsd\n }\n }\n monthly {\n timestamp\n fusdc {\n valueUsd\n }\n }\n }\n }\n"): (typeof documents)["\n fragment SwapProPoolFragment on SeawaterPool {\n address\n token {\n address\n }\n priceOverTime {\n daily\n monthly\n }\n volumeOverTime {\n monthly {\n timestamp\n token1 {\n valueUsd\n }\n fusdc {\n valueUsd\n }\n }\n daily {\n timestamp # TODO: timestamp is always 0\n token1 {\n valueUsd\n }\n fusdc {\n valueUsd\n }\n }\n }\n liquidityOverTime {\n daily {\n timestamp\n fusdc {\n valueUsd\n }\n }\n monthly {\n timestamp\n fusdc {\n valueUsd\n }\n }\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n query AllData {\n pools {\n ...SwapProPoolFragment\n ...AllPoolsFragment\n ...SelectPrimeAssetFragment\n ...SwapExploreFragment\n ...ManagePoolFragment\n ...SwapFormFragment\n ...StakeFormFragment\n }\n }\n"): (typeof documents)["\n query AllData {\n pools {\n ...SwapProPoolFragment\n ...AllPoolsFragment\n ...SelectPrimeAssetFragment\n ...SwapExploreFragment\n ...ManagePoolFragment\n ...SwapFormFragment\n ...StakeFormFragment\n }\n }\n"];
export function graphql(source: "\n fragment SwapProTransactionsFragment on SeawaterSwap {\n timestamp\n amountIn {\n valueScaled\n token {\n symbol\n }\n }\n amountOut {\n valueScaled\n token {\n symbol\n }\n }\n }\n"): (typeof documents)["\n fragment SwapProTransactionsFragment on SeawaterSwap {\n timestamp\n amountIn {\n valueScaled\n token {\n symbol\n }\n }\n amountOut {\n valueScaled\n token {\n symbol\n }\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n query AllData($address: String!) {\n pools {\n address\n\n swapsForUser(address: $address) {\n # add transaction fragments here\n ...SwapProTransactionsFragment\n }\n\n # add general fragments here\n ...SwapProPoolFragment\n ...AllPoolsFragment\n ...SelectPrimeAssetFragment\n ...SwapExploreFragment\n ...ManagePoolFragment\n ...SwapFormFragment\n ...StakeFormFragment\n }\n }\n"): (typeof documents)["\n query AllData($address: String!) {\n pools {\n address\n\n swapsForUser(address: $address) {\n # add transaction fragments here\n ...SwapProTransactionsFragment\n }\n\n # add general fragments here\n ...SwapProPoolFragment\n ...AllPoolsFragment\n ...SelectPrimeAssetFragment\n ...SwapExploreFragment\n ...ManagePoolFragment\n ...SwapFormFragment\n ...StakeFormFragment\n }\n }\n"];

export function graphql(source: string) {
return (documents as any)[source] ?? {};
Expand Down
Loading

0 comments on commit ff79769

Please sign in to comment.