react-icons/bi#BiReset JavaScript Examples

The following examples show how to use react-icons/bi#BiReset. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: idCard.js From rahat-vendor with GNU Affero General Public License v3.0

4 votes

export default function Main() {
	const history = useHistory();
	const { setHasWallet, setWallet, setAgency } = useContext(AppContext);
	const [loading, showLoading] = useState(null);
	const [videoConstraints, setVideoConstraints] = useState({
		facingMode: 'environment',
		forceScreenshotSourceSize: true,
		screenshotQuality: 1,
		width: 1280,
		height: 720
	});
	const [previewImage, setPreviewImage] = useState('');
	const [showPageLoader, setShowPageLoader] = useState(true);
	const webcamRef = React.useRef(null);

	const capture = () => {
		const imageSrc = webcamRef.current.getScreenshot();
		setPreviewImage(imageSrc);
	};

	const registerWithAgency = async data => {
		let appData = await fetch(`${api.APP}/settings`).then(r => {
			if (!r.ok) throw Error(r.message);
			return r.json();
		});

		const agencyData = {
			api: process.env.REACT_APP_DEFAULT_AGENCY_API,
			address: appData.agency.contracts.rahat,
			adminAddress: appData.agency.contracts.rahat_admin,
			network: appData.networkUrl,
			tokenAddress: appData.agency.contracts.rahat_erc20,
			nftAddress: appData.agency.contracts.rahat_erc1155,
			name: appData.agency.name,
			email: appData.agency.email,
			isApproved: false
		};
		await DataService.addAgency(agencyData);
		setAgency(agencyData);
		if (!data.email) delete data.email;

		await fetch(`${api.VENDORS}/register`, {
			method: 'post',
			headers: {
				Accept: 'application/json',
				'Content-Type': 'application/json'
			},
			body: JSON.stringify(data)
		}).then(r => {
			if (!r.ok) throw Error(r.message);
			return r.json();
		});

		return agencyData;
	};

	const save = async event => {
		event.preventDefault();
		try {
			showLoading('Creating new wallet...');
			const wallet = await DataService.getWallet();
			if (wallet) {
				history.push('/');
				return;
			}
			const profile = await DataService.get('profile');
			if (!profile.phone) {
				showLoading(null);
				history.push('/setup/profile');
				return;
			}
			await DataService.saveProfileIdCard(previewImage);
			let profileImage = await DataService.get('profileImage');

			const res = await Wallet.create(profile.phone);
			if (res) {
				const { wallet, encryptedWallet } = res;
				showLoading('Registering with the agency...');
				await registerWithAgency({
					wallet_address: wallet.address,
					name: profile.name,
					phone: profile.phone,
					email: profile.email,
					address: profile.address,
					photo: profileImage,
					govt_id_image: previewImage
				});
				await DataService.saveWallet(encryptedWallet);
				await DataService.saveAddress(wallet.address);
				await DataService.setSynchronized(true);

				setWallet(wallet);
				setHasWallet(true);
				showLoading(null);
				history.push('/wallet/backup');
			}
		} catch (err) {
			console.log(err);
			Swal.fire('ERROR', err.message, 'error');
			showLoading(null);
		}
	};

	useEffect(() => {
		setVideoConstraints({
			facingMode: 'environment',
			forceScreenshotSourceSize: true,
			screenshotQuality: 1,
			width: 1280,
			height: 720
		});
		return function cleanup() {};
	}, []);

	useEffect(() => {
		const timer = setTimeout(() => {
			setShowPageLoader(false);
		}, 1000);
		return () => clearTimeout(timer);
	}, []);

	return (
		<>
			{showPageLoader ? (
				<div id="loader">
					<img src="/assets/img/brand/icon-white-128.png" alt="icon" className="loading-icon" />
				</div>
			) : (
				<>
					<Loading message={loading} showModal={loading !== null} />
					<div className="section">
						<div className="text-center p-2">
							<img src="/assets/img/brand/logo-512.png" alt="alt" width="130" />
						</div>
						<div className="card1">
							<div className="card-body text-center">
								<h3 className="mb-2">
									Take a picture of your ID card
									<small>
										<br />
										Citizenship, Passport, License or National ID
									</small>
								</h3>

								{previewImage ? (
									<img
										alt="preview"
										src={previewImage}
										style={{
											borderRadius: '10px',
											width: '100%',
											height: '350px',
											border: '3px solid #958d9e',
											marginTop: '30px'
										}}
									/>
								) : (
									<div className="idCardWrapper mt-4">
										<Webcam
											audio={false}
											ref={webcamRef}
											height={720}
											width="100%"
											minScreenshotWidth={1024}
											minScreenshotHeight={720}
											screenshotFormat="image/png"
											videoConstraints={videoConstraints}
											className="idCardSnapper"
										/>
									</div>
								)}
							</div>
						</div>
						<div className="pl-4 pr-4">
							{previewImage ? (
								<div className="text-center">
									<button
										type="button"
										className="btn btn-lg btn-block btn-outline-primary mt-1"
										onClick={() => setPreviewImage(null)}
									>
										<BiReset className="ion-icon" />
										Retake Picture
									</button>
									<button
										type="button"
										className="btn btn-lg btn-block btn-success mt-3 mb-2"
										onClick={save}
									>
										Complete setup
									</button>
								</div>
							) : (
								<div className="d-flex justify-content-between align-items-center mt-1 mb-3">
									<div style={{ width: '40px', height: '40px' }}></div>
									<div className="btn-shutter" onClick={capture}>
										<IoRadioButtonOff className="btn-shutter-icon" />
									</div>
									<div style={{ width: '40px', height: '40px' }}></div>
								</div>
							)}
						</div>
					</div>
				</>
			)}
		</>
	);
}

Example #2

Source File: selfie.js From rahat-vendor with GNU Affero General Public License v3.0

4 votes

export default function Main() {
	const history = useHistory();
	const [videoConstraints, setVideoConstraints] = useState({
		facingMode: 'user',
		forceScreenshotSourceSize: true,
		screenshotQuality: 1,
		minScreenshotWidth: 1024
	});
	const [previewImage, setPreviewImage] = useState('');

	const webcamRef = React.useRef(null);
	const camContainerRef = React.useRef();
	//const { width, height } = useResize(camContainerRef);

	const handleFaceChange = () => {
		const { facingMode } = videoConstraints;
		const face = facingMode === 'environment' ? 'user' : 'environment';
		setVideoConstraints({ ...videoConstraints, facingMode: face });
	};

	const capture = () => {
		const imageSrc = webcamRef.current.getScreenshot();
		// fetch(imageSrc)
		// 	.then(res => {
		// 		const result = res.blob();
		// 		resolve(result);
		// 	})
		// 	.catch(err => reject(err));
		console.log(imageSrc);
		setPreviewImage(imageSrc);
	};

	const save = async event => {
		event.preventDefault();
		await DataService.saveProfileImage(previewImage);
		history.push('/setup/idcard');
	};

	const skip = async event => {
		event.preventDefault();
		history.push('/setup/idcard');
	};

	useEffect(() => {
		setVideoConstraints({
			facingMode: 'user',
			forceScreenshotSourceSize: true,
			screenshotQuality: 1,
			minScreenshotWidth: 1024
		});
		return function cleanup() {};
	}, []);

	return (
		<>
			<div className="section">
				<div className="text-center p-2">
					<img src="/assets/img/brand/logo-512.png" alt="alt" width="130" />
				</div>
				<div className="card1">
					<div className="card-body text-center" ref={camContainerRef}>
						<h2 className="mb-1">
							Take a selfie
							<small>
								<br />
								Remember to smile :-)
							</small>
						</h2>

						{previewImage ? (
							<img className="video-flipped circleSelfie mt-4" alt="preview" src={previewImage} />
						) : (
							<div className="selfieWrapper mt-3">
								<Webcam
									audio={false}
									ref={webcamRef}
									height={720}
									width="100%"
									minScreenshotWidth={1024}
									minScreenshotHeight={720}
									screenshotFormat="image/png"
									videoConstraints={videoConstraints}
									className="circleSelfie"
								/>
							</div>
						)}
					</div>
				</div>
				<div className="pl-4 pr-4">
					{previewImage ? (
						<div className="text-center">
							<button
								type="button"
								className="btn btn-lg btn-block btn-outline-primary mt-1"
								onClick={() => setPreviewImage(null)}
							>
								<BiReset className="ion-icon" />
								Retake Picture
							</button>
							<button type="button" className="btn btn-lg btn-block btn-success mt-3 mb-5" onClick={save}>
								Continue to next step
							</button>
						</div>
					) : (
						<div className="d-flex justify-content-between align-items-center">
							<div className="btn-faceChange" onClick={handleFaceChange}>
								<IoSyncOutline className="btn-flipcamera" />
							</div>
							<div className="btn-shutter" onClick={capture}>
								<IoRadioButtonOff className="btn-shutter-icon" />
							</div>
							<div className="btn-faceChange" onClick={skip}>
								<IoChevronForwardOutline className="btn-skip" />
							</div>
						</div>
					)}
				</div>
			</div>
		</>
	);
}