feat: update default rpc

Author: jonasXchen

anchor-counter/app/src/App.tsx

@@ -44,6 +44,7 @@ const App: React.FC = () => {
         return params.get('mode') === 'private';
     });
     const [isInitializingEr, setIsInitializingEr] = useState<boolean>(false);
+    const [isLoading, setIsLoading] = useState<boolean>(true);
     const counterProgramClient = useRef<Program | null>(null);
     const counterSubscriptionId = useRef<number | null>(null);
     const ephemeralCounterSubscriptionId = useRef<number | null>(null);
@@ -132,6 +133,7 @@ const App: React.FC = () => {
             setCounter(0);
             setEphemeralCounter(0);
             setIsDelegated(false);
+            setIsLoading(true);
         };
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isPrivate]);
@@ -154,6 +156,7 @@ const App: React.FC = () => {
                     setIsDelegated(!accountInfo.owner.equals(COUNTER_PROGRAM));
                     await subscribeToCounter();
                 }
+                setIsLoading(false);
             }
 
             // 2. ER connection (skip if already initialized or program client missing)
@@ -462,6 +465,7 @@ const App: React.FC = () => {
                     ind={Number(0)}
                     updateSquares={(index: string | number) => updateCounter(Number(index))}
                     clsName={isDelegated ? '' : counter.toString()}
+                    loading={isLoading}
                 />
                 <Square
                     key="1"
@@ -474,6 +478,7 @@ const App: React.FC = () => {
                             <div className="placeholder-hint">click to count</div>
                         </>
                     ) : undefined}
+                    loading={isLoading}
                 />
             </div>
 

anchor-counter/app/src/components/Square.tsx

@@ -7,23 +7,32 @@ type SquareProps = {
     updateSquares?: (index: number | string) => void;
     clsName?: string;
     placeholder?: React.ReactNode;
+    loading?: boolean;
 };
 
-const Square: React.FC<SquareProps> = ({ ind, updateSquares, clsName, placeholder }) => {
+const Square: React.FC<SquareProps> = ({ ind, updateSquares, clsName, placeholder, loading }) => {
     const handleClick = () => {
+        if (loading) return;
         if (updateSquares && ind !== undefined) {
             updateSquares(ind);
         }
     };
-    const showPlaceholder = !clsName && !!placeholder;
+    const showPlaceholder = !loading && !clsName && !!placeholder;
+    const classes = [
+        'square',
+        showPlaceholder ? 'square-placeholder' : '',
+        loading ? 'square-loading' : '',
+    ].filter(Boolean).join(' ');
     return (
         <motion.div
             initial={{ scale: 0 }}
             animate={{ scale: 1 }}
-            className={`square${showPlaceholder ? ' square-placeholder' : ''}`}
+            className={classes}
             onClick={handleClick}
         >
-            {clsName ? (
+            {loading ? (
+                <div className="square-spinner" aria-label="loading" />
+            ) : clsName ? (
                 <motion.span
                     initial={{ scale: 0 }}
                     animate={{ scale: 1 }}

anchor-counter/app/src/components/Wallet.tsx

@@ -25,7 +25,7 @@ export class SimpleProvider implements Provider {
 }
 
 export const Wallet: FC<WalletProps> = ({ app }) => {
-    const endpoint = process.env.REACT_APP_PROVIDER_ENDPOINT || "https://rpc.magicblock.app/devnet"
+    const endpoint = process.env.REACT_APP_PROVIDER_ENDPOINT || "https://api.devnet.solana.com"
 
     const wallets = useMemo(() => [
         new PhantomWalletAdapter(),

anchor-counter/app/src/index.css

@@ -87,6 +87,19 @@ body {
     transform: scale(1.03);
 }
 
+.square.square-loading {
+    cursor: default;
+}
+
+.square .square-spinner {
+    width: 28px;
+    height: 28px;
+    border: 3px solid rgba(238, 238, 238, 0.15);
+    border-radius: 50%;
+    border-left-color: rgba(238, 238, 238, 0.7);
+    animation: spin 1s linear infinite;
+}
+
 .square .placeholder {
     display: flex;
     flex-direction: column;