Skip to content

Commit

Permalink
Introduce Graph "proxying"
Browse files Browse the repository at this point in the history
  • Loading branch information
lucemans committed Jun 2, 2024
1 parent 51e36f9 commit 6086e74
Show file tree
Hide file tree
Showing 7 changed files with 359 additions and 262 deletions.
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,19 @@
"typecheck": "tsc --project tsconfig.json --noEmit"
},
"dependencies": {
"@apollo/client": "^3.10.4",
"@ensdomains/ensjs": "^3.7.0",
"@ensdomains/thorin": "^0.6.50",
"@tanstack/react-query": "^5.40.0",
"axios": "^1.7.2",
"clsx": "^2.1.1",
"ens-tools": "^0.0.14",
"graphql": "^16.8.1",
"graphql-request": "^7.0.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-hook-form": "^7.51.5",
"react-icons": "^5.2.1",
"swr": "^2.2.5",
"tailwind-merge": "^2.3.0",
"viem": "^2.13.2",
"wagmi": "^2.9.8"
},
Expand Down Expand Up @@ -65,4 +65,4 @@
"vite-tsconfig-paths": "^4.3.2",
"vitest": "^1.6.0"
}
}
}
463 changes: 275 additions & 188 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

10 changes: 1 addition & 9 deletions src/components/App.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,15 @@
import React, { useState } from "react";
import { useState } from "react";
import { FiHeart } from "react-icons/fi";
import { ApolloProvider, ApolloClient, InMemoryCache } from "@apollo/client";

import { NameList } from "./names/NameList";
import { UserProfile } from "./profile/UserProfile";
import { Tab, Tabs } from "./tabs/Tabs";
import { VaultList } from "./vaults/VaultList";

const client = new ApolloClient({
uri: "https://srv.streamingfast.io/9e804b35/graphql",
cache: new InMemoryCache()
});

export const App = () => {
const [tab, setTab] = useState<Tab>("vaults");

return (
<ApolloProvider client={client}>
<div className="relative flex min-h-dvh flex-col items-center gap-4 overflow-hidden bg-background-secondary p-4">
<div className="flex w-full items-center justify-between">
<div>
Expand Down Expand Up @@ -71,6 +64,5 @@ export const App = () => {
</div>
</div>
</div>
</ApolloProvider>
);
};
25 changes: 13 additions & 12 deletions src/components/names/NameEntry.tsx
Original file line number Diff line number Diff line change
@@ -1,28 +1,29 @@
// @ts-nocheck
import clsx from "clsx";
import { useExpiry } from "hooks/useExpiry";
import React, { useEffect, useState } from "react";
import React, { useEffect } from "react";

import { formatDate } from "../../utils";

interface NameEntryProperties {
export const NameEntry: React.FC<{
name: string;
}

export const NameEntry: React.FC<NameEntryProperties> = (properties) => {
const [selected, setSelected] = useState(false);
const { data: expiry, error } = useExpiry(properties.name);
onExpiryUpdate: (name: string, expiry: bigint) => void;
selected: boolean;
onSelect: () => void;
}> = ({ name, onExpiryUpdate, selected, onSelect }) => {
// const [selected, setSelected] = useState(false);
const { data: expiry, error } = useExpiry(name);

useEffect(() => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
if (expiry?.expiry.value) {
properties.onExpiryUpdate(name, expiry!.expiry.value);
onExpiryUpdate(name, expiry!.expiry.value);
}
}, [expiry, name, properties.onExpiryUpdate]);
}, [expiry, name, onExpiryUpdate]);

const handleClick = () => {
setSelected(!selected);
properties.onSelect();
onSelect();
// onSelect();
};

return (
Expand All @@ -36,7 +37,7 @@ export const NameEntry: React.FC<NameEntryProperties> = (properties) => {
<div className="flex w-full flex-col">
<div className="flex items-center justify-between">
<div className="flex flex-col items-start">
<div className="font-semibold">{properties.name}</div>
<div className="font-semibold">{name}</div>
<div className="text-xs font-medium">Vault: 0</div>
</div>
<div>
Expand Down
38 changes: 16 additions & 22 deletions src/components/names/NameList.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
// @ts-nocheck
import { gql, useQuery } from "@apollo/client";
import clsx from "clsx";
import { RescueModal } from "components/modals/RescueModal";
import { gql } from "graphql-request";
import { useExpiryNames } from "hooks/useExpiryNames";
import { useCallback, useState } from "react";
import { useAccount } from "wagmi";
Expand All @@ -11,10 +10,10 @@ import { NameEntry } from "./NameEntry";
const VAULT_QUERY = gql`
{
query {
allRescuenameRescueNameVaultCreateds {
allRescuenameNameAddeds {
nodes {
vaultId
owner
name
vault
}
}
}
Expand All @@ -27,16 +26,11 @@ export const NameList = () => {
{}
);
const { address } = useAccount();
const [selectedNames, setSelectedNames] = useState([]);
const [selectedNames, setSelectedNames] = useState<string[]>([]);
const [modalOpen, setModalOpen] = useState(false);
const { data, loading, error } = useQuery(VAULT_QUERY);

if (loading) return "Loading...";

if (error) return <pre>{error.message}</pre>;

const handleSelect = (name) => {
const newSelectedNames = [...selectedNames];
const handleSelect = (name: string) => {
const newSelectedNames = [...selectedNames];
const index = newSelectedNames.indexOf(name);

if (index !== -1) {
Expand All @@ -55,8 +49,8 @@ export const NameList = () => {
const sortedNames =
names &&
[...names].sort((a, b) => {
const expiryA = expiryDates[a];
const expiryB = expiryDates[b];
const expiryA = expiryDates[a.name];
const expiryB = expiryDates[b.name];

if (expiryA === undefined && expiryB === undefined) return 0;

Expand All @@ -76,13 +70,13 @@ export const NameList = () => {
<div className="flex w-full items-center justify-between">
<div className="pl-2 font-bold">All Names</div>
<div className="pl-2 font-thin">
{data ? data.query.allRescuenameRescueNameVaultCreateds.nodes.length : ''} vaults
{sortedNames?.length ? sortedNames!.length + " vaults" : ""}
</div>
{/* <select className="appearance-none bg-background-secondary p-2 rounded-lg " name="filter" id="filter">
<option value="0">Vault 0</option>
</select> */}
<input
className="bg-background-secondary rounded-md p-2"
className="rounded-md bg-background-secondary p-2"
type="number"
name="vaultFlter"
id="vaultFlter"
Expand All @@ -102,18 +96,18 @@ export const NameList = () => {
<RescueModal
onClose={() => setModalOpen(false)}
labels={[["lucemans"]]}
vaults={[0]}
vaults={[0n]}
/>
)}
</div>
<div className="">
{sortedNames?.map((name) => (
<NameEntry
key={name}
name={name}
key={name.name + "-#-" + name.vault}
name={name.name}
onExpiryUpdate={handleExpiryUpdate}
selected={selectedNames.includes(name)} // Check if selected
onSelect={() => handleSelect(name)}
selected={selectedNames.includes(name.name)}
onSelect={() => handleSelect(name.name)} // Fix: Pass the name property of the name object to handleSelect
/>
))}
</div>
Expand Down
52 changes: 45 additions & 7 deletions src/hooks/useExpiryNames.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,51 @@
import axios from "axios";
import { gql } from "graphql-request";
import useSWR from "swr";

const query = gql`
{
query {
allRescuenameNameAddeds {
nodes {
name
vault
}
}
}
}
`;

export type ExpiryNames = {
data: {
query: {
allRescuenameNameAddeds: {
nodes: {
name: string;
vault: string; // but number
}[];
};
};
};
};

export const useExpiryNames = () => {
return useSWR("/my/names", async (): Promise<string[]> => {
// TODO: Placeholder
const names = await fetch("./names.json");
return useSWR(
"/my/names",
async (): Promise<{ name: string; vault: string }[]> => {
const x = await axios.post(
// Yes, this uses a cors-anywhere bypass. This is a demo.
// The streamingfast entrypoint doesnt output the right cors headers
"https://cors-anywhere.herokuapp.com/https://srv.streamingfast.io/9e804b35/graphql",
{
query
}
);

// eslint-disable-next-line unicorn/no-await-expression-member
const names2 = (await names.json())["names"];
const xy = x.data as ExpiryNames;

return names2.filter((name: string) => name.length >= 5 + 4);
});
return xy.data.query.allRescuenameNameAddeds.nodes.filter(
(node) => node.name.length >= 5
);
}
);
};
27 changes: 6 additions & 21 deletions src/utils/index.ts
Original file line number Diff line number Diff line change
@@ -1,24 +1,9 @@
import * as React from "react"
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}

export function formatDate(input: string | number): string {
const date = new Date(input)
return date.toLocaleDateString("en-US", {
month: "long",
day: "numeric",
year: "numeric",
})
}

export function absoluteUrl(path: string) {
return `${process.env.NEXT_PUBLIC_APP_URL}${path}`
}
const date = new Date(input);

export function classNames(...classes: unknown[]): string {
return classes.filter(Boolean).join(" ");
return date.toLocaleDateString("en-US", {
month: "long",
day: "numeric",
year: "numeric"
});
}

0 comments on commit 6086e74

Please sign in to comment.