chore: sync staging to main

src/components/AssetInput.tsx

@@ -60,7 +60,7 @@ function AssetInput({
 
   const isAnyDisclosureOpen = useAnyDisclosureOpen();
 
-  const { data: balances } = useBalancesByChain({
+  const { data: balances, isLoading: isBalancesLoading } = useBalancesByChain({
     address: account?.address,
     chain,
     assets,
@@ -100,6 +100,7 @@ function AssetInput({
             balances={balances}
             onChange={onAssetChange}
             showChainInfo={!!chain}
+            isBalancesLoading={isBalancesLoading}
           />
         </div>
       </div>
@@ -186,19 +187,23 @@ function AssetInput({
           <div className="flex-grow" />
           {context === "source" && account?.address && asset && (
             <div className="flex animate-slide-left-and-fade items-center text-sm text-neutral-400">
-              <span className="mr-1">Balance:</span>
-              <SimpleTooltip label={`${parseFloat(selectedAssetBalance).toString()} ${asset.recommendedSymbol}`}>
-                <div
-                  className={cn(
-                    "mr-2 max-w-[16ch] truncate tabular-nums",
-                    "cursor-help underline decoration-dotted underline-offset-4",
-                  )}
-                >
-                  {parseFloat(selectedAssetBalance).toLocaleString("en-US", {
-                    maximumFractionDigits: 4,
-                  })}
-                </div>
-              </SimpleTooltip>
+              <span className="mr-1">Balance:</span>{" "}
+              {isBalancesLoading ? (
+                <SpinnerIcon className="mr-2 h-4 w-4 animate-spin" />
+              ) : (
+                <SimpleTooltip label={`${parseFloat(selectedAssetBalance).toString()} ${asset.recommendedSymbol}`}>
+                  <div
+                    className={cn(
+                      "mr-2 max-w-[16ch] truncate tabular-nums",
+                      "cursor-help underline decoration-dotted underline-offset-4",
+                    )}
+                  >
+                    {parseFloat(selectedAssetBalance).toLocaleString("en-US", {
+                      maximumFractionDigits: 4,
+                    })}
+                  </div>
+                </SimpleTooltip>
+              )}
               <button
                 className={cn(
                   "rounded-md bg-[#FF486E] px-2 py-1 text-xs font-semibold uppercase text-white disabled:bg-red-200",

src/components/AssetSelect/AssetSelectContent.tsx

@@ -7,15 +7,18 @@ import { formatUnits } from "viem";
 
 import { cn } from "@/utils/ui";
 
+import { SpinnerIcon } from "../SpinnerIcon";
+
 interface Props {
   assets?: Asset[];
   balances: Record<string, string>;
   onChange?: (asset: Asset) => void;
   onClose: () => void;
   showChainInfo?: boolean;
+  isBalancesLoading?: boolean;
 }
 
-function AssetSelectContent({ assets = [], balances, onChange, onClose, showChainInfo }: Props) {
+function AssetSelectContent({ assets = [], balances, onChange, onClose, showChainInfo, isBalancesLoading }: Props) {
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => inputRef.current?.focus(), []);
@@ -63,6 +66,7 @@ function AssetSelectContent({ assets = [], balances, onChange, onClose, showChai
           <ArrowLeftIcon className="h-6 w-6" />
         </button>
         <p className="text-xl font-bold">Select Token</p>
+        {isBalancesLoading && <SpinnerIcon className="h-4 w-4 animate-spin text-neutral-400" />}
       </div>
       <input
         className="z-20 w-full rounded-md border px-4 py-2"
@@ -95,7 +99,13 @@ function AssetSelectContent({ assets = [], balances, onChange, onClose, showChai
                 onError={(e) => (e.currentTarget.src = "https://api.dicebear.com/6.x/shapes/svg")}
               />
               <div className="flex-1">
-                <p className="text-lg font-semibold">{asset.recommendedSymbol}</p>
+                <div className="flex items-center gap-2">
+                  <p className="text-lg font-semibold">{asset.recommendedSymbol || asset.symbol}</p>
+                  {asset.isCW20 && (
+                    <p className="rounded bg-yellow-600 px-1.5 text-xs font-semibold text-white">CW20</p>
+                  )}
+                </div>
+
                 {showChainInfo && <p className="text-sm text-neutral-400">{asset.chainID}</p>}
               </div>
               <div>

src/components/AssetSelect/index.tsx

@@ -13,9 +13,10 @@ interface Props {
   balances?: Record<string, string>;
   onChange?: (asset: Asset) => void;
   showChainInfo?: boolean;
+  isBalancesLoading?: boolean;
 }
 
-function AssetSelect({ asset, assets, balances, onChange, showChainInfo }: Props) {
+function AssetSelect({ asset, assets, balances, onChange, showChainInfo, isBalancesLoading }: Props) {
   const [isOpen, setIsOpen] = useState(false);
   return (
     <Dialog
@@ -56,6 +57,7 @@ function AssetSelect({ asset, assets, balances, onChange, showChainInfo }: Props
           onChange={onChange}
           onClose={() => setIsOpen(false)}
           showChainInfo={showChainInfo}
+          isBalancesLoading={isBalancesLoading}
         />
       </DialogContent>
     </Dialog>

src/components/Help.tsx

@@ -0,0 +1,17 @@
+export const Help = () => {
+  return (
+    <div className="fixed bottom-2 right-2 rounded-full bg-white px-4 py-2 shadow-xl">
+      <p className="text-center text-sm">
+        Need Help? Join our{" "}
+        <a
+          href="https://skip.money/discord"
+          target="_blank"
+          rel="noreferrer"
+          className="text-blue-500 hover:text-blue-600 hover:underline"
+        >
+          Discord
+        </a>
+      </p>
+    </div>
+  );
+};

src/config/gas.js

@@ -6,4 +6,6 @@ const { GasPrice } = require("@cosmjs/stargate");
 exports.CUSTOM_GAS_PRICE_CHAIN_IDS = {
   "dymension_1100-1": GasPrice.fromString("20000000000adym"),
   "noble-1": GasPrice.fromString("0.0uusdc"),
+  "carbon-1": GasPrice.fromString("100swth"),
+  "akashnet-2": GasPrice.fromString("0.025uakt"), // https://www.mintscan.io/akash/parameters
 };

src/context/assets.tsx

@@ -54,7 +54,11 @@ export function AssetsProvider({ children }: { children: ReactNode }) {
       if (!feeAsset) {
         const chain = (chains ?? []).find((chain) => chain.chainID === chainID);
         if (!chain) return;
-        [feeAsset] = chain.feeAssets.sort(sortFeeAssets);
+        else if (chainID === "carbon-1") {
+          feeAsset = chain.feeAssets.find((v) => v.denom == "swth");
+        } else {
+          [feeAsset] = chain.feeAssets.sort(sortFeeAssets);
+        }
       }
       if (!feeAsset) {
         return;

src/hooks/useBalancesByChain.ts

@@ -47,14 +47,18 @@ export async function getBalancesByChain(address: string, chainID: string, asset
   const balances = await stargate.getAllBalances(address);
 
   const cw20Assets = assets.filter((asset) => asset.isCW20);
-
-  const cw20Balances = await Promise.all(
-    cw20Assets.map((asset) => {
-      return cosmwasm.queryContractSmart(asset.tokenContract!, {
-        balance: { address },
-      });
+  const _cw20Balances = await Promise.all(
+    cw20Assets.map(async (asset) => {
+      try {
+        return await cosmwasm.queryContractSmart(asset.tokenContract!, {
+          balance: { address },
+        });
+      } catch (e) {
+        return e;
+      }
     }),
   );
+  const cw20Balances = _cw20Balances.filter((result) => !(result instanceof Error));
 
   const allBalances = balances.reduce<Record<string, string>>(
     (acc, balance) => ({ ...acc, [balance.denom]: balance.amount }),

src/layouts/default.tsx

@@ -3,6 +3,7 @@ import { Toaster } from "react-hot-toast";
 
 import { Footer } from "@/components/Footer";
 import Header from "@/components/Header";
+import { Help } from "@/components/Help";
 import SkipBanner from "@/components/SkipBanner";
 import { VersionCheck } from "@/components/VersionCheck";
 import { AssetsProvider } from "@/context/assets";
@@ -19,6 +20,7 @@ export function DefaultLayout({ children }: { children: ReactNode }) {
           <Footer />
         </main>
         <VersionCheck />
+        <Help />
         <Toaster
           position="top-right"
           toastOptions={{ duration: 1000 * 10 }}