idea.ts

type PayloadType = {

};

type EstimateFeeType = {};

class ApiCalls {
  async estimateFee(chain: Chain, laneId: LaneId, payload: PayloadType): EstimateFeeType {
    const payloadType = createType(chain, "OutboundPayload", payload);

    return await stateCall(estimateFeeMethod, ...);
  }
}


function Component() {
  const apiCalls: ApiCalls = useApiCalls();

  const { isFeeCalculating, setFeeCalculating} = useState(false);
  const { fee, setFee } = useState(null);
  const { feeError, setFeeError } = useState(null);

  useEffect(() => {
    setFeeCalculating(true);
    setFee(null);

    try {
      const fee = await apiCalls.estimateFee(chain, laneId, payload)
      setFee(fee);
      setFeeCalculating(false);
    } catch (e) {
      setFeeCalculating(false);
      setFeeError("error");
    }
  });
}

import {useEstimateFee} from './hooks/api/useEstimateFee';

function Component() {
    const { fee: number | null, feeError: string|null, isFeeCalculating: bool, recalculateFee: () => void } = useEstimateFee(laneId, ...);



    fee==null
    isFeeCalculating == true

    // 
    useEffect(() => {
      recalculateFee();
    });
}

The following can really make all the above TLDR and show what I mean in idea.ts and project I built.
I am approaching it more like this:

• Layer 1: API Layer ----------------------> PolkadotJS API
• Layer 2: Bridges API specific Layer -----> Bridges API that uses specific needed things from polkadotJS API (not all API calls from polkadot JS are needed
• Layer 3: Bridges Simple/Specific Business logic ----------> Functions/hooks that are using the Bridges API for 1 VERY specific reusable action (get the chain, estimate fee etc etc)
• Layer 4: Bridges Advanced/Complicated Logic ---------> Functions/hooks that can use any of Layers 2, 3 to make complicated logic (send a transaction and estimate fee and do something else at the same time)
• Layer 5: Bridges or other Bridges-related UI ------> UI components that can use any of Layers 2 - 4, to re-create or reuse Bridges functionalities (simple or complicated)

Layers 2 -4 is the "library" we need to build. Layer 5 should be the actual Bridges UI. Layer 2-4 should ALWAYS work with specific version of Layer 1