Merge pull request #15 from skip-mev/use-assets-endpoint

[ENG-1528] Use assets endpoint instead of chain registry

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/AssetInput.tsx

@@ -2,18 +2,19 @@ import { FC, Fragment, useMemo, useState } from "react";
 import ChainSelect from "./ChainSelect";
 import AssetSelect from "./AssetSelect";
 import { Chain } from "@/context/chains";
-import { Asset, useBalancesByChain } from "@/cosmos";
+import { useBalancesByChain } from "@/cosmos";
 import Toast from "@/elements/Toast";
 import { useChain } from "@cosmos-kit/react";
 import { ethers } from "ethers";
 import { useAssets } from "@/context/assets";
 import { getFee } from "@/utils/utils";
+import { AssetWithMetadata } from "@/solve";
 
 interface Props {
  amount: string;
  onAmountChange?: (amount: string) => void;
- asset?: Asset;
- onAssetChange?: (asset: Asset) => void;
+ asset?: AssetWithMetadata;
+ onAssetChange?: (asset: AssetWithMetadata) => void;
  chain?: Chain;
  onChainChange?: (chain: Chain) => void;
  chains: Chain[];

src/components/AssetSelect/AssetSelectContent.tsx

@@ -1,14 +1,14 @@
 /* eslint-disable @next/next/no-img-element */
-import { Asset } from "@/cosmos";
+import { AssetWithMetadata } from "@/solve";
 import { ArrowLeftIcon } from "@heroicons/react/20/solid";
 import { ethers, toBigInt } from "ethers";
 import { FC, useEffect, useRef, useState } from "react";
 import { useWindowSize } from "usehooks-ts";
 
 interface Props {
- assets?: Asset[];
+ assets?: AssetWithMetadata[];
  balances: Record<string, string>;
- onChange?: (asset: Asset) => void;
+ onChange?: (asset: AssetWithMetadata) => void;
  onClose: () => void;
  showChainInfo?: boolean;
 }
@@ -92,7 +92,7 @@ const AssetSelectContent: FC<Props> = ({
  {filteredAssets?.map((asset) => (
  <button
  className="flex text-left w-full items-center gap-4 hover:bg-[#ECD9D9] p-4 rounded-lg transition-colors"
- key={`${asset.chainID}-${asset.denom}`}
+ key={`${asset.chain_id}-${asset.denom}`}
  onClick={() => {
  onClose();
 
@@ -106,7 +106,7 @@ const AssetSelectContent: FC<Props> = ({
  <img
  alt={asset.symbol}
  className="w-12 h-12 rounded-full"
- src={asset.image}
+ src={asset.logo_uri}
  onError={(e) =>
  (e.currentTarget.src =
  "https://api.dicebear.com/6.x/shapes/svg")
@@ -115,7 +115,7 @@ const AssetSelectContent: FC<Props> = ({
  <div className="flex-1">
  <p className="font-semibold text-lg">{asset.symbol}</p>
  {showChainInfo && (
- <p className="text-sm text-neutral-400">{asset.chainID}</p>
+ <p className="text-sm text-neutral-400">{asset.chain_id}</p>
  )}
  </div>
  <div>

src/components/AssetSelect/index.tsx

@@ -1,15 +1,15 @@
 /* eslint-disable @next/next/no-img-element */
-import { ArrowLeftIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
-import { FC, useEffect, useRef, useState } from "react";
-import { Asset } from "@/cosmos";
+import { FC, useState } from "react";
+import { ChevronDownIcon } from "@heroicons/react/20/solid";
 import { Dialog, DialogContent, DialogTrigger } from "@/elements/Dialog";
 import AssetSelectContent from "./AssetSelectContent";
+import { AssetWithMetadata } from "@/solve";
 
 interface Props {
- asset?: Asset;
- assets?: Asset[];
+ asset?: AssetWithMetadata;
+ assets?: AssetWithMetadata[];
  balances?: Record<string, string>;
- onChange?: (asset: Asset) => void;
+ onChange?: (asset: AssetWithMetadata) => void;
  showChainInfo?: boolean;
 }
 
@@ -33,7 +33,7 @@ const AssetSelect: FC<Props> = ({
  <img
  alt={asset.symbol}
  className="w-6 h-6 rounded-full"
- src={asset.image}
+ src={asset.logo_uri}
  onError={(e) =>
  (e.currentTarget.src =
  "https://api.dicebear.com/6.x/shapes/svg")

src/components/RouteDisplay.tsx

@@ -77,7 +77,7 @@ const TransferStep: FC<{ action: TransferAction }> = ({ action }) => {
  Transfer{" "}
  <img
  className="inline-block w-4 h-4 -mt-1"
- src={asset.image}
+ src={asset.logo_uri}
  alt=""
  />{" "}
  <span className="font-semibold text-black">{asset.symbol}</span> from{" "}
@@ -135,13 +135,13 @@ const SwapStep: FC<{ action: SwapAction }> = ({ action }) => {
  Swap{" "}
  <img
  className="inline-block w-4 h-4 -mt-1"
- src={assetIn.image}
+ src={assetIn.logo_uri}
  alt=""
  />{" "}
  <span className="font-semibold text-black">{assetIn.symbol}</span> for{" "}
  <img
  className="inline-block w-4 h-4 -mt-1"
- src={assetOut.image}
+ src={assetOut.logo_uri}
  alt=""
  />{" "}
  <span className="font-semibold text-black">{assetOut.symbol}</span> on{" "}
@@ -247,7 +247,7 @@ const RouteDisplay: FC<Props> = ({ route }) => {
  <RouteEnd
  amount={amountIn}
  symbol={sourceAsset.symbol}
- logo={sourceAsset.image}
+ logo={sourceAsset.logo_uri}
  chain={sourceChain.prettyName}
  />
  {isExpanded && (
@@ -290,7 +290,7 @@ const RouteDisplay: FC<Props> = ({ route }) => {
  <RouteEnd
  amount={amountOut}
  symbol={destinationAsset.symbol}
- logo={destinationAsset.image}
+ logo={destinationAsset.logo_uri}
  chain={destinationChain.prettyName}
  />
  </div>

src/components/TransactionDialog/TransactionDialogContent.tsx

@@ -1,5 +1,5 @@
-import { FC, Fragment, useState } from "react";
-import { useChain, useManager, useWalletClient } from "@cosmos-kit/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";
 import { executeRoute } from "@/solve/form";
@@ -27,6 +27,16 @@ const TransactionDialogContent: FC<Props> = ({
 
  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();
@@ -274,6 +284,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/components/TransactionDialog/index.tsx

@@ -1,16 +1,15 @@
 import { FC, Fragment, useState } from "react";
 import TransactionDialogContent from "./TransactionDialogContent";
-import { Operation, RouteResponse } from "@/solve";
-import { Asset } from "@/cosmos";
+import { AssetWithMetadata, Operation, RouteResponse } from "@/solve";
 import { Chain } from "@/context/chains";
 import { ActionType } from "@/solve/form";
 
 export interface Route {
  amountIn: string;
  amountOut: string;
- sourceAsset: Asset;
+ sourceAsset: AssetWithMetadata;
  sourceChain: Chain;
- destinationAsset: Asset;
+ destinationAsset: AssetWithMetadata;
  destinationChain: Chain;
  actionType: ActionType;
  operations: Operation[];