Boltcard Wallet Mode - B2B Payment (Boltcard2Boltcard)

package.json

@@ -23,6 +23,7 @@
     "@fortawesome/react-fontawesome": "0.2.0",
     "@fortawesome/react-native-fontawesome": "0.3.0",
     "@os-team/i18next-react-native-language-detector": "1.0.29",
+    "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native-clipboard/clipboard": "1.13.2",
     "@react-native-community/checkbox": "0.5.16",
     "@react-native-picker/picker": "2.6.1",

src/App.tsx

@@ -1,6 +1,6 @@
 import { Routes, Route } from "@components/Router";
 import { StatusBar } from "@components";
-import { Home, QRScanner, Invoice } from "@screens";
+import { Home, QRScanner, Invoice, Wallet, Decoder } from "@screens";
 import { useBackHandler, useDeepLink, useSplashScreen } from "@hooks";
 
 const App = () => {
@@ -19,6 +19,8 @@ const App = () => {
         <Route path="/" element={<Home />} />
         <Route path="qr-scanner" element={<QRScanner />} />
         <Route path="invoice" element={<Invoice />} />
+        <Route path="wallet" element={<Wallet />} />
+        <Route path="decoder" element={<Decoder />} />
       </Routes>
     </>
   );

src/assets/translations/en.json

@@ -32,15 +32,26 @@
       "scanInvoice": "Scan invoice",
       "nfcNotSupported": "NFC not supported",
       "moreAboutBoltCard": "More about BoltCard",
+      "defaultCurrencyLabel": "Default currency",
       "builtBy": "Built by",
-      "foundInvoiceClipboard": "Tap to read invoice from your clipboard"
+      "walletMode": "Scan Bolt Card",
+      "foundInvoiceClipboard": "Tap to read invoice from your clipboard",
+      "foundLnAddrClipboard": "Tap to load LN Address from your clipboard",
+      "foundLnurlClipboard": "Tap to load LNURL from your clipboard"
     },
     "invoice": {
-      "tapYourBoltCard": "Tap your Bolt Card",
+      "tapYourBoltCard": "Tap your Bolt Card to pay",
+      "scanInvoice": "or scan invoice",
+      "scanInvoiceHint": "Scanning the invoice with another device will not be confirmed here.",
       "network": "Network",
+      "lightning": "Lightning",
+      "lightningTopup": "Lightning Top-Up",
+      "onchain": "Onchain",
       "label": "Label",
       "message": "Message",
       "invoiceAmount": "Invoice amount",
+      "withdrawAmount": "Top-Up amount",
+      "fiatAmount": "Fiat amount",
       "fees": "Fees",
       "requestSwap": "Request swap",
       "nextBatch": "Next batch",
@@ -50,8 +61,41 @@
       "scheduleForNextBatch": "Schedule for next batch",
       "startScanning": "Start scanning",
       "payingInvoice": "Paying invoice",
+      "topupCard": "Tap your Bold Card to receive",
       "paid": "Paid",
-      "returnToHome": "Return to Home"
+      "received": "Received",
+      "returnToHome": "Return to Home",
+      "copiedToClipboard": "Copied Invoice to Clipboard",
+      "errors": {
+        "noAmountInvoice": "Lightning invoice has no amount"
+      }
+    },
+    "wallet": {
+      "invoiceTitle": "Request invoice",
+      "withdrawTitle": "Withdraw",
+      "lnAddressTitle": "Pay to LN Address",
+      "btcAddressTitle": "Pay to BTC Address",
+      "send": "Send",
+      "receive": "Receive",
+      "tapYourBoltCard": "Tap your Bolt Card",
+      "loadingWallet": "Loading wallet",
+      "notValid": "Amount not valid",
+      "min": "Min",
+      "max": "Max",
+      "pinLimit": "PIN Limit"
+    },
+    "decoder": {
+      "showInfo": "Show card limits",
+      "hideInfo": "Hide card limits",
+      "lnAddressTitle": "Pay to LN Address",
+      "btcAddressTitle": "Pay to BTC Address",
+      "send": "Send",
+      "receive": "Receive",
+      "tapYourBoltCard": "Tap your Bolt Card",
+      "loadingWallet": "Loading wallet",
+      "min": "Min",
+      "max": "Max",
+      "pinLimit": "PIN Limit"
     }
   },
   "errors": {

src/components/BaseField/BaseField.tsx

@@ -98,7 +98,7 @@ export const BaseField = <T extends FieldProps>({
         />
       )}
       {typeof value === "string" && (
-        <S.ValueText numberOfLines={2}>{value}</S.ValueText>
+        <S.ValueText centered={true} numberOfLines={2}>{value}</S.ValueText>
       )}
       {left && (
         <S.BadgeContainer>

src/components/BaseField/styled.ts

@@ -25,19 +25,16 @@ export const BaseFieldContainer = styled(View)<{
       border-radius: ${theme.borderRadius}px;
   `}
   position: relative;
-  width: 100%;
+  width: fit-content;
   flex-direction: row;
 `;
 
-export const ValueText = styled(Text)`
-  text-align-vertical: center;
-  padding-top: 8px;
-  align-items: center;
-  display: flex;
-  flex: 1;
-  height: 100%;
-  left: ${HORIZONTAL_PADDING + DEFAULT_LEFT}px;
-  right: ${HORIZONTAL_PADDING + DEFAULT_LEFT}px;
+export const ValueText = styled(Text)<{
+  paddingTop?: number
+}>`
+  width: fit-content;
+  padding-left: ${DEFAULT_LEFT + HORIZONTAL_PADDING}px;
+  padding-right: ${DEFAULT_LEFT + HORIZONTAL_PADDING}px;
   font-family: Poppins-Medium;
   background-color: transparent;
   font-size: 16px;

src/components/Button/Button.tsx

@@ -77,6 +77,8 @@ export const Button = ({
         return 36;
       case "large":
         return 58;
+      case "smallCircle":
+        return 40;
       case "circle":
         return 80;
     }
@@ -99,7 +101,7 @@ export const Button = ({
       size={size}
       primaryColor={primaryColor}
       disabled={disabled || isLoading}
-      isRound={(!!icon && !title) || size === "circle"}
+      isRound={(!!icon && !title) || size === "circle" || size === "smallCircle"}
       android_ripple={{
         color: "rgba(0, 0, 0, 0.2)",
         foreground: true
@@ -114,7 +116,7 @@ export const Button = ({
       )}
       {title && (
         <S.ButtonText
-          numberOfLines={size !== "circle" ? 1 : undefined}
+          numberOfLines={size !== "circle" && size !== "smallCircle" ? 1 : undefined}
           weight={700}
           buttonSize={size}
           color={!isLoading ? secondaryColor : "transparent"}

src/components/Button/styled.ts

@@ -4,7 +4,7 @@ import { platform } from "@config";
 import styled from "styled-components";
 
 type Mode = "normal" | "outline";
-type Size = "small" | "medium" | "large" | "circle";
+type Size = "small" | "medium" | "large" | "circle" | "smallCircle";
 
 const getPadding = (size: Size) => {
   switch (size) {
@@ -14,6 +14,7 @@ const getPadding = (size: Size) => {
       return 18;
     case "large":
       return 18;
+    case "smallCircle":
     case "circle":
       return 0;
   }
@@ -45,6 +46,8 @@ export const Button = styled(Pressable)<{
           return 48;
         case "large":
           return 74;
+        case "smallCircle":
+          return 140;
         case "circle":
           return 280;
         default:
@@ -82,7 +85,7 @@ export const Button = styled(Pressable)<{
       }
       ${disabled ? "opacity: 1;" : "cursor: pointer;"}
       ${getShadow(
-        size === "circle" ? { level: 8, shadowColor: primaryColor } : undefined
+        size === "circle" || size === "smallCircle" ? { level: 8, shadowColor: primaryColor } : undefined
       )}
     `;
   }}
@@ -107,6 +110,8 @@ const getIconSize = (size: Size) => {
       return 22;
     case "large":
       return 22;
+    case "smallCircle":
+      return 34;
     case "circle":
       return 68;
   }
@@ -135,7 +140,7 @@ export const ButtonText = styled(Text).attrs(
   ({ buttonSize }: ButtonTextProps) => {
     return {
       h3: buttonSize === "circle",
-      h4: buttonSize === "medium" || buttonSize === "large",
+      h4: buttonSize === "medium" || buttonSize === "large" || buttonSize === "smallCircle",
       h5: buttonSize === "small"
     };
   }
@@ -147,15 +152,15 @@ export const ButtonText = styled(Text).attrs(
 
     return `
       margin-left: ${hasIcon ? TEXT_MARGIN : 0}px;
-      margin-${buttonSize !== "circle" ? "right" : "top"}: ${
-        buttonSize === "circle"
+      margin-${buttonSize !== "circle" && buttonSize !== "smallCircle" ? "right" : "top"}: ${
+        buttonSize === "circle" || buttonSize === "smallCircle"
           ? TEXT_MARGIN * 1.5
           : buttonSize !== "small"
           ? iconPlusMarginSize
           : 0
       }px;    
       ${
-        buttonSize !== "small" && buttonSize !== "circle"
+        buttonSize !== "small" && buttonSize !== "circle" && buttonSize !== "smallCircle"
           ? "flex: 1;"
           : !platform.isWeb
           ? "top: 1px;"
@@ -166,7 +171,7 @@ export const ButtonText = styled(Text).attrs(
 
   position: relative;
   text-align: center;
-`;;;;;;;;;;;
+`;
 
 export const ButtonLoader = styled(Loader)`
   position: absolute;

src/components/CurrencySelect/CurrencySelect.tsx

@@ -0,0 +1,61 @@
+import { forwardRef, useEffect, useState } from "react";
+import * as S from "./styled";
+import { useRates } from "@hooks";
+import { ItemProps } from "@components/Picker/Picker";
+import { ItemValue, Picker } from "@react-native-picker/picker/typings/Picker";
+
+
+type CurrencySelectProps = {
+  onChange?: (event: { label: string, value: number }) => void;
+};
+
+export const CurrencySelect = forwardRef<Picker<ItemValue>, CurrencySelectProps>(
+  ({onChange}, ref) => {
+
+    const { rates, getRate, currentRate, updateCurrentRate, loading } = useRates();
+    const [rateItems, setRateItems] = useState<ItemProps[]>([]);
+
+    const onRateChanged = (currencyShort: string) => {
+      void updateCurrentRate(getRate(currencyShort));
+    };
+
+    const getValue = () => {
+      return rateItems.find((i) => i.value === currentRate.label)?.value || ""
+    }
+
+    useEffect(() => {
+      if (rates !== undefined) {
+        const ratesAsItems = [{ label: "SAT - Satoshi", value: "SAT" }, { label: "BTC - Bitcoin", value: "BTC" }];
+        for (const pair in rates) {
+          const currentPair = rates[pair];
+          const currencyShort = Object.keys(currentPair).filter(key => key !== "currency" && key !== "BTC").pop();
+          if ("currency" in currentPair && currencyShort) {
+            ratesAsItems.push({ label: `${currencyShort} - ${currentPair.currency}`, value: currencyShort });
+          }
+        }
+        setRateItems(ratesAsItems);
+      }
+    }, [rates]);
+
+    useEffect(() => {
+      onChange?.(currentRate);
+    }, [currentRate]);
+
+    return (
+      <S.Field
+        value={loading ? "" : getValue()}
+        component={
+        <>
+          {(loading || getValue() === "") && <S.Spinner />}
+          <S.Picker
+            ref={ref}
+            selectedValue={`${currentRate.label}`}
+            onValueChange={(val)=>onRateChanged(`${val}`)}
+            items={rateItems}
+          />
+        </>
+        }
+      />
+    );
+  }
+);

src/components/CurrencySelect/index.ts

@@ -0,0 +1 @@
+export { CurrencySelect } from "./CurrencySelect";

src/components/CurrencySelect/styled.ts

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+import { BaseField, Picker as RootPicker } from "@components";
+import { ActivityIndicator } from "react-native";
+
+
+export const Field = styled(BaseField)`
+    background-color: ${({ theme }) => theme.colors.white}
+`;
+
+export const Spinner = styled(ActivityIndicator)`
+    left: -15px;
+`;
+
+export const Picker = styled(RootPicker)`
+  position: absolute;
+  opacity: 0;
+  height: 100%;
+  width: 100%;
+  border: 0;
+  background-color: transparent;
+  padding: 0 12px;
+  padding-top: 8px;
+  font-size: 16px;
+  font-family: Poppins-Medium;
+  color: ${({ theme }) => theme.colors.primary};
+`;