deploy to prod

src/analytics.ts

@@ -0,0 +1,10 @@
+import va from "@vercel/analytics";
+import { Route } from "./components/TransactionDialog";
+
+export function trackRoute(route: Route) {
+ va.track("transaction", {
+ type: route.actionType,
+ amount: parseFloat(route.amountIn),
+ asset: route.sourceAsset.symbol,
+ });
+}

src/components/TransactionDialog/TransactionDialogContent.tsx

@@ -1,4 +1,4 @@
-import { FC, Fragment, useState } from "react";
+import { FC, Fragment, useEffect, useRef, useState } from "react";
 import { useChain, useManager } from "@cosmos-kit/react";
 import { ArrowLeftIcon, CheckCircleIcon } from "@heroicons/react/20/solid";
 import Toast from "@/elements/Toast";
@@ -25,8 +25,20 @@ const TransactionDialogContent: FC<Props> = ({
  const [isError, setIsError] = useState(false);
  const [txError, setTxError] = useState<string | null>(null);
 
+ const [txComplete, setTxComplete] = useState(false);
+
  const [warningOpen, setWarningOpen] = useState(false);
 
+ const warningEl = useRef<HTMLDivElement>(null);
+
+ useEffect(() => {
+ if (warningOpen) {
+ warningEl.current?.scrollIntoView({
+ behavior: "instant",
+ });
+ }
+ }, [warningOpen]);
+
  const chain = useChain(route.sourceChain.record?.name ?? "");
 
  const { chainRecords } = useManager();
@@ -93,6 +105,7 @@ const TransactionDialogContent: FC<Props> = ({
  );
  } finally {
  setTransacting(false);
+ setTxComplete(true);
  }
  };
 
@@ -191,7 +204,7 @@ const TransactionDialogContent: FC<Props> = ({
  <span>Submit</span>
  )}
  </button>
- {insufficentBalance && (
+ {insufficentBalance && !transacting && !txComplete && (
  <p className="text-center font-semibold text-sm text-red-500">
  Insufficient Balance
  </p>
@@ -274,6 +287,7 @@ const TransactionDialogContent: FC<Props> = ({
  receive fees or payment of any kind today and subsidize gas
  for users cross-chain)
  </p>
+ <div ref={warningEl}></div>
  </div>
  )}
  </div>

src/config/index.ts

@@ -1,3 +1,5 @@
+export const IGNORE_CHAINS = ["agoric", "8ball", "akashnet-2"];
+
 export interface ChainConfig {
  id: string;
  name: string;

src/solve/client/__tests__/client.test.ts

@@ -1,73 +1,77 @@
 import { rest } from "msw";
 import { setupServer } from "msw/node";
-import { ENDPOINTS, IGNORE_CHAINS, SkipClient } from "../client";
+import { SkipClient } from "../client";
+import { IGNORE_CHAINS } from "../../../config";
 
 const handlers = [
- rest.post(ENDPOINTS.GET_ROUTE, async (req, res, ctx) => {
- const body = await req.json();
+ rest.post(
+ "https://api.skip.money/v1/fungible/route",
+ async (req, res, ctx) => {
+ const body = await req.json();
+
+ if (!body.cumulative_affiliate_fee_bps) {
+ return res(
+ ctx.status(400),
+ ctx.json({
+ code: 3,
+ message: "invalid cumulativeAffiliateFeeBps",
+ details: [],
+ })
+ );
+ }
 
- if (!body.cumulative_affiliate_fee_bps) {
  return res(
- ctx.status(400),
+ ctx.status(200),
  ctx.json({
- code: 3,
- message: "invalid cumulativeAffiliateFeeBps",
- details: [],
- })
- );
- }
-
- return res(
- ctx.status(200),
- ctx.json({
- source_asset_denom: "uosmo",
- source_asset_chain_id: "osmosis-1",
- dest_asset_denom: "uatom",
- dest_asset_chain_id: "cosmoshub-4",
- amount_in: "1000000",
- operations: [
- {
- swap: {
- swap_in: {
- swap_venue: {
- name: "osmosis-poolmanager",
- chain_id: "osmosis-1",
- },
- swap_operations: [
- {
- pool: "1",
- denom_in: "uosmo",
- denom_out:
- "ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2",
+ source_asset_denom: "uosmo",
+ source_asset_chain_id: "osmosis-1",
+ dest_asset_denom: "uatom",
+ dest_asset_chain_id: "cosmoshub-4",
+ amount_in: "1000000",
+ operations: [
+ {
+ swap: {
+ swap_in: {
+ swap_venue: {
+ name: "osmosis-poolmanager",
+ chain_id: "osmosis-1",
  },
- ],
- swap_amount_in: "1000000",
+ swap_operations: [
+ {
+ pool: "1",
+ denom_in: "uosmo",
+ denom_out:
+ "ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2",
+ },
+ ],
+ swap_amount_in: "1000000",
+ },
+ estimated_affiliate_fee:
+ "0ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2",
  },
- estimated_affiliate_fee:
- "0ibc/27394FB092D2ECCD56123C74F36E4C1F926001CEADA9CA97EA622B25F41E5EB2",
  },
- },
- {
- transfer: {
- port: "transfer",
- channel: "channel-0",
- chain_id: "osmosis-1",
- pfm_enabled: true,
- dest_denom: "uatom",
+  {
+  transfer: {
+  port: "transfer",
+  channel: "channel-0",
+  chain_id: "osmosis-1",
+  pfm_enabled: true,
+  dest_denom: "uatom",
+ },
  },
+ ],
+ chain_ids: ["osmosis-1", "cosmoshub-4"],
+ does_swap: true,
+ estimated_amount_out: "54631",
+ swap_venue: {
+ name: "osmosis-poolmanager",
+ chain_id: "osmosis-1",
  },
- ],
- chain_ids: ["osmosis-1", "cosmoshub-4"],
- does_swap: true,
- estimated_amount_out: "54631",
- swap_venue: {
- name: "osmosis-poolmanager",
- chain_id: "osmosis-1",
- },
- })
- );
- }),
- rest.get(ENDPOINTS.GET_CHAINS, (_, res, ctx) => {
+ })
+ );
+ }
+ ),
+ rest.get("https://api.skip.money/v1/info/chains", (_, res, ctx) => {
  return res(
  ctx.status(200),
  ctx.json({
@@ -150,7 +154,7 @@ describe("SkipClient", () => {
 
  describe("/v1/info/chains", () => {
  it("filters ignored chains", async () => {
- const client = new SkipClient();
+ const client = new SkipClient(IGNORE_CHAINS);
 
  const response = await client.chains();
 

src/solve/client/client.ts

@@ -2,26 +2,24 @@ import https from "https";
 import axios, { AxiosInstance } from "axios";
 import { Chain } from "../types";
 import { FungibleService } from "./fungible";
+import { TransactionService } from "./transaction";
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "https://api.skip.money/v1";
 
-export const ENDPOINTS = {
- GET_CHAINS: `${API_URL}/info/chains`,
- GET_ROUTE: `${API_URL}/fungible/route`,
-};
-
-export const IGNORE_CHAINS = ["agoric", "8ball", "akashnet-2"];
-
 interface GetChainsResponse {
  chains: Chain[];
 }
 
 export class SkipClient {
  private httpClient: AxiosInstance;
+ private ignoreChains: string[];
 
  public fungible: FungibleService;
+ public transaction: TransactionService;
+
+ constructor(ignoreChains: string[] = []) {
+ this.ignoreChains = ignoreChains;
 
- constructor() {
  const agent = new https.Agent({
  keepAlive: true,
  });
@@ -32,6 +30,7 @@ export class SkipClient {
  });
 
  this.fungible = new FungibleService(this.httpClient);
+ this.transaction = new TransactionService(this.httpClient);
  }
 
  async chains(): Promise<Chain[]> {
@@ -41,6 +40,8 @@ export class SkipClient {
 
  const { chains } = response.data;
 
- return chains.filter((chain) => !IGNORE_CHAINS.includes(chain.chain_id));
+ return chains.filter(
+ (chain) => !this.ignoreChains.includes(chain.chain_id)
+ );
  }
 }

src/solve/client/transaction.ts

@@ -0,0 +1,59 @@
+import { AxiosInstance, AxiosResponse } from "axios";
+import { Packet, StatusError, StatusState } from "../types";
+
+export interface StatusRequest {
+ tx_hash: string;
+ chain_id: string;
+}
+
+export interface StatusResponse {
+ status: StatusState;
+ last_chain_id: string;
+ packets: Packet[];
+
+ error?: StatusError;
+}
+
+export interface TrackRequest {
+ tx_hash: string;
+ chain_id: string;
+}
+
+export interface TrackResponse {
+ success: boolean;
+ tx_hash: string;
+}
+
+export class TransactionService {
+ private httpClient: AxiosInstance;
+
+ constructor(httpClient: AxiosInstance) {
+ this.httpClient = httpClient;
+ }
+
+ async track(txHash: string, chainID: string): Promise<TrackResponse> {
+ const response = await this.httpClient.post<
+ TrackResponse,
+ AxiosResponse<TrackResponse, any>,
+ TrackRequest
+ >("/tx/track", {
+ tx_hash: txHash,
+ chain_id: chainID,
+ });
+
+ return response.data;
+ }
+
+ async status(txHash: string, chainID: string): Promise<StatusResponse> {
+ const params: StatusRequest = {
+ tx_hash: txHash,
+ chain_id: chainID,
+ };
+
+ const response = await this.httpClient.get<StatusResponse>("/tx/status", {
+ params,
+ });
+
+ return response.data;
+ }
+}

src/solve/context.tsx

@@ -1,5 +1,6 @@
 import { FC, PropsWithChildren, createContext } from "react";
 import { SkipClient } from "./client";
+import { IGNORE_CHAINS } from "@/config";
 
 export const SkipContext = createContext<
  | {
@@ -10,7 +11,7 @@ export const SkipContext = createContext<
 
 export const SkipProvider: FC<PropsWithChildren> = ({ children }) => {
  return (
- <SkipContext.Provider value={{ skipClient: new SkipClient() }}>
+ <SkipContext.Provider value={{ skipClient: new SkipClient(IGNORE_CHAINS) }}>
  {children}
  </SkipContext.Provider>
  );