fixed infinite loading on /transactions; (#185)

commented out all TON and starknet stuff
This commit is contained in:
Artem Ash
2024-11-08 16:11:46 -08:00
committed by GitHub
parent 3239866ab2
commit 1781f62a13
12 changed files with 166 additions and 640 deletions
+1 -6
View File
@@ -54,9 +54,6 @@
"@tailwindcss/forms": "^0.5.0",
"@tailwindcss/typography": "^0.5.2",
"@tanstack/react-query": "^5.59.16",
"@ton/core": "^0.53.0",
"@ton/crypto": "^3.2.0",
"@tonconnect/ui-react": "^2.0.0-beta.4",
"@uidotdev/usehooks": "^2.4.1",
"@wagmi/core": "1.4.13",
"axios": "^0.21.4",
@@ -74,7 +71,7 @@
"lucide-react": "^0.307.0",
"markdown-to-jsx": "^7.4.0",
"multicoin-address-validator": "^0.5.21",
"next": "14.2.14",
"next": "*",
"next-themes": "^0.2.1",
"pino-pretty": "^11.3.0",
"qrcode.react": "^3.1.0",
@@ -85,8 +82,6 @@
"react-swipeable": "^7.0.0",
"react-toastify": "^10.0.6",
"react-use-intercom": "^2.0.0",
"starknet": "^6.11.0",
"starknetkit": "^2.3.3",
"swr": "^2.1.1",
"tailwindcss-animate": "^1.0.5",
"ton": "^13.9.0",
@@ -4,6 +4,8 @@ import { useCallback, useRef, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { useSearchParams, useRouter } from "next/navigation";
import useAsyncEffect from "use-async-effect";
import axios from "axios";
import {
ArrowRight,
@@ -36,8 +38,6 @@ import fireblockNetworksMainnet from "@/components/lux/fireblocks/constants/netw
import fireblockNetworksTestnet from "@/components/lux/fireblocks/constants/networks.sandbox";
import { networks as teleportNetworksMainnet } from "@/components/lux/teleport/constants/networks.mainnets";
import { networks as teleportNetworksTestnet } from "@/components/lux/teleport/constants/networks.sandbox";
import useAsyncEffect from "use-async-effect";
import axios from "axios";
function TransactionsHistory() {
const isMainnet = process.env.NEXT_PUBLIC_API_VERSION === "mainnet";
@@ -68,7 +68,7 @@ function TransactionsHistory() {
const searchParams = useSearchParams();
const canGoBackRef = useRef<boolean>(false);
const paramString = resolvePersistentQueryParams(searchParams);
const paramString = resolvePersistentQueryParams(searchParams).toString();
const goBack = useCallback(() => {
canGoBackRef.current = !!(
@@ -81,6 +81,7 @@ function TransactionsHistory() {
}
}, [paramString]);
const getSwaps = async (page: number, status?: string | number) => {
try {
const {
@@ -94,10 +95,10 @@ function TransactionsHistory() {
data: data,
error: null,
};
} catch (err) {
} catch (err: any) {
return {
data: null,
error: "Cannot get swaps. Please try again later.",
error: `Could not get swaps: ${err.message ?? 'unknown'}`,
};
}
};
@@ -116,15 +117,19 @@ function TransactionsHistory() {
if (error) {
toast.error(error);
setLoading(false);
return;
}
setSwaps(data);
setPage(1);
if (Number(data?.length) < PAGE_SIZE) setIsLastPage(true);
if (Number(data?.length) < PAGE_SIZE) {
setIsLastPage(true);
}
setLoading(false);
} else {
}
else {
const { data, error } = await getSwaps(
1,
SwapStatusInNumbers.SwapsWithoutCancelledAndExpired
@@ -132,12 +137,15 @@ function TransactionsHistory() {
if (error) {
toast.error(error);
setLoading(false);
return;
}
setSwaps(data);
setPage(1);
if (Number(data?.length) < PAGE_SIZE) setIsLastPage(true);
if (Number(data?.length) < PAGE_SIZE) {
setIsLastPage(true);
}
setLoading(false);
}
}, [paramString, showAllSwaps]);
@@ -148,19 +156,25 @@ function TransactionsHistory() {
setLoading(true);
if (showAllSwaps) {
const { data, error } = await getSwaps(nextPage);
if (error) {
setLoading(false);
toast.error(error);
return;
}
setSwaps((old) => [...(old ? old : []), ...(data ? data : [])]);
setPage(nextPage);
if (Number(data?.length) < PAGE_SIZE) setIsLastPage(true);
if (Number(data?.length) < PAGE_SIZE) {
setIsLastPage(true);
}
setLoading(false);
} else {
}
else {
const { data, error } = await getSwaps(
nextPage,
SwapStatusInNumbers.SwapsWithoutCancelledAndExpired
@@ -168,12 +182,15 @@ function TransactionsHistory() {
if (error) {
toast.error(error);
setLoading(false);
return;
}
setSwaps((old) => [...(old ? old : []), ...(data ? data : [])]);
setPage(nextPage);
if (Number(data?.length) < PAGE_SIZE) setIsLastPage(true);
if (Number(data?.length) < PAGE_SIZE) {
setIsLastPage(true);
}
setLoading(false);
}
@@ -271,25 +288,30 @@ function TransactionsHistory() {
>
<div className=" flex items-center">
<div className="flex-shrink-0 h-6 w-6 relative block">
<Image
// src={resolveNetworkImage(swap.source_asset)}
src={sourceAsset?.logo!}
alt="From Logo"
height="60"
width="60"
className="rounded-full object-contain"
/>
{sourceAsset?.logo && (
<Image
// src={resolveNetworkImage(swap.source_asset)}
src={sourceAsset.logo}
alt="From Logo"
height="60"
width="60"
className="rounded-full object-contain"
/>
)}
</div>
<ArrowRight className="h-4 w-4 mx-2" />
<div className="flex-shrink-0 h-6 w-6 relative block">
<Image
// src={resolveNetworkImage(swap.destination_asset)}
src={destinationAsset?.logo!}
alt="To Logo"
height="70"
width="70"
className="rounded-full border border-[#f3f3f32d] object-contain"
/>
{destinationAsset?.logo && (
<Image
// src={resolveNetworkImage(swap.destination_asset)}
src={destinationAsset.logo}
alt="To Logo"
height="70"
width="70"
className="rounded-full border border-[#f3f3f32d] object-contain"
/>
)}
</div>
</div>
{index !== 0 ? (
@@ -1,63 +1,73 @@
import { THEME, TonConnectUIProvider } from "@tonconnect/ui-react"
import { type ThemeData } from "../Models/Theme";
/*
import { THEME, TonConnectUIProvider } from '@tonconnect/ui-react'
import { type ThemeData } from '../Models/Theme'
import type { PropsWithChildren } from 'react'
const TonConnectProvider = ({ children, basePath, themeData }: { children: JSX.Element | JSX.Element[], basePath: string, themeData: ThemeData }) => {
const TonConnectProvider: React.FC<{
basePath: string
themeData: ThemeData
} & PropsWithChildren> = ({
children,
basePath,
themeData
}) => {
const rgbToHex = (rgb: string) => {
const rgbArray = rgb.match(/\d+/g)
function componentToHex(c: number) {
var hex = c?.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
const rgbToHex = (rgb: string) => {
if (!rgbArray) return
const rgbArray = rgb.match(/\d+/g)
if (!rgbArray) return ''
return "#" + componentToHex(Number(rgbArray[0])) + componentToHex(Number(rgbArray[1])) + componentToHex(Number(rgbArray[2]));
const componentToHex = (c: number): string => {
var hex = c?.toString(16)
return hex.length == 1 ? '0' + hex : hex
}
return (
<TonConnectUIProvider
uiPreferences={
{
theme: THEME.DARK,
borderRadius: 's',
colorsSet: {
[THEME.DARK]: {
constant: {
black: '#000000',
white: '#f1f1f1f1',
},
connectButton: {
background: rgbToHex(themeData.primary?.[500]),
foreground: rgbToHex(themeData?.secondary?.[800] || ''),
},
accent: rgbToHex(themeData.primary?.[500]),
telegramButton: rgbToHex(themeData.primary?.[500]),
icon: {
primary: rgbToHex(themeData.primary?.[500]),
secondary: rgbToHex(themeData?.secondary?.text || ''),
tertiary: rgbToHex(themeData.secondary?.[400] || ''),
success: rgbToHex(themeData.primary?.[500]),
},
background: {
primary: rgbToHex(themeData.secondary?.[900] || ''),
secondary: rgbToHex(themeData.secondary?.[800] || ''),
segment: rgbToHex(themeData.secondary?.[200] || ''),
tint: rgbToHex(themeData.secondary?.[700] || ''),
qr: '#f1f1f1f1',
},
text: {
primary: rgbToHex(themeData.primary.text),
secondary: rgbToHex(themeData?.secondary?.text || ''),
}
}
}
}
return '#' + componentToHex(Number(rgbArray[0])) + componentToHex(Number(rgbArray[1])) + componentToHex(Number(rgbArray[2]))
}
return (
<TonConnectUIProvider
uiPreferences={{
theme: THEME.DARK,
borderRadius: 's',
colorsSet: {
[THEME.DARK]: {
constant: {
black: '#000000',
white: '#f1f1f1f1',
},
connectButton: {
background: rgbToHex(themeData.primary?.[500]),
foreground: rgbToHex(themeData?.secondary?.[800] || ''),
},
accent: rgbToHex(themeData.primary?.[500]),
telegramButton: rgbToHex(themeData.primary?.[500]),
icon: {
primary: rgbToHex(themeData.primary?.[500]),
secondary: rgbToHex(themeData?.secondary?.text || ''),
tertiary: rgbToHex(themeData.secondary?.[400] || ''),
success: rgbToHex(themeData.primary?.[500]),
},
background: {
primary: rgbToHex(themeData.secondary?.[900] || ''),
secondary: rgbToHex(themeData.secondary?.[800] || ''),
segment: rgbToHex(themeData.secondary?.[200] || ''),
tint: rgbToHex(themeData.secondary?.[700] || ''),
qr: '#f1f1f1f1',
},
text: {
primary: rgbToHex(themeData.primary.text),
secondary: rgbToHex(themeData?.secondary?.text || ''),
}
manifestUrl={`https://${process.env.NEXT_PUBLIC_VERCEL_URL}${basePath ? `/${basePath}` : ''}/tonconnect-manifest.json`}>
{children}
</TonConnectUIProvider>
)
}
}
}}
manifestUrl={`https://${process.env.NEXT_PUBLIC_VERCEL_URL}${basePath ? `/${basePath}` : ''}/tonconnect-manifest.json`}
>
{children}
</TonConnectUIProvider>
)
}
export default TonConnectProvider
export default TonConnectProvider
*/
+1 -1
View File
@@ -21,7 +21,7 @@ const Widget = ({
const canGoBackRef = useRef<boolean>(false)
const searchParams = useSearchParams()
const paramString = resolvePersistentQueryParams(searchParams)
const paramString = resolvePersistentQueryParams(searchParams).toString()
// https://stackoverflow.com/questions/71853839/how-to-check-if-userouter-can-use-router-back-in-nextjs-app
@@ -5,7 +5,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "../shadcn/popover";
import useWallet from "../../hooks/useWallet";
import { NetworkType } from "../../Models/CryptoNetwork";
import RainbowIcon from "../icons/Wallets/Rainbow";
import TON from "../icons/Wallets/TON";
//import TON from "../icons/Wallets/TON";
import {
Dialog,
DialogContent,
@@ -16,11 +16,11 @@ import {
import useWindowDimensions from "../../hooks/useWindowDimensions";
import MetaMaskIcon from "../icons/Wallets/MetaMask";
import WalletConnectIcon from "../icons/Wallets/WalletConnect";
import Braavos from "../icons/Wallets/Braavos";
import ArgentX from "../icons/Wallets/ArgentX";
import Argent from "../icons/Wallets/Argent";
import TonKeeper from "../icons/Wallets/TonKeeper";
import OpenMask from "../icons/Wallets/OpenMask";
//import Braavos from "../icons/Wallets/Braavos";
//import ArgentX from "../icons/Wallets/ArgentX";
//import Argent from "../icons/Wallets/Argent";
//import TonKeeper from "../icons/Wallets/TonKeeper";
//import OpenMask from "../icons/Wallets/OpenMask";
import Phantom from "../icons/Wallets/Phantom";
import Solflare from "../icons/Wallets/Solflare";
import CoinbaseIcon from "../icons/Wallets/Coinbase";
@@ -187,8 +187,8 @@ const ResolveConnectorIcon = ({
};
const KnownConnectors = {
Starknet: "starknet",
//Starknet: "starknet",
EVM: "evm",
TON: "ton",
//TON: "ton",
Solana: "solana",
};
+2 -2
View File
@@ -2,7 +2,7 @@ import { type Layer } from "../Models/Layer"
import useEVMBalance from "../lib/balances/evm/useEVMBalance"
import useLoopringBalance from "../lib/balances/loopring/useLoopringBalance"
import useOptimismBalance from "../lib/balances/evm/optimism/useOptimismBalance"
import useStarknetBalance from "../lib/balances/starknet/useStarknetBalance"
//import useStarknetBalance from "../lib/balances/starknet/useStarknetBalance"
import useZkSyncBalance from "../lib/balances/zksync/useZkSyncBalance"
import useSolanaBalance from "../lib/balances/solana/useSolanaBalance"
import { type BalanceProvider } from "../Models/Balance"
@@ -16,7 +16,7 @@ export default function useBalanceProvider() {
const BalanceProviders: BalanceProvider[] = [
useEVMBalance(),
useOptimismBalance(),
useStarknetBalance(),
//useStarknetBalance(),
useLoopringBalance(),
useZkSyncBalance(),
useSolanaBalance()
+2 -2
View File
@@ -4,7 +4,7 @@ import BridgeApiClient, { type SwapItem } from "../lib/BridgeApiClient";
import { type Wallet } from "../stores/walletStore";
// import useTON from "../lib/wallets/ton/useTON";
import useEVM from "../lib/wallets/evm/useEVM";
import useStarknet from "../lib/wallets/starknet/useStarknet";
//import useStarknet from "../lib/wallets/starknet/useStarknet";
import useImmutableX from "../lib/wallets/immutableX/useIMX";
import useSolana from "../lib/wallets/solana/useSolana";
@@ -23,7 +23,7 @@ function useWallet() {
const WalletProviders: WalletProvider[] = [
// useTON(),
useEVM(),
useStarknet(),
//useStarknet(),
useImmutableX(),
useSolana(),
];
@@ -1,3 +1,4 @@
/*
import KnownInternalNames from "../../knownIds"
import Erc20Abi from '../../abis/ERC20.json'
import formatAmount from "../../formatAmount";
@@ -119,4 +120,5 @@ export default function useStarknetBalance(): BalanceProvider {
name,
supportedNetworks
}
}
}
*/
@@ -1,3 +1,4 @@
/*
import { fromHex } from "viem";
import { type WalletProvider } from "../../../hooks/useWallet";
import { useWalletStore } from "../../../stores/walletStore"
@@ -74,4 +75,5 @@ export default function useStarknet(): WalletProvider {
withdrawalSupportedNetworks,
name
}
}
}
*/
+9 -7
View File
@@ -1,16 +1,17 @@
/*
import { useTonConnectUI, useTonWallet } from "@tonconnect/ui-react"
import { Address } from "@ton/core";
import KnownInternalNames from "../../knownIds";
import { type Wallet } from "../../../stores/walletStore";
import { type WalletProvider } from "../../../hooks/useWallet";
import TON from "../../../components/icons/Wallets/TON";
import { Address } from "@ton/core"
import KnownInternalNames from "../../knownIds"
import { type Wallet } from "@/stores/walletStore"
import { type WalletProvider } from "@/hooks/useWallet"
import TON from "@/components/icons/Wallets/TON"
function useTON(): WalletProvider {
const withdrawalSupportedNetworks = [KnownInternalNames.Networks.TONMainnet]
const autofillSupportedNetworks = withdrawalSupportedNetworks
const name = 'ton'
const wallet = useTonWallet();
const [tonConnectUI] = useTonConnectUI();
const wallet = useTonWallet()
const [tonConnectUI] = useTonConnectUI()
const getWallet = () => {
if (wallet) {
@@ -48,3 +49,4 @@ function useTON(): WalletProvider {
}
export default useTON
*/
+1
View File
@@ -56,6 +56,7 @@
"@hanzo/auth": "2.5.1",
"@hanzo/commerce": "7.3.4",
"@hanzo/ui": "4.0.4",
"next": "14.2.14",
"react-hook-form": "7.51.4",
"tailwindcss": "3.4.3",
"typescript": "5.6.3"
+23 -531
View File
File diff suppressed because it is too large Load Diff