make transfer state a context

src/components/Transfer/contexts/transferState.tsx

@@ -0,0 +1,116 @@
+import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { ChainType, AssetType, RegionMetadata, RegionLocation } from '@/models';
+import { useRegions } from '@/contexts/regions';
+import { useCoretimeApi, useRelayApi, useRegionXApi } from '@/contexts/apis';
+import { ApiPromise } from '@polkadot/api';
+import { ApiState } from '@/contexts/apis/types';
+
+interface TransferState {
+  originChain: ChainType;
+  setOriginChain: (chain: ChainType) => void;
+  destinationChain: ChainType;
+  setDestinationChain: (chain: ChainType) => void;
+  selectedRegion: RegionMetadata | null;
+  setSelectedRegion: (region: RegionMetadata | null) => void;
+  filteredRegions: RegionMetadata[];
+  asset: AssetType;
+  setAsset: (asset: AssetType) => void;
+  symbol: string;
+  coretimeApi: ApiPromise | null;
+  coretimeApiState: ApiState;
+  regionXApi: ApiPromise | null;
+  regionxApiState: ApiState;
+  relayApi: ApiPromise | null;
+  relayApiState: ApiState;
+  fetchRegions: () => void;
+}
+
+const defaultTasksData: TransferState = {
+  originChain: ChainType.NONE,
+  setOriginChain: () => { },
+  destinationChain: ChainType.NONE,
+  setDestinationChain: () => { },
+  selectedRegion: null,
+  setSelectedRegion: () => { },
+  filteredRegions: [],
+  asset: AssetType.TOKEN,
+  setAsset: () => { },
+  symbol: '',
+  coretimeApi: null,
+  coretimeApiState: ApiState.DISCONNECTED,
+  regionXApi: null,
+  regionxApiState: ApiState.DISCONNECTED,
+  relayApi: null,
+  relayApiState: ApiState.DISCONNECTED,
+  fetchRegions: () => { },
+};
+
+const TransferStateContext = createContext<TransferState>(defaultTasksData);
+
+export const TransferStateProvider = ({ children }: { children: ReactNode }) => {
+  const { regions, fetchRegions } = useRegions();
+
+  const {
+    state: { api: coretimeApi, apiState: coretimeApiState, symbol },
+  } = useCoretimeApi();
+  const {
+    state: { api: regionXApi, apiState: regionxApiState },
+  } = useRegionXApi();
+  const {
+    state: { api: relayApi, apiState: relayApiState },
+  } = useRelayApi();
+
+  const [originChain, setOriginChain] = useState<ChainType>(ChainType.RELAY);
+  const [destinationChain, setDestinationChain] = useState<ChainType>(
+    ChainType.CORETIME
+  );
+  const [selectedRegion, setSelectedRegion] = useState<RegionMetadata | null>(
+    null
+  );
+  const [filteredRegions, setFilteredRegions] = useState<Array<RegionMetadata>>(
+    []
+  );
+  const [asset, setAsset] = useState<AssetType>(AssetType.TOKEN);
+
+  useEffect(() => {
+    if (originChain === ChainType.CORETIME) {
+      setFilteredRegions(
+        regions.filter((r) => r.location === RegionLocation.CORETIME_CHAIN)
+      );
+    } else if (originChain === ChainType.RELAY) {
+      setFilteredRegions(
+        regions.filter((r) => r.location === RegionLocation.REGIONX_CHAIN)
+      );
+    } else {
+      setFilteredRegions([]);
+    }
+  }, [originChain, regions]);
+
+  return (
+    <TransferStateContext.Provider
+      value={{
+        originChain,
+        setOriginChain,
+        destinationChain,
+        setDestinationChain,
+        selectedRegion,
+        setSelectedRegion,
+        filteredRegions,
+        asset,
+        setAsset,
+        symbol,
+        coretimeApi,
+        coretimeApiState,
+        regionXApi,
+        regionxApiState,
+        relayApi,
+        relayApiState,
+        fetchRegions,
+      }}
+    >
+      {children}
+    </TransferStateContext.Provider>
+  );
+};
+
+export const useTransferState = () => useContext(TransferStateContext);

src/components/Transfer/hooks/useTransferHandlers.ts

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { ApiPromise, Keyring } from '@polkadot/api';
 import { ChainType, AssetType, CORETIME_DECIMALS } from '@/models';
 import { useToast } from '@/contexts/toast';
-import { useTransferState } from './useTransferState';
+import { useTransferState } from '../contexts/transferState';
 import {
   coretimeFromRegionXTransfer,
   coretimeToRegionXTransfer,
@@ -31,9 +31,8 @@ export const useTransferHandlers = () => {
     coretimeApiState,
     regionxApiState,
     relayApiState,
-    setAsset,
-    setOriginChain,
   } = useTransferState();
+  console.log(originChain);
 
   const [working, setWorking] = useState(false);
   const [newOwner, setNewOwner] = useState('');
@@ -60,11 +59,6 @@ export const useTransferHandlers = () => {
     },
   };
 
-  const handleOriginChange = (newOrigin: ChainType) => {
-    setOriginChain(newOrigin);
-    if (newOrigin === ChainType.RELAY) setAsset(AssetType.TOKEN);
-  };
-
   const handleTransfer = async () => {
     if (!newOwner) {
       toastError('Recipient must be selected');
@@ -225,6 +219,5 @@ export const useTransferHandlers = () => {
     transferAmount,
     setTransferAmount,
     handleTransfer,
-    handleOriginChange,
   };
 };

src/components/Transfer/transferActions.tsx

@@ -4,7 +4,7 @@ import { AddressInput } from '@/components/Elements/Inputs/AddressInput';
 import { AmountInput } from '@/components/Elements/Inputs/AmountInput';
 import { ProgressButton } from '@/components/Elements/Buttons/ProgressButton';
 import { useTransferHandlers } from './hooks/useTransferHandlers';
-import { useTransferState } from './hooks/useTransferState';
+import { useTransferState } from './contexts/transferState';
 import { useRouter } from 'next/router';
 import theme from '@/utils/muiTheme';
 import { AssetType, ChainType } from '@/models';
@@ -28,6 +28,7 @@ const TransferActions = () => {
 
   return (
     <Box width='60%' margin='0.5rem auto'>
+      <p>{originChain}</p>
       <Stack margin='0.5rem 0' direction='column' gap={0.5} alignItems='center'>
         <ArrowDownward />
       </Stack>

src/components/Transfer/transferForm.tsx

@@ -2,7 +2,7 @@ import { Box, Paper, Stack, Typography } from '@mui/material';
 import { ChainSelector } from '@/components/Elements/Selectors/ChainSelector';
 import AssetSelector from '@/components/Elements/Selectors/AssetSelector';
 import { RegionSelector } from '@/components/Elements/Selectors/RegionSelector';
-import { useTransferState } from './hooks/useTransferState';
+import { useTransferState } from './contexts/transferState';
 import { AssetType, ChainType } from '@/models';
 import theme from '@/utils/muiTheme';
 

src/components/Transfer/transferPage.tsx

@@ -2,13 +2,16 @@ import { Box } from '@mui/material';
 import TransferHeader from './transferHeader';
 import TransferForm from './transferForm';
 import TransferActions from './transferActions';
+import { TransferStateProvider } from './contexts/transferState';
 
 const TransferPage = () => {
   return (
     <Box sx={{ maxHeight: 'calc(100% - 2rem)' }}>
-      <TransferHeader />
-      <TransferForm />
-      <TransferActions />
+      <TransferStateProvider>
+        <TransferHeader />
+        <TransferForm />
+        <TransferActions />
+      </TransferStateProvider>
     </Box>
   );
 };