Skip to content

Commit a3c69f3

Browse files
tseropian-ledgertseropian-ledger
authored
💄 (ledger-button) [LBD-260]: Add middle-right position for floating button (#283)
2 parents 22496ea + e13b06f commit a3c69f3

File tree

3 files changed

+99
-72
lines changed

3 files changed

+99
-72
lines changed

‎apps/test-dapp/src/components/SettingsBlock.tsx‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
11
"use client";
22

33
import { useCallback, useState } from "react";
4-
import {
5-
Field,
6-
Fieldset,
7-
Input,
8-
Label,
9-
Select,
10-
} from "@headlessui/react";
4+
import { Field, Fieldset, Input, Label, Select } from "@headlessui/react";
115

126
import type { LedgerProviderConfig } from "../hooks/useProviders";
137

@@ -29,7 +23,8 @@ export function SettingsBlock({
2923
}: SettingsBlockProps) {
3024
const [isExpanded, setIsExpanded] = useState(false);
3125
const [localConfig, setLocalConfig] = useState<LedgerProviderConfig>(config);
32-
const [lastAppliedConfig, setLastAppliedConfig] = useState<LedgerProviderConfig>(config);
26+
const [lastAppliedConfig, setLastAppliedConfig] =
27+
useState<LedgerProviderConfig>(config);
3328

3429
const handleInputChange = useCallback(
3530
(field: keyof LedgerProviderConfig, value: string) => {
@@ -38,7 +33,7 @@ export function SettingsBlock({
3833
[field]: value,
3934
}));
4035
},
41-
[]
36+
[],
4237
);
4338

4439
const handleApply = useCallback(() => {
@@ -62,14 +57,18 @@ export function SettingsBlock({
6257
<span className={blockStyles["block__icon"]}>⚙️</span>
6358
Settings / Configuration
6459
</h3>
65-
<span className={blockStyles["block__toggle"]}>{isExpanded ? "▼" : "▶"}</span>
60+
<span className={blockStyles["block__toggle"]}>
61+
{isExpanded ? "▼" : "▶"}
62+
</span>
6663
</div>
6764

6865
{isExpanded && (
6966
<div className={blockStyles["block__content"]}>
7067
<Fieldset className={styles["settings-block__fieldset"]}>
7168
<Field className={styles["settings-block__field"]}>
72-
<Label className={styles["settings-block__label"]}>dApp Identifier</Label>
69+
<Label className={styles["settings-block__label"]}>
70+
dApp Identifier
71+
</Label>
7372
<Input
7473
className={styles["settings-block__input"]}
7574
type="text"
@@ -93,7 +92,9 @@ export function SettingsBlock({
9392
</Field>
9493

9594
<Field className={styles["settings-block__field"]}>
96-
<Label className={styles["settings-block__label"]}>Button Position</Label>
95+
<Label className={styles["settings-block__label"]}>
96+
Button Position
97+
</Label>
9798
<Select
9899
className={styles["settings-block__select"]}
99100
value={localConfig.buttonPosition}
@@ -105,17 +106,18 @@ export function SettingsBlock({
105106
<option value="bottom-left">Bottom Left</option>
106107
<option value="top-right">Top Right</option>
107108
<option value="top-left">Top Left</option>
109+
<option value="middle-right">Middle Right</option>
108110
</Select>
109111
</Field>
110112

111113
<Field className={styles["settings-block__field"]}>
112-
<Label className={styles["settings-block__label"]}>Log Level</Label>
114+
<Label className={styles["settings-block__label"]}>
115+
Log Level
116+
</Label>
113117
<Select
114118
className={styles["settings-block__select"]}
115119
value={localConfig.logLevel}
116-
onChange={(e) =>
117-
handleInputChange("logLevel", e.target.value)
118-
}
120+
onChange={(e) => handleInputChange("logLevel", e.target.value)}
119121
>
120122
<option value="debug">Debug</option>
121123
<option value="info">Info</option>
@@ -125,7 +127,9 @@ export function SettingsBlock({
125127
</Field>
126128

127129
<Field className={styles["settings-block__field"]}>
128-
<Label className={styles["settings-block__label"]}>Environment</Label>
130+
<Label className={styles["settings-block__label"]}>
131+
Environment
132+
</Label>
129133
<Select
130134
className={styles["settings-block__select"]}
131135
value={localConfig.environment}

‎apps/test-dapp/src/hooks/useProviders.ts‎

Lines changed: 75 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -57,54 +57,72 @@ export const useProviders = (config: LedgerProviderConfig = DEFAULT_CONFIG) => {
5757
[],
5858
);
5959

60-
const initializeProviderWithConfig = useCallback((configToUse: LedgerProviderConfig) => {
61-
if (!isLoaded || !LedgerButtonModule) return;
62-
63-
if (cleanupRef.current) {
64-
cleanupRef.current();
65-
cleanupRef.current = null;
66-
}
67-
68-
const { initializeLedgerProvider } = LedgerButtonModule;
69-
70-
71-
const disableEventTracking =
72-
process.env.NEXT_PUBLIC_DISABLE_EVENT_TRACKING === "true";
73-
74-
const cleanup = initializeLedgerProvider({
75-
target: document.body,
76-
floatingButtonPosition: configToUse.buttonPosition as "bottom-right" | "bottom-left" | "top-right" | "top-left",
77-
dAppIdentifier: configToUse.dAppIdentifier,
78-
apiKey: configToUse.apiKey,
79-
loggerLevel: configToUse.logLevel as "debug" | "info" | "warn" | "error",
80-
environment: configToUse.environment as "production" | "staging",
81-
dmkConfig: undefined,
82-
walletTransactionFeatures: ["send", "receive", "swap", "buy", "earn", "sell"],
83-
devConfig: disableEventTracking
84-
? {
85-
stub: {
86-
base: true,
87-
},
88-
}
89-
: undefined,
90-
});
91-
92-
cleanupRef.current = cleanup;
93-
setIsInitialized(true);
60+
const initializeProviderWithConfig = useCallback(
61+
(configToUse: LedgerProviderConfig) => {
62+
if (!isLoaded || !LedgerButtonModule) return;
63+
64+
if (cleanupRef.current) {
65+
cleanupRef.current();
66+
cleanupRef.current = null;
67+
}
68+
69+
const { initializeLedgerProvider } = LedgerButtonModule;
70+
71+
const disableEventTracking =
72+
process.env.NEXT_PUBLIC_DISABLE_EVENT_TRACKING === "true";
73+
74+
const cleanup = initializeLedgerProvider({
75+
target: document.body,
76+
floatingButtonPosition: configToUse.buttonPosition as
77+
| "bottom-right"
78+
| "bottom-left"
79+
| "top-right"
80+
| "top-left"
81+
| "middle-right",
82+
dAppIdentifier: configToUse.dAppIdentifier,
83+
apiKey: configToUse.apiKey,
84+
loggerLevel: configToUse.logLevel as
85+
| "debug"
86+
| "info"
87+
| "warn"
88+
| "error",
89+
environment: configToUse.environment as "production" | "staging",
90+
dmkConfig: undefined,
91+
walletTransactionFeatures: [
92+
"send",
93+
"receive",
94+
"swap",
95+
"buy",
96+
"earn",
97+
"sell",
98+
],
99+
devConfig: disableEventTracking
100+
? {
101+
stub: {
102+
base: true,
103+
},
104+
}
105+
: undefined,
106+
});
94107

95-
window.addEventListener(
96-
"eip6963:announceProvider",
97-
handleAnnounceProvider as EventListener,
98-
);
108+
cleanupRef.current = cleanup;
109+
setIsInitialized(true);
99110

100-
return () => {
101-
cleanup();
102-
window.removeEventListener(
111+
window.addEventListener(
103112
"eip6963:announceProvider",
104113
handleAnnounceProvider as EventListener,
105114
);
106-
};
107-
}, [isLoaded, handleAnnounceProvider]);
115+
116+
return () => {
117+
cleanup();
118+
window.removeEventListener(
119+
"eip6963:announceProvider",
120+
handleAnnounceProvider as EventListener,
121+
);
122+
};
123+
},
124+
[isLoaded, handleAnnounceProvider],
125+
);
108126

109127
useEffect(() => {
110128
if (!isLoaded) return;
@@ -113,20 +131,23 @@ export const useProviders = (config: LedgerProviderConfig = DEFAULT_CONFIG) => {
113131
return cleanup;
114132
}, [isLoaded, initializeProviderWithConfig]);
115133

116-
const reinitialize = useCallback((newConfig?: LedgerProviderConfig) => {
117-
const configToUse = newConfig || configRef.current;
134+
const reinitialize = useCallback(
135+
(newConfig?: LedgerProviderConfig) => {
136+
const configToUse = newConfig || configRef.current;
118137

119-
if (cleanupRef.current) {
120-
cleanupRef.current();
121-
cleanupRef.current = null;
122-
}
138+
if (cleanupRef.current) {
139+
cleanupRef.current();
140+
cleanupRef.current = null;
141+
}
123142

124-
setProviders([]);
125-
setSelectedProvider(null);
126-
setIsInitialized(false);
143+
setProviders([]);
144+
setSelectedProvider(null);
145+
setIsInitialized(false);
127146

128-
initializeProviderWithConfig(configToUse);
129-
}, [initializeProviderWithConfig]);
147+
initializeProviderWithConfig(configToUse);
148+
},
149+
[initializeProviderWithConfig],
150+
);
130151

131152
return {
132153
providers,

‎packages/ledger-button/src/components/atom/floating-button/ledger-floating-button.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ export type FloatingButtonPosition =
1616
| "bottom-center"
1717
| "top-right"
1818
| "top-left"
19-
| "top-center";
19+
| "top-center"
20+
| "middle-right";
2021

2122
export type FloatingButtonVariant = "circular" | "compact";
2223

@@ -37,6 +38,7 @@ const floatingButtonVariants = cva(
3738
"top-right": "lb-right-24 lb-top-24",
3839
"top-left": "lb-left-24 lb-top-24",
3940
"top-center": "lb-left-1/2 lb-top-24 lb--translate-x-1/2",
41+
"middle-right": "lb-right-24 lb-top-1/2 lb--translate-y-1/2",
4042
none: "",
4143
},
4244
},

0 commit comments

Comments
 (0)