Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade web3react from v6 to v8 #564

Draft
wants to merge 5 commits into
base: master
Choose a base branch
from
Draft

Upgrade web3react from v6 to v8 #564

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
95f05dc
feat: partial migration to web3-react v8
larrythecucumber321 Nov 3, 2022
168c4c5
chore: temp remove injected provider
larrythecucumber321 Nov 3, 2022
8d1252b
feat: add error state to connector
larrythecucumber321 Nov 4, 2022
3e1fd38
chore: update more useWeb3React hooks
larrythecucumber321 Nov 4, 2022
dab241e
chore: re-add eagerconnect
larrythecucumber321 Nov 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions layouts/Classic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { FC, useEffect } from "react";
import { FC, useEffect, PropsWithChildren } from "react";
import type { AppProps } from "next/app";
import { GeistProvider } from "@geist-ui/react";

Expand Down Expand Up @@ -32,7 +32,7 @@ const getLibrary = (provider: any) => {
return new Web3Provider(provider);
};

const WithContainers: FC = ({ children }) => (
const WithContainers: FC<PropsWithChildren> = ({ children }) => (
<Web3ReactProvider getLibrary={getLibrary}>
<PickleCore.Provider>
<Connection.Provider>
Expand Down
1 change: 0 additions & 1 deletion next-env.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
Expand Down
29 changes: 21 additions & 8 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
},
"dependencies": {
"@clover-network/clover-connector": "^1.0.0",
"@coinbase/wallet-sdk": "^3.5.4",
"@cowprotocol/cow-sdk": "^0.0.14",
"@davatar/react": "^1.8.1",
"@ethersproject/abstract-provider": "^5.0.4",
Expand All @@ -34,7 +35,7 @@
"@material-ui/lab": "^4.0.0-alpha.56",
"@pickle-finance/ethers-multicall": "^0.2.3",
"@primer/octicons-react": "^11.0.0",
"@reduxjs/toolkit": "^1.7.0",
"@reduxjs/toolkit": "^1.8.0",
"@rtk-incubator/action-listener-middleware": "^0.8.0",
"@sentry/nextjs": "^6.11.0",
"@studydefi/money-legos": "^2.3.7",
Expand All @@ -44,9 +45,17 @@
"@uniswap/default-token-list": "^3.1.0",
"@uniswap/sdk-core": "^3.0.1",
"@uniswap/token-lists": "1.0.0-beta.25",
"@web3-react/core": "^6.1.9",
"@walletconnect/ethereum-provider": "^2.1.0",
"@walletconnect/logger": "^1.0.1",
"@web3-react/coinbase-wallet": "^8.0.34beta.0",
"@web3-react/core": "^8.0.35-beta.0",
"@web3-react/eip1193": "^8.0.18-beta.0",
"@web3-react/empty": "^8.0.12-beta.0",
"@web3-react/injected-connector": "^6.0.7",
"@web3-react/walletconnect-connector": "^6.1.9",
"@web3-react/metamask": "8.0.28-beta.0",
"@web3-react/network": "^8.0.0-beta.0",
"@web3-react/types": "8.0.20-beta.0",
"@web3-react/walletconnect": "^8.0.35-beta.0",
"@web3-react/walletlink-connector": "^6.1.9",
"@xstate/react": "^2.0.1",
"apollo-cache-inmemory": "^1.6.6",
Expand All @@ -64,21 +73,24 @@
"ethers": "^5.0.14",
"ethers-multicall": "npm:@pickle-finance/ethers-multicall",
"fontsource-roboto": "^4.0.0",
"global": "^4.4.0",
"graphql": "^15.5.0",
"graphql-tag": "^2.12.4",
"i18next-hmr": "^1.7.5",
"i18next-http-backend": "^1.3.1",
"install-peers": "^1.0.4",
"lodash": "^4.17.21",
"next": "11.0.2-canary.27",
"micro": "^9.4.1",
"next": "^13.0.1",
"next-i18next": "^8.7.0",
"node-fetch": "^2.6.1",
"picklefinance-core": "^0.5.32",
"rc-slider": "^10.0.0-alpha.6",
"react": "^16.13.1",
"react": "^18.2.0",
"react-apexcharts": "^1.3.7",
"react-confetti": "^6.0.1",
"react-day-picker": "^7.4.8",
"react-dom": "^16.13.1",
"react-dom": "^18.2.0",
"react-gauge-chart": "^0.3.0",
"react-hook-form": "^7.29.0",
"react-html-parser": "^2.0.2",
Expand All @@ -96,6 +108,7 @@
"rxjs": "^6.6.3",
"sass": "^1.26.11",
"styled-components": "^5.2.0",
"styled-jsx": "^5.1.0",
"swr": "^1.0.1",
"unstated-next": "^1.1.0",
"xstate": "^4.30.5"
Expand All @@ -111,7 +124,7 @@
"@types/node": "^14.11.1",
"@types/node-fetch": "^2.5.8",
"@types/prettier": "2.1.2",
"@types/react": "^16.9.49",
"@types/react": "^18.0.24",
"@types/react-dom": "^17.0.0",
"@types/react-gauge-chart": "^0.3.0",
"@types/react-html-parser": "^2.0.2",
Expand All @@ -136,7 +149,7 @@
"prettier": "2.1.2",
"tailwindcss": "^3.0.15",
"typechain": "^8.0.0",
"typescript": "^4.3.5",
"typescript": "^4.8.4",
"typesync": "^0.8.0"
},
"husky": {
Expand Down
58 changes: 28 additions & 30 deletions pages/v1/old-farms.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,36 +10,34 @@ import { FarmList } from "v1/features/Farms/FarmList";
const Farms: FC = () => {
const { t } = useTranslation("common");

return (
<>
<Page>
<Page.Content>
<Link href="/farms" passHref>
<a style={{ textDecoration: "none" }}>
<strong>
<ArrowLeft size={13} /> {t("oldFarms.back")}
</strong>
</a>
</Link>
<Spacer />
<Note type="warning" style={{ textAlign: "center" }}>
<Trans i18nKey="oldFarms.disclaimer">
These Farms stopped earning $PICKLEs on Thu, Apr 22, 2021 (12 AM GMT)
<br />
To earn $PICKLEs, migrate any tokens here to the new Farms
<br />
Expand on any Farm you have tokens, and click
<strong>Migrate</strong>
</Trans>
</Note>

<h1 style={{ fontSize: `2rem`, fontFamily: `Source Code Pro` }}>{t("info.farms")}</h1>
<FarmList />
</Page.Content>
<Footer />
</Page>
</>
);
return <>
<Page>
<Page.Content>
<Link href="/farms" passHref style={{ textDecoration: "none" }} legacyBehavior>

<strong>
<ArrowLeft size={13} /> {t("oldFarms.back")}
</strong>

</Link>
<Spacer />
<Note type="warning" style={{ textAlign: "center" }}>
<Trans i18nKey="oldFarms.disclaimer">
These Farms stopped earning $PICKLEs on Thu, Apr 22, 2021 (12 AM GMT)
<br />
To earn $PICKLEs, migrate any tokens here to the new Farms
<br />
Expand on any Farm you have tokens, and click
<strong>Migrate</strong>
</Trans>
</Note>

<h1 style={{ fontSize: `2rem`, fontFamily: `Source Code Pro` }}>{t("info.farms")}</h1>
<FarmList />
</Page.Content>
<Footer />
</Page>
</>;
};

export { getStaticProps } from "v1/util/locales";
Expand Down
20 changes: 16 additions & 4 deletions tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
Expand All @@ -14,8 +18,16 @@
"isolatedModules": true,
"jsx": "preserve",
"baseUrl": ".",
"downlevelIteration": true
"downlevelIteration": true,
"incremental": true
},
"exclude": ["node_modules", "v1/containers/Contracts/**.ts"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
"exclude": [
"node_modules",
"v1/containers/Contracts/**.ts"
],
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
]
}
8 changes: 0 additions & 8 deletions v1/features/Connection/Web3Modal/Connectors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { InjectedConnector } from "@web3-react/injected-connector";
import { WalletConnectConnector } from "@web3-react/walletconnect-connector";
import { WalletLinkConnector } from "@web3-react/walletlink-connector";
import { CloverConnector } from "@clover-network/clover-connector";
import { Chains } from "picklefinance-core";
Expand All @@ -21,13 +20,6 @@ export const injected = new InjectedConnector({
supportedChainIds: Chains.list().map((x) => Chains.get(x).id),
});

export const walletconnect = new WalletConnectConnector({
rpc: { 1: RPC_URLS[1] /*, 137: RPC_URLS[137]*/ }, // web3-react walletconnect connector not compatible
bridge: "https://bridge.walletconnect.org",
qrcode: true,
pollingInterval: POLLING_INTERVAL,
});

export const walletlink = new WalletLinkConnector({
url: RPC_URLS[1],
appName: "Pickle Finance",
Expand Down
6 changes: 3 additions & 3 deletions v1/features/InfoBar/InfoBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,13 +65,13 @@ export const InfoBar: FC = () => {
<div>
<MaxWidthWrapper>
<Content>
<Link href="/v1/info" passHref>
<Link href="/v1/info" passHref legacyBehavior>
<NavItem active={router.pathname.endsWith("/info")}>{t("nav.info")}</NavItem>
</Link>
<Link href="/v1/info/earn" passHref>
<Link href="/v1/info/earn" passHref legacyBehavior>
<NavItem active={router.pathname.endsWith("/info/earn")}>{t("nav.profit")}</NavItem>
</Link>
<Link href="/v1/info/jars" passHref>
<Link href="/v1/info/jars" passHref legacyBehavior>
<NavItem active={router.pathname.endsWith("/info/jars")}>{t("nav.jars")}</NavItem>
</Link>
</Content>
Expand Down
24 changes: 12 additions & 12 deletions v1/features/TopBar/Logo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,18 @@ export const Logo: FC = () => {

return (
<ImageContainer>
<Link href="/v1">
<a aria-label={t("meta.title")}>
<Image
src="/pickle.svg"
width={158}
height={60}
layout="responsive"
alt={t("meta.titleFull")}
title={t("meta.titleFull")}
priority
/>
</a>
<Link href="/v1" aria-label={t("meta.title")}>

<Image
src="/pickle.svg"
width={158}
height={60}
layout="responsive"
alt={t("meta.titleFull")}
title={t("meta.titleFull")}
priority
/>

</Link>
</ImageContainer>
);
Expand Down
56 changes: 27 additions & 29 deletions v1/features/TopBar/NavItems.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,12 +64,12 @@ const infoItems = (router: NextRouter) => {
return (
<div style={{ padding: "0 10px" }}>
<p>
<Link href="/v1/info/earn" passHref>
<Link href="/v1/info/earn" passHref legacyBehavior>
<NavItem active={router.pathname.endsWith("/info/earn")}>{t("nav.profit")}</NavItem>
</Link>
</p>
<p>
<Link href="/v1/info/jars" passHref>
<Link href="/v1/info/jars" passHref legacyBehavior>
<NavItem active={router.pathname.endsWith("/info/jars")}>{t("nav.jars")}</NavItem>
</Link>
</p>
Expand All @@ -81,32 +81,30 @@ export const NavItems: FC = () => {
const router = useRouter();
const { t } = useTranslation("common");

return (
<>
<NavItemsContainer>
<Link href="/v1/farms" passHref>
<NavItem active={router.pathname.endsWith("farms")}>{t("nav.jarsAndFarms")}</NavItem>
</Link>
<Link href="/v1/dill" passHref>
<NavItem active={router.pathname.endsWith("dill")}>{t("nav.dill")}</NavItem>
</Link>
<Link href="/v1/frax" passHref>
<NavItem active={router.pathname.endsWith("frax")}>{t("nav.frax")}</NavItem>
return <>
<NavItemsContainer>
<Link href="/v1/farms" passHref legacyBehavior>
<NavItem active={router.pathname.endsWith("farms")}>{t("nav.jarsAndFarms")}</NavItem>
</Link>
<Link href="/v1/dill" passHref legacyBehavior>
<NavItem active={router.pathname.endsWith("dill")}>{t("nav.dill")}</NavItem>
</Link>
<Link href="/v1/frax" passHref legacyBehavior>
<NavItem active={router.pathname.endsWith("frax")}>{t("nav.frax")}</NavItem>
</Link>
<Popover content={infoItems(router)} trigger="hover" style={{ display: "flex" }}>
<Link href="/v1/info" passHref legacyBehavior>
<NavItem active={router.pathname.startsWith("/v1/info")}>{t("nav.info")}</NavItem>
</Link>
<Popover content={infoItems(router)} trigger="hover" style={{ display: "flex" }}>
<Link href="/v1/info" passHref>
<NavItem active={router.pathname.startsWith("/v1/info")}>{t("nav.info")}</NavItem>
</Link>
</Popover>
<Link href="https://feedback.pickle.finance/" passHref>
<NavItem target="_blank" rel="noopener noreferrer">
{t("nav.feedback")}
</NavItem>
</Link>
</NavItemsContainer>
<LanguageSelectContainer>
<LanguageSelect type="standalone" />
</LanguageSelectContainer>
</>
);
</Popover>
<Link href="https://feedback.pickle.finance/" passHref legacyBehavior>
<NavItem target="_blank" rel="noopener noreferrer">
{t("nav.feedback")}
</NavItem>
</Link>
</NavItemsContainer>
<LanguageSelectContainer>
<LanguageSelect type="standalone" />
</LanguageSelectContainer>
</>;
};
2 changes: 1 addition & 1 deletion v2/components/DashboardCalloutCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const DashboardCalloutCard: FC = () => {
};

return (
<Link href="/farms" passHref>
<Link href="/farms" passHref legacyBehavior>
<div
className="group bg-background-light rounded-xl border border-foreground-alt-500 shadow cursor-pointer transition duration-300 ease-in-out hover:bg-background-lightest"
onClick={() => {
Expand Down
22 changes: 11 additions & 11 deletions v2/components/LanguageToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,20 +62,20 @@ const LanguageToggle: FC = () => {
<div className="rounded-lg shadow-lg ring-1 ring-background ring-opacity-5 border border-foreground-alt-500 overflow-hidden">
<div className="relative grid gap-1 bg-background-light p-2">
{languages.map((language) => (
<Link
(<Link
key={language.name}
href={`/${language.locale}${asPath}`}
locale={language.locale}
>
<a className="flex group justify-between items-center hover:bg-background-lightest p-2 rounded-lg transition duration-300 ease-in-out">
<span className="text-foreground group-hover:text-primary-light text-sm font-bold">
{language.name}
</span>
{languageNameFromLocale(locale) === language.name && (
<CheckCircleIcon className="text-primary-light w-4 h-4" />
)}
</a>
</Link>
className="flex group justify-between items-center hover:bg-background-lightest p-2 rounded-lg transition duration-300 ease-in-out">

<span className="text-foreground group-hover:text-primary-light text-sm font-bold">
{language.name}
</span>
{languageNameFromLocale(locale) === language.name && (
<CheckCircleIcon className="text-primary-light w-4 h-4" />
)}

</Link>)
))}
</div>
</div>
Expand Down
Loading