Convenience library for interacting with the Axis protocol.
This library expects react
, wagmi
, viem
and @tanstack/react-query
as peer dependencies.
pnpm add @axis-finance/sdk react wagmi viem @tanstack/react-query wagmi
import { createSdk } from "@axis-finance/sdk";
const sdk = createSdk();
Note: TanStack Query bigint queryKeys
TanStack Query doesn't know how to serialize bigint
queryKeys
.
Wagmi hashFn
serializes bigints
for us.
import { hashFn } from "wagmi/query";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const queryClient = new QueryClient({
defaultOptions: {
queries: {
queryKeyHashFn: hashFn,
},
},
});
export const App = () => (
<QueryClientProvider client={queryClient}>
<>{/* ... */}</>
</QueryClientProvider>
);
import { createConfig, WagmiProvider, http } from "wagmi";
import { mantle } from "wagmi/chains";
import { hashFn } from "wagmi/query";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const config = createConfig({
chains: [mantle],
transports: { [mantle.id]: http() },
});
const queryClient = new QueryClient({
defaultOptions: {
queries: {
queryKeyHashFn: hashFn,
},
},
});
export const App = () => (
<QueryClientProvider client={queryClient}>
<WagmiProvider config={config}>
<>{/* ... */}</>
</WagmiProvider>
</QueryClientProvider>
);
import { createSdk } from "@axis-finance/sdk";
import { OriginSdkProvider } from "@axis-finance/sdk/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { createConfig, WagmiProvider, http } from "wagmi";
import { mantle } from "wagmi/chains";
import { hashFn } from "wagmi/query";
const sdk = createSdk();
const config = createConfig({
chains: [mantle],
transports: { [mantle.id]: http() },
});
const queryClient = new QueryClient({
defaultOptions: {
queries: {
queryKeyHashFn: hashFn,
},
},
});
export const App = () => (
<QueryClientProvider client={queryClient}>
<WagmiProvider config={config}>
<OriginSdkProvider sdk={sdk}>
<>{/* ... */}</>
</OriginSdkProvider>
</WagmiProvider>
</QueryClientProvider>
);
Queries return the standard @tanstack/react-query
useQuery()
result type.
import { useLaunchQuery } from "@axis-finance/sdk/react";
export const Launch = () => {
const {
data: launch,
status,
error,
} = useLaunchQuery({ chainId: 5000, lotId: 1 });
if (status === "pending") {
return <div>Loading launch data...</div>;
}
if (status === "error") {
return <div>Error resolving launch: {error?.message}</div>;
}
return (
<div>
<h1>{launch.info.name}</h1>
<p>{launch.info.description}</p>
</div>
);
};
Contract calls return a common interface for Axis contract interactions.
import { useBid } from "@axis-finance/sdk/react";
export const Bid = () => {
import { useBid } from "@axis-finance/sdk/react";
import type { BidParams } from "@axis-finance/sdk";
import { formatUnits } from "viem";
const bidParams: BidParams = {
chainId: 5000,
lotId: 1,
amountIn: 10000000000000000000n,
amountOut: 20000000000000000000n,
bidderAddress: "0x123...",
referrerAddress: "0x456...",
};
const { submit, simulation, transaction, receipt, isWaiting, error } =
useBid(bidParams);
return (
<div>
{isWaiting && <div>Confirming bid transaction...</div>}
{error && <div>Transaction error: {error.message}</div>}
You're spending {formatUnits(bidParams.amountIn, 18)}
<button disabled={isWaiting} onClick={submit}>
Bid
</button>
</div>
);
};
.
└── src/
├── react/
│ └── hooks/
│ ├── use-abort.ts
│ ├── use-bid.ts
│ ├── use-cancel.ts
│ ├── use-claim-bids.ts
│ ├── use-refund-bid.ts
│ ├── use-settle.ts
│ ├── use-launch-query.ts
│ └── use-launches-query.ts
└── index.ts
By default, the SDK has default services for the following:
- Cloak: Service for encrypting bids offchain
- Metadata: Service for storing launch metadata offchain (e.g. name, description, image URLs...)
- Subgraph: Service for querying launch graph data (combines onchain data with offchain data)
You can override these services by passing in your own URLs in the SDK config:
import { createSdk } from "@axis-finance/sdk";
export const sdk = createSdk({
cloak: {
url: "https://cloak.example.com/api",
},
metadata: {
url: "https://metadata.example.com/api",
},
subgraph: {
1: {
url: "https://mainnet-subgraph.example.com/api",
},
81457: {
url: "https://blast-subgraph.example.com/api",
},
},
});