This reverts commit 81ea24f08a.
feature/default_network_editable
Alex Donesky
3 years ago
committed by
Dan Miller
parent
0563c471a6
commit
3cff801b8e
@ -1,61 +0,0 @@ |
||||
import { cloneDeep } from 'lodash'; |
||||
import { IPFS_DEFAULT_GATEWAY_URL } from '../../../shared/constants/network'; |
||||
|
||||
const version = 68; |
||||
|
||||
function addUrlProtocolPrefix(urlString) { |
||||
if (!urlString.match(/(^http:\/\/)|(^https:\/\/)/u)) { |
||||
return `https://${urlString}`; |
||||
} |
||||
return urlString; |
||||
} |
||||
|
||||
export default { |
||||
version, |
||||
|
||||
async migrate(originalVersionedData) { |
||||
const versionedData = cloneDeep(originalVersionedData); |
||||
versionedData.meta.version = version; |
||||
const state = versionedData.data; |
||||
const newState = transformState(state); |
||||
versionedData.data = newState; |
||||
return versionedData; |
||||
}, |
||||
}; |
||||
|
||||
function transformState(state) { |
||||
const PreferencesController = state?.PreferencesController || {}; |
||||
const preferences = PreferencesController.preferences || {}; |
||||
const oldIpfsGateWay = preferences.ipfsGateway; |
||||
|
||||
let newState; |
||||
|
||||
if (oldIpfsGateWay && oldIpfsGateWay !== 'dweb.link') { |
||||
const newIpfsGateway = new URL( |
||||
addUrlProtocolPrefix(oldIpfsGateWay), |
||||
).toString(); |
||||
newState = { |
||||
...state, |
||||
PreferencesController: { |
||||
...PreferencesController, |
||||
preferences: { |
||||
...preferences, |
||||
ipfsGateway: newIpfsGateway, |
||||
}, |
||||
}, |
||||
}; |
||||
} else { |
||||
newState = { |
||||
...state, |
||||
PreferencesController: { |
||||
...PreferencesController, |
||||
preferences: { |
||||
...preferences, |
||||
ipfsGateway: IPFS_DEFAULT_GATEWAY_URL, |
||||
}, |
||||
}, |
||||
}; |
||||
} |
||||
|
||||
return newState; |
||||
} |
||||
@ -1,56 +0,0 @@ |
||||
import { IPFS_DEFAULT_GATEWAY_URL } from '../../../shared/constants/network'; |
||||
import migration68 from './068'; |
||||
|
||||
describe('migration #68', () => { |
||||
it('should update the version metadata', async () => { |
||||
const oldStorage = { |
||||
meta: { |
||||
version: 67, |
||||
}, |
||||
data: {}, |
||||
}; |
||||
|
||||
const newStorage = await migration68.migrate(oldStorage); |
||||
expect(newStorage.meta).toStrictEqual({ |
||||
version: 68, |
||||
}); |
||||
}); |
||||
|
||||
it('should set preference ipfsGateway to "https://cloudflare-ipfs.com" if ipfsGateway is old default dweb.link', async () => { |
||||
const expectedValue = IPFS_DEFAULT_GATEWAY_URL; // = https://cloudflare-ipfs.com
|
||||
const oldStorage = { |
||||
meta: {}, |
||||
data: { |
||||
PreferencesController: { |
||||
preferences: { |
||||
ipfsGateway: 'dweb.link', |
||||
}, |
||||
}, |
||||
}, |
||||
}; |
||||
|
||||
const newStorage = await migration68.migrate(oldStorage); |
||||
expect(newStorage.data.PreferencesController.preferences.ipfsGateway).toBe( |
||||
expectedValue, |
||||
); |
||||
}); |
||||
|
||||
it('should update preference ipfsGateway to a full url version of user set ipfsGateway if ipfsGateway is not old default dweb.link', async () => { |
||||
const expectedValue = 'https://random.ipfs/'; |
||||
const oldStorage = { |
||||
meta: {}, |
||||
data: { |
||||
PreferencesController: { |
||||
preferences: { |
||||
ipfsGateway: 'random.ipfs', |
||||
}, |
||||
}, |
||||
}, |
||||
}; |
||||
|
||||
const newStorage = await migration68.migrate(oldStorage); |
||||
expect(newStorage.data.PreferencesController.preferences.ipfsGateway).toBe( |
||||
expectedValue, |
||||
); |
||||
}); |
||||
}); |
||||
@ -1,212 +0,0 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import { useDispatch, useSelector } from 'react-redux'; |
||||
import { useHistory } from 'react-router-dom'; |
||||
import { getTokenTrackerLink } from '@metamask/etherscan-link'; |
||||
import Box from '../../ui/box'; |
||||
import Typography from '../../ui/typography/typography'; |
||||
import { |
||||
COLORS, |
||||
TYPOGRAPHY, |
||||
BLOCK_SIZES, |
||||
FONT_WEIGHT, |
||||
JUSTIFY_CONTENT, |
||||
FLEX_DIRECTION, |
||||
OVERFLOW_WRAP, |
||||
DISPLAY, |
||||
} from '../../../helpers/constants/design-system'; |
||||
import { useI18nContext } from '../../../hooks/useI18nContext'; |
||||
import { |
||||
getAssetImageURL, |
||||
isEqualCaseInsensitive, |
||||
shortenAddress, |
||||
} from '../../../helpers/utils/util'; |
||||
import { |
||||
getCurrentChainId, |
||||
getIpfsGateway, |
||||
getRpcPrefsForCurrentProvider, |
||||
getSelectedIdentity, |
||||
} from '../../../selectors'; |
||||
import AssetNavigation from '../../../pages/asset/components/asset-navigation'; |
||||
import { getCollectibleContracts } from '../../../ducks/metamask/metamask'; |
||||
import { DEFAULT_ROUTE } from '../../../helpers/constants/routes'; |
||||
import { removeAndIgnoreCollectible } from '../../../store/actions'; |
||||
import { |
||||
GOERLI_CHAIN_ID, |
||||
KOVAN_CHAIN_ID, |
||||
MAINNET_CHAIN_ID, |
||||
POLYGON_CHAIN_ID, |
||||
RINKEBY_CHAIN_ID, |
||||
ROPSTEN_CHAIN_ID, |
||||
} from '../../../../shared/constants/network'; |
||||
import { getEnvironmentType } from '../../../../app/scripts/lib/util'; |
||||
import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app'; |
||||
import CollectibleOptions from './collectible-options'; |
||||
|
||||
export default function CollectibleDetails({ collectible }) { |
||||
const { image, name, description, address, tokenId } = collectible; |
||||
const t = useI18nContext(); |
||||
const history = useHistory(); |
||||
const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider); |
||||
const ipfsGateway = useSelector(getIpfsGateway); |
||||
const collectibleContracts = useSelector(getCollectibleContracts); |
||||
const currentNetwork = useSelector(getCurrentChainId); |
||||
|
||||
const collectibleContractName = collectibleContracts.find( |
||||
({ address: contractAddress }) => |
||||
isEqualCaseInsensitive(contractAddress, address), |
||||
)?.name; |
||||
const selectedAccountName = useSelector( |
||||
(state) => getSelectedIdentity(state).name, |
||||
); |
||||
const collectibleImageURL = getAssetImageURL(image, ipfsGateway); |
||||
const dispatch = useDispatch(); |
||||
|
||||
const onRemove = () => { |
||||
dispatch(removeAndIgnoreCollectible(address, tokenId)); |
||||
history.push(DEFAULT_ROUTE); |
||||
}; |
||||
|
||||
const getOpenSeaLink = () => { |
||||
switch (currentNetwork) { |
||||
case MAINNET_CHAIN_ID: |
||||
return `https://opensea.io/assets/${address}/${tokenId}`; |
||||
case POLYGON_CHAIN_ID: |
||||
return `https://opensea.io/assets/matic/${address}/${tokenId}`; |
||||
case GOERLI_CHAIN_ID: |
||||
case KOVAN_CHAIN_ID: |
||||
case ROPSTEN_CHAIN_ID: |
||||
case RINKEBY_CHAIN_ID: |
||||
return `https://testnets.opensea.io/assets/${address}/${tokenId}`; |
||||
default: |
||||
return null; |
||||
} |
||||
}; |
||||
|
||||
const openSeaLink = getOpenSeaLink(); |
||||
return ( |
||||
<> |
||||
<AssetNavigation |
||||
accountName={selectedAccountName} |
||||
assetName={collectibleContractName} |
||||
onBack={() => history.push(DEFAULT_ROUTE)} |
||||
optionsButton={ |
||||
<CollectibleOptions |
||||
onViewOnOpensea={ |
||||
openSeaLink |
||||
? () => global.platform.openTab({ url: openSeaLink }) |
||||
: null |
||||
} |
||||
onRemove={onRemove} |
||||
/> |
||||
} |
||||
/> |
||||
<Box padding={[4, 2, 4, 2]}> |
||||
<div className="collectible-details"> |
||||
<Box margin={3} padding={2} justifyContent={JUSTIFY_CONTENT.CENTER}> |
||||
<img style={{ width: '14rem' }} src={collectibleImageURL} /> |
||||
</Box> |
||||
<Box |
||||
margin={3} |
||||
flexDirection={FLEX_DIRECTION.COLUMN} |
||||
width={ |
||||
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP |
||||
? BLOCK_SIZES.THREE_FOURTHS |
||||
: BLOCK_SIZES.HALF |
||||
} |
||||
> |
||||
<Typography |
||||
color={COLORS.BLACK} |
||||
variant={TYPOGRAPHY.H4} |
||||
fontWeight={FONT_WEIGHT.BOLD} |
||||
> |
||||
{name} |
||||
</Typography> |
||||
<Typography |
||||
color={COLORS.UI3} |
||||
variant={TYPOGRAPHY.H5} |
||||
boxProps={{ marginTop: 2, marginBottom: 3 }} |
||||
overflowWrap={OVERFLOW_WRAP.BREAK_WORD} |
||||
> |
||||
{`#${tokenId}`} |
||||
</Typography> |
||||
<Typography |
||||
color={COLORS.BLACK} |
||||
variant={TYPOGRAPHY.H6} |
||||
fontWeight={FONT_WEIGHT.BOLD} |
||||
className="collectible-details__description" |
||||
> |
||||
{t('description')} |
||||
</Typography> |
||||
<Typography color={COLORS.UI3} variant={TYPOGRAPHY.H6}> |
||||
{description} |
||||
</Typography> |
||||
</Box> |
||||
</div> |
||||
<Box margin={4}> |
||||
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}> |
||||
<Typography |
||||
color={COLORS.BLACK} |
||||
variant={TYPOGRAPHY.H6} |
||||
fontWeight={FONT_WEIGHT.BOLD} |
||||
boxProps={{ marginBottom: 3, width: BLOCK_SIZES.ONE_FOURTH }} |
||||
> |
||||
{t('source')} |
||||
</Typography> |
||||
<Typography |
||||
color={COLORS.PRIMARY1} |
||||
variant={TYPOGRAPHY.H6} |
||||
boxProps={{ marginBottom: 3, width: BLOCK_SIZES.THREE_FOURTHS }} |
||||
overflowWrap={OVERFLOW_WRAP.BREAK_WORD} |
||||
> |
||||
<a |
||||
target="_blank" |
||||
href={collectibleImageURL} |
||||
rel="noopener noreferrer" |
||||
style={{ overflow: 'hidden', textOverflow: 'ellipsis' }} |
||||
> |
||||
{image} |
||||
</a> |
||||
</Typography> |
||||
</Box> |
||||
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}> |
||||
<Typography |
||||
color={COLORS.BLACK} |
||||
variant={TYPOGRAPHY.H6} |
||||
fontWeight={FONT_WEIGHT.BOLD} |
||||
boxProps={{ width: BLOCK_SIZES.ONE_FOURTH }} |
||||
> |
||||
{t('contractAddress')} |
||||
</Typography> |
||||
<Typography |
||||
color={COLORS.UI3} |
||||
variant={TYPOGRAPHY.H6} |
||||
overflowWrap={OVERFLOW_WRAP.BREAK_WORD} |
||||
boxProps={{ width: BLOCK_SIZES.THREE_FOURTHS }} |
||||
> |
||||
<a |
||||
target="_blank" |
||||
href={getTokenTrackerLink( |
||||
address, |
||||
currentNetwork, |
||||
null, |
||||
null, |
||||
rpcPrefs, |
||||
)} |
||||
rel="noopener noreferrer" |
||||
> |
||||
{getEnvironmentType() === ENVIRONMENT_TYPE_POPUP |
||||
? shortenAddress(address) |
||||
: address} |
||||
</a> |
||||
</Typography> |
||||
</Box> |
||||
</Box> |
||||
</Box> |
||||
</> |
||||
); |
||||
} |
||||
|
||||
CollectibleDetails.propTypes = { |
||||
collectible: PropTypes.object, |
||||
}; |
||||
@ -1,23 +0,0 @@ |
||||
import React from 'react'; |
||||
import CollectibleDetails from './collectible-details'; |
||||
|
||||
export default { |
||||
title: 'Collectibles Detail', |
||||
id: __filename, |
||||
}; |
||||
|
||||
export const basic = () => { |
||||
const collectible = { |
||||
name: 'Catnip Spicywright', |
||||
tokenId: '1124157', |
||||
address: '0x06012c8cf97bead5deae237070f9587f8e7a266d', |
||||
image: './images/catnip-spicywright.png', |
||||
description: |
||||
"Good day. My name is Catnip Spicywight, which got me teased a lot in high school. If I want to put low fat mayo all over my hamburgers, I shouldn't have to answer to anyone about it, am I right? One time I beat Arlene in an arm wrestle.", |
||||
}; |
||||
return ( |
||||
<div style={{ width: '420px' }}> |
||||
<CollectibleDetails collectible={collectible} /> |
||||
</div> |
||||
); |
||||
}; |
||||
@ -1,61 +0,0 @@ |
||||
import React, { useContext, useState } from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
|
||||
import { I18nContext } from '../../../contexts/i18n'; |
||||
import { Menu, MenuItem } from '../../ui/menu'; |
||||
|
||||
const CollectibleOptions = ({ onRemove, onViewOnOpensea }) => { |
||||
const t = useContext(I18nContext); |
||||
const [ |
||||
collectibleOptionsButtonElement, |
||||
setCollectibleOptionsButtonElement, |
||||
] = useState(null); |
||||
const [collectibleOptionsOpen, setCollectibleOptionsOpen] = useState(false); |
||||
|
||||
return ( |
||||
<> |
||||
<button |
||||
className="fas fa-ellipsis-v collectible-options__button" |
||||
data-testid="collectible-options__button" |
||||
onClick={() => setCollectibleOptionsOpen(true)} |
||||
ref={setCollectibleOptionsButtonElement} |
||||
/> |
||||
{collectibleOptionsOpen ? ( |
||||
<Menu |
||||
anchorElement={collectibleOptionsButtonElement} |
||||
onHide={() => setCollectibleOptionsOpen(false)} |
||||
> |
||||
{onViewOnOpensea ? ( |
||||
<MenuItem |
||||
iconClassName="fas fa-qrcode" |
||||
data-testid="collectible-options__view-on-opensea" |
||||
onClick={() => { |
||||
setCollectibleOptionsOpen(false); |
||||
onViewOnOpensea(); |
||||
}} |
||||
> |
||||
{t('viewOnOpensea')} |
||||
</MenuItem> |
||||
) : null} |
||||
<MenuItem |
||||
iconClassName="fas fa-trash-alt collectible-options__icon" |
||||
data-testid="collectible-options__hide" |
||||
onClick={() => { |
||||
setCollectibleOptionsOpen(false); |
||||
onRemove(); |
||||
}} |
||||
> |
||||
{t('removeNFT')} |
||||
</MenuItem> |
||||
</Menu> |
||||
) : null} |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
CollectibleOptions.propTypes = { |
||||
onRemove: PropTypes.func.isRequired, |
||||
onViewOnOpensea: PropTypes.func.isRequired, |
||||
}; |
||||
|
||||
export default CollectibleOptions; |
||||
@ -1,26 +0,0 @@ |
||||
.collectible-details { |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
@media screen and (min-width: $break-large) { |
||||
display: flex; |
||||
flex-direction: row; |
||||
} |
||||
|
||||
&__address { |
||||
overflow-wrap: break-word; |
||||
} |
||||
} |
||||
|
||||
.collectible-options { |
||||
&__button { |
||||
font-size: $font-size-paragraph; |
||||
color: $Black-100; |
||||
background-color: inherit; |
||||
padding: 2px 0 2px 8px; |
||||
} |
||||
|
||||
&__icon { |
||||
font-weight: 900; |
||||
} |
||||
} |
||||
@ -1,18 +0,0 @@ |
||||
.collectibles-items { |
||||
&__image { |
||||
border-radius: 0.625rem; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
|
||||
.collection-icon { |
||||
border-radius: 50%; |
||||
width: 2rem; |
||||
height: 2rem; |
||||
padding: 0.5rem; |
||||
background: $ui-4; |
||||
color: $ui-white; |
||||
text-align: center; |
||||
line-height: 1; |
||||
} |
||||
Loading…
Reference in new issue