Feature/mpb bridge widget

packages/good-design/src/apps/bridge/MicroBridge.tsx

@@ -141,10 +141,7 @@ export const MicroBridge = ({
     }
   }, [relayStatus, bridgeStatus, selfRelayStatus, onBridgeSuccess, onBridgeFailed]);
 
-  const reasonMinAmount =
-    reason === "minAmount"
-      ? " Minimum amount is " + Number(minimumAmount) / (sourceChain === "fuse" ? 1e2 : 1e18) + "G$"
-      : undefined;
+  const reasonMinAmount = reason === "minAmount" ? " Minimum amount is 1000G$" : undefined;
 
   const getActiveColor = useCallback(
     (chain: string) => {

packages/good-design/src/apps/bridge/mpbridge/AmountInput.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { HStack, Text, VStack } from "native-base";
+import { TokenInput } from "../../../core";
+import { CurrencyValue } from "@usedapp/core";
+
+interface AmountInputProps {
+  wei: string;
+  gdValue: CurrencyValue;
+  bridgeWeiAmount: string;
+  setBridgeAmount: (amount: string) => void;
+  minimumAmount: CurrencyValue;
+  isValid: boolean;
+  reason: string;
+  balance: CurrencyValue;
+}
+
+export const AmountInput: React.FC<AmountInputProps> = ({
+  wei,
+  gdValue,
+  bridgeWeiAmount,
+  setBridgeAmount,
+  minimumAmount,
+  isValid,
+  reason,
+  balance
+}) => {
+  return (
+    <VStack space={3}>
+      <HStack justifyContent="space-between" alignItems="center">
+        <Text fontFamily="subheading" fontSize="md" color="goodGrey.600" fontWeight="600">
+          Amount to send
+        </Text>
+        <Text color="goodGrey.500" fontSize="sm" fontWeight="400">
+          Balance: {balance.format()}
+        </Text>
+      </HStack>
+      <TokenInput
+        balanceWei={wei}
+        onChange={setBridgeAmount}
+        gdValue={gdValue}
+        minAmountWei={minimumAmount?.toString()}
+      />
+      {!isValid && bridgeWeiAmount && (
+        <Text color="red.500" fontSize="sm" fontWeight="500">
+          {reason === "minAmount" ? " Minimum amount is 1000 G$" : undefined}
+        </Text>
+      )}
+    </VStack>
+  );
+};

packages/good-design/src/apps/bridge/mpbridge/BridgeProviderSelector.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { HStack, Pressable, Text, VStack } from "native-base";
+import type { BridgeProvider } from "./types";
+
+interface BridgeProviderSelectorProps {
+  bridgeProvider: BridgeProvider;
+  onProviderChange: (provider: BridgeProvider) => void;
+}
+
+export const BridgeProviderSelector: React.FC<BridgeProviderSelectorProps> = ({ bridgeProvider, onProviderChange }) => {
+  return (
+    <VStack space={4}>
+      <Text fontFamily="heading" fontSize="xl" fontWeight="700" color="goodGrey.800">
+        Select Bridge Provider
+      </Text>
+      <HStack space={4}>
+        <Pressable
+          flex={1}
+          onPress={() => onProviderChange("axelar")}
+          bg={bridgeProvider === "axelar" ? "rgb(59, 130, 246)" : "goodGrey.100"}
+          borderRadius="lg"
+          padding={5}
+          alignItems="center"
+          borderWidth={bridgeProvider === "axelar" ? 2 : 1}
+          borderColor={bridgeProvider === "axelar" ? "rgb(59, 130, 246)" : "goodGrey.300"}
+        >
+          <Text color={bridgeProvider === "axelar" ? "white" : "goodGrey.700"} fontWeight="600" fontSize="lg">
+            Axelar
+          </Text>
+        </Pressable>
+        <Pressable
+          flex={1}
+          onPress={() => onProviderChange("layerzero")}
+          bg={bridgeProvider === "layerzero" ? "rgb(59, 130, 246)" : "goodGrey.100"}
+          borderRadius="lg"
+          padding={5}
+          alignItems="center"
+          borderWidth={bridgeProvider === "layerzero" ? 2 : 1}
+          borderColor={bridgeProvider === "layerzero" ? "rgb(59, 130, 246)" : "goodGrey.300"}
+        >
+          <Text color={bridgeProvider === "layerzero" ? "white" : "goodGrey.700"} fontWeight="600" fontSize="lg">
+            LayerZero
+          </Text>
+        </Pressable>
+      </HStack>
+    </VStack>
+  );
+};

packages/good-design/src/apps/bridge/mpbridge/BridgingStatusBanner.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Box, HStack, Spinner, Text } from "native-base";
+
+interface BridgingStatusBannerProps {
+  isBridging: boolean;
+  bridgingStatus: string;
+}
+
+export const BridgingStatusBanner: React.FC<BridgingStatusBannerProps> = ({ isBridging, bridgingStatus }) => {
+  if (!isBridging) return null;
+
+  return (
+    <Box borderRadius="lg" padding={4} backgroundColor="goodBlue.100" borderWidth="1" borderColor="goodBlue.300">
+      <HStack space={3} alignItems="center">
+        <Spinner size="sm" color="goodBlue.500" />
+        <Text color="goodBlue.700" fontSize="sm" fontWeight="500">
+          {bridgingStatus}
+        </Text>
+      </HStack>
+    </Box>
+  );
+};

packages/good-design/src/apps/bridge/mpbridge/ChainSelector.tsx

@@ -0,0 +1,207 @@
+import React, { memo, useMemo } from "react";
+import { Box, HStack, Pressable, ChevronDownIcon, Text, VStack } from "native-base";
+import { getChainIcon, getChainColor, getChainLabel, getValidTargetChains } from "./utils";
+
+// Style objects defined outside component for reusability and cleaner renders
+const chainContainerStyles = {
+  flex: 1,
+  bg: "white",
+  borderRadius: "lg",
+  padding: 2,
+  borderWidth: "1",
+  borderColor: "goodGrey.300",
+  position: "relative",
+  style: { overflow: "visible" }
+} as const;
+
+const chainIconStyles = {
+  borderRadius: "full",
+  width: "8",
+  height: "8",
+  alignItems: "center",
+  justifyContent: "center",
+  shadow: "sm"
+} as const;
+
+const chainPressableStyles = {
+  flex: 1,
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between"
+} as const;
+
+const dropdownStyles = {
+  position: "absolute",
+  top: "100%",
+  left: 0,
+  right: 0,
+  bg: "white",
+  borderRadius: "lg",
+  borderWidth: "1",
+  borderColor: "goodGrey.300",
+  shadow: "xl",
+  zIndex: 999999,
+  mt: 1,
+  minWidth: "200px",
+  maxWidth: "300px"
+} as const;
+
+const dropdownItemStyles = {
+  padding: 4,
+  borderBottomWidth: 1,
+  borderBottomColor: "goodGrey.200",
+  _pressed: { bg: "goodGrey.100" }
+} as const;
+
+const swapButtonStyles = {
+  bg: "goodGrey.200",
+  borderRadius: "full",
+  width: "8",
+  height: "8",
+  alignItems: "center",
+  justifyContent: "center",
+  shadow: "sm",
+  _pressed: { bg: "goodGrey.300" }
+} as const;
+
+interface ChainSelectorProps {
+  sourceChain: string;
+  targetChain: string;
+  showSourceDropdown: boolean;
+  showTargetDropdown: boolean;
+  bridgeFees: any;
+  bridgeProvider: string;
+  feesLoading: boolean;
+  onSourceChainSelect: (chain: string) => void;
+  onTargetChainSelect: (chain: string) => void;
+  onSwap: () => void;
+  onSourceDropdownToggle: () => void;
+  onTargetDropdownToggle: () => void;
+}
+
+export const ChainSelector: React.FC<ChainSelectorProps> = memo(
+  ({
+    sourceChain,
+    targetChain,
+    showSourceDropdown,
+    showTargetDropdown,
+    bridgeFees,
+    bridgeProvider,
+    feesLoading,
+    onSourceChainSelect,
+    onTargetChainSelect,
+    onSwap,
+    onSourceDropdownToggle,
+    onTargetDropdownToggle
+  }) => {
+    const availableChains = useMemo(() => ["fuse", "celo", "mainnet"], []);
+
+    const validTargetChains = useMemo(
+      () => getValidTargetChains(sourceChain, bridgeFees, bridgeProvider, feesLoading),
+      [sourceChain, bridgeFees, bridgeProvider, feesLoading]
+    );
+
+    return (
+      <HStack space={4} alignItems="center" zIndex={1000}>
+        {/* Source Chain */}
+        <VStack {...chainContainerStyles}>
+          <HStack space={3} alignItems="center">
+            <Box bg={getChainColor(sourceChain)} {...chainIconStyles}>
+              <Text color="white" fontSize="sm" fontWeight="bold">
+                {getChainIcon(sourceChain)}
+              </Text>
+            </Box>
+            <Pressable onPress={onSourceDropdownToggle} {...chainPressableStyles}>
+              <Text color="goodGrey.700" fontSize="md" fontWeight="600">
+                {getChainLabel(sourceChain)}
+              </Text>
+              <Box style={{ transform: [{ rotate: showSourceDropdown ? "180deg" : "0deg" }] }}>
+                <ChevronDownIcon size="sm" color="goodGrey.400" />
+              </Box>
+            </Pressable>
+          </HStack>
+
+          {/* Source Chain Dropdown */}
+          {showSourceDropdown && (
+            <Box {...dropdownStyles}>
+              {availableChains.map(chain => (
+                <Pressable
+                  key={chain}
+                  onPress={() => onSourceChainSelect(chain)}
+                  {...dropdownItemStyles}
+                  borderBottomWidth={chain === availableChains[availableChains.length - 1] ? 0 : 1}
+                >
+                  <HStack space={3} alignItems="center">
+                    <Box bg={getChainColor(chain)} {...chainIconStyles} width="6" height="6">
+                      <Text color="white" fontSize="xs" fontWeight="bold">
+                        {getChainIcon(chain)}
+                      </Text>
+                    </Box>
+                    <Text color="goodGrey.700" fontSize="md" fontWeight="500">
+                      {getChainLabel(chain)}
+                    </Text>
+                  </HStack>
+                </Pressable>
+              ))}
+            </Box>
+          )}
+        </VStack>
+
+        {/* Swap Arrow */}
+        <Pressable onPress={onSwap} {...swapButtonStyles}>
+          <Text fontSize="xl" color="goodGrey.600" fontWeight="bold">
+            ⇄
+          </Text>
+        </Pressable>
+
+        {/* Target Chain */}
+        <VStack {...chainContainerStyles}>
+          <HStack space={3} alignItems="center">
+            <Box bg={getChainColor(targetChain)} {...chainIconStyles}>
+              <Text color="white" fontSize="sm" fontWeight="bold">
+                {getChainIcon(targetChain)}
+              </Text>
+            </Box>
+            <Pressable onPress={onTargetDropdownToggle} {...chainPressableStyles}>
+              <Text color="goodGrey.700" fontSize="md" fontWeight="600">
+                {getChainLabel(targetChain)}
+              </Text>
+              <Box style={{ transform: [{ rotate: showTargetDropdown ? "180deg" : "0deg" }] }}>
+                <ChevronDownIcon size="sm" color="goodGrey.400" />
+              </Box>
+            </Pressable>
+          </HStack>
+
+          {/* Target Chain Dropdown */}
+          {showTargetDropdown && (
+            <Box {...dropdownStyles}>
+              {validTargetChains.map(chain => {
+                const isLastItem = chain === validTargetChains[validTargetChains.length - 1];
+
+                return (
+                  <Pressable
+                    key={chain}
+                    onPress={() => onTargetChainSelect(chain)}
+                    {...dropdownItemStyles}
+                    borderBottomWidth={isLastItem ? 0 : 1}
+                  >
+                    <HStack space={3} alignItems="center">
+                      <Box bg={getChainColor(chain)} {...chainIconStyles} width="6" height="6">
+                        <Text color="white" fontSize="xs" fontWeight="bold">
+                          {getChainIcon(chain)}
+                        </Text>
+                      </Box>
+                      <Text color="goodGrey.700" fontSize="md" fontWeight="500">
+                        {getChainLabel(chain)}
+                      </Text>
+                    </HStack>
+                  </Pressable>
+                );
+              })}
+            </Box>
+          )}
+        </VStack>
+      </HStack>
+    );
+  }
+);

packages/good-design/src/apps/bridge/mpbridge/ExpectedOutput.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { HStack, Text, VStack, Input } from "native-base";
+import { CurrencyValue } from "@usedapp/core";
+
+interface ExpectedOutputProps {
+  expectedToReceive: CurrencyValue;
+  targetChain: string;
+  balance: CurrencyValue;
+}
+
+export const ExpectedOutput: React.FC<ExpectedOutputProps> = ({ expectedToReceive, targetChain, balance }) => {
+  return (
+    <VStack space={3}>
+      <HStack justifyContent="space-between" alignItems="center">
+        <Text fontFamily="subheading" fontSize="md" color="goodGrey.600" fontWeight="600">
+          You will receive on {targetChain.toUpperCase()}
+        </Text>
+        <Text color="goodGrey.500" fontSize="sm" fontWeight="400">
+          Balance: {balance.format()}
+        </Text>
+      </HStack>
+      <Input
+        value={expectedToReceive ? expectedToReceive.format() : "0"}
+        isReadOnly
+        borderRadius="lg"
+        borderColor="goodGrey.300"
+        bg="goodGrey.50"
+        fontSize="md"
+        padding={2}
+        fontWeight="500"
+      />
+    </VStack>
+  );
+};