| 6 | "": "const CreatePrompt = styled.div`\\\\n color: #FFE7C3;\\\\n margin:auto;\\\\n width:100%;\\\\n max-width: 420px;\\\\n padding: 1.5rem;\\\\n border-radius: .7rem;\\\\n h1 {\\\\n font-size: 1.5rem;\\\\n font-weight: 600;\\\\n margin-bottom: 2rem;\\\\n }\\\\n input, textarea {\\\\n color: #CB4439 !important;\\\\n background-color: #FFE7C3 !important;\\\\n resize: none;\\\\n border-radius: 5px 0px 0px 5px;\\\\n box-shadow: 3px 3px 3px rgba(0,0,0,.3);\\\\n &:active {\\\\n background-color: #FFE7C3 !important;\\\\n }\\\\n &::placeholder {\\\\n font-size: .8rem;\\\\n color: #CB4439;\\\\n }\\\\n &::-webkit-inner-spin-button {\\\\n -webkit-appearance: none;\\\\n }\\\\n\\\\n &:placeholder-shown {\\\\n & + label {\\\\n opacity: 0;\\\\n visibility: hidden;\\\\n transform: translateY(-1rem);\\\\n }\\\\n & + .eth-label {\\\\n opacity: 0;\\\\n visibility: hidden;\\\\n transform: translateX(-18rem);\\\\n }\\\\n }\\\\n\\\\n }\\\\n\\\\n label {\\\\n font-size: .8rem;\\\\n color: rgba(0,0,0,.4);\\\\n margin-left: .8rem;\\\\n margin-top: .2rem;\\\\n display: block;\\\\n transition: all .3s;\\\\n }\\\\n\\\\n ul { \\\\n list-style-type: none;\\\\n position: relative;\\\\n }\\\\n\\\\n li {\\\\n width: 100%;\\\\n position: absolute;\\\\n border: 1px solid rgba(0,0,0, .1);\\\\n top: 2px;\\\\n left: 0;\\\\n padding: 8px;\\\\n border-radius: 5px; \\\\n background-color: white;\\\\n box-shadow: 1px 4px 8px rgba(0,0,0,.2);\\\\n font-size: .8rem;\\\\n\\\\n &:hover {\\\\n cursor: pointer;\\\\n background-color: #f0eded;\\\\n }\\\\n }\\\\n\\\\n .eth-label {\\\\n margin-top: -1.7rem;\\\\n margin-left: 19rem;\\\\n margin-bottom: 2.6rem;\\\\n }\\\\n .form-group {\\\\n margin-bottom: .5rem;\\\\n }\\\\n .selected {\\\\n display: none;\\\\n }\\\\n`;\\\\n\\\\nconst Button = styled.div`\\\\n display:flex;\\\\n align-items:center;\\\\n justify-content:center;\\\\n font-weight:bold;\\\\n color:#fff;\\\\n width:100%;\\\\n height:50px;\\\\n border-radius: 0px 5px 5px 0px;\\\\n background-color:#CB4439;\\\\n text-align:center;\\\\n cursor: pointer;\\\\n user-select: none;\\\\n box-shadow: 3px 3px 6px 1px rgba(0,0,0,.3);\\\\n\\\\n &:active {\\\\n box-shadow: 0 0 0 rgba(0,0,0,0);\\\\n transform: translateY(2px);\\\\n }\\\\n`;\\\\n\\\\nconst Command = styled.div`\\\\n display:flex;\\\\n align-items:center;\\\\n justify-content:center;\\\\n font-weight:bold;\\\\n font-size: 14px;\\\\n color:#CB4439;\\\\n background-color: #FFE7C3;\\\\n width:80%;\\\\n height:40px;\\\\n border-radius: 5px;\\\\n text-align:center;\\\\n cursor: pointer;\\\\n user-select: none;\\\\n box-shadow: 0 3px 3px rgba(0,0,0,.3);\\\\n border: 3px solid black;\\\\n margin-top: 10px;\\\\n margin-bottom: 10px;\\\\n\\\\n &:active {\\\\n box-shadow: 0 0 0 rgba(0,0,0,0);\\\\n transform: translateY(2px);\\\\n background-color:gray;\\\\n }\\\\n\\\\n &:hover {\\\\n box-shadow: 0 0 0 rgba(0,0,0,0);\\\\n transform: translateY(2px);\\\\n background-color:gray;\\\\n }\\\\n\\\\n @media (min-width: 768px) {\\\\n width: 300px;\\\\n }\\\\n\\\\n`;\\\\n\\\\nconst ButtonContainer = styled.div`\\\\n margin-left: auto;\\\\n margin-right: auto;\\\\n display: flex;\\\\n flex-direction: column;\\\\n align-items: center;\\\\n\\\\n @media (min-width: 768px) {\\\\n width: 650px!important;\\\\n flex-direction: row;\\\\n flex-wrap: wrap;\\\\n justify-content: space-between;\\\\n }\\\\n`;\\\\n\\\\n// check if correct chain\\\\nconst { chainId } = Ethers.getNetwork();\\\\nconst chainIdToSwitch = \\\\\\\"0x66eed\\\\\\\";\\\\nconst switchChain = () => {\\\\n const goerliChain = {\\\\n chainId: \\\\\\\"0x66eed\\\\\\\", // The chain ID for Aurora (1313161554 in hexadecimal)\\\\n chainName: \\\\\\\"Arbitrum Goerli\\\\\\\", // The name of the Aurora chain\\\\n nativeCurrency: {\\\\n name: \\\\\\\"GoerliETH\\\\\\\",\\\\n symbol: \\\\\\\"ETH\\\\\\\",\\\\n decimals: 18,\\\\n },\\\\n rpcUrls: [\\\\\\\"https://arbitrum-goerli.publicnode.com\\\\\\\"], // The RPC endpoint for the Aurora chain\\\\n blockExplorerUrls: [\\\\\\\"https://goerli.arbiscan.io/\\\\\\\"], // The block explorer URL for Aurora\\\\n };\\\\n\\\\n Ethers.send(\\\\\\\"wallet_addEthereumChain\\\\\\\", [goerliChain]);\\\\n};\\\\n\\\\nif (chainId !== 421613) {\\\\n return (\\\\n <div style={{ margin: \\\\\\\"auto\\\\\\\", textAlign: \\\\\\\"center\\\\\\\" }}>\\\\n <h2>Please switch to Goerli</h2>\\\\n <br />\\\\n <button onClick={switchChain}>Switch to Goerli</button>\\\\n <br />\\\\n <br />\\\\n <p>**Please refresh once after switch chain**</p>\\\\n </div>\\\\n );\\\\n}\\\\n\\\\ninitState({\\\\n prompt: null,\\\\n response: \\\\\\\"\\\\\\\",\\\\n widget: null,\\\\n isLoading: false,\\\\n});\\\\n\\\\nconst buttonList = [\\\\n \\\\\\\"View my balances\\\\\\\",\\\\n \\\\\\\"Borrow 10 SUS using 0.1 WETH\\\\\\\",\\\\n \\\\\\\"Provide 10 SUS into stability pool\\\\\\\",\\\\n \\\\\\\"Remove 10 SUS from stability pool\\\\\\\",\\\\n \\\\\\\"Repay 10 SUS against WETH debt\\\\\\\",\\\\n \\\\\\\"Withdraw 0.1 WETH\\\\\\\",\\\\n \\\\\\\"Deposit 0.1 WETH\\\\\\\",\\\\n \\\\\\\"Close my SUS position for WETH\\\\\\\",\\\\n]; // Add your button texts here\\\\n\\\\nconst resendPrompt = (error) => {\\\\n console.log(\\\\\\\"Error\\\\\\\");\\\\n console.log(error);\\\\n const res = fetch(\\\\n `https://cmvfgq7owf7agld24uu4azhr5m0plyil.lambda-url.us-east-1.on.aws/`,\\\\n {\\\\n method: \\\\\\\"POST\\\\\\\",\\\\n body: JSON.stringify({\\\\n prompt: `What is missing from these inputs: ${error.inference} ?`,\\\\n }),\\\\n }\\\\n );\\\\n\\\\n if (!res.body || res.body.error) return;\\\\n // console.log(\\\\\\\"getNamesForOwner raw res\\\\\\\", res.body);\\\\n\\\\n const inference = res.body;\\\\n console.log(inference);\\\\n State.update({ response: inference });\\\\n};\\\\n\\\\nconst sendPrompt = () => {\\\\n State.update({ isLoading: true });\\\\n\\\\n asyncFetch(\\\\n `https://cmvfgq7owf7agld24uu4azhr5m0plyil.lambda-url.us-east-1.on.aws/`,\\\\n {\\\\n method: \\\\\\\"POST\\\\\\\",\\\\n body: JSON.stringify({\\\\n prompt: state.prompt,\\\\n }),\\\\n }\\\\n ).then((res) => {\\\\n if (!res.body || res.body.error) return;\\\\n // console.log(\\\\\\\"getNamesForOwner raw res\\\\\\\", res.body);\\\\n\\\\n const inference = res.body;\\\\n const parsed = JSON.parse(inference);\\\\n if (parsed.action) {\\\\n const widget = (\\\\n <Widget\\\\n src=\\\\\\\"testbrrr.near/widget/Sus\\\\\\\"\\\\n props={{\\\\n ...parsed,\\\\n resendPrompt: resendPrompt,\\\\n // inference: inference,\\\\n // onClose: () => State.update({ response: null }),\\\\n }}\\\\n />\\\\n );\\\\n State.update({ response: parsed.text, widget: widget, isLoading: false });\\\\n } else {\\\\n State.update({ response: inference, isLoading: false });\\\\n }\\\\n });\\\\n};\\\\n\\\\nreturn (\\\\n <div style={{ backgroundColor: \\\\\\\"#CB4439\\\\\\\" }}>\\\\n <CreatePrompt>\\\\n <div\\\\n style={{\\\\n display: \\\\\\\"none\\\\\\\",\\\\n }}\\\\n ></div>\\\\n <div\\\\n style={{ display: \\\\\\\"flex\\\\\\\", justifyContent: \\\\\\\"center\\\\\\\", marginBottom: 30 }}\\\\n >\\\\n <img\\\\n style={{ width: 120, height: 120 }}\\\\n src=\\\\\\\"https://ipfs.io/ipfs/bafybeieub4xgdcph5cj4oa6kfskfpm2nj5vtd5xgbkyi7jvgr2pbodscjq/kendallc_Cartoon_logo_for_steak.loans_minimal_colors_solid_colo_575f812c-6e0d-4827-95d3-dac64469271c.png\\\\\\\"\\\\n />\\\\n </div>\\\\n <div className=\\\\\\\"form-group\\\\\\\" style={{ display: \\\\\\\"flex\\\\\\\" }}>\\\\n <input\\\\n id=\\\\\\\"name\\\\\\\"\\\\n type=\\\\\\\"text\\\\\\\"\\\\n placeholder=\\\\\\\"What is Steak Loans?\\\\\\\"\\\\n value={state.prompt}\\\\n onChange={(event) => State.update({ prompt: event.target.value })}\\\\n required\\\\n style={{ width: \\\\\\\"80%\\\\\\\", height: \\\\\\\"50px\\\\\\\" }}\\\\n />\\\\n <Button\\\\n onClick={() => sendPrompt()}\\\\n style={{ width: \\\\\\\"15%\\\\\\\", height: \\\\\\\"50px\\\\\\\" }}\\\\n >\\\\n <img\\\\n src=\\\\\\\"https://ipfs.io/ipfs/bafybeigb3yfd3t4qz6sxoz3sfwljmlbth5zrwfindvdjxezyn3rcdeei6m/send%282%29.png\\\\\\\"\\\\n alt=\\\\\\\"arrow\\\\\\\"\\\\n style={{ height: \\\\\\\"60%\\\\\\\" }}\\\\n />\\\\n </Button>\\\\n </div>\\\\n\\\\n {state.isLoading ? (\\\\n <img\\\\n height=\\\\\\\"20\\\\\\\"\\\\n width=\\\\\\\"70\\\\\\\"\\\\n style={{ margin: 10 }}\\\\n src=\\\\\\\"https://ipfs.io/ipfs/bafkreidmr43cuwv5kre4fzrum4lgpkkiwwj47nl54hunfsvgutyhocklza\\\\\\\"\\\\n />\\\\n ) : null}\\\\n\\\\n {!state.isLoading ? (\\\\n <p>{state.response ? state.response : null}</p>\\\\n ) : null}\\\\n\\\\n {!state.isLoading ? state.widget : null}\\\\n\\\\n <h5 style={{ marginTop: 50, marginBottom: 20 }}>Quick Commands</h5>\\\\n </CreatePrompt>\\\\n <ButtonContainer>\\\\n {buttonList.map((buttonText, index) => (\\\\n <Command\\\\n key={index}\\\\n onClick={() => State.update({ prompt: buttonText })}\\\\n >\\\\n {buttonText}\\\\n </Command>\\\\n ))}\\\\n </ButtonContainer>\\\\n </div>\\\\n);\\\\n" |