[NFT-740] wip: swap widget

components/Header/Header.tsx

@@ -1,7 +1,7 @@
 import { useConfig } from 'hooks/useConfig';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import React, { ComponentProps, useCallback, useMemo, useState } from 'react';
+import React, { ComponentProps, useCallback, useMemo } from 'react';
 import styles from './Header.module.css';
 import paprTitle from 'public/logos/papr-title.png';
 import paprMemeTitle from 'public/logos/paprMEME-title.png';
@@ -33,10 +33,7 @@ type Page = {
   isNetworkSpecialCase?: boolean;
   externalRedirect?: boolean;
 };
-const prodPages = (
-  underlyingAddress: string,
-  paprTokenAddress: string,
-): Page[] => [
+const prodPages: Page[] = [
   {
     name: 'Performance',
     route: ``,
@@ -48,9 +45,8 @@ const prodPages = (
     matcher: 'borrow',
   },
   {
-    name: 'Swap ↗',
-    route: `https://app.uniswap.org/#/swap?chain=goerli&inputCurrency=${underlyingAddress}&outputCurrency=${paprTokenAddress}`,
-    externalRedirect: true,
+    name: 'Swap',
+    route: `swap`,
   },
 
   {
@@ -87,23 +83,16 @@ type NavLinksProps = {
   isHomePage: boolean;
 };
 function NavLinks({ activeRoute, isHomePage }: NavLinksProps) {
-  const { tokenName, underlyingAddress, paprTokenAddress } = useConfig();
+  const { tokenName } = useConfig();
   const theme = useTheme();
 
   const pages = useMemo(() => {
     const productSpecificPages = tokenName === 'paprHero' ? paprHeroPages : [];
     if (process.env.VERCEL_ENV === 'production') {
-      return [
-        ...productSpecificPages,
-        ...prodPages(underlyingAddress, paprTokenAddress),
-      ];
+      return [...productSpecificPages, ...prodPages];
     }
-    return [
-      ...productSpecificPages,
-      ...prodPages(underlyingAddress, paprTokenAddress),
-      ...stagingPages,
-    ];
-  }, [tokenName, underlyingAddress, paprTokenAddress]);
+    return [...productSpecificPages, ...prodPages, ...stagingPages];
+  }, [tokenName]);
 
   return (
     <ul className={styles.links}>

components/SwapPageContent/SwapPageContent.module.css

@@ -0,0 +1,7 @@
+.wrapper {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}

components/SwapPageContent/SwapPageContent.tsx

@@ -0,0 +1,65 @@
+import { JsonRpcSigner } from '@ethersproject/providers';
+import { SwapWidget, Theme } from '@uniswap/widgets';
+import '@uniswap/widgets/fonts.css';
+import { useConfig } from 'hooks/useConfig';
+import { useController } from 'hooks/useController';
+import { useMemo } from 'react';
+import { useSigner } from 'wagmi';
+import styles from './SwapPageContent.module.css';
+
+const theme: Theme = {
+  primary: '#000',
+  secondary: '#000',
+  interactive: '#C6E6E1',
+  container: '#FFF',
+  module: '#F2F9F8',
+  accent: '#0000EE',
+  outline: '#000',
+  dialog: '#000',
+  fontFamily: 'Courier Prime',
+  borderRadius: 0.5,
+};
+
+export function SwapPageContent() {
+  const { paprToken, underlying } = useController();
+  const { chainId, jsonRpcProvider, tokenName } = useConfig();
+  const provider = useSigner<JsonRpcSigner>().data?.provider;
+
+  const jsonRpcUrlMap = useMemo(
+    () => ({ [chainId]: jsonRpcProvider }),
+    [chainId, jsonRpcProvider],
+  );
+
+  const tokenList = useMemo(
+    () => [
+      {
+        address: underlying.id,
+        chainId,
+        decimals: underlying.decimals,
+        name: 'USD Coin',
+        symbol: 'USDC',
+      },
+      {
+        address: paprToken.id,
+        chainId,
+        decimals: paprToken.decimals,
+        name: tokenName,
+        symbol: tokenName,
+      },
+    ],
+    [chainId, paprToken, tokenName, underlying],
+  );
+
+  return (
+    <div className={styles.wrapper}>
+      <SwapWidget
+        theme={theme}
+        jsonRpcUrlMap={jsonRpcUrlMap}
+        provider={provider}
+        tokenList={tokenList}
+        defaultInputTokenAddress={paprToken.id}
+        defaultOutputTokenAddress={underlying.id}
+      />
+    </div>
+  );
+}

components/SwapPageContent/index.ts

@@ -0,0 +1 @@
+export { SwapPageContent } from './SwapPageContent';

package.json

@@ -33,6 +33,7 @@
     "@uniswap/v3-core": "^1.0.1",
     "@uniswap/v3-periphery": "^1.4.1",
     "@uniswap/v3-sdk": "^3.9.0",
+    "@uniswap/widgets": "^2.24.0",
     "@urql/core": "^3.0.2",
     "axios": "0.26.1",
     "chart.js": "4.1.2",
@@ -43,11 +44,13 @@
     "ethereumjs-util": "^7.1.5",
     "ethers": "5.7.2",
     "graphql": "16.3.0",
+    "jotai-immer": "^0.1.0",
     "lambert-w-function": "^3.0.0",
     "lightweight-charts": "^3.8.0",
     "lodash": "4.17.21",
     "next": "^13.0.6",
     "normalize.css": "8.0.1",
+    "qs": "^6.11.0",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",

pages/tokens/[token]/swap/index.tsx

@@ -1,38 +1,56 @@
 import { GetServerSideProps } from 'next';
 import React from 'react';
 import { captureException } from '@sentry/nextjs';
-import { SupportedToken, validateToken } from 'lib/config';
+import { configs, getConfig, SupportedToken } from 'lib/config';
 import { OpenGraph } from 'components/OpenGraph';
 import capitalize from 'lodash/capitalize';
+import { SwapPageContent } from 'components/SwapPageContent';
+import { fetchSubgraphData, SubgraphController } from 'lib/PaprController';
+import { ControllerContextProvider } from 'hooks/useController';
 
 export const getServerSideProps: GetServerSideProps<SwapProps> = async (
   context,
 ) => {
-  try {
-    validateToken(context.params!);
-    const token = context.params?.token as SupportedToken;
-
-    return {
-      props: {
-        token,
-      },
-    };
-  } catch (e) {
-    captureException(e);
+  const token = context.params?.token as SupportedToken;
+  const address: string | undefined =
+    getConfig(token)?.controllerAddress?.toLocaleLowerCase();
+  if (!address) {
     return {
       notFound: true,
     };
   }
+
+  const controllerSubgraphData = await fetchSubgraphData(
+    address,
+    configs[token].uniswapSubgraph,
+    token,
+  );
+
+  if (!controllerSubgraphData) {
+    const e = new Error(`subgraph data for controller ${address} not found`);
+    captureException(e);
+    throw e;
+  }
+
+  const { paprController } = controllerSubgraphData;
+
+  return {
+    props: {
+      subgraphController: paprController,
+      token,
+    },
+  };
 };
 
 type SwapProps = {
   token: SupportedToken;
+  subgraphController: SubgraphController;
 };
-export default function Swap({ token }: SwapProps) {
+export default function Swap({ subgraphController, token }: SwapProps) {
   return (
-    <>
+    <ControllerContextProvider value={subgraphController}>
       <OpenGraph title={`Backed | ${capitalize(token)} | Swap`} />
-      <h1>under construction</h1>
-    </>
+      <SwapPageContent />
+    </ControllerContextProvider>
   );
 }