Skip to content

Commit

Permalink
Merge pull request #3 from input-output-hk/fix/update-repo-with-feedback
Browse files Browse the repository at this point in the history
LW-10152 Feedback on repo
  • Loading branch information
VanessaPC committed May 7, 2024
2 parents 7a97ecf + c21000c commit 267cc5c
Show file tree
Hide file tree
Showing 16 changed files with 333 additions and 1,556 deletions.
1 change: 1 addition & 0 deletions .husky/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
_
4 changes: 4 additions & 0 deletions .husky/pre-commit
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged
32 changes: 26 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,24 @@ If you are trying to build or see how a transaction is built from an application

## Development environment

In order to currently work on with this repository, you have to link to your version of the `dapp-connector-client` in the `cardano-js-sdk` repo.
So first you want to clone this repo in a folder that sits alongside the `cardano-js-sdk` and checkout the branch that contains the `dapp-connector-client`, `feat/dapp-connector-client-poc`.
### Recommended yarn version

Now you should follow the instructions in the _Linking @cardano-sdk/dapp-connector-client_.
Version 4.1.1

### Recommended node version

Version 18.12.1

In order to currently work on with this repository, you have to link to your version of the `dapp-connector-client` in the [`@cardano-js-sdk`](https://github.com/input-output-hk/cardano-js-sdk) repo.
So first you want to clone this repo in a folder that sits alongside the [`@cardano-js-sdk`](https://github.com/input-output-hk/cardano-js-sdk) and checkout the branch that contains the `dapp-connector-client` unpublished package, `feat/dapp-connector-client-poc`.

Now you should follow the instructions in the _Linking @cardano-js-sdk/dapp-connector-client_.

### Linking @cardano-sdk/dapp-connector-client

Since this package isn't published yet, we need to link it from a local version of the package.

1. Ensure a local branch is checked out of the `@cardano-sdk` package that contains the `dapp-connector-client` package.
1. Ensure a local branch is checked out of the [`@cardano-js-sdk`](https://github.com/input-output-hk/cardano-js-sdk) package that contains the `dapp-connector-client` package.
2. Ensure the `dapp-connector-client` is built, `yarn && yarn build`.
3. Run `yarn link ./<path to dapp-connector-client>`.

Expand Down Expand Up @@ -60,8 +68,20 @@ yarn build

## Browser set up

In order to use this application for now we need to start the Browser as follows:
### Mac

In order to use this application for now we need to start the Browser with --disable-web-security --user-data-dir=tmp (make sure if you restart it that you do it from all closed windows, and keep no cache enabled)

- start chrome as: `/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome —disable-web-security —user-data-dir=tmp` to open Chrome or : `open -na "Google Chrome" --args --disable-web-security --user-data-dir=tmp`

You can also use any other browser as long as you open with: --disable-web-security --user-data-dir=tmp (make sure if you restart it that you do it from all closed windows, and keep no cache enabled)
### Windows

In order to use this application for now we need to start the Browser with --disable-web-security --user-data-dir=tmp (make sure if you restart it that you do it from all closed windows, and keep no cache enabled)

- start chrome as: `start chrome --disable-web-security --user-data-dir=tmp`

### Linux

In order to use this application for now we need to start the Browser with --disable-web-security --user-data-dir=tmp (make sure if you restart it that you do it from all closed windows, and keep no cache enabled)

- start chrome as: `google-chrome --disable-web-security --user-data-dir=tmp`
16 changes: 5 additions & 11 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,18 @@
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
"preview": "vite preview",
"compile": "yarn tsc && yarn check-errors",
"check-errors": "tsc --noEmit"
},
"dependencies": {
"@cardano-sdk/cardano-services": "*",
"@cardano-sdk/cardano-services-client": "*",
"@cardano-sdk/core": "*",
"@cardano-sdk/crypto": "*",
"@cardano-sdk/dapp-connector-client": "link:./../cardano-js-sdk/packages/dapp-connector-client",
"@cardano-sdk/hardware-ledger": "*",
"@cardano-sdk/hardware-trezor": "*",
"@cardano-sdk/input-selection": "*",
"@cardano-sdk/key-management": "*",
"@cardano-sdk/ogmios": "*",
"@cardano-sdk/tx-construction": "*",
"@cardano-sdk/util": "*",
"@cardano-sdk/util-dev": "*",
"@cardano-sdk/util-rxjs": "*",
"@cardano-sdk/wallet": "*",
"@cardano-sdk/wallet": "^0.36.0",
"buffer": "^6.0.3",
"copy-webpack-plugin": "^12.0.2",
"crypto-browserify": "^3.12.0",
Expand All @@ -32,7 +26,7 @@
"preact-render-to-string": "^6.4.1",
"preact-router": "^4.1.2",
"rollup-plugin-polyfill-node": "^0.13.0",
"rxjs": "^7.4.0"
"rxjs": "^7.5.7"
},
"devDependencies": {
"@babel/core": "^7.24.4",
Expand Down
2 changes: 1 addition & 1 deletion src/components/connect/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const connectLace = (dependencies: ConnectWalletDependencies) => {

export const Connect = () => (
<button
class="connect-button"
className="connect-button"
onClick={() => connectLace(connectWalletDependencies)}
>
Connect wallet
Expand Down
2 changes: 1 addition & 1 deletion src/components/dashboard/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import "./dashboard.css";
import { Logs, WalletActions } from "..";

export const Dashboard = () => (
<div class="dashboard-container">
<div className="dashboard-container">
<div>
<WalletActions />
</div>
Expand Down
83 changes: 55 additions & 28 deletions src/components/wallet-actions/index.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,18 @@
import { Store, connectorStore } from '../../state/store';
import { sendCoins, sendSeveralAssets, singleDelegation, singleUndelegation } from '../../features';
import { useEffect, useState } from 'preact/hooks';
import { Store, connectorStore } from "../../state/store";
import {
sendCoins,
sendSeveralAssets,
singleDelegation,
singleUndelegation,
} from "../../features";
import { useEffect, useState } from "preact/hooks";

import './wallet-actions.css';
import "./wallet-actions.css";

export const WalletActions = () => {
const [storeState, setStoreState] = useState<Store>(connectorStore.initialState);
const [storeState, setStoreState] = useState<Store>(
connectorStore.initialState
);

useEffect(() => {
const subscription = connectorStore.subscribe(setStoreState);
Expand All @@ -25,11 +32,14 @@ export const WalletActions = () => {
return null;
}

const { hash, txId } = await sendCoins({ connectedWallet: storeState.wallet });
const { hash, txId } = await sendCoins({
connectedWallet: storeState.wallet,
});

connectorStore.log({
hash,
title: 'Send coins',
txId
title: "Send coins",
txId,
});
};

Expand All @@ -38,53 +48,70 @@ export const WalletActions = () => {
return null;
}

const { hash, txId } = await sendSeveralAssets({ connectedWallet: storeState.wallet });
connectorStore.log({
hash,
title: 'Send several assets',
txId
const result = await sendSeveralAssets({
connectedWallet: storeState.wallet,
});
if (result) {
const { hash, txId } = result;
connectorStore.log({
hash,
title: "Send several assets",
txId,
});
}
};

const handleSingleDelegation = async () => {
if (!storeState.wallet) {
return null;
}

const { hash, txId } = await singleDelegation({ connectedWallet: storeState.wallet });
connectorStore.log({
hash,
title: 'Single delegation',
txId
const result = await singleDelegation({
connectedWallet: storeState.wallet,
});

if (result) {
const { hash, txId } = result;
connectorStore.log({
hash,
title: "Single delegation",
txId,
});
}
};

const handleSingleUndelegation = async () => {
if (!storeState.wallet) {
return null;
}

const { hash, txId } = await singleUndelegation({ connectedWallet: storeState.wallet });
connectorStore.log({
hash,
title: 'Single undelegation',
txId
const result = await singleUndelegation({
connectedWallet: storeState.wallet,
});

if (result) {
const { hash, txId } = result;
connectorStore.log({
hash,
title: "Single undelegation",
txId,
});
}
};

return (
<div class="actions-container">
<div className="actions-container">
<h3>Wallet actions</h3>
<button class="wallet-button" onClick={() => handleSendCoins()}>
<button className="wallet-button" onClick={handleSendCoins}>
Send coins
</button>
<button class="wallet-button" onClick={() => handleSendSeveralAssets()}>
<button className="wallet-button" onClick={handleSendSeveralAssets}>
Send several assets
</button>
<button class="wallet-button" onClick={() => handleSingleDelegation()}>
<button className="wallet-button" onClick={handleSingleDelegation}>
Single delegation
</button>
<button class="wallet-button" onClick={() => handleSingleUndelegation()}>
<button className="wallet-button" onClick={handleSingleUndelegation}>
Single undelegation
</button>
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/components/wallet-logs/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,19 +25,19 @@ export const Logs = () => {
storeState.addresses?.map((a) => <p>{a.address}</p>);

return (
<div class="logs-container">
<div className="logs-container">
<h3>Logs</h3>
{storeState.addresses && storeState.balance ? (
<div class="logs-container-summary">
<div className="logs-container-summary">
<h4>Balance: </h4>
<p> {storeState?.balance?.coins / 1_000_000n} tADA</p>
<h4>Addresses: </h4> {getAddresses()}
</div>
) : (
<p class="logs-container-summary">Loading wallet details</p>
<p className="logs-container-summary">Loading wallet details</p>
)}

<div class="logs-container-summary">
<div className="logs-container-summary">
{storeState.log.map((entry) => (
<>
<h4>{entry.title}</h4>
Expand Down
18 changes: 10 additions & 8 deletions src/features/sendCoins.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
import { ObservableWallet } from '@cardano-sdk/wallet';
import { inspectAndSignTx } from '../utils';
import { ObservableWallet } from "@cardano-sdk/wallet";
import { inspectAndSignTx } from "../utils";

export const sendCoins = async ({
connectedWallet
connectedWallet,
}: {
connectedWallet: ObservableWallet;
}): Promise<{ hash: string; txId: string }> => {
const builder = connectedWallet.createTxBuilder();
const output = await builder.buildOutput().handle('rhys').coin(10_000_000n).build();
const output = await builder
.buildOutput()
.handle("rhys")
.coin(10_000_000n)
.build();
const builtTx = builder.addOutput(output).build();

return new Promise(async (resolve) => {
const { hash, txId } = await inspectAndSignTx({ builtTx, connectedWallet });
resolve({ hash, txId });
});
const { hash, txId } = await inspectAndSignTx({ builtTx, connectedWallet });
return { hash, txId };
};
86 changes: 41 additions & 45 deletions src/features/sendSeveralAssets.ts
Original file line number Diff line number Diff line change
@@ -1,54 +1,50 @@
import { EMPTY, catchError, take, tap } from 'rxjs';
import { ObservableWallet } from '@cardano-sdk/wallet';
import { inspectAndSignTx } from '../utils';
import { logger } from '@cardano-sdk/util-dev';
import { firstValueFrom } from "rxjs";
import { ObservableWallet } from "@cardano-sdk/wallet";
import { inspectAndSignTx } from "../utils";

export const sendSeveralAssets = ({
connectedWallet
export const sendSeveralAssets = async ({
connectedWallet,
}: {
connectedWallet: ObservableWallet;
}): Promise<{ hash: string; txId: string }> =>
new Promise((resolve, reject) => {
connectedWallet.balance.utxo.available$
.pipe(
take(1),
tap(async (availableBalance) => {
if (!availableBalance.assets || availableBalance.assets?.size === 0) {
reject(new Error('Your wallet has no assets'));
return;
}
}): Promise<{ hash: string; txId: string } | null> => {
if (!connectedWallet) {
return null;
}

let nftCount = 0;
let tokenCount = 0;
const assetMap = new Map();
for (const [key, value] of availableBalance.assets) {
if (value === 1n && nftCount < 1) {
nftCount++;
assetMap.set(key, value);
} else if (value > 1n && tokenCount < 1) {
tokenCount++;
assetMap.set(key, 1000n);
}
}
const availableBalance = await firstValueFrom(
connectedWallet.balance.utxo.available$
);

if (assetMap.size < 2) reject(new Error("Didn't find 1NFT and FT to send"));
if (!availableBalance.assets || availableBalance.assets?.size === 0) {
throw new Error("Your wallet has no assets");
}

if (!connectedWallet) {
return null;
}
let nftCount = 0;
let tokenCount = 0;
const assetMap = new Map();
for (const [key, value] of availableBalance.assets) {
if (value === 1n && nftCount < 1) {
nftCount++;
assetMap.set(key, value);
} else if (value > 1n && tokenCount < 1) {
tokenCount++;
assetMap.set(key, 1000n);
}
}

const builder = connectedWallet.createTxBuilder();
const output = await builder.buildOutput().handle('rhys').coin(10_000_000n).build();
const builtTx = builder.addOutput(output).build();
const { hash, txId } = await inspectAndSignTx({ builtTx, connectedWallet });
if (assetMap.size < 2) throw new Error("Didn't find 1NFT and FT to send");

resolve({ hash, txId });
}),
catchError((error) => {
logger.error('Error fetching assets', error);
reject(new Error('Error fetching assets'));
return EMPTY;
})
)
.subscribe();
const builder = connectedWallet.createTxBuilder();
const output = await builder
.buildOutput()
.handle("rhys")
.coin(10_000_000n)
.build();
const builtTx = builder.addOutput(output).build();
const { hash, txId } = await inspectAndSignTx({
builtTx,
connectedWallet,
});

return { hash, txId };
};

0 comments on commit 267cc5c

Please sign in to comment.