Skip to content

Commit

Permalink
v0.0.2 (#4)
Browse files Browse the repository at this point in the history 
* fix: disable button on convert request, close #2

* feat: Add loading indicator when select options still pending, closes #1

* fix: faqs

* chore: update assets app.png
  • Loading branch information
@fzn0x
fzn0x authored Apr 16, 2024
1 parent 0e8b435 commit 198b538
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 28 deletions.
10 changes: 5 additions & 5 deletions app/routes/_index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ export default function Root() {
rounded='md'
shadow='md'
>
<Text fontWeight="500" fontSize="1em" whiteSpace={"pre-wrap"}>You can contact us from our contact page to do further processes.</Text>
<Text fontWeight="500" fontSize="1em" whiteSpace={"pre-wrap"}>You can contact us from our <Link href="/contact" color="blue.600">contact page</Link> to do further processes.</Text>
</Box>
</Collapse>
</Flex>
Expand All @@ -172,7 +172,7 @@ export default function Root() {
rounded='md'
shadow='md'
>
<Text fontWeight="500" fontSize="1em" whiteSpace={"pre-wrap"}>You can click here to access AnyConvert github repository.</Text>
<Text fontWeight="500" fontSize="1em" whiteSpace={"pre-wrap"}>You can click <Link href="https://github.com/fzn0x/anyconvert" color="blue.600" isExternal>here</Link> to access AnyConvert github repository. Don't forget to leave us a star.</Text>
</Box>
</Collapse>
</Flex>
Expand All @@ -189,7 +189,7 @@ export default function Root() {
rounded='md'
shadow='md'
>
<Text fontWeight="500" fontSize="1em" whiteSpace={"pre-wrap"}>AnyConvert was created by our solo developer Fauzan, Fauzan enjoy making apps.</Text>
<Text fontWeight="500" fontSize="1em" whiteSpace={"pre-wrap"}>AnyConvert was created by our solo developer <Link href="https://github.com/fzn0x" color="blue.600" isExternal>Fauzan</Link>, Fauzan enjoy making apps.</Text>
</Box>
</Collapse>
</Flex>
Expand All @@ -206,7 +206,7 @@ export default function Root() {
rounded='md'
shadow='md'
>
<Text fontWeight="500" fontSize="1em" whiteSpace={"pre-wrap"}> You can submit a contribution in AnyConvert github repository to fix any bugs you found on this website.</Text>
<Text fontWeight="500" fontSize="1em" whiteSpace={"pre-wrap"}> You can submit a contribution in <Link href="https://github.com/fzn0x/anyconvert" color="blue.600" isExternal>AnyConvert github repository</Link> to fix any bugs you found on this website.</Text>
</Box>
</Collapse>
</Flex>
Expand All @@ -223,7 +223,7 @@ export default function Root() {
rounded='md'
shadow='md'
>
<Text fontWeight="500" fontSize="1em" whiteSpace={"pre-wrap"}>You can contact us from our contact page and explain your issues.</Text>
<Text fontWeight="500" fontSize="1em" whiteSpace={"pre-wrap"}>You can contact us from our <Link href="/contact" color="blue.600">contact page</Link> and explain your issues or access our issue ticket in <Link href="https://github.com/fzn0x/anyconvert/issues" color="blue.600" isExternal>AnyConvert github repository</Link>.</Text>
</Box>
</Collapse>
</Flex>
Expand Down
84 changes: 61 additions & 23 deletions app/routes/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,9 @@ export default function Root() {
const [fromCurrency, setFromCurrency] = useState("");
const [toCurrency, setToCurrency] = useState("");
const [result, setResult] = useState<number | null>(null);
const [isLoading, setIsLoading] = useState(false);
const [isCurrencyToLoading, setIsCurrencyToLoading] = useState(false);
const [isCurrencyFromLoading, setIsCurrencyFromLoading] = useState(false);
const [currencyType, setCurrencyType] = useState("Cryptocurrency");
const setFromCurrencySelectRef = useRef<SelectInstance<SelectOption> | null>(null);
const setToCurrencySelectRef = useRef<SelectInstance<SelectOption> | null>(null);
Expand All @@ -62,6 +65,7 @@ export default function Root() {
};

async function getCryptocurrencyRates() {
setIsLoading(true);
try {
const rates = await trpc.rates.query({
from: fromCurrency,
Expand All @@ -80,6 +84,7 @@ export default function Root() {
isClosable: true,
position: "top",
});
setIsLoading(false);
} catch (err) {
if (err instanceof Error) {
toast({
Expand All @@ -95,6 +100,7 @@ export default function Root() {
}

async function getCurrencyRates() {
setIsLoading(true);
try {
const fromRates = await trpc.rates.query({
from: fromCurrency,
Expand All @@ -118,6 +124,7 @@ export default function Root() {
isClosable: true,
position: "top",
});
setIsLoading(false);
} catch (err) {
if (err instanceof Error) {
toast({
Expand All @@ -133,27 +140,59 @@ export default function Root() {
}

async function getFromCurrencies (type = "currencies") {
const currencies = await trpc.currencies.query({
type: type,
})
setIsCurrencyFromLoading(true);
try {
const currencies = await trpc.currencies.query({
type: type,
})

if (currencies.length) {
setFromCurrencies(currencies);
if (currencies.length) {
setFromCurrencies(currencies);
}

return currencies;
} catch (err) {
if (err instanceof Error) {
toast({
title: 'Conversion failed.',
description: err.message,
status: 'error',
duration: 5000,
isClosable: true,
position: "top",
});
}
} finally {
setIsCurrencyFromLoading(false);
}

return currencies;
}

async function getToCurrencies (type = "currencies") {
const currencies = await trpc.currencies.query({
type: type,
})
setIsCurrencyToLoading(true);
try {
const currencies = await trpc.currencies.query({
type: type,
})

if (currencies.length) {
setToCurrencies(currencies);
}
if (currencies.length) {
setToCurrencies(currencies);
}

return currencies;
return currencies;
} catch (err) {
if (err instanceof Error) {
toast({
title: 'Conversion failed.',
description: err.message,
status: 'error',
duration: 5000,
isClosable: true,
position: "top",
});
}
} finally {
setIsCurrencyToLoading(false);
}
}

useEffect(() => {
Expand Down Expand Up @@ -241,6 +280,7 @@ export default function Root() {
rounded="50"
mb={20}
minHeight="100vh"
minW={["100%", "400px", "700px"]}
bg="white"
borderColor="black"
borderWidth="5px"
Expand Down Expand Up @@ -275,6 +315,8 @@ export default function Root() {
_hover={{ borderColor: "black" }}
/>
<Select
isLoading={isCurrencyFromLoading}
placeholder={ isCurrencyFromLoading ? "Loading..." : "From..."}
ref={setFromCurrencySelectRef}
instanceId = "from-currencies-box"
name="from-currencies-box"
Expand All @@ -291,6 +333,8 @@ export default function Root() {
/>
<Text>To</Text>
<Select
isLoading={isCurrencyToLoading}
placeholder={ isCurrencyToLoading ? "Loading..." : "To..."}
ref={setToCurrencySelectRef}
instanceId = "to-currencies-box"
name="to-currencies-box"
Expand All @@ -305,18 +349,12 @@ export default function Root() {
isMulti={false}
onChange={(e) => setToCurrency(e?.value)}
/>
<Button bg="blue.600" _hover={{ bg: "blue.700" }} color="white" onClick={() => currencyType === "Currency" ? getCurrencyRates() : getCryptocurrencyRates()} isDisabled={!amount || !fromCurrency || !toCurrency}>
<Button isLoading={isLoading} bg="blue.600" _hover={{ bg: "blue.700" }} color="white" onClick={() => currencyType === "Currency" ? getCurrencyRates() : getCryptocurrencyRates()} isDisabled={!amount || !fromCurrency || !toCurrency}>
Convert
</Button>
{result !== null && (
<Box>
<Input
_disabled={{ color: "black" }}
isDisabled={true}
placeholder="Amount"
value={`${amount} ${(fromCurrency || "").toUpperCase()} is ${Number(result || 0).toFixed(20).replace(/\.0+$/, "")} ${(toCurrency || "").toUpperCase()}`}
fontWeight={800}
/>
<Box color="black" fontWeight={600} w="auto" whiteSpace={"wrap"} overflowWrap="break-word">
<Text>{amount} {(fromCurrency || "").toUpperCase()} is {Number(result || 0).toFixed(20).replace(/\.0+$/, "")} {(toCurrency || "").toUpperCase()}</Text>
<Flex rounded="20" mt={5} color="white" direction={"row"} p="5" bg="blue.400" gap={3}>
<IoInformationCircleOutline size="50"/>
<Text fontWeight={"700"}>The amount may differ when sending money through other platforms. Compare exchange rates <Link color="blue.800" href="https://wise.com/gb/compare/" isExternal>here.</Link></Text>
Expand Down
Binary file modified public/app.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 198b538

Please sign in to comment.