Skip to content

Commit

Permalink
Use ethers instead of wagmi or viem
Browse files Browse the repository at this point in the history
  • Loading branch information
hiep-immutable committed Sep 13, 2024
1 parent 6318bf2 commit 112fabb
Show file tree
Hide file tree
Showing 16 changed files with 176 additions and 1,329 deletions.
3 changes: 1 addition & 2 deletions client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@
"@tanstack/react-query": "^5.54.1",
"next": "14.2.7",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"wagmi": "^2.12.8"
"react-dom": "^18.3.1"
},
"devDependencies": {
"@emotion/react": "^11.13.3",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default function Banners() {
<>
{messages ? (
<Stack gap="base.spacing.x2">
{messages.map((message, index) => (
{messages.toReversed().map((message, index) => (
<Banner key={index} variant={message.status}>
<Banner.Caption>{message.message}</Banner.Caption>
<Banner.RightButton onClick={() => removeMessage(index)}>Close</Banner.RightButton>
Expand Down
21 changes: 20 additions & 1 deletion client/src/app/components/Layout/Layout.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,18 @@
import { Box } from "@biom3/react";
import { Body, Box, LoadingOverlay } from "@biom3/react";
import Banners from "./Banners";
import SideMenu from "../SideMenu/SideMenu";
import { usePassportProvider } from "@/app/context";
import { useEffect } from "react";

export default function Layout({ children }: Readonly<{ children: React.ReactNode }>) {
const { walletAddress, login } = usePassportProvider();

useEffect(() => {
if (!walletAddress) {
login();
}
}, [login, walletAddress]);

return (
<Box
sx={{
Expand All @@ -19,6 +30,14 @@ export default function Layout({ children }: Readonly<{ children: React.ReactNod
>
<SideMenu />
<Box>{children}</Box>
<Box sx={{
padding: "base.spacing.x4",
}}><Banners /></Box>
<LoadingOverlay visible={!walletAddress}>
<LoadingOverlay.Content>
<Body>Signing in with Passport</Body>
</LoadingOverlay.Content>
</LoadingOverlay>
</Box>
</Box>
);
Expand Down
7 changes: 2 additions & 5 deletions client/src/app/components/Recipes/RecipeBox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import {
Icon,
MenuItem,
Stack,
Modal,
LoadingOverlay,
} from '@biom3/react';
import { Collection, nftToName, Recipe } from '@/app/types';
Expand All @@ -25,7 +24,6 @@ export default function RecipeBox({
recipe: Recipe;
collection: Collection;
}) {
const { passportState } = usePassportProvider();
const { submitCraft } = useSubmitCraft();
const { sendCraftTx } = useCraftTx();
const { getIsApprovedForAll } = useApprovalQuery();
Expand Down Expand Up @@ -62,13 +60,13 @@ export default function RecipeBox({
});
addMessage({
status: 'success',
message: 'Crafting transaction sent!',
message: 'Crafting succeeded!',
});
} catch (e: any) {
console.error(e);
addMessage({
status: 'fatal',
message: 'Transaction failed! View console for more details.',
message: 'Crafting failed! View console for more details.',
});
} finally {
setIsLoading(false);
Expand Down Expand Up @@ -136,7 +134,6 @@ export default function RecipeBox({
</Box>
</Box>
<Button
disabled={!passportState.authenticated}
onClick={() => {
execute(recipe);
}}
Expand Down
26 changes: 7 additions & 19 deletions client/src/app/components/SideMenu/SideMenu.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { usePassportProvider } from "@/app/context";
import { Box, Logo, Heading, Button, EllipsizedText } from "@biom3/react";
import Banners from "./Banners";

export default function SideMenu() {
const { userInfo, triggerLogin, passportState, walletAddress } = usePassportProvider();
const { walletAddress, client } = usePassportProvider();

return (
<Box
Expand Down Expand Up @@ -38,23 +37,12 @@ export default function SideMenu() {
>
<Logo logo="ImmutableHorizontalLockup" sx={{ maxh: "base.spacing.x10" }} />
<Heading size="small">Crafting</Heading>
<Box>
{!passportState.authenticated && (
<Button onClick={triggerLogin}>
<Button.Logo logo="PassportSymbolOutlined" />
Login with Passport
</Button>
)}
{passportState.authenticated && walletAddress && (
<>
<Heading size="xSmall">{userInfo?.email}</Heading>
<EllipsizedText text={walletAddress} />
</>
)}
</Box>
<Box sx={{ w: "100%" }}>
<Banners />
</Box>
{walletAddress && (
<>
<EllipsizedText text={walletAddress} />
<Button onClick={client.logout}>Logout</Button>
</>
)}
</Box>
</Box>
);
Expand Down
140 changes: 11 additions & 129 deletions client/src/app/context/ImmutableProvider.tsx
Original file line number Diff line number Diff line change
@@ -1,149 +1,31 @@
import { config, passport, x, blockchainData } from '@imtbl/sdk';
import { createContext, useContext, useMemo } from 'react';

type Environment = 'prod' | 'sandbox' | 'dev';

type PassportConfig = {
audience: 'platform_api';
clientId: string;
logoutMode?: 'redirect' | 'silent';
logoutRedirectUri: string;
redirectUri: string;
scope: string;
overrides?: any;
};

const getCoreSdkConfig = (environment: Environment) => {
switch (environment) {
case 'prod': {
return x.imxClientConfig({ environment: x.Environment.PRODUCTION });
}
case 'sandbox': {
return x.imxClientConfig({ environment: x.Environment.SANDBOX });
}
case 'dev': {
return {
baseConfig: new config.ImmutableConfiguration({
environment: x.Environment.SANDBOX,
}),
overrides: {
immutableXConfig: x.createConfig({
basePath: 'https://api.dev.x.immutable.com',
chainID: 5,
coreContractAddress: '0xd05323731807A35599BF9798a1DE15e89d6D6eF1',
registrationContractAddress:
'0x7EB840223a3b1E0e8D54bF8A6cd83df5AFfC88B2',
}),
},
};
}
default: {
throw new Error(`Invalid environment: "${environment}"`);
}
}
};

const getPassportConfig = (environment: Environment) => {
var passportConfig: PassportConfig = {
logoutMode: 'redirect',
audience: 'platform_api',
scope: 'openid email offline_access transact',
clientId: process.env.NEXT_PUBLIC_PASSPORT_CLIENT_ID!,
logoutRedirectUri: process.env.NEXT_PUBLIC_PASSPORT_LOGOUT_REDIRECT_URI!,
redirectUri: process.env.NEXT_PUBLIC_PASSPORT_REDIRECT_URI!,
};

switch (environment) {
case 'prod': {
return {
baseConfig: new config.ImmutableConfiguration({
environment: config.Environment.PRODUCTION,
}),
...passportConfig,
};
}
case 'sandbox': {
return {
baseConfig: new config.ImmutableConfiguration({
environment: config.Environment.SANDBOX,
}),
...passportConfig,
};
}
default: {
throw new Error('Invalid environment');
}
}
};
import { config, blockchainData } from "@imtbl/sdk";
import { createContext, useContext, useMemo } from "react";

const getBlockchainData = () => {
switch (process.env.NEXT_PUBLIC_ENV) {
case 'prod': {
return new blockchainData.BlockchainData({
baseConfig: {
environment: config.Environment.PRODUCTION,
}
});
}
case 'sandbox': {
return new blockchainData.BlockchainData({
baseConfig: {
environment: config.Environment.SANDBOX,
}
});
}
case 'dev': {
return new blockchainData.BlockchainData({
baseConfig: {
environment: config.Environment.SANDBOX,
}
});
}
default: {
throw new Error('Invalid environment');
}
}
}
return new blockchainData.BlockchainData({
baseConfig: {
environment: config.Environment.SANDBOX,
},
});
};

const ImmutableContext = createContext<{
passportClient: passport.Passport;
coreSdkClient: x.ImmutableX;
blockchainDataClient: blockchainData.BlockchainData;
environment: Environment;
} | null>(null);

export function ImmutableProvider({
children,
}: {
children: JSX.Element | JSX.Element[];
}) {
export function ImmutableProvider({ children }: { children: JSX.Element | JSX.Element[] }) {
const providerValues = useMemo(() => {
const environment = process.env.NEXT_PUBLIC_ENV as Environment;
const passportClient = new passport.Passport(
getPassportConfig(environment)
);
const coreSdkClient = new x.ImmutableX(getCoreSdkConfig(environment));
const blockchainDataClient = getBlockchainData();
return {
passportClient,
coreSdkClient,
blockchainDataClient,
environment,
};
}, []);

return (
<ImmutableContext.Provider value={providerValues}>
{children}
</ImmutableContext.Provider>
);
return <ImmutableContext.Provider value={providerValues}>{children}</ImmutableContext.Provider>;
}

export function useImmutableProvider() {
const ctx = useContext(ImmutableContext);
if (!ctx)
throw new Error(
'useImmutableProvider must be used within a ImmutableProvider'
);
if (!ctx) throw new Error("useImmutableProvider must be used within a ImmutableProvider");
return ctx;
}
Loading

0 comments on commit 112fabb

Please sign in to comment.