From dae6e3c9c92b93c477fb1bc4b682a4bc8a0498ed Mon Sep 17 00:00:00 2001 From: luisburigo Date: Wed, 20 Mar 2024 20:41:44 -0300 Subject: [PATCH 1/7] feat(bako-id): add search address by bako id --- packages/app/package.json | 1 + .../Send/components/SendSelect/SendSelect.tsx | 42 ++++++++--- .../app/src/systems/Send/hooks/useSend.tsx | 74 ++++++++++++++++--- pnpm-lock.yaml | 23 ++++-- 4 files changed, 114 insertions(+), 26 deletions(-) diff --git a/packages/app/package.json b/packages/app/package.json index 6a4ab5c33..4dbb07677 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -20,6 +20,7 @@ "codegen": "graphql-codegen --config codegen.ts" }, "dependencies": { + "@bako-id/sdk": "0.0.3", "@fontsource/source-code-pro": "5.0.13", "@fuel-ui/css": "0.23.2", "@fuel-ui/icons": "0.23.2", diff --git a/packages/app/src/systems/Send/components/SendSelect/SendSelect.tsx b/packages/app/src/systems/Send/components/SendSelect/SendSelect.tsx index ec6e338e4..52cb6ec53 100644 --- a/packages/app/src/systems/Send/components/SendSelect/SendSelect.tsx +++ b/packages/app/src/systems/Send/components/SendSelect/SendSelect.tsx @@ -1,10 +1,15 @@ import { cssObj } from '@fuel-ui/css'; -import { Box, Input, InputAmount, Text } from '@fuel-ui/react'; +import { Box, Form, Input, InputAmount, Text } from '@fuel-ui/react'; import { motion } from 'framer-motion'; -import { BaseAssetId, DECIMAL_UNITS, bn } from 'fuels'; +import { Address, BaseAssetId, DECIMAL_UNITS, bn } from 'fuels'; import { useEffect, useMemo } from 'react'; import { AssetSelect } from '~/systems/Asset'; -import { ControlledField, Layout, animations } from '~/systems/Core'; +import { + ControlledField, + Layout, + animations, + shortAddress, +} from '~/systems/Core'; import { TxDetails } from '~/systems/Transaction'; import type { UseSendReturn } from '../../hooks'; @@ -19,6 +24,7 @@ export function SendSelect({ balanceAssetSelected, status, fee, + domain, }: SendSelectProps) { const assetId = form.watch('asset', ''); // biome-ignore lint/correctness/useExhaustiveDependencies: @@ -74,14 +80,28 @@ export function SendSelect({ control={form.control} isInvalid={Boolean(form.formState.errors?.address)} render={({ field }) => ( - - - + <> + + + + {domain && ( + + Address of {field.value}:{' '} + + {shortAddress( + Address.fromB256(domain.resolver).toAddress() + )} + + + )} + )} /> diff --git a/packages/app/src/systems/Send/hooks/useSend.tsx b/packages/app/src/systems/Send/hooks/useSend.tsx index 29251c688..4acb89651 100644 --- a/packages/app/src/systems/Send/hooks/useSend.tsx +++ b/packages/app/src/systems/Send/hooks/useSend.tsx @@ -1,8 +1,8 @@ import { yupResolver } from '@hookform/resolvers/yup'; import { useInterpret, useSelector } from '@xstate/react'; -import type { BigNumberish } from 'fuels'; +import { Address, type BigNumberish } from 'fuels'; import { bn, isBech32 } from 'fuels'; -import { useCallback, useEffect } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { useForm } from 'react-hook-form'; import { useNavigate } from 'react-router-dom'; import * as yup from 'yup'; @@ -13,6 +13,8 @@ import { useTransactionRequest } from '~/systems/DApp'; import { TxRequestStatus } from '~/systems/DApp/machines/transactionRequestMachine'; import type { TxInputs } from '~/systems/Transaction/services'; +import { type Domain, config, isValidDomain, resolver } from '@bako-id/sdk'; +import debounce from 'lodash.debounce'; import { sendMachine } from '../machines/sendMachine'; import type { SendMachineState } from '../machines/sendMachine'; @@ -57,6 +59,14 @@ const selectors = { }, }; +const isValidAddress = (value: string) => { + try { + return Boolean(value && isBech32(value)); + } catch (_error) { + return false; + } +}; + const schema = yup .object({ asset: yup.string().required('Asset is required'), @@ -64,13 +74,21 @@ const schema = yup address: yup .string() .required('Address is required') - .test('is-address', 'Invalid bech32 address', (value) => { - try { - return Boolean(value && isBech32(value)); - } catch (_error) { - return false; + .test('is-address-or-handle', (value, _context) => { + const isAddress = value.startsWith('fuel'); + const isHandle = value.startsWith('@'); + + if (isHandle) { + return isValidDomain(value) ?? 'Invalid handle name'; } - }), + + if (isAddress) { + return isValidAddress(value) ?? 'Invalid bech32 address'; + } + + return true; + }) + .test('is-domain', 'Invalid handle name.', isValidDomain), }) .required(); @@ -79,6 +97,7 @@ export function useSend() { const txRequest = useTransactionRequest(); const { account, balanceAssets: accountBalanceAssets } = useAccounts(); const { assets } = useAssets(); + const [domain, setDomain] = useState(null); const form = useForm({ resolver: yupResolver(schema), @@ -91,6 +110,33 @@ export function useSend() { }, }); + const fetchBakoHandle = useCallback( + debounce((name: string) => { + if (!isValidDomain(name)) return; + resolver({ + providerURL: config.PROVIDER_DEPLOYED, + domain: name, + }) + .then((value) => { + if (value) { + setDomain(value); + } else { + form.setError('address', { + type: 'pattern', + message: 'Not found bako handle.', + }); + } + }) + .catch(() => { + form.setError('address', { + type: 'pattern', + message: 'Not found bako handle.', + }); + }); + }, 500), + [] + ); + const service = useInterpret(() => sendMachine.withConfig({ actions: { @@ -113,8 +159,15 @@ export function useSend() { ); const amount = form.watch('amount'); + const address = form.watch('address'); const errorMessage = useSelector(service, selectors.error); + // biome-ignore lint/correctness/useExhaustiveDependencies: + useEffect(() => { + setDomain(null); + fetchBakoHandle(address); + }, [address]); + // biome-ignore lint/correctness/useExhaustiveDependencies: useEffect(() => { if (bn(amount).gt(0) && form.formState.isValid) { @@ -127,7 +180,9 @@ export function useSend() { account, asset, amount, - address, + address: Address.fromAddressOrString( + domain?.resolver ?? address + ).toAddress(), } as TxInputs['isValidTransaction']; service.send('SET_DATA', { input }); } @@ -212,6 +267,7 @@ export function useSend() { form, fee, title, + domain, status, readyToSend, balanceAssets, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 72a540b5c..d73a7826e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -159,6 +159,9 @@ importers: packages/app: dependencies: + '@bako-id/sdk': + specifier: 0.0.3 + version: 0.0.3(fuels@0.77.0) '@fontsource/source-code-pro': specifier: 5.0.13 version: 5.0.13 @@ -3315,11 +3318,11 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/compat-data': 7.23.5 + '@babel/compat-data': 7.22.9 '@babel/core': 7.24.0 - '@babel/helper-compilation-targets': 7.23.6 + '@babel/helper-compilation-targets': 7.22.10 '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-validator-option': 7.23.5 + '@babel/helper-validator-option': 7.22.5 '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.22.5(@babel/core@7.24.0) '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.22.5(@babel/core@7.24.0) '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.24.0) @@ -3390,7 +3393,7 @@ packages: '@babel/plugin-transform-unicode-regex': 7.22.5(@babel/core@7.24.0) '@babel/plugin-transform-unicode-sets-regex': 7.22.5(@babel/core@7.24.0) '@babel/preset-modules': 0.1.6(@babel/core@7.24.0) - '@babel/types': 7.24.0 + '@babel/types': 7.22.11 babel-plugin-polyfill-corejs2: 0.4.5(@babel/core@7.24.0) babel-plugin-polyfill-corejs3: 0.8.3(@babel/core@7.24.0) babel-plugin-polyfill-regenerator: 0.5.2(@babel/core@7.24.0) @@ -3600,6 +3603,14 @@ packages: '@babel/helper-validator-identifier': 7.22.20 to-fast-properties: 2.0.0 + /@bako-id/sdk@0.0.3(fuels@0.77.0): + resolution: {integrity: sha512-Ha+hc0JpquSwjLjJf3dwkbkGDmF0gdF14nudkptNc3lvZTHVta1EMfpBz6DI8z8HAiIEJcIdru4BZWC1hAjpew==} + peerDependencies: + fuels: 0.77.0 + dependencies: + fuels: 0.77.0(dexie@3.2.4) + dev: false + /@base2/pretty-print-object@1.0.1: resolution: {integrity: sha512-4iri8i1AqYHJE2DstZYkyEprg6Pq6sKx3xn5FpySk9sNhH7qN2LLlHJCfDTZRILNwQNPD7mATWM0TBui7uC1pA==} dev: true @@ -4662,13 +4673,13 @@ packages: resolution: {integrity: sha512-eMmxNpoX/J1IPUjPGSZwo0Wh+7CEvdEMddP2Jxg1gQJXfGfht/FdW2D5XDFj3VMbOTUQlDIdZJY7uC6O6gjPoA==} dependencies: '@formatjs/ecma402-abstract': 1.17.0 - tslib: 2.6.1 + tslib: 2.6.2 dev: false /@formatjs/intl-localematcher@0.4.0: resolution: {integrity: sha512-bRTd+rKomvfdS4QDlVJ6TA/Jx1F2h/TBVO5LjvhQ7QPPHp19oPNMIum7W2CMEReq/zPxpmCeB31F9+5gl/qtvw==} dependencies: - tslib: 2.6.1 + tslib: 2.6.2 dev: false /@fuel-ts/abi-coder@0.77.0: From d43a3fda8fee61cb34eb42a6f2021879006e3877 Mon Sep 17 00:00:00 2001 From: luisburigo Date: Fri, 22 Mar 2024 15:12:53 -0300 Subject: [PATCH 2/7] feat(bako-id): refactor input yup validation and fetch bako handle --- .../app/src/systems/Send/hooks/useSend.tsx | 35 ++++++++++--------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/packages/app/src/systems/Send/hooks/useSend.tsx b/packages/app/src/systems/Send/hooks/useSend.tsx index 4acb89651..2d616d228 100644 --- a/packages/app/src/systems/Send/hooks/useSend.tsx +++ b/packages/app/src/systems/Send/hooks/useSend.tsx @@ -71,24 +71,27 @@ const schema = yup .object({ asset: yup.string().required('Asset is required'), amount: yup.string().required('Amount is required'), - address: yup - .string() - .required('Address is required') - .test('is-address-or-handle', (value, _context) => { - const isAddress = value.startsWith('fuel'); - const isHandle = value.startsWith('@'); + address: yup.lazy((value) => { + const addressSchema = yup + .string() + .required('Address or Bako Handle is required'); - if (isHandle) { - return isValidDomain(value) ?? 'Invalid handle name'; - } + const isHandle = value.startsWith('@'); - if (isAddress) { - return isValidAddress(value) ?? 'Invalid bech32 address'; - } + if (isHandle) { + return addressSchema.test( + 'is-domain', + 'Invalid handle name', + isValidDomain + ); + } - return true; - }) - .test('is-domain', 'Invalid handle name.', isValidDomain), + return addressSchema.test( + 'is-address', + 'Invalid bech32 address', + isValidAddress + ); + }), }) .required(); @@ -112,7 +115,7 @@ export function useSend() { const fetchBakoHandle = useCallback( debounce((name: string) => { - if (!isValidDomain(name)) return; + if (!name.includes('@') || !isValidDomain(name)) return; resolver({ providerURL: config.PROVIDER_DEPLOYED, domain: name, From a46b7b5d25c7d92cdc675e81c5062c1d2b9f0a54 Mon Sep 17 00:00:00 2001 From: luisburigo Date: Fri, 22 Mar 2024 16:32:21 -0300 Subject: [PATCH 3/7] feat(bako-id): refactor pre-fetch transaction to get address --- .../app/src/systems/Send/hooks/useSend.tsx | 39 +++++++++++-------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/packages/app/src/systems/Send/hooks/useSend.tsx b/packages/app/src/systems/Send/hooks/useSend.tsx index 2d616d228..536b0cf29 100644 --- a/packages/app/src/systems/Send/hooks/useSend.tsx +++ b/packages/app/src/systems/Send/hooks/useSend.tsx @@ -173,23 +173,28 @@ export function useSend() { // biome-ignore lint/correctness/useExhaustiveDependencies: useEffect(() => { - if (bn(amount).gt(0) && form.formState.isValid) { - const asset = assets.find( - ({ assetId }) => assetId === form.getValues('asset') - ); - const amount = bn(form.getValues('amount')); - const address = form.getValues('address'); - const input = { - account, - asset, - amount, - address: Address.fromAddressOrString( - domain?.resolver ?? address - ).toAddress(), - } as TxInputs['isValidTransaction']; - service.send('SET_DATA', { input }); - } - }, [amount, form.formState.isValid]); + if (!form.formState.isValid) return; + + const amount = bn(form.getValues('amount')); + if (bn(amount).lt(0)) return; + + const address = form.getValues('address'); + if (address.startsWith('@') && !domain) return; + + const asset = assets.find( + ({ assetId }) => assetId === form.getValues('asset') + ); + const bech32Address = Address.fromAddressOrString( + domain?.resolver ?? address + ).toAddress(); + const input = { + account, + asset, + amount, + address: bech32Address, + } as TxInputs['isValidTransaction']; + service.send('SET_DATA', { input }); + }, [amount, domain, form.formState.isValid]); // biome-ignore lint/correctness/useExhaustiveDependencies: useEffect(() => { From cc28a1bf172b0ca4fa49df5e2cf337923c57c678 Mon Sep 17 00:00:00 2001 From: luisburigo Date: Mon, 1 Apr 2024 23:33:35 -0300 Subject: [PATCH 4/7] feat(bako-id): get handle name by resolver address --- .../Send/components/SendSelect/SendSelect.tsx | 17 ++++++-- .../app/src/systems/Send/hooks/useSend.tsx | 41 ++++++++++++++----- 2 files changed, 45 insertions(+), 13 deletions(-) diff --git a/packages/app/src/systems/Send/components/SendSelect/SendSelect.tsx b/packages/app/src/systems/Send/components/SendSelect/SendSelect.tsx index 52cb6ec53..e2a4e3a57 100644 --- a/packages/app/src/systems/Send/components/SendSelect/SendSelect.tsx +++ b/packages/app/src/systems/Send/components/SendSelect/SendSelect.tsx @@ -24,7 +24,8 @@ export function SendSelect({ balanceAssetSelected, status, fee, - domain, + bakoResolver, + bakoName, }: SendSelectProps) { const assetId = form.watch('asset', ''); // biome-ignore lint/correctness/useExhaustiveDependencies: @@ -89,18 +90,28 @@ export function SendSelect({ placeholder="Enter a fuel address or bako handle" /> - {domain && ( + {bakoResolver && ( Address of {field.value}:{' '} {shortAddress( - Address.fromB256(domain.resolver).toAddress() + Address.fromB256(bakoResolver).toAddress() )} )} + {bakoName && ( + + Handle of address: + + @{bakoName} + + + )} )} /> diff --git a/packages/app/src/systems/Send/hooks/useSend.tsx b/packages/app/src/systems/Send/hooks/useSend.tsx index 536b0cf29..624fa70c7 100644 --- a/packages/app/src/systems/Send/hooks/useSend.tsx +++ b/packages/app/src/systems/Send/hooks/useSend.tsx @@ -13,7 +13,7 @@ import { useTransactionRequest } from '~/systems/DApp'; import { TxRequestStatus } from '~/systems/DApp/machines/transactionRequestMachine'; import type { TxInputs } from '~/systems/Transaction/services'; -import { type Domain, config, isValidDomain, resolver } from '@bako-id/sdk'; +import { config, isValidDomain, resolver, reverseResolver } from '@bako-id/sdk'; import debounce from 'lodash.debounce'; import { sendMachine } from '../machines/sendMachine'; import type { SendMachineState } from '../machines/sendMachine'; @@ -100,7 +100,8 @@ export function useSend() { const txRequest = useTransactionRequest(); const { account, balanceAssets: accountBalanceAssets } = useAccounts(); const { assets } = useAssets(); - const [domain, setDomain] = useState(null); + const [bakoResolver, setBakoResolver] = useState(''); + const [bakoName, setBakoName] = useState(''); const form = useForm({ resolver: yupResolver(schema), @@ -115,14 +116,13 @@ export function useSend() { const fetchBakoHandle = useCallback( debounce((name: string) => { - if (!name.includes('@') || !isValidDomain(name)) return; resolver({ providerURL: config.PROVIDER_DEPLOYED, domain: name, }) .then((value) => { if (value) { - setDomain(value); + setBakoResolver(value.resolver); } else { form.setError('address', { type: 'pattern', @@ -140,6 +140,18 @@ export function useSend() { [] ); + const fetchBakoName = useCallback( + debounce((resolver: string) => { + reverseResolver({ + providerURL: config.PROVIDER_DEPLOYED, + resolver, + }).then((value) => { + setBakoName(value ?? ''); + }); + }, 500), + [] + ); + const service = useInterpret(() => sendMachine.withConfig({ actions: { @@ -167,8 +179,16 @@ export function useSend() { // biome-ignore lint/correctness/useExhaustiveDependencies: useEffect(() => { - setDomain(null); - fetchBakoHandle(address); + setBakoResolver(''); + setBakoName(''); + + if (address.includes('@') && isValidDomain(address)) { + fetchBakoHandle(address); + } + + if (isValidAddress(address)) { + fetchBakoName(address); + } }, [address]); // biome-ignore lint/correctness/useExhaustiveDependencies: @@ -179,13 +199,13 @@ export function useSend() { if (bn(amount).lt(0)) return; const address = form.getValues('address'); - if (address.startsWith('@') && !domain) return; + if (address.startsWith('@') && !bakoResolver) return; const asset = assets.find( ({ assetId }) => assetId === form.getValues('asset') ); const bech32Address = Address.fromAddressOrString( - domain?.resolver ?? address + bakoResolver || address ).toAddress(); const input = { account, @@ -194,7 +214,7 @@ export function useSend() { address: bech32Address, } as TxInputs['isValidTransaction']; service.send('SET_DATA', { input }); - }, [amount, domain, form.formState.isValid]); + }, [amount, bakoResolver, form.formState.isValid]); // biome-ignore lint/correctness/useExhaustiveDependencies: useEffect(() => { @@ -275,9 +295,10 @@ export function useSend() { form, fee, title, - domain, status, readyToSend, + bakoName, + bakoResolver, balanceAssets, account, txRequest, From f0e58f05ee928715c630be0e4bee146ad5ef9669 Mon Sep 17 00:00:00 2001 From: luisburigo Date: Wed, 3 Apr 2024 00:19:39 -0300 Subject: [PATCH 5/7] feat(bako-id): show handle name in tx recipient --- .../app/src/systems/Send/hooks/useSend.tsx | 10 +--- .../TxRecipientCard/TxRecipientCard.tsx | 54 +++++++++++++++++-- 2 files changed, 51 insertions(+), 13 deletions(-) diff --git a/packages/app/src/systems/Send/hooks/useSend.tsx b/packages/app/src/systems/Send/hooks/useSend.tsx index 624fa70c7..bb2738bed 100644 --- a/packages/app/src/systems/Send/hooks/useSend.tsx +++ b/packages/app/src/systems/Send/hooks/useSend.tsx @@ -116,10 +116,7 @@ export function useSend() { const fetchBakoHandle = useCallback( debounce((name: string) => { - resolver({ - providerURL: config.PROVIDER_DEPLOYED, - domain: name, - }) + resolver(name) .then((value) => { if (value) { setBakoResolver(value.resolver); @@ -142,10 +139,7 @@ export function useSend() { const fetchBakoName = useCallback( debounce((resolver: string) => { - reverseResolver({ - providerURL: config.PROVIDER_DEPLOYED, - resolver, - }).then((value) => { + reverseResolver(resolver).then((value) => { setBakoName(value ?? ''); }); }, 500), diff --git a/packages/app/src/systems/Transaction/components/TxRecipientCard/TxRecipientCard.tsx b/packages/app/src/systems/Transaction/components/TxRecipientCard/TxRecipientCard.tsx index 363e05604..f54e90861 100644 --- a/packages/app/src/systems/Transaction/components/TxRecipientCard/TxRecipientCard.tsx +++ b/packages/app/src/systems/Transaction/components/TxRecipientCard/TxRecipientCard.tsx @@ -1,10 +1,19 @@ import { cssObj } from '@fuel-ui/css'; -import { Avatar, Box, Card, Heading, Icon, Text } from '@fuel-ui/react'; +import { + Avatar, + Box, + Card, + ContentLoader, + Heading, + Icon, + Text, +} from '@fuel-ui/react'; import type { OperationTransactionAddress } from 'fuels'; import { Address, AddressType, ChainName, isB256, isBech32 } from 'fuels'; -import type { FC } from 'react'; +import { type FC, useEffect, useState } from 'react'; import { EthAddress, FuelAddress, useAccounts } from '~/systems/Account'; +import { config, reverseResolver } from '@bako-id/sdk'; import { TxRecipientCardLoader } from './TxRecipientCardLoader'; export type TxRecipientCardProps = { @@ -21,6 +30,8 @@ export const TxRecipientCard: TxRecipientCardComponent = ({ isReceiver, }) => { const { accounts } = useAccounts(); + const [name, setName] = useState(''); + const address = recipient?.address || ''; const isValidAddress = isB256(address) || isBech32(address); const fuelAddress = isValidAddress @@ -29,8 +40,41 @@ export const TxRecipientCard: TxRecipientCardComponent = ({ const isContract = recipient?.type === AddressType.contract; const isEthChain = recipient?.chain === ChainName.ethereum; const isNetwork = address === 'Network'; - const name = - accounts?.find((a) => a.address === fuelAddress)?.name || 'unknown'; + + // biome-ignore lint/correctness/useExhaustiveDependencies: + useEffect(() => { + const setAccountName = () => { + const accountName = + accounts?.find((a) => a.address === fuelAddress)?.name || 'unknown'; + setName(accountName); + }; + + const resolveAddressName = async () => { + const handleName = await reverseResolver(fuelAddress); + + if (handleName) { + return setName(`@${handleName}`); + } + + setAccountName(); + }; + + if (!name && isReceiver) { + resolveAddressName(); + } + + if (!isReceiver) { + setAccountName(); + } + }, [isReceiver, name]); + + const Name = !name ? ( + + + + ) : ( + `${name}` + ); return ( - {isNetwork ? address : name} + {isNetwork ? address : Name} {!isNetwork && ( From d0580cbf12079080fe3de95adcf2b9733d4a3ef3 Mon Sep 17 00:00:00 2001 From: luisburigo Date: Wed, 3 Apr 2024 12:09:31 -0300 Subject: [PATCH 6/7] feat(bako-id): implement test sending a transaction with bako handle --- .../playwright/e2e/SendTransaction.test.ts | 34 ++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/packages/app/playwright/e2e/SendTransaction.test.ts b/packages/app/playwright/e2e/SendTransaction.test.ts index cb7284933..1678f073d 100644 --- a/packages/app/playwright/e2e/SendTransaction.test.ts +++ b/packages/app/playwright/e2e/SendTransaction.test.ts @@ -13,7 +13,7 @@ import { visit, } from '../commons'; import { seedWallet } from '../commons/seedWallet'; -import { ALT_ASSET, mockData } from '../mocks'; +import { ALT_ASSET, PRIVATE_KEY, mockData } from '../mocks'; test.describe('SendTransaction', () => { let browser: Browser; @@ -168,4 +168,36 @@ test.describe('SendTransaction', () => { // Wait for transaction to be confirmed await hasText(page, 'success'); }); + + test('Send using a Bako handle', async () => { + await visit(page, '/send'); + + // Check submit button is disable by default + await page.waitForSelector('[aria-disabled="true"]'); + + // Select asset + await getButtonByText(page, 'Select one asset').click(); + await page.getByText('Ethereum').click(); + + // Fill Bako handle + await getInputByName(page, 'address').fill('@fueltests'); + await hasText(page, /Address of @fueltests/); + + // Fill Bako handle resolver + const account = Wallet.fromPrivateKey(PRIVATE_KEY); + await getInputByName(page, 'address').fill(account.address.toAddress()); + await hasText(page, /Handle of address/); + + // Fill amount + await getInputByName(page, 'amount').fill('0.001'); + + // Submit transaction + await getButtonByText(page, 'Confirm').click(); + + await getButtonByText(page, 'Approve').click(); + await hasText(page, '0.001 ETH'); + + // Wait for transaction to be confirmed + await hasText(page, 'success'); + }); }); From ffa196a416c8ff695182e859c50a2f8eb9867c48 Mon Sep 17 00:00:00 2001 From: luisburigo Date: Wed, 3 Apr 2024 15:55:24 -0300 Subject: [PATCH 7/7] feat(bako-id): add bako id sdk --- packages/app/package.json | 2 +- pnpm-lock.yaml | 13 ++++++------- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/app/package.json b/packages/app/package.json index 4dbb07677..caed00169 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -20,7 +20,7 @@ "codegen": "graphql-codegen --config codegen.ts" }, "dependencies": { - "@bako-id/sdk": "0.0.3", + "@bako-id/sdk": "0.0.6", "@fontsource/source-code-pro": "5.0.13", "@fuel-ui/css": "0.23.2", "@fuel-ui/icons": "0.23.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d73a7826e..011b59d49 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -160,8 +160,8 @@ importers: packages/app: dependencies: '@bako-id/sdk': - specifier: 0.0.3 - version: 0.0.3(fuels@0.77.0) + specifier: 0.0.6 + version: 0.0.6(fuels@0.77.0) '@fontsource/source-code-pro': specifier: 5.0.13 version: 5.0.13 @@ -3603,10 +3603,10 @@ packages: '@babel/helper-validator-identifier': 7.22.20 to-fast-properties: 2.0.0 - /@bako-id/sdk@0.0.3(fuels@0.77.0): - resolution: {integrity: sha512-Ha+hc0JpquSwjLjJf3dwkbkGDmF0gdF14nudkptNc3lvZTHVta1EMfpBz6DI8z8HAiIEJcIdru4BZWC1hAjpew==} + /@bako-id/sdk@0.0.6(fuels@0.77.0): + resolution: {integrity: sha512-3dDKwORYuc9yxePTQVAPtXQuUIRmOrBfEoMcmfSpYdVdhZeYsSKzzsTXHi3JzRZ92vK1QFVWj3xtubj//TJmgQ==} peerDependencies: - fuels: 0.77.0 + fuels: 0.78.0 dependencies: fuels: 0.77.0(dexie@3.2.4) dev: false @@ -12626,7 +12626,7 @@ packages: esbuild: '>=0.10.0' dependencies: esbuild: 0.18.20 - tslib: 2.6.1 + tslib: 2.6.2 dev: true /@yarnpkg/fslib@2.10.3: @@ -22581,7 +22581,6 @@ packages: /tslib@2.6.2: resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==} - dev: false /tsup@7.2.0(ts-node@10.9.1)(typescript@5.2.2): resolution: {integrity: sha512-vDHlczXbgUvY3rWvqFEbSqmC1L7woozbzngMqTtL2PGBODTtWlRwGDDawhvWzr5c1QjKe4OAKqJGfE1xeXUvtQ==}