Skip to content

Commit

Permalink
feat(): use basic Dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
Astrak committed Dec 11, 2024
1 parent 9d91eb7 commit 499baec
Show file tree
Hide file tree
Showing 6 changed files with 193 additions and 69 deletions.
80 changes: 80 additions & 0 deletions src/components/ChainSelector.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import { Dropdown } from "@brillionfi/quill-core";

Check failure on line 1 in src/components/ChainSelector.tsx

View workflow job for this annotation

GitHub Actions / Build and Test Package

Module '"@brillionfi/quill-core"' has no exported member 'Dropdown'.
import { SUPPORTED_CHAINS } from "@brillionfi/wallet-infra-sdk/dist/models";

export const ChainSelector = () => {
/* const handleChainChange = (id: SUPPORTED_CHAIN_IDS) => {
handleChangeChainId(id, {
onSuccess: (data) => {
if (!!notification?.show) {
const chainName = getChainById(
data?.chainId ?? DEFAULT_CHAIN.id,
).name;
notification.show({
severity: "success",
summary: tCommon("success"),
detail: t("notifications.success", { chainName }),
});
}
if (onChange) onChange(data?.chainId);
},
onError: () => {
if (!!notification?.show) {
notification.show({
severity: "error",
summary: tCommon("error"),
detail: t("notifications.error"),
});
}
},
});
setSelectedChain(id);
};
const chainOptionTemplate = (id: SUPPORTED_CHAIN_IDS) => {
const icon = getChainIcon(id);
const { name } = getChainById(id);
const iconSize = size === "normal" ? "h-4 w-4" : "";
const iconSizeLarge = size !== "normal" ? size : undefined;
return (
<div className="flex h-full items-center gap-4">
<Icon
localIcon={icon}
type="svg"
size={iconSizeLarge}
className={iconSize}
/>
<span>{name}</span>
</div>
);
};
const finalSizeClassName = useMemo(() => {
switch (size) {
case "normal":
return "h-10";
case "large":
return "h-16";
case "xlarge":
return "h-20";
default:
return "h-10";
}
}, [size]);
const finalFullWidthClassName = useMemo(() => {
return fullWidth ? "w-full" : "w-full md:w-60";
}, [fullWidth]);
const finalChainSelectorClassName = useMemo(() => {
return twMerge([finalSizeClassName, finalFullWidthClassName]);
}, [finalSizeClassName, finalFullWidthClassName]); */

return (
<Dropdown
value={SUPPORTED_CHAINS.ETHEREUM}
options={SUPPORTED_CHAINS}
placeholder={t("placeholder")}

Check failure on line 76 in src/components/ChainSelector.tsx

View workflow job for this annotation

GitHub Actions / Build and Test Package

Cannot find name 't'.
autoOptionFocus
/>
);
};
130 changes: 76 additions & 54 deletions src/components/LoginForm.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,25 @@
import { AuthProvider } from "@brillionfi/wallet-infra-sdk";
import { useUser } from "hooks";
import { LoginMethods, TLoginOptions } from "interfaces";
import GoogleLogo from "@/components/icons/google-logo";
import TwitterLogo from "@/components/icons/twitter-logo";
import { useState } from "react";
import DiscordLogo from "@/components/icons/discord-logo";
import EmailLogo from "@/components/icons/email-logo";
import GoogleLogo from "@/components/icons/google-logo";
import MetamaskLogo from "@/components/icons/metamask-logo";
import TwitterLogo from "@/components/icons/twitter-logo";
import WalletConnectLogo from "@/components/icons/walletconnect-logo";
import EmailLogo from "@/components/icons/email-logo";
import { useState } from "react";
import QRCodeModal from "@walletconnect/qrcode-modal";
import { defaultStyles, TCustomProps } from "@/components/LoginFormStyles";
import { AuthProvider } from "@brillionfi/wallet-infra-sdk";
import QRCodeModal from "@walletconnect/qrcode-modal";
import { useUser } from "hooks";
import { LoginMethods, TLoginOptions } from "interfaces";

export const LoginForm = ({loginMethods, redirectUrl, customProps}: {loginMethods: LoginMethods[], redirectUrl: string, customProps?: TCustomProps}) => {
export const LoginForm = ({
loginMethods,
redirectUrl,
customProps,
}: {
loginMethods: LoginMethods[];
redirectUrl: string;
customProps?: TCustomProps;
}) => {
const { login } = useUser();

const [showEmail, setShowEmail] = useState<boolean>(false);
Expand All @@ -32,7 +40,7 @@ export const LoginForm = ({loginMethods, redirectUrl, customProps}: {loginMethod
},
{
label: LoginMethods.Discord,
icon: <TwitterLogo />,
icon: <DiscordLogo />,
disabled: false,
onClick: async () => {
const url = await login(AuthProvider.DISCORD, redirectUrl);
Expand All @@ -43,7 +51,7 @@ export const LoginForm = ({loginMethods, redirectUrl, customProps}: {loginMethod
},
{
label: LoginMethods.Twitter,
icon: <DiscordLogo />,
icon: <TwitterLogo />,
disabled: false,
onClick: async () => {
const url = await login(AuthProvider.TWITTER, redirectUrl);
Expand All @@ -69,8 +77,8 @@ export const LoginForm = ({loginMethods, redirectUrl, customProps}: {loginMethod
disabled: false,
onClick: async () => {
const url = await login(AuthProvider.WALLET_CONNECT, redirectUrl);
if(!url) return;
if (!url) return;

QRCodeModal.open(url, () => {});
},
},
Expand All @@ -89,7 +97,7 @@ export const LoginForm = ({loginMethods, redirectUrl, customProps}: {loginMethod
},
},
];
if(showEmail) {
if (showEmail) {
options.push({
label: LoginMethods.Email,
html: (
Expand Down Expand Up @@ -121,17 +129,17 @@ export const LoginForm = ({loginMethods, redirectUrl, customProps}: {loginMethod
}}
>
<input
autoComplete={'off'}
autoComplete={"off"}
type="text"
onChange={(e) => setEmail(e.target.value)}
id="email"
placeholder='Email'
placeholder="Email"
value={email}
style={{
minHeight: '45px',
borderRadius: '5px',
background: 'black',
padding: '8px',
minHeight: "45px",
borderRadius: "5px",
background: "black",
padding: "8px",
}}
/>
<button
Expand All @@ -140,10 +148,9 @@ export const LoginForm = ({loginMethods, redirectUrl, customProps}: {loginMethod
if (url) {
window.location.href = url;
}
}
}
}}
style={{
margin: 'auto',
margin: "auto",
background: "#444444",
borderRadius: "5px",
padding: "8px",
Expand All @@ -153,45 +160,60 @@ export const LoginForm = ({loginMethods, redirectUrl, customProps}: {loginMethod
</button>
</section>
</div>
)
),
});
}

const methods = options.filter(option=> loginMethods.includes(option.label))
const methods = options.filter((option) =>
loginMethods.includes(option.label),
);

const containerStyle = customProps?.containerStyle ? customProps.containerStyle : defaultStyles.container;
const tittleStyle = customProps?.tittleStyle ? customProps.tittleStyle : defaultStyles.tittle;
const tittleText = customProps?.tittleText ? customProps.tittleText : "Welcome";
const buttonsContainerStyle = customProps?.buttonsContainerStyle ? customProps.buttonsContainerStyle : defaultStyles.buttonsContainer;
const buttonStyle = customProps?.buttonStyle ? customProps.buttonStyle : defaultStyles.button;
const buttonText = customProps?.buttonText ? customProps.buttonText : "Continue with";
const containerStyle = customProps?.containerStyle
? customProps.containerStyle
: defaultStyles.container;
const tittleStyle = customProps?.tittleStyle
? customProps.tittleStyle
: defaultStyles.tittle;
const tittleText = customProps?.tittleText
? customProps.tittleText
: "Welcome";
const buttonsContainerStyle = customProps?.buttonsContainerStyle
? customProps.buttonsContainerStyle
: defaultStyles.buttonsContainer;
const buttonStyle = customProps?.buttonStyle
? customProps.buttonStyle
: defaultStyles.button;
const buttonText = customProps?.buttonText
? customProps.buttonText
: "Continue with";

return (
<div style={containerStyle}>
<span style={tittleStyle}>
{tittleText}
</span>
<span style={tittleStyle}>{tittleText}</span>
<section style={buttonsContainerStyle}>
{methods.map((option) => (
option.html ? option.html :
<button
key={`login-option-${option.label!.toLocaleLowerCase()}`}
id={`login-option-${option.label!.toLocaleLowerCase()}`}
className="loginButton"
style={{
...buttonStyle,
cursor: option.disabled ? "not-allowed" : "pointer",
}}
disabled={option.disabled}
onClick={option.onClick}
>
{option.icon}
<span style={defaultStyles.buttonText}>
{buttonText} {option.label}
</span>
</button>
))}
{methods.map((option) =>
option.html ? (
option.html
) : (
<button
key={`login-option-${option.label!.toLocaleLowerCase()}`}
id={`login-option-${option.label!.toLocaleLowerCase()}`}
className="loginButton"
style={{
...buttonStyle,
cursor: option.disabled ? "not-allowed" : "pointer",
}}
disabled={option.disabled}
onClick={option.onClick}
>
{option.icon}
<span style={defaultStyles.buttonText}>
{buttonText} {option.label}
</span>
</button>
),
)}
</section>
</div>
);
};
};
6 changes: 0 additions & 6 deletions src/components/NetworkSelector.tsx

This file was deleted.

2 changes: 1 addition & 1 deletion src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@ export * from "./LoginForm";
export * from "./LoginFormStyles";
export * from "./BrillionContext";
export * from "./BrillionProvider";
export * from "./NetworkSelector";
export * from "./ChainSelector";
36 changes: 36 additions & 0 deletions src/interfaces/ChainSelector.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { SUPPORTED_CHAINS } from "@brillionfi/wallet-infra-sdk/dist/models";

export interface IChainSelectorProps {
enableTestNetworks?: boolean;
networks?: SUPPORTED_CHAINS[];
}

export const TEST_NETWORKS = [
SUPPORTED_CHAINS.ARBITRUM_TESTNET,
SUPPORTED_CHAINS.AVALANCHE_FUJI_TESTNET,
SUPPORTED_CHAINS.BASE_SEPOLIA,
SUPPORTED_CHAINS.ETHEREUM_SEPOLIA,
SUPPORTED_CHAINS.POLYGON_AMOY,
SUPPORTED_CHAINS.SOLANA_TESTNET,
SUPPORTED_CHAINS.TELOS_TESTNET,
SUPPORTED_CHAINS.TRON_TESTNET,
SUPPORTED_CHAINS.VANAR_VANGUARD,
SUPPORTED_CHAINS.ZILLIQA2_PROTO_TESTNET,
SUPPORTED_CHAINS.ZILLIQA_TESTNET,
];

export const PROD_NETWORKS = [
SUPPORTED_CHAINS.ARBITRUM,
SUPPORTED_CHAINS.AVALANCHE,
SUPPORTED_CHAINS.BASE,
SUPPORTED_CHAINS.COSMOS,
SUPPORTED_CHAINS.ETHEREUM,
SUPPORTED_CHAINS.POLYGON,
SUPPORTED_CHAINS.SOLANA,
SUPPORTED_CHAINS.TELOS,
SUPPORTED_CHAINS.TRON,
SUPPORTED_CHAINS.VANAR,
SUPPORTED_CHAINS.ZILLIQA,
];

export const NETWORKS = [...TEST_NETWORKS, ...PROD_NETWORKS];
8 changes: 0 additions & 8 deletions src/interfaces/NetworkSelector.ts

This file was deleted.

0 comments on commit 499baec

Please sign in to comment.