Skip to content

Commit

Permalink
Merge pull request #1039 from psychemist/fix-add_edit-evm-address
Browse files Browse the repository at this point in the history
Fix: Add/Edit evm address
  • Loading branch information
Marchand-Nicolas authored Feb 16, 2025
2 parents 4d0fd52 + fea1364 commit e38fbff
Show file tree
Hide file tree
Showing 3 changed files with 176 additions and 74 deletions.
108 changes: 108 additions & 0 deletions components/UI/input.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
import * as React from "react";

export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {
leftIcon?: React.ReactNode;
rightIcon?: React.ReactNode;
error?: boolean;
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, leftIcon, rightIcon, error, ...props }, ref) => {
return (
<div className={cn(`relative w-full`)}>
{!!leftIcon && (
<div className="absolute left-3 top-[55%] -translate-y-[55%]">
{leftIcon}
</div>
)}
<input
type={type}
className={cn(
`flex h-[68px] w-full items-center justify-center gap-3 rounded-md border border-neutral-300 bg-white px-3 py-2 ${leftIcon ? "pl-10" : ""
} ${rightIcon ? "pr-14" : ""} ${error
? "border-red-500 ring-1 ring-red-500 focus-visible:border-red-500 focus-visible:ring-red-500"
: ""
}
text-base ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium
placeholder:font-light placeholder:text-[#454545]/20 focus-visible:border-none focus-visible:outline-none focus-visible:ring-1
focus-visible:ring-[#4545451A]/20 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 dark:border-[#4545451A]/20
dark:bg-white dark:ring-offset-[#4545451A]/20 dark:placeholder:text-neutral-400 dark:focus-visible:ring-[#4545451A]/20`,
className
)}
ref={ref}
{...props}
/>
{!!rightIcon && (
<div className="absolute right-3 top-[55%] -translate-y-[55%]">
{rightIcon}
</div>
)}
</div>
);
}
);
Input.displayName = "Input";

export { Input };

type ClassValue =
| string
| Record<string, boolean>
| ClassValue[]
| null
| undefined;

function cn(...inputs: ClassValue[]): string {
const classes: string[] = [];

// Helper function to process each input
function processInput(input: ClassValue): void {
if (!input) return;

if (typeof input === "string") {
classes.push(input);
} else if (Array.isArray(input)) {
input.forEach(processInput);
} else if (typeof input === "object") {
for (const [key, value] of Object.entries(input)) {
if (value) {
classes.push(key);
}
}
}
}

// Process all inputs
inputs.forEach(processInput);

// Merge Tailwind classes
const mergedClasses = mergeTailwindClasses(classes);

return mergedClasses.join(" ");
}

function mergeTailwindClasses(classes: string[]): string[] {
const classMap: Record<string, string> = {};

classes.forEach((cls) => {
// Extract the prefix (e.g., "border", "ring", "focus-visible", etc.)
const prefix = cls.split("-")[0];

// Only overwrite if the class is a direct conflict (e.g., border-neutral-300 and border-red-500)
if (
prefix === "border" ||
prefix === "ring" ||
prefix === "focus-visible"
) {
classMap[prefix] = cls;
} else {
// Otherwise, add the class as-is
classMap[cls] = cls;
}
});

// Return the merged classes
return Object.values(classMap);
}

84 changes: 40 additions & 44 deletions components/identities/actions/addEvmModal.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
import {
CircularProgress,
InputAdornment,
Modal,
TextField,
} from "@mui/material";
import { CircularProgress, Modal } from "@mui/material";
import { useSendTransaction } from "@starknet-react/core";
import React, { FunctionComponent, useEffect, useRef, useState } from "react";
import styles from "../../../styles/components/evmModalMessage.module.css";
Expand All @@ -18,6 +13,7 @@ import { isValidEns } from "@/utils/ensService";
import { ethers } from "ethers";
import { useRouter } from "next/router";
import { getDomainWithoutStark } from "@/utils/stringService";
import { Input } from "@/components/UI/input";

type AddEvmModalProps = {
handleClose: (showNotif: boolean) => void;
Expand Down Expand Up @@ -162,7 +158,8 @@ const AddEvmModal: FunctionComponent<AddEvmModalProps> = ({
<>
<div className={styles.menu}>
<button
className={styles.menu_close}
title="close"
className={`hidden md:block ${styles.menu_close}`}
onClick={() => closeModal(false)}
>
<svg viewBox="0 0 24 24">
Expand All @@ -176,54 +173,53 @@ const AddEvmModal: FunctionComponent<AddEvmModalProps> = ({
</button>
<p className={styles.menu_subtitle}>Add an EVM address for</p>
<p className={styles.menu_title}>{identity?.domain}</p>
<div className="mt-5 flex flex-col justify-center">
<div className="mt-5">
<TextField
helperText={message ?? "Add your EVM address or your ENS name"}
fullWidth
label="Your EVM Address"
<div className="flex flex-col justify-center mt-6">
<div className={styles.infoCard}>
<div>
<h3 className={`text-center lg:text-left ${styles.cardTitle}`}>
Why Add an EVM Address to Your Starknet Domain?
</h3>
<p className={`text-center lg:text-left ${styles.cardDesc}`}>
By adding an EVM address to your Starknet domain, you enhance
its functionality and connectivity. Your Starknet domain
automatically comes with an associated ENS subdomain,
simplifying ENS management. Configure your EVM address in your
preferred wallet for seamless integration.
</p>
</div>
<img
title="protocol_logos"
src="/visuals/ecosystemMap.svg"
className={styles.cardImg}
/>
</div>
<div className="mt-4 mb-4">
<Input
error={!isValid}
className="text-center !rounded-lg shadow-md shadow-black/5 placeholder:!text-[#454545]/20 mt-4"
name="subdomain"
placeholder="Subdomain"
onChange={(e) => changeAddress(e.target.value)}
id="outlined-basic"
value={fieldInput ?? ""}
variant="outlined"
onChange={(e) => changeAddress(e.target.value)}
color="secondary"
required
error={!isValid}
InputProps={{
endAdornment: (
<InputAdornment position="end">
{loading && <CircularProgress size={24} />}
</InputAdornment>
),
}}
rightIcon={loading && <CircularProgress size={24} />}
/>
</div>
<div className="mt-5 flex justify-center">
<div className="flex flex-col items-center justify-center mt-5">
<div>
<Button
disabled={!evmAddress || !isValid}
onClick={() => setUserData()}
>
Set EVM address
SET EVM ADDRESS
</Button>
</div>
</div>
<div className={styles.infoCard}>
<div>
<h3 className={styles.cardTitle}>
Why Add an EVM Address to Your Starknet Domain?
</h3>
<p className={styles.cardDesc}>
By adding an EVM address to your Starknet domain, you can
create a personalized ENS domain{" "}
{getDomainWithoutStark(identity?.domain)}.snid.eth. This
domain can be used across all EVM chains and rollups !
Additionally, you&apos;ll update your ENS profile with your
PFP, GitHub, Twitter, and other verified Starknet ID
information!
</p>
</div>
<img src="/visuals/ecosystemMap.svg" className={styles.cardImg} />
<button
onClick={() => closeModal(false)}
className="px-4 py-2 mt-4 text-sm font-normal border-none lg:hidden font-quickZap"
>
Cancel
</button>
</div>
</div>
</div>
Expand Down
58 changes: 28 additions & 30 deletions styles/components/evmModalMessage.module.css
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
.menu {
position: absolute;
background-color: var(--background);
background-color: #FCFFFE;
align-self: center;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
padding: 45px;
padding: 45px 50px;
width: 800px;
display: flex;
flex-direction: column;
Expand All @@ -25,8 +25,8 @@

.menu_close {
position: absolute;
top: 12px;
right: 12px;
top: 20px;
right: 20px;
width: 22px;
stroke: black;
cursor: pointer;
Expand All @@ -42,41 +42,45 @@
.menu_title {
color: #454545;
font-family: "QuickZap";
font-size: 30px;
font-weight: bold;
font-size: 24px;
font-weight: 400;
text-align: center;
}

.menu_subtitle {
font-size: 12px;
font-weight: 500;
font-weight: 400;
line-height: 20px;
text-align: center;
color: #8c8989;
}

.infoCard {
display: flex;
flex-direction: row;
padding: 24px;
padding: 40px 48px;
gap: 48px;
padding: 18px 0px 18px 18px;
gap: 36px;
border-radius: 20px;
background: var(--background-light);
box-shadow: 0px 2px 30px 0px #0000000f;
margin-top: 24px;
margin-top: 0px;
}

.cardTitle {
color: #454545;
font-family: "QuickZap";
font-size: 21px;
font-family: "Poppins-Bold";
font-size: 18px;
line-height: 26px;
font-weight: bold;
margin-bottom: 12px;
margin-bottom: 14px;
}

.cardDesc {
color: var(--content-600);
font-size: 12px;
color: var(--content600);
font-size: 13px;
font-weight: 400;
line-height: 22px;
font-family: "Poppins-Regular";
}

.cardImg {
Expand All @@ -85,6 +89,10 @@
max-width: 250px;
}

.cardInput {
@apply !bg-white h-[68px] w-full text-center border border-[#4545451A]/20 rounded-lg shadow-sm placeholder:text-[#454545]/20 p-5;
}

@media (max-width: 850px) {
.menu {
width: 600px;
Expand All @@ -93,7 +101,7 @@

.menu_title {
font-size: 21px;
margin: -7px -2px 2px;
margin: -2px -2px 2px;
}

.infoCard {
Expand All @@ -105,17 +113,7 @@

@media (max-width: 625px) {
.menu {
width: 320px;
padding: 30px;
}

.menu_title {
font-size: 21px;
margin: -7px -2px 2px;
}

.infoCard {
flex-direction: column;
padding: 24px;
width: 95%;
padding: 16px;
}
}
}

0 comments on commit e38fbff

Please sign in to comment.