refactor(react): workarounds to allow react native projects to import

react/src/components/Loaders/InlineLoadingBar.tsx

@@ -1,16 +1,36 @@
-import './inlineLoading.css';
+import { useEffect, useState } from 'react';
 
 export const InlineLoadingBar = () => {
+	const [width, setWidth] = useState(0);
+
+	/**
+	 * This is a simple animation that will animate the width of the loading bar.
+	 * It will animate from 0 to 100% in 1 second.
+	 * We avoid using CSS animations because they are not supported in React Native.
+	 */
+	useEffect(() => {
+		let animationFrame: number;
+		let startTime: number;
+
+		const animate = (timestamp: number) => {
+			if (!startTime) startTime = timestamp;
+			const progress = (timestamp - startTime) % 1000; // 1000ms = 1 second
+			const newWidth = (progress / 1000) * 100; // Convert to percentage
+			setWidth(newWidth);
+			animationFrame = requestAnimationFrame(animate);
+		};
+
+		animationFrame = requestAnimationFrame(animate);
+		return () => cancelAnimationFrame(animationFrame);
+	}, []);
+
 	return (
 		<div className="block w-[40px] h-[10px] rounded-[5px] border-darkBlue-80 border-solid p-[1px] bg-transparent">
 			<div
 				className="bg-static-emphasized h-full rounded-[5px]"
 				style={{
-					animationName: `progress-loading`,
-					animationDuration: '1000ms',
-					animationTimingFunction: 'ease-in-out',
-					animationPlayState: 'running',
-					animationIterationCount: 'infinite',
+					width: `${width}%`,
+					transition: 'width 16ms linear',
 				}}
 			/>
 		</div>

react/src/constants/wallets.ts

@@ -1,24 +1,46 @@
-import {
-	CloverWalletAdapter,
-	Coin98WalletAdapter,
-	CoinbaseWalletAdapter,
-	MathWalletAdapter,
-	PhantomWalletAdapter,
-	SolflareWalletAdapter,
-} from '@solana/wallet-adapter-wallets';
-
 /**
  * A list of wallets to display in the wallet connection list.
  *
  * On SAGA the mobile wallet adapter will be added to the list automatically.
  *
  * The Wallet Provider should also be smart enough to add any other detected wallets to the list too.
  */
-export const DRIFT_WALLET_PROVIDERS = [
-	new PhantomWalletAdapter(),
-	new SolflareWalletAdapter(),
-	new CoinbaseWalletAdapter(),
-	new MathWalletAdapter(),
-	new Coin98WalletAdapter(),
-	new CloverWalletAdapter(),
-];
+export const DRIFT_WALLET_PROVIDERS = async () => {
+	const [
+		{ PhantomWalletAdapter },
+		{ SolflareWalletAdapter },
+		{ CoinbaseWalletAdapter },
+		{ MathWalletAdapter },
+		{ Coin98WalletAdapter },
+		{ CloverWalletAdapter },
+	] = await Promise.all([
+		// wallet adapters are dynamically imported to prevent mobile from importing it statically, where it is not supported
+		import('@solana/wallet-adapter-wallets').then((m) => ({
+			PhantomWalletAdapter: m.PhantomWalletAdapter,
+		})),
+		import('@solana/wallet-adapter-wallets').then((m) => ({
+			SolflareWalletAdapter: m.SolflareWalletAdapter,
+		})),
+		import('@solana/wallet-adapter-wallets').then((m) => ({
+			CoinbaseWalletAdapter: m.CoinbaseWalletAdapter,
+		})),
+		import('@solana/wallet-adapter-wallets').then((m) => ({
+			MathWalletAdapter: m.MathWalletAdapter,
+		})),
+		import('@solana/wallet-adapter-wallets').then((m) => ({
+			Coin98WalletAdapter: m.Coin98WalletAdapter,
+		})),
+		import('@solana/wallet-adapter-wallets').then((m) => ({
+			CloverWalletAdapter: m.CloverWalletAdapter,
+		})),
+	]);
+
+	return [
+		new PhantomWalletAdapter(),
+		new SolflareWalletAdapter(),
+		new CoinbaseWalletAdapter(),
+		new MathWalletAdapter(),
+		new Coin98WalletAdapter(),
+		new CloverWalletAdapter(),
+	];
+};