From a9cfd6f637e8886cabb016e18a3e9b582470f415 Mon Sep 17 00:00:00 2001 From: Michael Bumann Date: Tue, 29 Mar 2022 23:15:51 +0200 Subject: [PATCH 1/2] feat: new wallet account creation with lightning address this also uses the lightning address as account name for new Alby accounts --- src/app/components/form/TextField.tsx | 4 + .../screens/Onboard/TestConnection/index.tsx | 6 +- .../screens/Options/TestConnection/index.tsx | 10 +- .../screens/connectors/NewWallet/index.tsx | 123 +++++++++++++----- src/types.ts | 1 + 5 files changed, 105 insertions(+), 39 deletions(-) diff --git a/src/app/components/form/TextField.tsx b/src/app/components/form/TextField.tsx index cc41448931..278db78312 100644 --- a/src/app/components/form/TextField.tsx +++ b/src/app/components/form/TextField.tsx @@ -15,6 +15,8 @@ const TextField = ({ autoFocus = false, autoComplete = "off", disabled, + minLength, + maxLength, min, max, }: React.InputHTMLAttributes & { label: string }) => ( @@ -41,6 +43,8 @@ const TextField = ({ autoFocus={autoFocus} autoComplete={autoComplete} disabled={disabled} + minLength={minLength} + maxLength={maxLength} min={min} max={max} /> diff --git a/src/app/screens/Onboard/TestConnection/index.tsx b/src/app/screens/Onboard/TestConnection/index.tsx index c0e1005cb5..47fbd41b98 100644 --- a/src/app/screens/Onboard/TestConnection/index.tsx +++ b/src/app/screens/Onboard/TestConnection/index.tsx @@ -29,6 +29,7 @@ const faucetMemo = "LN Faucet"; export default function TestConnection() { const [accountInfo, setAccountInfo] = useState<{ alias: string; + name: string; balance: number; }>(); const [errorMessage, setErrorMessage] = useState(); @@ -89,10 +90,11 @@ export default function TestConnection() { api .getAccountInfo() .then((response) => { + const name = response.name; const { alias } = response.info; const balance = parseInt(response.balance.balance); - setAccountInfo({ alias, balance }); + setAccountInfo({ alias, balance, name }); }) .catch((e) => { console.error(e); @@ -200,7 +202,7 @@ export default function TestConnection() {
(); + const [accountInfo, setAccountInfo] = useState<{ + alias: string; + name: string; + balance: number; + }>(); const [errorMessage, setErrorMessage] = useState(""); const [loading, setLoading] = useState(false); @@ -42,6 +45,7 @@ export default function TestConnection() { setAccountInfo({ alias: accountInfo.alias, balance: accountInfo.balance, + name: accountInfo.name, }); } getAccounts(); @@ -110,7 +114,7 @@ export default function TestConnection() {
{ - res.json().then((data) => { - if (data.lndhub?.login && data.lndhub?.password && data.lndhub?.url) { - setLndHubData(data.lndhub); - } else { - console.error(data); - alert( - "Failed to create a new wallet. Please try again and contact support." - ); - } - }); + .then((res) => res.json()) + .then((data) => { + if (data.lndhub?.login && data.lndhub?.password && data.lndhub?.url) { + setLndHubData({ + ...data.lndhub, + lnAddress: data.lightning_address, + }); + } else { + console.error(data); + alert(`Failed to create a new wallet. ${JSON.stringify(data)}`); + } }) .catch((e) => { console.error(e); @@ -60,13 +66,15 @@ export default function NewWallet() { setLoading(true); event.preventDefault(); - const { login, password, url } = lndHubData; + const { login, password, url, lnAddress } = lndHubData; + const name = lnAddress || "Alby"; // use the ln address as name or Alby to default const account = { - name: "Alby", + name, config: { login, password, url, + lnAddress, }, connector: "lndhub", }; @@ -97,32 +105,34 @@ export default function NewWallet() { return ( {lndHubData.login ? ( <> -
- +
+

+ + We have created a new wallet for you.
+ +

+ {lndHubData.lnAddress && ( +

Your lightning address: {lndHubData.lnAddress}

+ )}
-

- - We have created a new wallet for you.
- Please save this backup! - -

- If you loose access you will need this backup to recover your - wallet. You can also import the wallet into your BlueWallet mobile - app using the QR Code. + Want to use your wallet on your mobile? +
+ Import the wallet into your BlueWallet mobile app using the QR + Code.
- We host a lightning wallet for you! + Create a getAlby.com account
- ...but remember: not your keys, not your coins. + ...and let us host a lightning wallet for you!
@@ -146,11 +156,56 @@ export default function NewWallet() { id="email" label="Email Address" type="email" + required onChange={(e) => { setEmail(e.target.value.trim()); }} />
+
+ { + setPassword(e.target.value.trim()); + }} + /> +
+
+

+ Your Alby account also comes with an optional{" "} + + Lightning Address + + . This is a simple way for anyone to send you Bitcoin on the + Lightning Network. ( + + learn more + + ) +

+ { + setLnAddress(e.target.value.trim().split("@")[0]); // in case somebody enters a full address we simple remove the domain + }} + /> +
)} diff --git a/src/types.ts b/src/types.ts index d1dfd7b8f5..132e9e1d5a 100644 --- a/src/types.ts +++ b/src/types.ts @@ -20,6 +20,7 @@ export interface AccountInfo { id: string; alias: string; balance: number; + name: string; } export interface MetaData { From 20629163fa0a08a14c367f95adc72ad9719bf774 Mon Sep 17 00:00:00 2001 From: Dylan Companjen Date: Thu, 31 Mar 2022 13:26:50 +0200 Subject: [PATCH 2/2] feat: input suffix --- src/app/components/form/Input/index.tsx | 44 +++++++++++++++++-- src/app/components/form/TextField.tsx | 9 +++- .../screens/connectors/NewWallet/index.tsx | 23 ++++++---- 3 files changed, 63 insertions(+), 13 deletions(-) diff --git a/src/app/components/form/Input/index.tsx b/src/app/components/form/Input/index.tsx index cd965706a1..f1ad7acbfa 100644 --- a/src/app/components/form/Input/index.tsx +++ b/src/app/components/form/Input/index.tsx @@ -1,3 +1,11 @@ +import { useRef } from "react"; + +import { classNames } from "../../../utils"; + +type Props = { + suffix?: string; +}; + export default function Input({ name, id, @@ -15,13 +23,22 @@ export default function Input({ disabled, min, max, -}: React.InputHTMLAttributes) { - return ( + suffix, +}: React.InputHTMLAttributes & Props) { + const inputEl = useRef(null); + const outerStyles = + "shadow-sm rounded-md border border-gray-300 dark:bg-gray-200 focus:ring-orange-bitcoin focus:border-orange-bitcoin focus:ring-1 transition duration-300"; + + const inputNode = ( ); + + if (!suffix) return inputNode; + + return ( +
+ {inputNode} + { + inputEl.current?.focus(); + }} + > + {suffix} + +
+ ); } diff --git a/src/app/components/form/TextField.tsx b/src/app/components/form/TextField.tsx index 278db78312..342fb1e253 100644 --- a/src/app/components/form/TextField.tsx +++ b/src/app/components/form/TextField.tsx @@ -1,5 +1,10 @@ import Input from "./Input"; +type Props = { + label: string; + suffix?: string; +}; + const TextField = ({ id, label, @@ -19,7 +24,8 @@ const TextField = ({ maxLength, min, max, -}: React.InputHTMLAttributes & { label: string }) => ( + suffix, +}: React.InputHTMLAttributes & Props) => ( <>
diff --git a/src/app/screens/connectors/NewWallet/index.tsx b/src/app/screens/connectors/NewWallet/index.tsx index b41b440869..691534e0bc 100644 --- a/src/app/screens/connectors/NewWallet/index.tsx +++ b/src/app/screens/connectors/NewWallet/index.tsx @@ -177,9 +177,10 @@ export default function NewWallet() { />
)}