Joseph Izang
6 months ago
parent
a0bea70dd2
commit
ac584c1823
@ -0,0 +1,22 @@ |
||||
import React, { useState } from 'react' |
||||
import { CustomTooltip } from '@remix-ui/helper' |
||||
import { FormattedMessage } from 'react-intl' |
||||
import { ExtendedRefs, ReferenceType } from '@floating-ui/react' |
||||
|
||||
export interface ScamAlertStatusProps { |
||||
refs: ExtendedRefs<ReferenceType> |
||||
getReferenceProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown> |
||||
} |
||||
|
||||
export default function ScamAlertStatus ({ refs, getReferenceProps }: ScamAlertStatusProps) { |
||||
|
||||
return ( |
||||
<> |
||||
<div className="bg-danger p-1" id="hTScamAlertSection" ref={refs.setReference} {...getReferenceProps()}> |
||||
<label className="text-white small"> |
||||
<FormattedMessage id="home.scamAlert" /> |
||||
</label> |
||||
</div> |
||||
</> |
||||
) |
||||
} |
||||
@ -0,0 +1,52 @@ |
||||
import { ExtendedRefs, ReferenceType } from '@floating-ui/react' |
||||
import React, { CSSProperties } from 'react' |
||||
import { FormattedMessage } from 'react-intl' |
||||
|
||||
const _paq = (window._paq = window._paq || []) // eslint-disable-line
|
||||
|
||||
export interface ScamDetailsProps { |
||||
refs: ExtendedRefs<ReferenceType> |
||||
floatStyle: CSSProperties |
||||
getFloatingProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown> |
||||
} |
||||
|
||||
export default function ScamDetails ({ refs, floatStyle }: ScamDetailsProps) { |
||||
return ( |
||||
<div |
||||
ref={refs.setFloating} |
||||
style={floatStyle} |
||||
className="py-2 ml-2 mb-1 align-self-end mb-2 d-flex w-25 bg-danger border border-danger align-items-end" |
||||
> |
||||
<span className="align-self-center pl-4 mt-1"> |
||||
<i style={{ fontSize: 'xxx-large', fontWeight: 'lighter' }} className="pr-2 text-warning far fa-exclamation-triangle"></i> |
||||
</span> |
||||
<div className="d-flex flex-column"> |
||||
<span className="pl-4 mt-1"> |
||||
<FormattedMessage id="home.scamAlertText" /> |
||||
</span> |
||||
<span className="pl-4 mt-1"> |
||||
<FormattedMessage id="home.scamAlertText2" />: |
||||
<a |
||||
className="pl-2 remixui_home_text" |
||||
onClick={() => _paq.push(['trackEvent', 'hometab', 'scamAlert', 'learnMore'])} |
||||
target="__blank" |
||||
href="https://medium.com/remix-ide/remix-in-youtube-crypto-scams-71c338da32d" |
||||
> |
||||
<FormattedMessage id="home.learnMore" /> |
||||
</a> |
||||
</span> |
||||
<span className="pl-4 mt-1"> |
||||
<FormattedMessage id="home.scamAlertText3" />: |
||||
<a |
||||
className="remixui_home_text" |
||||
onClick={() => _paq.push(['trackEvent', 'hometab', 'scamAlert', 'safetyTips'])} |
||||
target="__blank" |
||||
href="https://remix-ide.readthedocs.io/en/latest/security.html" |
||||
> |
||||
<FormattedMessage id="home.here" /> |
||||
</a> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
@ -1,30 +1,58 @@ |
||||
import React from 'react' |
||||
import React, { useState } from 'react' |
||||
import { StatusBarInterface } from './types' |
||||
import GitStatus from './components/gitStatus' |
||||
import AIStatus from './components/aiStatus' |
||||
import ScamAlertStatus from './components/scamAlertStatus' |
||||
import ScamDetails from './components/scamDetails' |
||||
import { FloatingFocusManager, autoUpdate, flip, offset, shift, useClick, useDismiss, useFloating, useInteractions, useRole } from '@floating-ui/react' |
||||
|
||||
export interface RemixUIStatusBarProps { |
||||
statusBarPlugin: StatusBarInterface |
||||
} |
||||
|
||||
export function RemixUIStatusBar ({ statusBarPlugin }: RemixUIStatusBarProps) { |
||||
|
||||
const [showScamDetails, setShowScamDetails] = useState(false) |
||||
const { refs, context, floatingStyles } = useFloating({ |
||||
open: showScamDetails, |
||||
onOpenChange: setShowScamDetails, |
||||
middleware: [ |
||||
offset(10), |
||||
flip({ fallbackAxisSideDirection: "end" }), |
||||
shift() |
||||
], |
||||
whileElementsMounted: autoUpdate |
||||
}) |
||||
const click = useClick(context) |
||||
const dismiss = useDismiss(context) |
||||
const role = useRole(context) |
||||
const { getReferenceProps, getFloatingProps } = useInteractions([ |
||||
click, |
||||
dismiss, |
||||
role |
||||
]) |
||||
const getGitBranchName = async () => { |
||||
return new Promise((resolve, recject) => { |
||||
return 0 |
||||
}) |
||||
} |
||||
return ( |
||||
<div className="d-flex flex-row bg-primary justify-content-between align-items-center"> |
||||
<div className="remixui_statusbar"> |
||||
<GitStatus /> |
||||
</div> |
||||
<div className="remixui_statusbar"> |
||||
<> |
||||
{showScamDetails && ( |
||||
<FloatingFocusManager context={context} modal={false}> |
||||
<ScamDetails refs={refs} floatStyle={floatingStyles} getFloatingProps={getFloatingProps} /> |
||||
</FloatingFocusManager>)} |
||||
<div className="d-flex flex-row bg-primary justify-content-between align-items-center"> |
||||
<div className="remixui_statusbar"> |
||||
<GitStatus /> |
||||
</div> |
||||
<div className="remixui_statusbar"> |
||||
|
||||
</div> |
||||
<div className="remixui_statusbar d-flex flex-row"> |
||||
<ScamAlertStatus refs={refs} getReferenceProps={getReferenceProps} /> |
||||
<AIStatus /> |
||||
</div> |
||||
</div> |
||||
<div className="remixui_statusbar"> |
||||
<AIStatus /> |
||||
</div> |
||||
</div> |
||||
</> |
||||
) |
||||
} |
||||
|
||||
Loading…
Reference in new issue