Skip to content

Commit

Permalink
fixed: update bpicon and username
Browse files Browse the repository at this point in the history
  • Loading branch information
@zzggo
zzggo committed Dec 5, 2024
1 parent 02c5a99 commit d51b6bb
Show file tree
Hide file tree
Showing 11 changed files with 181 additions and 313 deletions.
36 changes: 36 additions & 0 deletions src/ui/FRWAssets/icons/CustomCheckboxIcons.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { styled } from '@mui/material';

export const BpIcon = styled('span')(() => ({
borderRadius: 8,
width: '21px !important',
height: '21px !important',
opacity: 1,
visibility: 'visible',
}));

export const BpUncheked = styled(BpIcon)({
borderRadius: 8,
width: 21,
height: 21,
display: 'block',
border: '1px solid #41CC5D',
opacity: 1,
});

export const BpCheckedIcon = styled(BpIcon)({
backgroundColor: '#41CC5D',
backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
'&:before': {
display: 'block',
width: 21,
height: 21,
backgroundImage:
"url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
" fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
"1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
content: '""',
},
'input:hover ~ &': {
backgroundColor: '#41CC5D',
},
});
4 changes: 2 additions & 2 deletions src/ui/views/AddWelcome/AddRegister/PickUsername.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ const PickUsername = ({ handleClick, savedUsername, getUsername }) => {
[setLoading, setUsernameValid, setHelperText]
);

const checkUsername = useCallback(
const runCheckUsername = useCallback(
(username) => {
wallet.openapi
.checkUsername(username.toLowerCase())
Expand Down Expand Up @@ -161,7 +161,7 @@ const PickUsername = ({ handleClick, savedUsername, getUsername }) => {
return;
}

checkUsername(username);
runCheckUsername(username);
}, 500);

return () => clearTimeout(delayDebounceFn);
Expand Down
39 changes: 3 additions & 36 deletions src/ui/views/AddWelcome/AddRegister/SetPassword.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ import {
InputAdornment,
FormGroup,
LinearProgress,
Checkbox,
FormControlLabel,
} from '@mui/material';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import { makeStyles, styled } from '@mui/styles';
import { Box } from '@mui/system';
import HDWallet from 'ethereum-hdwallet';
Expand All @@ -28,6 +28,7 @@ import { useWallet, saveIndex, mixpanelBrowserService } from 'ui/utils';

import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark';
import CancelIcon from '../../../../components/iconfont/IconClose';
import { BpUncheked, BpCheckedIcon } from '../../../FRWAssets/icons/CustomCheckboxIcons';

const useStyles = makeStyles(() => ({
customInputLabel: {
Expand Down Expand Up @@ -63,40 +64,6 @@ const useStyles = makeStyles(() => ({
},
}));

const BpIcon = styled('span')(() => ({
borderRadius: 8,
width: '21px !important',
height: '21px !important',
opacity: 1,
visibility: 'visible',
}));

const BpUncheked = styled(BpIcon)({
borderRadius: 8,
width: 21,
height: 21,
display: 'block',
border: '1px solid #41CC5D',
opacity: 1,
});
const BpCheckedIcon = styled(BpIcon)({
backgroundColor: '#41CC5D',
backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
'&:before': {
display: 'block',
width: 21,
height: 21,
backgroundImage:
"url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
" fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
"1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
content: '""',
},
'input:hover ~ &': {
backgroundColor: '#41CC5D',
},
});

const PasswordIndicator = (props) => {
const score = zxcvbn(props.value).score;
const precentage = ((score + 1) / 5) * 100;
Expand Down
60 changes: 35 additions & 25 deletions src/ui/views/AddWelcome/AddressImport/PickUsername.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,28 +108,8 @@ const PickUsername = ({ handleClick, savedUsername, getUsername }) => {
[setLoading, setUsernameValid, setHelperText]
);

useEffect(() => {
setUsernameValid(false);
setHelperText(usernameLoading);
setLoading(true);
const delayDebounceFn = setTimeout(() => {
if (username.length < 3) {
setErrorMessage(chrome.i18n.getMessage('Too__short'));
return;
}

if (username.length > 15) {
setErrorMessage(chrome.i18n.getMessage('Too__long'));
return;
}
const regex = /^[A-Za-z0-9]{3,15}$/;

if (!regex.test(username)) {
setErrorMessage(
chrome.i18n.getMessage('Your__username__can__only__contain__letters__and__numbers')
);
return;
}
const runCheckUsername = useCallback(
(username) => {
wallet.openapi
.checkUsername(username.toLowerCase())
.then((response) => {
Expand All @@ -151,14 +131,44 @@ const PickUsername = ({ handleClick, savedUsername, getUsername }) => {
}
}
})
.catch((error) => {
console.error(error);
.catch(() => {
setErrorMessage(chrome.i18n.getMessage('Oops__unexpected__error'));
});
},
[setErrorMessage, setUsernameValid, setHelperText, usernameCorrect, wallet.openapi]
);

useEffect(() => {
setUsernameValid(false);
setHelperText(usernameLoading);
setLoading(true);
const delayDebounceFn = setTimeout(() => {
if (username.length < 3) {
setErrorMessage(chrome.i18n.getMessage('Too__short'));
setLoading(false);
return;
}

if (username.length > 15) {
setErrorMessage(chrome.i18n.getMessage('Too__long'));
setLoading(false);
return;
}

const regex = /^[A-Za-z0-9]{3,15}$/;
if (!regex.test(username)) {
setErrorMessage(
chrome.i18n.getMessage('Your__username__can__only__contain__letters__and__numbers')
);
setLoading(false);
return;
}

runCheckUsername(username);
}, 500);

return () => clearTimeout(delayDebounceFn);
}, [username, setErrorMessage, usernameCorrect, wallet.openapi, usernameLoading]);
}, [username]);

const msgBgColor = useCallback(() => {
if (isLoading) {
Expand Down
147 changes: 59 additions & 88 deletions src/ui/views/AddWelcome/AddressImport/SetPassword.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import { useWallet, saveIndex } from 'ui/utils';

import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark';
import CancelIcon from '../../../../components/iconfont/IconClose';
import { BpUncheked, BpCheckedIcon } from '../../../FRWAssets/icons/CustomCheckboxIcons';

const useStyles = makeStyles(() => ({
customInputLabel: {
Expand Down Expand Up @@ -63,32 +64,6 @@ const useStyles = makeStyles(() => ({
},
}));

const BpIcon = styled('span')(() => ({
borderRadius: 8,
width: 24,
height: 24,
border: '1px solid #41CC5D',
backgroundColor: 'transparent',
}));

const BpCheckedIcon = styled(BpIcon)({
backgroundColor: '#41CC5D',
backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
'&:before': {
display: 'block',
width: 21,
height: 21,
backgroundImage:
"url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
" fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
"1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
content: '""',
},
'input:hover ~ &': {
backgroundColor: '#41CC5D',
},
});

const PasswordIndicator = (props) => {
const score = zxcvbn(props.value).score;
const precentage = ((score + 1) / 5) * 100;
Expand Down Expand Up @@ -206,68 +181,64 @@ const SetPassword = ({ handleClick, mnemonic, pk, username, tempPassword, accoun

const handleImport = async () => {
setLoading(true);
if (accounts.length > 1) {
setLoading(true);
} else {
const accountKeyStruct = {
public_key: accounts[0].pubK,
sign_algo: getSignAlgo(accounts[0].signAlgo),
hash_algo: getHashAlgo(accounts[0].hashAlgo),
weight: 1000,
};
const result = await wallet.openapi.getLocation();
const installationId = await wallet.openapi.getInstallationId();
const userlocation = result.data;
const device_info = {
city: userlocation.city,
continent: userlocation.country,
continentCode: userlocation.countryCode,
country: userlocation.country,
countryCode: userlocation.countryCode,
currency: userlocation.countryCode,
device_id: installationId,
district: '',
ip: userlocation.query,
isp: userlocation.as,
lat: userlocation.lat,
lon: userlocation.lon,
name: 'FRW Chrome Extension',
org: userlocation.org,
regionName: userlocation.regionName,
type: '2',
user_agent: 'Chrome',
zip: userlocation.zip,
};
const address = accounts[0].address.replace(/^0x/, '');
wallet.openapi
.importKey(accountKeyStruct, device_info, username, {}, address)
.then((response) => {
return wallet.boot(password);
})
.then(async (response) => {
storage.remove('premnemonic');
const accountKeyStruct = {
public_key: accounts[0].pubK,
sign_algo: getSignAlgo(accounts[0].signAlgo),
hash_algo: getHashAlgo(accounts[0].hashAlgo),
weight: 1000,
};
const result = await wallet.openapi.getLocation();
const installationId = await wallet.openapi.getInstallationId();
const userlocation = result.data;
const device_info = {
city: userlocation.city,
continent: userlocation.country,
continentCode: userlocation.countryCode,
country: userlocation.country,
countryCode: userlocation.countryCode,
currency: userlocation.countryCode,
device_id: installationId,
district: '',
ip: userlocation.query,
isp: userlocation.as,
lat: userlocation.lat,
lon: userlocation.lon,
name: 'FRW Chrome Extension',
org: userlocation.org,
regionName: userlocation.regionName,
type: '2',
user_agent: 'Chrome',
zip: userlocation.zip,
};
const address = accounts[0].address.replace(/^0x/, '');
wallet.openapi
.importKey(accountKeyStruct, device_info, username, {}, address)
.then((response) => {
return wallet.boot(password);
})
.then(async (response) => {
storage.remove('premnemonic');

await saveIndex(username);
if (pk) {
return wallet.importPrivateKey(pk);
} else {
return wallet.createKeyringWithMnemonics(mnemonic);
}
})
.then((address) => {
setLoading(false);
if (pk) {
goEnd();
} else {
handleClick();
}
})
.catch((error) => {
console.log('error', error);
setShowError(true);
setLoading(false);
});
}
await saveIndex(username);
if (pk) {
return wallet.importPrivateKey(pk);
} else {
return wallet.createKeyringWithMnemonics(mnemonic);
}
})
.then((address) => {
setLoading(false);
if (pk) {
goEnd();
} else {
handleClick();
}
})
.catch((error) => {
console.log('error', error);
setShowError(true);
setLoading(false);
});
};

useEffect(() => {
Expand Down Expand Up @@ -336,7 +307,7 @@ const SetPassword = ({ handleClick, mnemonic, pk, username, tempPassword, accoun
<FormControlLabel
control={
<Checkbox
icon={<BpIcon />}
icon={<BpUncheked />}
checkedIcon={<BpCheckedIcon />}
onChange={(event) => setCheck(event.target.checked)}
/>
Expand Down
Loading

0 comments on commit d51b6bb

Please sign in to comment.