Skip to content

Commit

Permalink
fix-bug when navigate after sign & add loader
Browse files Browse the repository at this point in the history
  • Loading branch information
@tung-lee
tung-lee committed Jan 25, 2024
1 parent a1f1290 commit f6f2069
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 81 deletions.
111 changes: 30 additions & 81 deletions packages/extension/src/pages/chatbot/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import { observer } from 'mobx-react-lite';
import React, { FunctionComponent, useEffect, useReducer, useRef } from 'react';
import React, {
FunctionComponent,
useEffect,
useReducer,
useRef,
useState,
} from 'react';
import { HeaderLayout } from '../../layouts';
import style from './style.module.scss';
import { useStore } from '../../stores';
Expand All @@ -8,7 +14,7 @@ import { useClientTestnet } from './use-client-testnet';
import { OptionEnum, StatusEnum } from './enum';
import { Dropdown } from './dropdown';
import { Messages } from './messages';
import { useHistory, useLocation } from 'react-router';
import { Loader } from './loader';

const BACKEND_URL = 'https://oraidex-tools.fly.dev';

Expand Down Expand Up @@ -70,46 +76,18 @@ function reducer(state, action) {
export const ChatbotPage: FunctionComponent = observer(() => {
const { chainStore, accountStore } = useStore();
const accountInfo = accountStore.getAccount(chainStore.current.chainId);
const userAddr = accountInfo._bech32Address;
const userAddr = accountInfo.bech32Address;
const accountOrai = accountStore.getAccount(ChainIdEnum.Oraichain);
const client = useClientTestnet(accountOrai);

// router
const history = useHistory(); // navigate back to chatbot after sign success
const location = useLocation(); // active useEffect to reload messages

const messagesEndRef = useRef(null);

const [
{ messages, prompt, status, chosenOption, pairContractAddr },
dispatch,
] = useReducer(reducer, initialState);

console.log(userAddr);

useEffect(() => {
dispatch({
type: 'reload_messages',
});
}, [location.pathname]);

const testChatUI = () => {
dispatch({
type: 'chat',
payload: {
isUser: true,
msg: prompt,
},
});

dispatch({
type: 'chat',
payload: {
isUser: false,
msg: 'Answer',
},
});
};
const [isLoading, setIsLoading] = useState(false);

const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
Expand All @@ -124,7 +102,8 @@ export const ChatbotPage: FunctionComponent = observer(() => {
dispatch,
prompt,
pairContractAddr,
chosenOption
chosenOption,
setIsLoading
) => {
let endPoint = '';
if (chosenOption === OptionEnum.SWAP) {
Expand All @@ -136,6 +115,7 @@ export const ChatbotPage: FunctionComponent = observer(() => {
msg: prompt,
},
});
setIsLoading(true);
try {
const resp = await fetch(endPoint, {
method: 'POST',
Expand All @@ -149,6 +129,7 @@ export const ChatbotPage: FunctionComponent = observer(() => {
}),
});
const data = await resp.json();
setIsLoading(false);
console.log(data);
const { answer, msg } = data;
const msgObject = JSON.parse(msg);
Expand Down Expand Up @@ -182,23 +163,20 @@ export const ChatbotPage: FunctionComponent = observer(() => {
},
])
);
// navigate to chatbot page
history.push('/chatbot');
} catch (err) {
console.log(err);
}
} else {
endPoint = `${BACKEND_URL}/chatoraidex`;
try {
// console.log(userAddr);
// console.log(prompt);
dispatch({
type: 'chat',
payload: {
isUser: true,
msg: prompt,
},
});
setIsLoading(true);
const resp = await fetch(endPoint, {
method: 'POST',
headers: {
Expand All @@ -210,6 +188,7 @@ export const ChatbotPage: FunctionComponent = observer(() => {
}),
});
const data = await resp.json();
setIsLoading(false);
const { output } = data;
console.log(data);
dispatch({
Expand Down Expand Up @@ -244,33 +223,6 @@ export const ChatbotPage: FunctionComponent = observer(() => {
return result;
}

// useEffect(() => {
// document.addEventListener('keypress', (evt) => {
// if (evt.key == 'Enter') {
// testChatUI();
// }
// });

// return () => {
// document.removeEventListener('keypress', (evt) => {
// if (evt.key == 'Enter') {
// testChatUI();
// }
// });
// };
// }, [testChatUI]);

// useEffect(() => {
// fetch(
// 'https://api.oraidex.io/price?base_denom=orai&quote_denom=orai12hzjxfh77wl572gdzct2fxv2arxcwh6gykc7qh&tf=240'
// )
// .then((res) => res.json())
// .then((data) => console.log(data))
// .catch((err) => {
// console.log(err);
// });
// }, []);

return (
<HeaderLayout showChainName canChangeChainInfo>
<div className={style.container}>
Expand All @@ -292,7 +244,7 @@ export const ChatbotPage: FunctionComponent = observer(() => {
onClick={(evt) =>
dispatch({
type: 'on_change_prompt',
payload: evt.target.innerText,
payload: (evt.target as HTMLDivElement).innerText,
})
}
>
Expand All @@ -303,7 +255,7 @@ export const ChatbotPage: FunctionComponent = observer(() => {
onClick={(evt) =>
dispatch({
type: 'on_change_prompt',
payload: evt.target.innerText,
payload: (evt.target as HTMLDivElement).innerText,
})
}
>
Expand All @@ -314,7 +266,7 @@ export const ChatbotPage: FunctionComponent = observer(() => {
onClick={(evt) =>
dispatch({
type: 'on_change_prompt',
payload: evt.target.innerText,
payload: (evt.target as HTMLDivElement).innerText,
})
}
>
Expand All @@ -327,17 +279,7 @@ export const ChatbotPage: FunctionComponent = observer(() => {
<Messages messages={messages} />
)}

{/* <div className={style.wrapperChat}>
<UserChat msg="Price of token today" />
<BotChat msg="Sure, wait me a minute" />
<BotChat
msg="To get the latest price information for Orai Coin, I
recommend checking a reputable cryptocurrency exchange,
financial news website, or the official website of the
project. Keep in mind that prices can vary between
different exchanges."
/>
</div> */}
{isLoading && <Loader />}

<div>
<div className={style.inputWrapperContent}>
Expand All @@ -351,8 +293,14 @@ export const ChatbotPage: FunctionComponent = observer(() => {
}
onKeyDown={(evt) => {
if (evt.key === 'Enter') {
testChatUI();
// callBot(userAddr, dispatch, prompt);
callBot(
userAddr,
dispatch,
prompt,
pairContractAddr,
chosenOption,
setIsLoading
);
}
}}
className={style.inputBox}
Expand All @@ -374,7 +322,8 @@ export const ChatbotPage: FunctionComponent = observer(() => {
dispatch,
prompt,
pairContractAddr,
chosenOption
chosenOption,
setIsLoading
)
}
// onClick={() => testChatUI()}
Expand Down
55 changes: 55 additions & 0 deletions packages/extension/src/pages/chatbot/loader.module.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
.ldsEllipsis {
display: block;
position: relative;
width: 40px;
height: 40px;
}
.ldsEllipsis div {
position: absolute;
top: 33px;
width: 13px;
height: 13px;
border-radius: 50%;
background: black;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.ldsEllipsis div:nth-child(1) {
left: 8px;
animation: lds-ellipsis1 0.6s infinite;
}
.ldsEllipsis div:nth-child(2) {
left: 8px;
animation: lds-ellipsis2 0.6s infinite;
}
.ldsEllipsis div:nth-child(3) {
left: 32px;
animation: lds-ellipsis2 0.6s infinite;
}
.ldsEllipsis div:nth-child(4) {
left: 56px;
animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}
13 changes: 13 additions & 0 deletions packages/extension/src/pages/chatbot/loader.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react';
import styles from './loader.module.scss';

export const Loader = () => {
return (
<div className={styles.ldsEllipsis}>
<div />
<div />
<div />
<div />
</div>
);
};

0 comments on commit f6f2069

Please sign in to comment.