fix(docker): runtime API_URL for SSR in Docker containers

NEXT_PUBLIC_* vars are baked at build time and can't change at runtime.
Server-side rendering (getInitialProps, getServerSideProps, rewrites)
now reads process.env.API_URL at runtime, falling back to the baked
NEXT_PUBLIC_API_URL for client-side code.

This allows the Docker image to connect to trade-api via Docker DNS
while the browser still uses the public URL.

Co-Authored-By: Charon <charon@lethean.io>

.dockerignore

@@ -0,0 +1,7 @@
+node_modules
+.next
+.env
+.env.local
+.env.development
+.env.production
+.git

next.config.js

@@ -42,10 +42,12 @@ const nextConfig = {
 		return config;
 	},
 	async rewrites() {
+		const apiUrl =
+			process.env.API_URL || process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3336';
 		return [
 			{
 				source: '/api/:path*',
-				destination: `${process.env.NEXT_PUBLIC_API_URL}/api/:path*`,
+				destination: `${apiUrl}/api/:path*`,
 			},
 		];
 	},

src/components/dex/MatrixConnectionBadge/index.tsx

@@ -49,7 +49,7 @@ function MatrixConnectionBadge({
 				ref={anchorRef}
 				onClick={(e) => {
 					e.preventDefault();
-					window.open(`https://matrix.to/#/@${userAlias}:lethean.org`);
+					window.open(`https://matrix.to/#/@${userAlias}:lethean.io`);
 				}}
 				onMouseEnter={() => {
 					setOpen(true);

src/constants/index.ts

@@ -1,7 +1,7 @@
 import PeriodState from '@/interfaces/states/pages/dex/trading/InputPanelItem/PeriodState';
 import SelectValue from '@/interfaces/states/pages/dex/trading/InputPanelItem/SelectValue';
 
-export const API_URL = process.env.NEXT_PUBLIC_API_URL;
+export const API_URL = process.env.NEXT_PUBLIC_API_URL || process.env.API_URL;
 
 export const periods: PeriodState[] = [
 	// { name: '1s', code: '1sec' },

src/hook/useTradeInit.ts

@@ -28,10 +28,10 @@ const useTradeInit = ({ pairData, pairStats }: useTradeInitParams) => {
 	const firstAssetId = pairData ? pairData.first_currency?.asset_id : undefined;
 	const secondAssetId = pairData ? pairData.second_currency?.asset_id : undefined;
 	const firstAssetLink = firstAssetId
-		? `https://explorer.lethean.org/assets?asset_id=${encodeURIComponent(firstAssetId)}`
+		? `https://explorer.lethean.io/assets?asset_id=${encodeURIComponent(firstAssetId)}`
 		: undefined;
 	const secondAssetLink = secondAssetId
-		? `https://explorer.lethean.org/assets?asset_id=${encodeURIComponent(secondAssetId)}`
+		? `https://explorer.lethean.io/assets?asset_id=${encodeURIComponent(secondAssetId)}`
 		: undefined;
 
 	const secondAssetUsdPrice = state.assetsRates.get(secondAssetId || '');

src/pages/_app.tsx

@@ -65,7 +65,7 @@ function App(data: AppProps & { config?: GetConfigResData }) {
 				<link rel="icon" href="/favicon.ico" />
 
 				<meta property="og:type" content="website" />
-				<meta property="og:url" content="https://trade.lethean.org/" />
+				<meta property="og:url" content="https://trade.lethean.io/" />
 				<meta property="og:title" content="Lethean Trade" />
 				<meta
 					property="og:description"
@@ -74,7 +74,7 @@ function App(data: AppProps & { config?: GetConfigResData }) {
 				<meta property="og:image" content="social-banner.png" />
 
 				<meta property="twitter:card" content="summary_large_image" />
-				<meta property="twitter:url" content="https://trade.lethean.org/" />
+				<meta property="twitter:url" content="https://trade.lethean.io/" />
 				<meta property="twitter:title" content="Lethean Trade" />
 				<meta
 					property="twitter:description"
@@ -97,7 +97,9 @@ App.getInitialProps = async (context: AppContext) => {
 	try {
 		const pageProps = await NextApp.getInitialProps(context);
 
-		const configRes = await axios.get(`${API_URL}/api/config`, {
+		const serverApiUrl =
+			typeof window === 'undefined' ? process.env.API_URL || API_URL : API_URL;
+		const configRes = await axios.get(`${serverApiUrl}/api/config`, {
 			headers: {
 				'Content-Type': 'application/json',
 			},

src/pages/dex/trading/find-pair/index.tsx

@@ -14,7 +14,8 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
 	}
 
 	try {
-		const idFound = await findPairID(first as string, second as string, API_URL);
+		const serverApiUrl = process.env.API_URL || API_URL;
+		const idFound = await findPairID(first as string, second as string, serverApiUrl);
 
 		console.log('ID found:', idFound);
 

src/utils/methods.ts

@@ -31,7 +31,7 @@ import { CancelAllData } from '@/interfaces/fetch-data/cancel-all-orders/CancelA
 import CancelAllRes from '@/interfaces/responses/orders/CancelAllRes';
 
 const isServer = typeof window === 'undefined';
-const baseUrl = isServer ? API_URL : '';
+const baseUrl = isServer ? process.env.API_URL || API_URL || '' : '';
 
 export async function getUser(): Promise<ErrorRes | GetUserRes> {
 	return axios
@@ -402,14 +402,14 @@ export async function getUserPendings() {
 export async function getLetheanPrice() {
 	return axios
 		.get(
-			'https://explorer.lethean.org/api/price?asset_id=d6329b5b1f7c0805b5c345f4957554002a2f557845f64d7645dae0e051a6498a',
+			'https://explorer.lethean.io/api/price?asset_id=d6329b5b1f7c0805b5c345f4957554002a2f557845f64d7645dae0e051a6498a',
 		)
 		.then((res) => res.data);
 }
 
 export async function getMatrixAddresses(addresses: string[]) {
 	try {
-		const { data } = await axios.post('https://messenger.lethean.org/api/get-addresses', {
+		const { data } = await axios.post('https://messenger.lethean.io/api/get-addresses', {
 			addresses,
 		});