Skip to content

💚 improve: code refactoring and tips validation. #222

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: v1.3.0_webapp_tipping-bonsai-p2p
Choose a base branch
from
Open

💚 improve: code refactoring and tips validation. #222

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8cf27ea
💚improve: code refactoring and tips validation.
parikshitbarua Aug 31, 2024
ca1d6f6
💚 refactor: refactor code.
parikshitbarua Aug 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
244 changes: 95 additions & 149 deletions web-app/src/components/Tip.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { cross, wallet } from "../utils/app-icon.util";
import { wallet, error } from "../utils/app-icon.util";
import { backInOut } from "svelte/easing";
import { fly } from "svelte/transition";
import { close } from "../utils/app-icon.util.js";
Expand Down Expand Up @@ -29,7 +29,7 @@
let bonsaiBalance = 0;
let fromAddress: `0x${string}`;
let selectedToken: string;
let userEnteredAmount = "";
let userEnteredAmount: number;
let isAmountInvalid = true;
let tippingSuccess = false;
let isSendingTip = false;
Expand All @@ -40,128 +40,98 @@
fromAddress = getAccount(wagmiConfig).address;
});

const checkAmountIsValid = () => {
if (userEnteredAmount.length === 0) {
const checkAmountIsValid = (amount: number) => {
const enteredAmount = Number(amount);
console.log("enteredAmount", enteredAmount);
if (enteredAmount >= 0.00001) {
isAmountInvalid = false;
// urlInvalidReason = "URL cannot be empty";
return;
}

const indexOfSpace = userEnteredAmount.indexOf(" ");
if (indexOfSpace !== -1) {
AmountInvalidReason = "";
return true;
} else if (enteredAmount === 0) {
isAmountInvalid = true;
AmountInvalidReason = "Amount is not specified properly";
return;
}

if (Number(userEnteredAmount) <= 0.000000000000000001) {
console.log("Entered amount", userEnteredAmount);
AmountInvalidReason = "";
} else if (enteredAmount < 0.00001) {
isAmountInvalid = true;
AmountInvalidReason = "Amount cannot be negative or too small";
console.log(AmountInvalidReason);
return;
}

if (/^-?\d+$/.test(userEnteredAmount)) {
isAmountInvalid = false;
return;
AmountInvalidReason = "Minimum Tip Amount is 0.000001";
} else {
isAmountInvalid = true;
AmountInvalidReason = "Please enter a valid amount";
}
isAmountInvalid = false;
return;
return false;
};

const sendTip = async () => {
userEnteredAmount = Number(userEnteredAmount);
if (!checkAmountIsValid(userEnteredAmount)) {
return;
}
isSendingTip = true;
let tipDetails;
if (selectedToken == tokenSymbol.BONSAI) {
console.log("userEnteredAmount", userEnteredAmount);
console.log("bonsaiBalance", bonsaiBalance);
if (userEnteredAmount > bonsaiBalance) {
addNotification({
position: "top-right",
heading: "Insufficient Balance",
description:
"You do not have the required balance. Please buy some tokens before sending a tip",
type: wallet,
removeAfter: 4000
});
setTimeout(async () => {
await web3Modal.open();
}, 2000);
dialog.close();
tippingSuccess = false;
isSendingTip = false;
sendInsufficientBalanceEvent();
return;
}
tipDetails = await sendTipUtilBonsai(
fromAddress,
toAddress,
userEnteredAmount
userEnteredAmount.toString()
);
if (tipDetails.success) {
userEnteredAmount = "";
isSendingTip = false;
tippingSuccess = true;
setTimeout(() => {
tippingSuccess = false;
dialog.close();
}, 5000);
return;
} else {
dialog.close();
addNotification({
position: "top-right",
heading: "Error while sending tip",
description: "Failed to send tip, please try again",
type: cross,
removeAfter: 4000
});
isSendingTip = false;
return;
}
} else if (selectedToken == tokenSymbol.MATIC) {
if (userEnteredAmount > maticBalance) {
addNotification({
position: "top-right",
heading: "Insufficient Balance",
description:
"You do not have the required balance. Please buy some tokens before sending a tip",
type: wallet,
removeAfter: 4000
});
setTimeout(async () => {
await web3Modal.open();
}, 2000);
dialog.close();
tippingSuccess = false;
isSendingTip = false;
return;
}
tipDetails = await sendTipUtilMatic(toAddress, userEnteredAmount);
if (tipDetails.success) {
userEnteredAmount = "";
isSendingTip = false;
tippingSuccess = true;
setTimeout(() => {
tippingSuccess = false;
dialog.close();
}, 5000);
return;
} else {
dialog.close();
addNotification({
position: "top-right",
heading: "Error while sending tip",
description: "Failed to send tip, please try again",
type: cross,
removeAfter: 4000
});
isSendingTip = false;
sendInsufficientBalanceEvent();
return;
}
tipDetails = await sendTipUtilMatic(
toAddress,
userEnteredAmount.toString()
);
}

if (tipDetails.success && !tipDetails.error) {
userEnteredAmount = null;
isSendingTip = false;
tippingSuccess = true;
return;
} else {
dialog.close();
addNotificationEvent(
"Error while sending tip",
"Failed to send tip, please try again",
error,
4000
);
isSendingTip = false;
return;
}
};

const addNotificationEvent = (heading, description, type, removeAfter) => {
addNotification({
position: "top-right",
heading,
description,
type,
removeAfter
});
};

const sendInsufficientBalanceEvent = () => {
addNotificationEvent(
"Insufficient Balance",
"You do not have the required balance. Please buy some tokens before sending a tip",
wallet,
4000
);
setTimeout(async () => {
await web3Modal.open();
}, 2000);
dialog.close();
tippingSuccess = false;
isSendingTip = false;
return;
};

const setMaticBalance = (balance) => {
maticBalance = balance;
return Math.round(maticBalance * 100) / 100;
Expand All @@ -176,7 +146,11 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<dialog
bind:this={dialog}
on:close={() => (showTippingModal = false)}
on:close={() => {
showTippingModal = false;
tippingSuccess = false;
return showTippingModal;
}}
on:click|self={() => dialog.close()}
>
{#if showTippingModal}
Expand All @@ -196,30 +170,28 @@
<div class="body">
<div class="input-box body__url">
<div class="input-box__label body__url__label">
<p>Congratulations!! 🥳</p>
<p>
Your tip was successfully sent to
<span style="font-weight: bold; color: #23f9ff"
>@{toHandle}</span
>.
</p>
<div
style="height: 80px; font-size: 100px; margin-top: 100px; text-align: center;"
>
🎉
</div>
<br />
<p>
Your tip <span style="font-weight: bold; color: #23f9ff"
>{userEnteredAmount}</span
>
was successfully sent to
<span style="font-weight: bold; color: #23f9ff">{toHandle}</span
>. Your support means a lot and helps our viewers keep doing
what they love. We really appreciate it!
Your contributions help our Viewers to keep doing what they love
the most!
</p>
</div>
</div>
</div>
<div class="line" />
<div class="CenterRowFlex footer">
<div class="footer__left">
<!-- <button-->
<!-- class="footer__left__matic"-->
<!-- on:click={() => (showGetTestMaticModal = true)}-->
<!-- >-->
<!-- Get test MATIC-->
<!-- </button>-->
</div>
<div class="footer__left" />
</div>
{:else}
<div class="CenterRowFlex head">
Expand All @@ -236,16 +208,12 @@
</p>
<p>
You are sending a tip to: <span
style="font-weight: bold; color: #23f9ff">{toHandle}</span
style="font-weight: bold; color: #23f9ff">@{toHandle}</span
>
</p>
<label for="tokens"> Select a token </label>
<div>
<select
name="tokens"
id="tokens"
bind:value="{selectedToken}"
>
<select name="tokens" id="tokens" bind:value={selectedToken}>
<option value="MATIC">MATIC</option>
<option value="BONSAI" selected>BONSAI</option>
</select>
Expand Down Expand Up @@ -283,8 +251,8 @@
<div class="input-box__input body__url__input">
<input
bind:value={userEnteredAmount}
on:input={checkAmountIsValid}
type="text"
on:input={() => checkAmountIsValid(userEnteredAmount)}
type="number"
/>
</div>
{#if isAmountInvalid}
Expand All @@ -296,21 +264,10 @@
</div>
<div class="line" />
<div class="CenterRowFlex footer">
<div class="footer__left">
<!-- <button-->
<!-- class="footer__left__matic"-->
<!-- on:click={() => (showGetTestMaticModal = true)}-->
<!-- >-->
<!-- Get test MATIC-->
<!-- </button>-->
</div>
<div class="footer__left" />
<div class="CenterRowFlex footer__right">
{#if !isSendingTip}
<button
class="btn"
on:click={(event) => sendTip(event)}
disabled={isAmountInvalid}
>
<button class="btn" on:click={sendTip} disabled={isAmountInvalid}>
Send
</button>
{:else}
Expand Down Expand Up @@ -411,17 +368,6 @@
padding: 0.5em;
}

/* Custom Dropdown Icon */
select::after {
content: '▼'; /* Custom arrow */
position: absolute;
right: 1em;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: #fff;
}

/* Option Hover Effect */
select:hover {
background-color: #2b5a60;
Expand Down
10 changes: 10 additions & 0 deletions web-app/src/components/posts-page/CommentsOfAPublication.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,8 @@
import web3ModalUtil, { wagmiConfig } from "../../utils/web3modal.util";
import Tip from "../Tip.svelte";
import TipImage from "$lib/assets/Tip.svg";
import { tooltip } from "@svelte-plugins/tooltips";

const { VITE_APP_LENS_ID } = import.meta.env;
const { VITE_IMAGE_PUB } = import.meta.env;

Expand Down Expand Up @@ -434,6 +436,14 @@
<button
on:click={(event) =>
initiateTippingProcess(event, comment)}
use:tooltip={{
content: "Send A Tip",
position: "left",
autoPosition: true,
align: "center",
animation: "slide",
theme: "custom-tooltip"
}}
>
<img src={TipImage} alt="tip" />
</button>
Expand Down
11 changes: 9 additions & 2 deletions web-app/src/components/posts-page/Publication.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
import Tip from "../Tip.svelte";
import TipImage from "$lib/assets/Tip.svg";
const { VITE_APP_LENS_ID } = import.meta.env;
import { tooltip } from "@svelte-plugins/tooltips";

const { addNotification } = getNotificationsContext();
let postPubId = $page.data.postPubId;
Expand Down Expand Up @@ -229,8 +230,6 @@
};

const initiateTippingProcess = async (event, commentDetails) => {
console.log("------------sendTip--------------");
console.log("commentDetails", commentDetails);
event.stopPropagation();
let address = getAccount(wagmiConfig).address;
if (address) {
Expand Down Expand Up @@ -308,6 +307,14 @@
<div>
<button
on:click={(event) => initiateTippingProcess(event, comments[0])}
use:tooltip={{
content: "Send A Tip",
position: "left",
autoPosition: true,
align: "center",
animation: "slide",
theme: "custom-tooltip"
}}
>
<img src={TipImage} alt="tip" />
</button>
Expand Down
Loading