cd270be · bridge · git.iko.soy

git.iko.soy/bridge

Changed button state when insufficient ETH

commitcd270be1ebd89b96cf0d3bec794f91050c6ead4b authorWill Galebach <willbach@gmail.com> dateThu 9 Dec 2021, 13:24 (5 years ago) parent29d187d

4 files changed+56−30

compare with master

unifiedsplit

src/components/InlineEthereumTransaction.js+44−24 src/components/InlineEthereumTransaction.scss+4 src/components/L2/Headers/L2BackHeader.tsx+2−6 src/store/rollerStore.ts+6

src/components/InlineEthereumTransaction.js+44−24

@@ -7,6 +7,7 @@ import {

77 Flex,

88 LinkButton,

99 H5,

10+ Button,

1011} from 'indigo-react';

1112import { toBN } from 'web3-utils';

1213

@@ -26,6 +27,7 @@ import FeeDropdown from './L2/Dropdowns/FeeDropdown';

2627import CopyButton from './copiable/CopyButton';

2728

2829import './InlineEthereumTransaction.scss';

30+import { useRollerStore } from 'store/rollerStore';

2931

3032export default function InlineEthereumTransaction({

3133 // from useEthereumTransaction.bind

@@ -58,6 +60,7 @@ export default function InlineEthereumTransaction({

5860 className,

5961 onReturn,

6062}) {

63+ const { ethBalance } = useRollerStore();

6164 // show receipt after successful broadcast

6265 const [showReceipt, setShowReceipt] = useState(false);

6366 const toggleShowReceipt = useCallback(() => setShowReceipt(!showReceipt), [

@@ -91,6 +94,35 @@ export default function InlineEthereumTransaction({

9194 [resetGasPrice]

9295 );

9396

97+ const serializedTxsHex = useMemo(

98+ () =>

99+ signedTransactions &&

100+ signedTransactions.map(stx => hexify(stx.serialize())),

101+ [signedTransactions]

102+ );

103+

104+ const numTxs = useMemo(() => (unsignedTransactions || []).length || 1, [

105+ unsignedTransactions,

106+ ]);

107+ const maxCost = useMemo(

108+ () =>

109+ safeFromWei(

110+ safeToWei(

111+ toBN(gasLimit)

112+ .mul(toBN(gasPrice))

113+ .mul(toBN(numTxs)),

114+ 'gwei'

115+ ),

116+ 'ether'

117+ ),

118+ [gasLimit, gasPrice, numTxs]

119+ );

120+

121+ const insufficientEth = useMemo(

122+ () => Number(maxCost) > Number(ethBalance.toString()),

123+ [maxCost, ethBalance]

124+ );

125+

94126 const renderPrimarySection = () => {

95127 if (error) {

96128 return (

@@ -135,6 +167,18 @@ export default function InlineEthereumTransaction({

135167 )}

136168 </>

137169 );

170+ } else if (insufficientEth) {

171+ return (

172+ <Grid.Item

173+ className="ph4 eth-tx-button insufficient-eth"

174+ full

175+ as={Button}

176+ solid

177+ center

178+ disabled>

179+ Insufficient ETH

180+ </Grid.Item>

181+ );

138182 } else if (showBroadcastButton) {

139183 return (

140184 <Grid.Item

@@ -178,30 +222,6 @@ export default function InlineEthereumTransaction({

178222 }

179223 };

180224

181− const serializedTxsHex = useMemo(

182− () =>

183− signedTransactions &&

184− signedTransactions.map(stx => hexify(stx.serialize())),

185− [signedTransactions]

186− );

187−

188− const numTxs = useMemo(() => (unsignedTransactions || []).length || 1, [

189− unsignedTransactions,

190− ]);

191− const maxCost = useMemo(

192− () =>

193− safeFromWei(

194− safeToWei(

195− toBN(gasLimit)

196− .mul(toBN(gasPrice))

197− .mul(toBN(numTxs)),

198− 'gwei'

199− ),

200− 'ether'

201− ),

202− [gasLimit, gasPrice, numTxs]

203− );

204−

205225 return (

206226 <Grid className={cn(className, 'mt1', 'inline-ethereum-tx')}>

207227 <BridgeForm validate={validate} onValues={onValues}>

src/components/InlineEthereumTransaction.scss+4

@@ -20,4 +20,8 @@

2020 .eth-tx-button.text > label > a {

2121 font-size: 14px;

2222 }

23+

24+ .insufficient-eth {

25+ background-color: $activate-error-red;

26+ }

2327}

src/components/L2/Headers/L2BackHeader.tsx+2−6

@@ -1,7 +1,5 @@

1−import React, { useCallback, useEffect, useState } from 'react';

1+import React, { useCallback, useEffect } from 'react';

22import { Row, Icon, Box } from '@tlon/indigo-react';

3−import { toBN } from 'web3-utils';

4−import BN from 'bn.js';

64import { useHistory } from 'store/history';

75import { useRollerStore } from 'store/rollerStore';

@@ -24,7 +22,7 @@ const L2BackHeader = ({

2422 className = '',

2523 hideBalance = false,

2624}: L2BackHeaderProps) => {

27− const { point } = useRollerStore();

25+ const { point, ethBalance, setEthBalance } = useRollerStore();

2826 const { nextRoll } = useTimerStore();

2927 const { pop }: any = useHistory();

3028 const { wallet }: any = useWallet();

@@ -32,8 +30,6 @@ const L2BackHeader = ({

3230

3331 const currentL2 = !!point?.isL2;

3432

35− const [ethBalance, setEthBalance] = useState<BN>(toBN(0));

36−

3733 const goBack = useCallback(() => {

3834 if (back) {

3935 back();

src/store/rollerStore.ts+6

@@ -1,5 +1,7 @@

11import create from 'zustand';

22import { PendingTransaction } from '@urbit/roller-api';

3+import { toBN } from 'web3-utils';

4+import BN from 'bn.js';

46import { HOUR } from 'lib/utils/roller';

57import { Invite, Invites } from 'lib/types/Invite';

@@ -33,6 +35,7 @@ export interface RollerStore {

3335 recentlyCompleted: number;

3436 inviteGeneratingNum: number;

3537 invitesLoading: boolean;

38+ ethBalance: BN;

3639 setLoading: (loading: boolean) => void;

3740 removeInvite: (point: number, planet: number) => void;

3841 setInvites: (points: number, invites: Invite[]) => void;

@@ -48,6 +51,7 @@ export interface RollerStore {

4851 updatePoint: (point: Point) => void;

4952 storePendingL1Txn: (txn: PendingL1Txn) => void;

5053 deletePendingL1Txn: (txn: PendingL1Txn) => void;

54+ setEthBalance: (ethBalance: BN) => void;

5155}

5256

5357export const useRollerStore = create<RollerStore>(set => ({

@@ -63,6 +67,7 @@ export const useRollerStore = create<RollerStore>(set => ({

6367 recentlyCompleted: 0,

6468 inviteGeneratingNum: 0,

6569 invitesLoading: false,

70+ ethBalance: toBN(0),

6671 setLoading: (loading: boolean) => set(() => ({ loading })),

6772 setNextBatchTime: (nextBatchTime: number) => set(() => ({ nextBatchTime })),

6873 setNextQuotaTime: (nextQuotaTime: number) => set(() => ({ nextQuotaTime })),

@@ -128,4 +133,5 @@ export const useRollerStore = create<RollerStore>(set => ({

128133 pendingL1ByPoint[txn.point]?.filter(({ id }) => id !== txn.id) || [];

129134 return { pendingL1ByPoint: newPending };

130135 }),

136+ setEthBalance: (ethBalance: BN) => set(() => ({ ethBalance })),

131137}));