Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Browser-fixes-1 #645

Merged
merged 2 commits into from
May 9, 2022
Merged

Browser-fixes-1 #645

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e00d6aa
fix: ask only necessary approves
IlyasRidhuan May 8, 2022
02feec4
feat: handle errors in generation
IlyasRidhuan May 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions wallet/src/assets/lottie/check-mark-cross.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"v":"5.4.3","fr":25,"ip":0,"op":75,"w":90,"h":90,"nm":"btn_cocheBad_02","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"good Outlines 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.244],"y":[1]},"o":{"x":[0.959],"y":[0.003]},"n":["0p244_1_0p959_0p003"],"t":55,"s":[0],"e":[91]},{"t":64}],"ix":10},"p":{"a":0,"k":[45,45,0],"ix":2},"a":{"a":0,"k":[29.531,28.758,0],"ix":1},"s":{"a":0,"k":[108.742,108.742,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.012,-0.012],[0,0]],"o":[[0,0],[0,0]],"v":[[-9.334,-9.673],[10.002,9.739]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"n":["0p667_1_0p167_0"],"t":54,"s":[0],"e":[100]},{"t":55}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0.72549021244,0.129411771894,0.129411771894,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[29.171,28.691],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 4","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":125,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"good Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[45,45,0],"ix":2},"a":{"a":0,"k":[29.531,28.758,0],"ix":1},"s":{"a":0,"k":[108.742,108.742,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.012,-0.012],[0,0]],"o":[[0,0],[0,0]],"v":[[-9.334,-9.673],[10.002,9.739]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.651],"y":[-0.011]},"n":["0p667_1_0p651_-0p011"],"t":41,"s":[0],"e":[0]},{"t":50}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.132],"y":[0.999]},"o":{"x":[0.935],"y":[0.005]},"n":["0p132_0p999_0p935_0p005"],"t":41,"s":[0],"e":[100]},{"t":50}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0.72549021244,0.129411771894,0.129411771894,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[29.171,28.691],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 4","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":125,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"circle-purple","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0],"e":[360]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":33,"s":[360],"e":[876]},{"t":54}],"ix":10},"p":{"a":0,"k":[45,45,0],"ix":2},"a":{"a":0,"k":[37.5,37.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-19.054,0],[0,-19.054],[19.054,0],[0,19.054]],"o":[[19.054,0],[0,19.054],[-19.054,0],[0,-19.054]],"v":[[0,-34.5],[34.5,0],[0,34.5],[-34.5,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[1,1,1,1],"e":[0.72549021244,0.129411771894,0.129411771894,1]},{"t":10}],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[37.5,37.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.123],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p123_1_0p333_0"],"t":0,"s":[0],"e":[100]},{"i":{"x":[0.835],"y":[1]},"o":{"x":[0.229],"y":[0]},"n":["0p835_1_0p229_0"],"t":33,"s":[100],"e":[100]},{"t":54}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.262],"y":[1]},"o":{"x":[0.581],"y":[0]},"n":["0p262_1_0p581_0"],"t":0,"s":[0],"e":[100]},{"i":{"x":[0.825],"y":[1]},"o":{"x":[0.161],"y":[0]},"n":["0p825_1_0p161_0"],"t":33,"s":[100],"e":[0]},{"t":54}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":750,"st":0,"bm":0}],"markers":[]}
50 changes: 46 additions & 4 deletions wallet/src/components/BridgeComponent/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@ import './toast.css';
import './styles.scss';
import TransferModal from '../Modals/Bridge/Transfer/index.jsx';
import checkMarkYes from '../../assets/lottie/check-mark-yes.json';
import checkMarkCross from '../../assets/lottie/check-mark-cross.json';

import ERC20 from '../../contract-abis/ERC20.json';
import { APPROVE_AMOUNT } from '../../constants';
import { retrieveAndDecrypt } from '../../utils/lib/key-storage';
import BigFloat from '../../common-files/classes/bigFloat';

Expand Down Expand Up @@ -171,6 +171,7 @@ const BridgeComponent = () => {
const [showModalConfirm, setShowModalConfirm] = useState(false);
const [showModalTransferInProgress, setShowModalTransferInProgress] = useState(true);
const [showModalTransferEnRoute, setShowModalTransferEnRoute] = useState(false);
const [showModalTransferFailed, setShowModalTransferFailed] = useState(false);
const [showModalTransferConfirmed, setShowModalTransferConfirmed] = useState(false);
const [readyTx, setReadyTx] = useState('');

Expand All @@ -183,6 +184,7 @@ const BridgeComponent = () => {
setShowModalConfirm(false);
setShowModalTransferInProgress(false);
setShowModalTransferEnRoute(false);
setShowModalTransferFailed(false);
setShowModalTransferConfirmed(false);
};

Expand Down Expand Up @@ -231,7 +233,12 @@ const BridgeComponent = () => {
switch (txType) {
case 'deposit': {
const pkd = decompressKey(generalise(state.compressedPkd));
await approve(ercAddress, shieldContractAddress, 'ERC20', APPROVE_AMOUNT);
await approve(
ercAddress,
shieldContractAddress,
'ERC20',
new BigFloat(transferValue, token.decimals).toBigInt().toString(),
);
setShowModalConfirm(true);
setShowModalTransferInProgress(true);
await timeout(2000);
Expand All @@ -248,7 +255,13 @@ const BridgeComponent = () => {
tokenType: 'ERC20',
},
shieldContractAddress,
);
).catch(e => {
console.log('Error in transfer', e);
setShowModalTransferEnRoute(false);
setShowModalTransferFailed(true);
return { transaction: null };
});
if (transaction === null) return { type: 'failed_transfer' };
setShowModalTransferEnRoute(false);
setShowModalTransferConfirmed(true);
console.log('Proof Done');
Expand Down Expand Up @@ -277,7 +290,13 @@ const BridgeComponent = () => {
fees: 1,
},
shieldContractAddress,
);
).catch(e => {
console.log('Error in transfer', e);
setShowModalTransferEnRoute(false);
setShowModalTransferFailed(true);
return { transaction: null };
});
if (transaction === null) return { type: 'failed_transfer' };
setShowModalTransferEnRoute(false);
setShowModalTransferConfirmed(true);
return {
Expand Down Expand Up @@ -597,6 +616,29 @@ const BridgeComponent = () => {
</MyModalBody>
</Modal.Body>
)}

{showModalTransferFailed && (
<Modal.Body>
<MyModalBody>
<ProcessImage>
<img src={transferCompletedImg} alt="transfer failed" />
</ProcessImage>
<Divider />
<SpinnerBox>
<Lottie animationData={checkMarkCross} />
</SpinnerBox>

<TransferMode>
<h3>Failed To Create Transaction.</h3>
{/* <ModalText>Please Try Again</ModalText> */}
{/* <a className={styles.footerText}>View on etherscan</a> */}
<ContinueTransferButton type="button" id="Bridge_modal_continueTransferButton">
<div onClick={() => handleCloseConfirmModal()}>Close</div>
</ContinueTransferButton>
</TransferMode>
</MyModalBody>
</Modal.Body>
)}
</Modal>
</div>
</div>
Expand Down
57 changes: 47 additions & 10 deletions wallet/src/components/Modals/sendModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,15 @@ import successHand from '../../assets/img/modalImages/success-hand.png';
import transferCompletedImg from '../../assets/img/modalImages/tranferCompleted.png';
import BigFloat from '../../common-files/classes/bigFloat';
import checkMarkYes from '../../assets/lottie/check-mark-yes.json';
import Transaction from '../../common-files/classes/transaction';
import checkMarkCross from '../../assets/lottie/check-mark-cross.json';

const supportedTokens = importTokens();

type Transfer =
| { type: 'offchain'; transaction: Transaction; rawTransaction: string }
| { type: 'failed_transfer' };

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const { proposerUrl } = global.config;
Expand Down Expand Up @@ -297,7 +303,7 @@ const Divider = styled.div`
border-bottom: solid 1px #ddd;
`;

const SpineerBox = styled.div`
const SpinnerBox = styled.div`
display: flex;
justify-content: center;
align-content: center;
Expand Down Expand Up @@ -411,6 +417,7 @@ const SendModal = (props: SendModalProps): JSX.Element => {
const [showModalConfirm, setShowModalConfirm] = useState(false);
const [showModalTransferInProgress, setShowModalTransferInProgress] = useState(true);
const [showModalTransferEnRoute, setShowModalTransferEnRoute] = useState(false);
const [showModalTransferFailed, setShowModalTransferFailed] = useState(false);
const [showModalTransferConfirmed, setShowModalTransferConfirmed] = useState(false);
// const [showTransferModal, setShowTransferModal] = useState(false);

Expand All @@ -425,6 +432,7 @@ const SendModal = (props: SendModalProps): JSX.Element => {
setShowModalConfirm(false);
setShowModalTransferInProgress(false);
setShowModalTransferEnRoute(false);
setShowModalTransferFailed(false);
setShowModalTransferConfirmed(false);
};
// const handleClose = () => setShowTransferModal(false);
Expand Down Expand Up @@ -467,7 +475,7 @@ const SendModal = (props: SendModalProps): JSX.Element => {
getShieldAddress();
}, []);

async function sendTx() {
async function sendTx(): Promise<Transfer> {
if (shieldContractAddress === '')
setShieldAddress((await getContractAddress('Shield')).data.address);
setShowModalConfirm(true);
Expand All @@ -490,7 +498,13 @@ const SendModal = (props: SendModalProps): JSX.Element => {
fee: 1,
},
shieldContractAddress,
);
).catch(e => {
console.log('Error in transfer', e);
setShowModalTransferEnRoute(false);
setShowModalTransferFailed(true);
return { transaction: null, rawTransaction: '' };
});
if (transaction === null) return { type: 'failed_transfer' };
setShowModalTransferEnRoute(false);
setShowModalTransferConfirmed(true);
return {
Expand Down Expand Up @@ -607,7 +621,8 @@ const SendModal = (props: SendModalProps): JSX.Element => {
props.onHide();
setShowModalConfirm(true);
setShowModalTransferInProgress(true);
setReadyTx(await sendTx());
const pendingTx = await sendTx();
if (pendingTx.type !== 'failed_transfer') setReadyTx(pendingTx);
}}
>
Continue
Expand All @@ -631,11 +646,11 @@ const SendModal = (props: SendModalProps): JSX.Element => {
<img src={approveImg} alt="approve" />
</ProcessImages>
<Divider />
<SpineerBox>
<SpinnerBox>
<SpinnerBoard>
<Spinner />
</SpinnerBoard>
</SpineerBox>
</SpinnerBox>
<div className="transferModeModal">
<h3>Creating Transaction</h3>
<div className="modalText">
Expand All @@ -654,11 +669,11 @@ const SendModal = (props: SendModalProps): JSX.Element => {
<img src={depositConfirmed} alt="deposit confirmed" />
</ProcessImages>
<Divider />
<SpineerBox>
<SpinnerBox>
<SpinnerBoard>
<Spinner />
</SpinnerBoard>
</SpineerBox>
</SpinnerBox>
<div className="transferModeModal">
<h3>Generating Zk Proof</h3>
<div className="modalText">
Expand All @@ -677,9 +692,9 @@ const SendModal = (props: SendModalProps): JSX.Element => {
<img src={transferCompletedImg} alt="transfer completed" />
</ProcessImages>
<Divider />
<SpineerBox>
<SpinnerBox>
<img src={successHand} alt="success hand" />
</SpineerBox>
</SpinnerBox>
<div className="transferModeModal" id="Bridge_modal_success">
<h3>Transaction created sucessfully.</h3>
<div className="modalText">Your transfer is ready to send.</div>
Expand All @@ -704,6 +719,28 @@ const SendModal = (props: SendModalProps): JSX.Element => {
</MyBody>
</Modal.Body>
)}

{showModalTransferFailed && (
<Modal.Body>
<MyBody>
<ProcessImages>
<img src={transferCompletedImg} alt="transfer failed" />
</ProcessImages>
<Divider />
<SpinnerBox>
<Lottie animationData={checkMarkCross} />
</SpinnerBox>
<div className="transferModeModal" id="Bridge_modal_success">
<h3>Failed To Create Transaction.</h3>
{/* <div className="modalText">Please Try Again</div> */}
<ContinueTransferButton id="Bridge_modal_continueTransferButton">
<div onClick={() => handleCloseConfirmModal()}>Close</div>
</ContinueTransferButton>
{/* <a className="footerText">View on etherscan</a> */}
</div>
</MyBody>
</Modal.Body>
)}
</Modal>
</>
);
Expand Down
54 changes: 27 additions & 27 deletions wallet/src/nightfall-browser/services/deposit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,35 +65,35 @@ async function deposit(items, shieldContractAddress) {
];
logger.debug(`witness input is ${witnessInput.join(' ')}`);

const zokratesProvider = await initialize();
const artifacts = { program: new Uint8Array(program), abi };
const keypair = { pk: new Uint8Array(pk) };
try {
const zokratesProvider = await initialize();
const artifacts = { program: new Uint8Array(program), abi };
const keypair = { pk: new Uint8Array(pk) };

// computation
const { witness } = zokratesProvider.computeWitness(artifacts, witnessInput);
// generate proof
const { proof } = zokratesProvider.generateProof(artifacts.program, witness, keypair.pk);
const shieldContractInstance = await getContractInstance(
SHIELD_CONTRACT_NAME,
shieldContractAddress,
);
// computation
const { witness } = zokratesProvider.computeWitness(artifacts, witnessInput);
// generate proof
const { proof } = zokratesProvider.generateProof(artifacts.program, witness, keypair.pk);
const shieldContractInstance = await getContractInstance(
SHIELD_CONTRACT_NAME,
shieldContractAddress,
);

// next we need to compute the optimistic Transaction object
const optimisticDepositTransaction = new Transaction({
fee,
transactionType: 0,
tokenType: items.tokenType,
tokenId,
value,
ercAddress,
commitments: [commitment],
proof,
});
logger.silly(
`Optimistic deposit transaction ${JSON.stringify(optimisticDepositTransaction, null, 2)}`,
);
// and then we can create an unsigned blockchain transaction
try {
// next we need to compute the optimistic Transaction object
const optimisticDepositTransaction = new Transaction({
fee,
transactionType: 0,
tokenType: items.tokenType,
tokenId,
value,
ercAddress,
commitments: [commitment],
proof,
});
logger.silly(
`Optimistic deposit transaction ${JSON.stringify(optimisticDepositTransaction, null, 2)}`,
);
// and then we can create an unsigned blockchain transaction
const rawTransaction = await shieldContractInstance.methods
.submitTransaction(Transaction.buildSolidityStruct(optimisticDepositTransaction))
.encodeABI();
Expand Down
Loading