diff --git a/.env.local-hyperspace b/.env.local-hyperspace new file mode 100644 index 000000000..da3d40686 --- /dev/null +++ b/.env.local-hyperspace @@ -0,0 +1,68 @@ +## all +NODE_ENV = 'production' +LOG_DESTINATION = 'console' +LOG_LEVEL = 'info' +# e2e-tests +BROWSER_LOG_DESTINATION = 'browser.log' +HEADLESS = 'false' +USE_DAPPETEER = 'true' +WEB3TORRENT_URL = 'http://localhost:3000' +CLOSE_BROWSERS = 'true' + +## web3torrent, xstate-wallet, rps, simple-hub +CHAIN_NETWORK_ID = '3141' + +## simple-hub, e2e +INFURA_API_KEY = '' +RPC_ENDPOINT = https://api.hyperspace.node.glif.io/rpc/v1 + +## simple-hub, rps +FIREBASE_API_KEY = 'AIzaSyAOvhDzJir_El3O6SJ2xQlrpOisnObq6zw' +FIREBASE_PREFIX = 'netlify-hyperspace' +FIREBASE_PROJECT = 'web3torrent-default-rtdb' + +## rps, xstate-wallet, ttt +TARGET_NETWORK = 'hyperspace' + +## web3torrent, rps, ttt +WALLET_URL = 'http://localhost:3055' + +## simple-hub, xstate-wallet +CONSENSUS_APP_ADDRESS = '0xeB1170bf49fac482fA296C98Ac04024e8a2d6519' + +NITRO_ADJUDICATOR_ADDRESS = '0xaA512d99EC808FBf49b1e6491A251f2E75f913Ad' +ETH_ASSET_HOLDER_ADDRESS = '0x6abaBB7e642C794264DAa2a1477B48521AaE1553' + +TRIVIAL_APP_ADDRESS = '0x95900b17Bd2CE12431C99A886FfDC5a451C14344' + +## simple-hub +FIREBASE_URL = https://${FIREBASE_PROJECT}.firebaseio.com/ +# This is a funded address on goerli for the hub. This is NOT the production address/key +HUB_CHAIN_PK = '0xBB72BD0824663E0B52FA3523ACED0F866550BBC1FD600D7F2DA9C45CAC509AE7' +HUB_PARTICIPANT_ID = 'firebase:simple-hub' + +## xstate-wallet +# This is a funded address on goerli for the hub. This is NOT the production address/key +HUB_DESTINATION = '0x000000000000000000000000c4FB59b7fb0D8001Bda6DEA539117664573006c9' +USE_INDEXED_DB = 'true' + +## web3torrent +FUNDING_STRATEGY = 'Virtual' +SINGLE_ASSET_PAYMENT_CONTRACT_ADDRESS = '0x4964f1aE3Ca9Ea0a1e7EF873a379768dBc74F034' +SKIP_PREFLIGHT_CHECK = 'true' +TRACKER_URL = 'localhost:8000' +TRACKER_URL_HTTP_PROTOCOL = 'http' +GENERATE_SOURCEMAP = 'true' + +## rps +RPS_CONTRACT_ADDRESS = '0x' + +## web3torrent-tracker +TRACKER_PORT = 80 + +## ttt +TTT_CONTRACT_ADDRESS = '0x' +FIREBASE_PROJECT_TTT = 'tic-tac-toe-production' + + +ADD_LOGS = true \ No newline at end of file diff --git a/.env.production-hyperspace b/.env.production-hyperspace new file mode 100644 index 000000000..7bb3d450b --- /dev/null +++ b/.env.production-hyperspace @@ -0,0 +1,68 @@ +## all +NODE_ENV = 'production' +LOG_DESTINATION = 'console' +LOG_LEVEL = 'info' +# e2e-tests +BROWSER_LOG_DESTINATION = 'browser.log' +HEADLESS = 'false' +USE_DAPPETEER = 'true' +WEB3TORRENT_URL = 'https://hyperspace-torrent.statechannels.org' +CLOSE_BROWSERS = 'true' + +## web3torrent, xstate-wallet, rps, simple-hub +CHAIN_NETWORK_ID = '3141' + +## simple-hub, e2e +INFURA_API_KEY = '' +RPC_ENDPOINT = https://api.hyperspace.node.glif.io/rpc/v1 + +## simple-hub, rps +FIREBASE_API_KEY = 'AIzaSyAOvhDzJir_El3O6SJ2xQlrpOisnObq6zw' +FIREBASE_PREFIX = 'netlify-hyperspace' +FIREBASE_PROJECT = 'web3torrent-default-rtdb' + +## rps, xstate-wallet, ttt +TARGET_NETWORK = 'hyperspace' + +## web3torrent, rps, ttt +WALLET_URL = 'https://hyperspace-wallet.statechannels.org/' + +## simple-hub, xstate-wallet +CONSENSUS_APP_ADDRESS = '0xeB1170bf49fac482fA296C98Ac04024e8a2d6519' + +NITRO_ADJUDICATOR_ADDRESS = '0xaA512d99EC808FBf49b1e6491A251f2E75f913Ad' +ETH_ASSET_HOLDER_ADDRESS = '0x6abaBB7e642C794264DAa2a1477B48521AaE1553' + +TRIVIAL_APP_ADDRESS = '0x95900b17Bd2CE12431C99A886FfDC5a451C14344' + +## simple-hub +FIREBASE_URL = https://${FIREBASE_PROJECT}.firebaseio.com/ +# This is a funded address on goerli for the hub. This is NOT the production address/key +HUB_CHAIN_PK = '0xBB72BD0824663E0B52FA3523ACED0F866550BBC1FD600D7F2DA9C45CAC509AE7' +HUB_PARTICIPANT_ID = 'firebase:simple-hub' + +## xstate-wallet +# This is a funded address on goerli for the hub. This is NOT the production address/key +HUB_DESTINATION = '0x000000000000000000000000c4FB59b7fb0D8001Bda6DEA539117664573006c9' +USE_INDEXED_DB = 'true' + +## web3torrent +FUNDING_STRATEGY = 'Virtual' +SINGLE_ASSET_PAYMENT_CONTRACT_ADDRESS = '0x4964f1aE3Ca9Ea0a1e7EF873a379768dBc74F034' +SKIP_PREFLIGHT_CHECK = 'true' +TRACKER_URL = 'web3torrent-tracker-hyperspace.herokuapp.com' +TRACKER_URL_HTTP_PROTOCOL = 'https' +GENERATE_SOURCEMAP = 'true' + +## rps +RPS_CONTRACT_ADDRESS = '0x' + +## web3torrent-tracker +TRACKER_PORT = 80 + +## ttt +TTT_CONTRACT_ADDRESS = '0x' +FIREBASE_PROJECT_TTT = 'tic-tac-toe-production' + + +ADD_LOGS = true \ No newline at end of file diff --git a/package.json b/package.json index a703a4382..5d276809e 100644 --- a/package.json +++ b/package.json @@ -51,7 +51,6 @@ "lint:check": "lerna run lint:check --no-sort --no-bail -- --max-warnings=0", "lint:write": "lerna run lint:write --no-sort --no-bail", "postinstall": "patch-package", - "preinstall": "npx typesync", "prepare": "lerna run --concurrency 8 --stream prepare", "publish": "lerna publish --yes from-package patch", "release:netlify": "lerna run release:netlify --stream -- --auth $NETLIFY_ACCESS_TOKEN --message $(git rev-parse --short HEAD) $([ $(git rev-parse --abbrev-ref HEAD) = master ] && echo --prod)", diff --git a/packages/channel-client/package.json b/packages/channel-client/package.json index 7cabacf12..f46b3a25f 100644 --- a/packages/channel-client/package.json +++ b/packages/channel-client/package.json @@ -1,11 +1,11 @@ { "name": "@statechannels/channel-client", "description": "Browser-compatible JS client implementing the State Channels Client API", - "version": "0.3.0", + "version": "0.3.0-hyperspace", "author": "snario ", "dependencies": { - "@statechannels/client-api-schema": "^0.3.0", - "@statechannels/iframe-channel-provider": "^0.3.0", + "@statechannels/client-api-schema": "0.3.0", + "@statechannels/iframe-channel-provider": "0.3.0", "ethers": "4.0.45", "eventemitter3": "4.0.0", "loglevel": "1.6.8" diff --git a/packages/channel-client/tsconfig.json b/packages/channel-client/tsconfig.json index b5ae861b3..c37ece43f 100644 --- a/packages/channel-client/tsconfig.json +++ b/packages/channel-client/tsconfig.json @@ -9,6 +9,5 @@ "target": "es2015", "esModuleInterop": true, "types": ["react", "jest", "node"] - }, - "references": [{"path": "../iframe-channel-provider"}, {"path": "../client-api-schema"}] + } } diff --git a/packages/iframe-channel-provider/package.json b/packages/iframe-channel-provider/package.json index 9fc631d5c..479e55ab6 100644 --- a/packages/iframe-channel-provider/package.json +++ b/packages/iframe-channel-provider/package.json @@ -1,6 +1,6 @@ { "name": "@statechannels/iframe-channel-provider", - "version": "0.3.0", + "version": "0.3.0-hyperspace-patch-0", "browser": "dist/iframe-channel-provider.js", "browserslist": { "production": [ diff --git a/packages/iframe-channel-provider/src/channel-provider.ts b/packages/iframe-channel-provider/src/channel-provider.ts index f3defb651..ce524fcf3 100644 --- a/packages/iframe-channel-provider/src/channel-provider.ts +++ b/packages/iframe-channel-provider/src/channel-provider.ts @@ -189,6 +189,7 @@ export class IFrameChannelProvider implements IFrameChannelProviderInterface { protected async onMessage(event: MessageEvent) { let message; + if (event.data == '') return; if (isJsonRpcNotification(event.data)) { message = parseNotification(event.data); // Narrows type, throws if it does not fit the schema const notificationMethod = message.method; diff --git a/packages/iframe-channel-provider/src/postmessage-service.ts b/packages/iframe-channel-provider/src/postmessage-service.ts index ce255163a..58fa36d3c 100644 --- a/packages/iframe-channel-provider/src/postmessage-service.ts +++ b/packages/iframe-channel-provider/src/postmessage-service.ts @@ -40,6 +40,10 @@ export class PostMessageService { this.attempts += 1; logger.info({message}, 'Sending message (attempt %s)', this.attempts); + // TODO: This lets us get around CORS restrictions when using different ports on localhost + if (corsUrl.startsWith('http://localhost')) { + corsUrl = '*'; + } target.postMessage(message, corsUrl); logger.info({message}, 'Sent message:'); diff --git a/packages/xstate-wallet/config/webpack.config.js b/packages/xstate-wallet/config/webpack.config.js index fcc62b1a4..478537dac 100644 --- a/packages/xstate-wallet/config/webpack.config.js +++ b/packages/xstate-wallet/config/webpack.config.js @@ -611,7 +611,7 @@ module.exports = function(webpackEnv) { isEnvProduction && new WorkboxWebpackPlugin.GenerateSW({ clientsClaim: true, - maximumFileSizeToCacheInBytes: 6000000, + maximumFileSizeToCacheInBytes: 10000000, exclude: [/\.map$/, /asset-manifest\.json$/], navigateFallback: publicUrl + '/index.html', navigateFallbackDenylist: [ diff --git a/packages/xstate-wallet/package.json b/packages/xstate-wallet/package.json index 05a74a98d..cec8e1d31 100644 --- a/packages/xstate-wallet/package.json +++ b/packages/xstate-wallet/package.json @@ -1,7 +1,7 @@ { "name": "@statechannels/xstate-wallet", "description": "State channel wallet using xstate.", - "version": "0.3.0", + "version": "0.3.0-hyperspace", "author": "Alex Gap", "babel": { "presets": [ @@ -25,7 +25,7 @@ "@rimble/connection-banner": "1.2.3", "@rimble/utils": "1.2.3", "@sentry/browser": "5.15.5", - "@statechannels/client-api-schema": "^0.3.0", + "@statechannels/client-api-schema": "0.3.0", "@statechannels/nitro-protocol": "^0.3.0", "@statechannels/wallet-core": "^0.3.0", "@statechannels/wire-format": "^0.3.0", @@ -38,13 +38,14 @@ "babel-preset-react-app": "9.1.0", "css-loader": "3.4.2", "dexie": "3.0.0", - "ethers": "5.0.7", + "ethers": "5.5.0", "eventemitter3": "4.0.0", "file-loader": "5.0.2", "filter-async-rxjs-pipe": "0.1.5", "fork-ts-checker-webpack-plugin": "1.5.0", "git-revision-webpack-plugin": "3.0.6", "guid-typescript": "1.0.9", + "webpack-dev-server": "^3.11.0", "html-webpack-plugin": "4.0.0-beta.5", "jsonrpc-lite": "2.1.0", "mini-css-extract-plugin": "0.9.0", @@ -72,7 +73,6 @@ "url-loader": "3.0.0", "url-parse": "1.4.7", "webpack": "4.41.5", - "webpack-dev-server": "^3.11.0", "webpack-manifest-plugin": "2.2.0", "webpack-merge": "4.2.2", "workbox-webpack-plugin": "5.0.0", diff --git a/packages/xstate-wallet/scripts/start.js b/packages/xstate-wallet/scripts/start.js index 371fee2ae..948dfc622 100644 --- a/packages/xstate-wallet/scripts/start.js +++ b/packages/xstate-wallet/scripts/start.js @@ -53,7 +53,11 @@ void (async () => { }); process.env.TARGET_NETWORK = getNetworkName(process.env.CHAIN_NETWORK_ID); - + // TODO: Devtools doesn't support hyperspace yet + if (Number(process.env.CHAIN_NETWORK_ID) === 3141) { + process.env.TARGET_NETWORK = 'hyperspace'; + console.log("Using 'hyperspace' as the target network"); + } if (process.env.TARGET_NETWORK === 'development') { // Add contract addresses to process.env if running ganache const {deployer} = await await setupGanache(process.env.XSTATE_WALLET_DEPLOYER_ACCOUNT_INDEX); diff --git a/packages/xstate-wallet/src/chain.ts b/packages/xstate-wallet/src/chain.ts index 6be75bc21..178e9752f 100644 --- a/packages/xstate-wallet/src/chain.ts +++ b/packages/xstate-wallet/src/chain.ts @@ -347,7 +347,7 @@ export class ChainWatcher implements Chain { const response = await this.signer.sendTransaction({ ...convertNitroTransactionRequest(transactionRequest), - gasPrice: GAS_PRICE + maxPriorityFeePerGas: GAS_PRICE }); return response.hash; } @@ -369,7 +369,7 @@ export class ChainWatcher implements Chain { }; const response = await this.signer.sendTransaction({ ...convertNitroTransactionRequest(transactionRequest), - gasPrice: GAS_PRICE + maxPriorityFeePerGas: GAS_PRICE }); const tx = await response.wait(); return tx.transactionHash; @@ -497,10 +497,7 @@ export class ChainWatcher implements Chain { function convertNitroTransactionRequest(nitroTransactionRequest): TransactionRequest { return { ...nitroTransactionRequest, - gasLimit: nitroTransactionRequest.gasLimit - ? BN.from(nitroTransactionRequest.gasLimit) - : undefined, - gasPrice: nitroTransactionRequest.gasPrice + maxPriorityFeePerGas: nitroTransactionRequest.gasPrice ? BN.from(nitroTransactionRequest.gasPrice) : undefined, nonce: nitroTransactionRequest.nonce ? BN.from(nitroTransactionRequest.nonce) : undefined, diff --git a/packages/xstate-wallet/src/config.ts b/packages/xstate-wallet/src/config.ts index 49282d019..f245aaab1 100644 --- a/packages/xstate-wallet/src/config.ts +++ b/packages/xstate-wallet/src/config.ts @@ -1,5 +1,5 @@ -import {AddressZero} from '@ethersproject/constants'; -import {Destination} from '@statechannels/wallet-core'; +import { AddressZero } from '@ethersproject/constants'; +import { Destination } from '@statechannels/wallet-core'; // TODO: Use getEnvBool from devtools once working function getBool(val: string | undefined): boolean { @@ -71,3 +71,5 @@ export const HUB = { export const TARGET_NETWORK = process.env.TARGET_NETWORK || 'development'; export const FAUCET_LINK = TARGET_NETWORK === 'goerli' ? 'https://goerli-faucet.slock.it/' : 'https://faucet.ropsten.be/'; + +export const RPC_ENDPOINT = process.env.RPC_ENDPOINT; diff --git a/packages/xstate-wallet/src/integration-tests/helpers.ts b/packages/xstate-wallet/src/integration-tests/helpers.ts index bfc9eca95..27dd1678c 100644 --- a/packages/xstate-wallet/src/integration-tests/helpers.ts +++ b/packages/xstate-wallet/src/integration-tests/helpers.ts @@ -181,7 +181,7 @@ export function generatePlayerUpdate( jsonrpc: '2.0', params: { channelId, - appData: '0x0', + appData: '0x00', allocations: [ { token: hexZeroPad('0x0', 32), @@ -231,7 +231,7 @@ export function generateCreateChannelRequest( } ], appDefinition: '0x430869383d611bBB1ce7Ca207024E7901bC26b40', - appData: '0x0', + appData: '0x00', fundingStrategy: 'Direct' } }; @@ -264,7 +264,7 @@ export function generateCloseAndWithdrawRequest( id: 88888888, method: 'CloseAndWithdraw', params: { - hubParticipantId: hub.participantId - } + playerParticipantId: player.participantId, + hub: hub,} }; } diff --git a/packages/xstate-wallet/src/ui/approve-budget-and-fund-workflow.tsx b/packages/xstate-wallet/src/ui/approve-budget-and-fund-workflow.tsx index cfa967aa5..f67e51957 100644 --- a/packages/xstate-wallet/src/ui/approve-budget-and-fund-workflow.tsx +++ b/packages/xstate-wallet/src/ui/approve-budget-and-fund-workflow.tsx @@ -1,22 +1,22 @@ -import React, {useEffect, useState} from 'react'; +import React, { useEffect, useState } from 'react'; import './wallet.scss'; -import {useService} from '@xstate/react'; -import {formatEther} from '@ethersproject/units'; -import {Button, Heading, Flex, Text, Box, Link, Loader, Tooltip, Icon} from 'rimble-ui'; -import {BN} from '@statechannels/wallet-core'; -import {ApproveBudgetAndFundService} from '../workflows/approve-budget-and-fund'; +import { useService } from '@xstate/react'; +import { formatEther } from '@ethersproject/units'; +import { Button, Heading, Flex, Text, Box, Link, Loader, Tooltip, Icon } from 'rimble-ui'; +import { BN } from '@statechannels/wallet-core'; +import { ApproveBudgetAndFundService } from '../workflows/approve-budget-and-fund'; -import {track} from '../segment-analytics'; -import {getAmountsFromBudget} from './selectors'; -import {ETH_ASSET_HOLDER_ADDRESS, TARGET_NETWORK, FAUCET_LINK} from '../config'; +import { track } from '../segment-analytics'; +import { getAmountsFromBudget } from './selectors'; +import { ETH_ASSET_HOLDER_ADDRESS, TARGET_NETWORK, FAUCET_LINK } from '../config'; interface Props { service: ApproveBudgetAndFundService; } export const ApproveBudgetAndFund = (props: Props) => { const [current, _send] = useService(props.service); - const {budget} = current.context; - const {playerAmount, hubAmount} = getAmountsFromBudget(budget); + const { budget } = current.context; + const { playerAmount, hubAmount } = getAmountsFromBudget(budget); const send = ( event: @@ -25,7 +25,7 @@ export const ApproveBudgetAndFund = (props: Props) => { | 'USER_APPROVES_RETRY' | 'USER_REJECTS_RETRY' ) => () => { - track(event, {domain: current.context.budget.domain}); + track(event, { domain: current.context.budget.domain }); _send(event); }; @@ -45,7 +45,7 @@ export const ApproveBudgetAndFund = (props: Props) => { App Budget - Checking if your Metamask account has sufficient ETH + Checking if your Metamask account has sufficient TFIL ); @@ -55,18 +55,18 @@ export const ApproveBudgetAndFund = (props: Props) => { App Budget - You don't have enough ETH in your wallet! + You don't have enough TFIL in your wallet! - You'll need at least {formatEther(BN.from(playerAmount))} ETH in your Metamask wallet to - fund the channel. You can get more ETH{' '} + You'll need at least {formatEther(BN.from(playerAmount))} TFIL in your Metamask wallet + to fund the channel. You can get more TFIL{' '} here. ); - const waitForUserApproval = ({waiting}: {waiting: boolean} = {waiting: false}) => ( + const waitForUserApproval = ({ waiting }: { waiting: boolean } = { waiting: false }) => ( App Budget @@ -78,15 +78,15 @@ export const ApproveBudgetAndFund = (props: Props) => { - Send: {formatEther(BN.from(playerAmount))} ETH - Receive: {formatEther(BN.from(hubAmount))} ETH + Send: {formatEther(BN.from(playerAmount))} TFIL + Receive: {formatEther(BN.from(hubAmount))} TFIL {budget.domain} will manage these funds. - You will deposit {formatEther(BN.from(playerAmount))} ETH into a channel. Our hub will also + You will deposit {formatEther(BN.from(playerAmount))} TFIL into a channel. Our hub will also make a deposit. @@ -127,6 +127,10 @@ export const ApproveBudgetAndFund = (props: Props) => { ); + const assetHolderUrl = + TARGET_NETWORK === 'hyperspace' + ? `https://explorer.glif.io/address/${ETH_ASSET_HOLDER_ADDRESS}/?network=hyperspace` + : `https://${TARGET_NETWORK}.etherscan.io/address/${ETH_ASSET_HOLDER_ADDRESS}`; const depositWaitTurn = ( Deposit funds @@ -135,13 +139,10 @@ export const ApproveBudgetAndFund = (props: Props) => { Click{' '} - + here {' '} - to follow the progress on etherscan. + to follow the progress.

@@ -160,25 +161,32 @@ export const ApproveBudgetAndFund = (props: Props) => { ); - const depositWaitMining = ({transactionId}: {transactionId: string}) => ( - - Deposit funds + const depositWaitMining = ({ transactionId }: { transactionId: string }) => { + const viewTxUrl = + TARGET_NETWORK === 'hyperspace' + ? `https://explorer.glif.io/tx/${transactionId}/?network=hyperspace` + : `https://${TARGET_NETWORK}.etherscan.io/tx/${transactionId}`; - Waiting for your transaction to be mined. + return ( + + Deposit funds - - Click{' '} - - here - {' '} - to follow the progress on etherscan. - - -

- - - - ); + Waiting for your transaction to be mined. + + + Click{' '} + + here + {' '} + to follow the progress. + + +

+ + + + ); + }; const depositRetry = () => ( @@ -212,13 +220,10 @@ export const ApproveBudgetAndFund = (props: Props) => { You can click{' '} - + here {' '} - to see the progress on etherscan or you can download your log files and reach out to us on{' '} + to see the progress on the GLIF explorer or you can download your log files and reach out to us on{' '} {' '} github. @@ -236,29 +241,29 @@ export const ApproveBudgetAndFund = (props: Props) => { if (current.matches('waitForUserApproval')) { return waitForUserApproval(); - } else if (current.matches({waitForSufficientFunds: 'init'})) { + } else if (current.matches({ waitForSufficientFunds: 'init' })) { return waitForSufficientFundsInit; - } else if (current.matches({waitForSufficientFunds: 'waitForFunds'})) { + } else if (current.matches({ waitForSufficientFunds: 'waitForFunds' })) { return waitForSufficientFunds; } else if (current.matches('createLedger')) { return waitForSufficientFunds; } else if (current.matches('waitForPreFS')) { return waitForPreFS; - } else if (current.matches({deposit: 'init'})) { + } else if (current.matches({ deposit: 'init' })) { return depositInit; - } else if (current.matches({deposit: 'waitTurn'})) { + } else if (current.matches({ deposit: 'waitTurn' })) { if (stateTimerExpired) { return hubTimeout; } else { return depositWaitTurn; } - } else if (current.matches({deposit: 'submitTransaction'})) { + } else if (current.matches({ deposit: 'submitTransaction' })) { return depositSubmitTransaction; - } else if (current.matches({deposit: 'waitMining'})) { + } else if (current.matches({ deposit: 'waitMining' })) { return depositWaitMining(current.context); - } else if (current.matches({deposit: 'retry'})) { + } else if (current.matches({ deposit: 'retry' })) { return depositRetry(); - } else if (current.matches({deposit: 'waitFullyFunded'})) { + } else if (current.matches({ deposit: 'waitFullyFunded' })) { return depositFullyFunded; } else if (current.matches('createBudget')) { return depositFullyFunded; diff --git a/packages/xstate-wallet/src/ui/close-ledger-and-withdraw.tsx b/packages/xstate-wallet/src/ui/close-ledger-and-withdraw.tsx index a59279921..5cca98ab2 100644 --- a/packages/xstate-wallet/src/ui/close-ledger-and-withdraw.tsx +++ b/packages/xstate-wallet/src/ui/close-ledger-and-withdraw.tsx @@ -1,14 +1,14 @@ import React from 'react'; import './wallet.scss'; -import {useService} from '@xstate/react'; +import { useService } from '@xstate/react'; -import {formatEther} from '@ethersproject/units'; -import {Button, Heading, Flex, Text, Link, Loader} from 'rimble-ui'; -import {DomainBudget, BN} from '@statechannels/wallet-core'; -import {track} from '../segment-analytics'; -import {getAmountsFromBudget} from './selectors'; -import {CloseLedgerAndWithdrawService} from '../workflows/close-ledger-and-withdraw'; -import {TARGET_NETWORK} from '../config'; +import { formatEther } from '@ethersproject/units'; +import { Button, Heading, Flex, Text, Link, Loader } from 'rimble-ui'; +import { DomainBudget, BN } from '@statechannels/wallet-core'; +import { track } from '../segment-analytics'; +import { getAmountsFromBudget } from './selectors'; +import { CloseLedgerAndWithdrawService } from '../workflows/close-ledger-and-withdraw'; +import { TARGET_NETWORK } from '../config'; interface Props { service: CloseLedgerAndWithdrawService; @@ -18,12 +18,12 @@ export const CloseLedgerAndWithdraw = (props: Props) => { const [current, _send] = useService(props.service); const send = (event: 'USER_APPROVES_CLOSE' | 'USER_REJECTS_CLOSE') => () => { - track(event, {domain: current.context.domain}); + track(event, { domain: current.context.domain }); _send(event); }; - const waitForUserApproval = ({waiting, budget}: {waiting: boolean; budget: DomainBudget}) => { - const {playerAmount} = getAmountsFromBudget(budget); + const waitForUserApproval = ({ waiting, budget }: { waiting: boolean; budget: DomainBudget }) => { + const { playerAmount } = getAmountsFromBudget(budget); return ( @@ -37,7 +37,7 @@ export const CloseLedgerAndWithdraw = (props: Props) => { - You will receive {formatEther(BN.from(playerAmount))} ETH and the budget will be closed + You will receive {formatEther(BN.from(playerAmount))} TFIL and the budget will be closed with the channel hub.