Skip to content

Commit

Permalink
feat: display balances
Browse files Browse the repository at this point in the history
  • Loading branch information
Kalovelo committed Jul 15, 2022
1 parent 69c04c4 commit d99e017
Show file tree
Hide file tree
Showing 11 changed files with 216 additions and 219 deletions.
18 changes: 9 additions & 9 deletions client/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,26 @@ import RockPaperScissor from './components/RockPaperScissor.vue';
import PopUp from './components/PopUp.vue';
import { useChannelStore } from './stores/channel';
import { onBeforeUnmount, onMounted, toRaw } from 'vue';
import { getSdk, returnCoinsToFaucet } from './sdk/sdk';
import { ChannelService } from './sdk/sdkService';
import { getSdk, returnCoinsToFaucet } from './sdk/sdkService';
import { GameChannel } from './sdk/GameChannel';
import { AeSdk } from '@aeternity/aepp-sdk';
const channelStore = useChannelStore();
async function initChannel() {
if (!channelStore.channelService) {
if (!channelStore.channel) {
throw new Error('SDK is not initialized');
}
await channelStore.channelService.initializeChannel();
await channelStore.channel.initializeChannel();
}
onMounted(async () => {
channelStore.channelService = new ChannelService(await getSdk());
channelStore.channel = new GameChannel(await getSdk());
});
onBeforeUnmount(async () => {
if (channelStore.channelService?.sdk) {
await returnCoinsToFaucet(toRaw(channelStore.channelService.sdk) as AeSdk);
if (channelStore.channel?.sdk) {
await returnCoinsToFaucet(toRaw(channelStore.channel.sdk) as AeSdk);
}
});
</script>
Expand All @@ -34,10 +34,10 @@ onBeforeUnmount(async () => {
<PopUp />
<Header />
<ChannelInitialization
v-if="!channelStore.channelService?.isOpen"
v-if="!channelStore.channel?.isOpen"
@initializeChannel="initChannel()"
/>
<RockPaperScissor v-if="channelStore.channelService?.isOpen" />
<RockPaperScissor v-if="channelStore.channel?.isOpen" />
<TransactionsList />
</template>

Expand Down
6 changes: 3 additions & 3 deletions client/src/components/ChannelInitialization.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ const title = computed(() =>
);
const errorMessage = computed(() =>
channelStore.channelService?.error
? `Error ${channelStore.channelService?.error.status}: ${channelStore.channelService?.error.statusText}, ${channelStore.channelService?.error.message}`
channelStore.channel?.error
? `Error ${channelStore.channel?.error.status}: ${channelStore.channel?.error.statusText}, ${channelStore.channel?.error.message}`
: ''
);
Expand Down Expand Up @@ -54,7 +54,7 @@ async function openStateChannel(): Promise<void> {
text="Start game"
/>
</div>
<LoadingAnimation v-else-if="!channelStore.channelService?.error" />
<LoadingAnimation v-else-if="!channelStore.channel?.error" />
<p v-else>
{{ errorMessage }}
</p>
Expand Down
10 changes: 2 additions & 8 deletions client/src/components/Header.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,9 @@ const channelStore = useChannelStore();

<template>
<div class="header">
<PlayerInfo
name="You"
:balance="channelStore.channelService?.balances.user"
/>
<PlayerInfo name="You" :balance="channelStore.channel?.balances.user" />
<div class="center"></div>
<PlayerInfo
name="Bot"
:balance="channelStore.channelService?.balances.bot"
/>
<PlayerInfo name="Bot" :balance="channelStore.channel?.balances.bot" />
</div>
</template>

Expand Down
4 changes: 2 additions & 2 deletions client/src/components/TransactionsList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { useChannelStore } from '../stores/channel';
import SingleTransaction, { Transaction } from './SingleTransaction.vue';
const transactions = ref<Transaction[]>([]);
const channelStore = useChannelStore();
const isMinimized = computed(() => !channelStore.channelService?.isOpen);
const isMinimized = computed(() => !channelStore.channel?.isOpen);
</script>

<template>
Expand All @@ -14,7 +14,7 @@ const isMinimized = computed(() => !channelStore.channelService?.isOpen);
<button
class="autoplay"
aria-label="autoplay_button"
:disabled="!channelStore.channelService?.isOpen"
:disabled="!channelStore.channel?.isOpen"
>
<img
class="icon"
Expand Down
138 changes: 138 additions & 0 deletions client/src/sdk/GameChannel.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
import { BigNumber } from 'bignumber.js';
import { AeSdk, Channel } from '@aeternity/aepp-sdk';
import { ChannelOptions } from '@aeternity/aepp-sdk/es/channel/internal';
import { EncodedData } from '@aeternity/aepp-sdk/es/utils/encoder';
import { returnCoinsToFaucet } from './sdkService';
import { toRaw } from 'vue';

export class GameChannel {
readonly sdk: AeSdk;
channelConfig?: ChannelOptions;
channelInstance?: Channel;
isOpen = false;
error?: {
status: number;
statusText: string;
message: string;
} = undefined;
balances: {
user?: BigNumber;
bot?: BigNumber;
} = {
user: undefined,
bot: undefined,
};

constructor(sdk: AeSdk) {
this.sdk = sdk;
}

getChannelWithoutProxy() {
if (!this.channelInstance) {
throw new Error('Channel is not initialized');
}
return toRaw(this.channelInstance);
}

async fetchChannelConfig(): Promise<ChannelOptions> {
if (!this.sdk) throw new Error('SDK is not set');
const res = await fetch(import.meta.env.VITE_BOT_SERVICE_URL + '/open', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
address: this.sdk.selectedAddress,
port: import.meta.env.VITE_RESPONDER_PORT ?? '3333',
host: import.meta.env.VITE_RESPONDER_HOST ?? 'localhost',
}),
});
const data = await res.json();

if (res.status != 200) {
this.error = {
status: res.status,
statusText: res.statusText,
message: data.error || 'Error while fetching channel config',
};
throw new Error(data.error);
}
return data as ChannelOptions;
}

async initializeChannel() {
try {
this.channelConfig = await this.fetchChannelConfig();
if (this.channelConfig == null) {
throw new Error('Channel config is null');
}

await this.openChannel();
} catch (e) {
console.error(e);
}
}

async openChannel() {
if (!this.channelConfig) throw new Error('Channel config is not set');

this.channelInstance = await Channel.initialize({
...this.channelConfig,
role: 'responder',
sign: this.signTx.bind(this),
url:
import.meta.env.VITE_NODE_ENV == 'development'
? import.meta.env.VITE_WS_URL
: this.channelConfig.url,
});
this.registerEvents();
}

async closeChannel() {
if (!this.channelInstance) {
throw new Error('Channel is not open');
}
this.channelInstance.disconnect();
}

getStatus() {
if (!this.channelInstance) {
throw new Error('Channel is not open');
}
return this.getChannelWithoutProxy().status();
}

async signTx(tag: string, tx: EncodedData<'tx'>): Promise<EncodedData<'tx'>> {
// TODO show in pop up
return new Promise((resolve, reject) => {
resolve(Promise.resolve(toRaw(this.sdk).signTransaction(tx, {})));
reject(new Error(`Error while signing tx with tag ${tag}`));
});
}

private registerEvents() {
if (this.channelInstance) {
this.getChannelWithoutProxy().on('statusChanged', (status) => {
if (status === 'disconnected') {
returnCoinsToFaucet(toRaw(this.sdk));
}
if (status === 'open') {
this.isOpen = true;
this.updateBalances();
}
});
}
}

async updateBalances() {
if (!this.channelInstance || !this.channelConfig)
throw new Error('Channel is not open');
const { initiatorId, responderId } = this.channelConfig;
const balances = await this.getChannelWithoutProxy().balances([
initiatorId,
responderId,
]);
this.balances.user = new BigNumber(balances[responderId]);
this.balances.bot = new BigNumber(balances[initiatorId]);
}
}
50 changes: 0 additions & 50 deletions client/src/sdk/sdk.ts

This file was deleted.

Loading

0 comments on commit d99e017

Please sign in to comment.